/* ==========================================================
   天使奇迹 · 暗黑放置 RPG
   暗金主题 / 桌面侧栏 + 移动端底部导航
   ========================================================== */
:root{
  --bg:#0d0b09;
  --bg2:#141009;
  --panel:#181310;
  --panel2:#201a14;
  --line:#342a1e;
  --line2:#4a3b28;
  --text:#d8cbb8;
  --dim:#8a7c69;
  --gold:#c9a24d;
  --hl:#e8c877;
  --red:#c0504d;
  --green:#5fae5a;
  --blue:#4a9eff;
  --purple:#a86fe0;
  --shadow:0 6px 24px rgba(0,0,0,.5);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(201,162,77,.10), transparent 70%),
    radial-gradient(700px 400px at 100% 100%, rgba(120,80,20,.06), transparent 70%),
    var(--bg);
  color:var(--text);
  font:14px/1.75 "Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif;
  min-height:100vh;
}
a{color:var(--hl);text-decoration:none;}
a:hover{opacity:.85;}
h1,h2,h3,h4{margin:0;font-weight:normal;}
p{margin:6px 0;}
b{font-weight:600;}
ul,ol{margin:6px 0;padding-left:20px;}
input,select,textarea{
  background:#0f0c08;border:1px solid var(--line);color:var(--text);
  padding:9px 11px;border-radius:4px;font-size:14px;font-family:inherit;width:100%;
  transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);}
/* 复选框/单选框不能吃上面的 width:100% 与 9px 内边距 —— 否则它在 flex 行里会被撑成
   一条 700px 的横条，把同一行的名字、标签、等级全部挤成 0 宽（v1.9.72 修复）。 */
input[type=checkbox],input[type=radio]{
  width:auto;height:auto;min-width:0;padding:0;margin:0;accent-color:var(--gold);
}
select{padding:8px 6px;width:auto;}
label{display:block;font-size:12px;color:var(--dim);margin:10px 0 4px;letter-spacing:1px;}
textarea{resize:vertical;line-height:1.6;}

/* ---------- 布局 ---------- */
.app{max-width:1180px;margin:0 auto;padding:0 12px 90px;}
.topbar{
  display:flex;align-items:center;gap:16px;
  padding:12px 14px;margin:12px 0 10px;
  background:linear-gradient(180deg,#221a12,#161110);
  border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);
  position:relative;overflow:visible;
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;
}
/* 品牌区（v1.9.271）：主名做金属渐变 + 副标题加菱形前缀并压弱。
 * 原来就是「19px 纯金字 + 10px 灰字」两行裸文本：名字一长（线上是 6 个字
 * 「放置勇者大陆」）就和副标题抢宽度，整体像"贴了两行字"而不是一个 logo。
 * 现在主名走四段金属渐变（顶白 → 中金 → 底金 → 回亮），副标题降一级、前置小菱形，
 * 视觉重心落在名字上；两者都收 ellipsis，长名字不会把右侧血条挤走。 */
.brand{flex:0 0 auto;padding-right:16px;border-right:1px solid var(--line);}
.brand .logo{
  display:block;font-size:19px;font-weight:700;letter-spacing:3.5px;color:var(--hl);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
/* 渐变字面只在支持 background-clip:text 的浏览器上开 —— 不支持时上面那条纯金色就是回退，
 * 不会出现"字看不见"（color:transparent 生效但 clip 不生效 = 隐形）。 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand .logo{
    background:linear-gradient(180deg,#fffcf3 0%,#f9e6b6 42%,#d9b26a 76%,#f2dca2 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;text-shadow:none;
    filter:drop-shadow(0 1px 0 rgba(0,0,0,.5));
  }
}
.brand .sub{
  display:block;position:relative;padding-left:9px;
  font-size:10.5px;color:#9c8e72;letter-spacing:.5px;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;
}
.brand .sub::before{
  content:'';position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;
  transform:rotate(45deg);background:rgba(201,162,77,.5);
}
.pinfo{flex:1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.pname{display:flex;align-items:center;gap:8px;font-size:14px;}
.pname b{color:#f0e2c8;font-size:15px;letter-spacing:1px;}
.pname .lv{color:var(--gold);font-size:12px;}
.pname .job{font-size:11px;padding:1px 7px;border-radius:3px;border:1px solid var(--line2);color:var(--dim);}
.pname .job.j1{border-color:#7a4a3a;color:#d98d6a;}
.pname .job.j2{border-color:#3a4a7a;color:#7aa3e0;}
.pname .job.j3{border-color:#3a6a4a;color:#7ad08a;}
.pname .job.j4{border-color:#6a3a7a;color:#c98de0;}
.pname .job.j5{border-color:#7a6a3a;color:#ffd98a;}
.pname .job.j6{border-color:#3a6a7a;color:#8ad6e0;}
.reborn{font-size:10px;padding:1px 6px;border-radius:3px;background:rgba(201,162,77,.15);color:var(--hl);border:1px solid rgba(201,162,77,.4);}
.bars{flex:1;min-width:190px;max-width:420px;display:flex;flex-direction:column;gap:3px;}
.bar{position:relative;height:13px;background:#0a0806;border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.bar i{display:block;height:100%;transition:width .3s;}
.bar span{position:absolute;inset:0;font-size:10px;line-height:13px;text-align:center;color:#efe4d0;text-shadow:0 1px 2px #000;letter-spacing:.5px;}
.bar.hp i{background:linear-gradient(90deg,#7a1f1c,#c0504d);}
.bar.mp i{background:linear-gradient(90deg,#1c3a6a,#4a9eff);}
.bar.exp i{background:linear-gradient(90deg,#6a5218,#c9a24d);}
.wallet{display:flex;align-items:center;gap:10px;font-size:12px;flex-wrap:wrap;}
.wallet .gold{color:var(--gold);}
.wallet .dia{color:#63c8e0;}
.wallet .pot{color:var(--dim);}
.wallet .quit{border:1px solid var(--line);padding:2px 10px;border-radius:3px;color:var(--dim);font-size:11px;}
.wallet .quit:hover{color:var(--red);border-color:var(--red);}

.body{display:flex;gap:12px;align-items:flex-start;}
/* 侧栏：两列网格
 * 19 个入口一行一个要占 800px 高，改成两列后约 500px，一屏能看全。
 * 每格宽约 76px，所以按钮内部改成竖排（图标在上、文字在下）才放得下三字项。
 */
.side{
  flex:0 0 172px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px;
  align-content:start;
  position:sticky;top:10px;
  /* 视口偏矮时侧栏内部滚动，保证「设置」始终能滚到 */
  max-height:calc(100vh - 22px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;
}
.side::-webkit-scrollbar{width:4px;}
.side::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px;}
.ni{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 3px;border-radius:5px;min-height:46px;
  color:var(--dim);font-size:11px;line-height:1.2;text-align:center;
  position:relative;border:1px solid transparent;
  transition:.18s;
}
.ni i{font-style:normal;font-size:16px;line-height:1;opacity:.82;}
.ni em{font-style:normal;letter-spacing:0;white-space:nowrap;}
.ni:hover{background:var(--panel2);color:var(--text);}
.ni.on{
  background:linear-gradient(180deg,rgba(201,162,77,.2),transparent);
  color:var(--hl);border-color:rgba(201,162,77,.28);
}
.ni.on::before{
  content:"";position:absolute;left:9px;right:9px;top:0;height:2px;
  background:var(--gold);border-radius:0 0 2px 2px;
}
/* 设置单独占满一行，作为收尾 */
.ni.wide{
  grid-column:1 / -1;flex-direction:row;gap:6px;min-height:38px;padding:7px 3px;
}

/* 内容区顶部的二级菜单横条 */
.subnav{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:7px 10px;margin-bottom:2px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
}
.subnav .sn-title{
  font-size:11px;letter-spacing:2px;color:var(--gold);
  padding-right:8px;margin-right:2px;border-right:1px solid var(--line);
}
.subnav a{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 12px;border-radius:4px;font-size:12px;
  color:var(--dim);border:1px solid var(--line);background:#100c09;
  transition:.15s;
}
.subnav a i{font-style:normal;font-size:13px;opacity:.85;}
.subnav a em{font-style:normal;}
.subnav a:hover{color:var(--text);border-color:var(--line2);}
.subnav a.on{
  color:#fdf3dd;border-color:#a8853c;
  background:linear-gradient(180deg,#8a6a2a,#6b4f1c);
}
/* 未解锁的子页面（如等级不足的坐骑）：灰掉 + 禁点 */
.subnav a.dis{
  color:#6b6157;border-color:var(--line);background:#0d0a07;
  cursor:not-allowed;opacity:.6;
}
.subnav a.dis:hover{color:#6b6157;border-color:var(--line);}
/* 页签红点（v1.9.217）：与侧栏 .ni u 同一套配色，但贴页签右上角。
   页签是 inline-flex，必须给 a 加 relative，否则 u 会跑到整个横条的右上角。 */
.subnav a{position:relative;}
.subnav a u{
  position:absolute;right:-5px;top:-6px;
  background:var(--red);color:#fff;font-size:9px;font-weight:400;
  text-decoration:none;border-radius:8px;padding:0 4px;line-height:13px;
  min-width:13px;text-align:center;
}
/* 没有条数的红点用等宽圆点，避免「!」被挤成竖条（同 .ni u.dot） */
.subnav a u.dot{padding:0;width:13px;letter-spacing:0;}
/* ---------- 三级页签（v1.9.286） ----------
 * 二级页签本身还可以是个子组：点「外观」后，下面再挂一行「外观 / 称号」。
 * 视觉上必须比二级弱一档 —— 更矮、字号小 1px、左缩进 + 一条金线表示层级；
 * 选中态也从「实心金块」退成「描金框」，否则两行一模一样的金色按钮
 * 会让人以为并排放了两个组，而不是「点进去之后又多了一层」。
 * 三级栏不写组名（sn-title）：组名就是第一个页签「外观」，重复一遍
 * 读起来像点了没反应（「日常 / 每日任务」踩过同一个坑）。 */
.subnav.sub2{
  margin:0 0 2px 8px;
  padding:4px 10px 4px 12px;
  background:#0b0906;
  border-left:2px solid rgba(168,133,60,.5);
}
.subnav.sub2 a{padding:3px 10px;font-size:11.5px;}
.subnav.sub2 a i{font-size:12px;}
.subnav.sub2 a.on{background:#241a09;border-color:#a8853c;color:#fdf3dd;}
/* 红点跟住图标右上角，而不是贴格子右边缘 ——
   两列布局下贴右边缘会看起来像右侧那一格的角标 */
.ni u{
  position:absolute;left:50%;top:5px;margin-left:7px;
  background:var(--red);color:#fff;font-size:9px;
  text-decoration:none;border-radius:8px;padding:0 4px;line-height:13px;
  min-width:13px;text-align:center;
}
/* 资源型提示（体力满 / 矿被抢）没有条数，用等宽圆点，避免「!」被挤成竖条 */
.ni u.dot,.mnav u.dot{padding:0;width:13px;letter-spacing:0;}
.content{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;}

/* ---------- 卡片 ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),#14100c);
  border:1px solid var(--line);border-radius:8px;padding:16px 18px;
  box-shadow:var(--shadow);
}
.card h2{font-size:15px;letter-spacing:2px;color:var(--hl);}
.bt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;
    padding-bottom:9px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.bt .br{display:flex;align-items:center;gap:10px;font-size:12px;flex-wrap:wrap;}
.sub-title{font-size:13px;color:var(--gold);letter-spacing:1px;margin:18px 0 10px;
  padding-left:9px;border-left:2px solid var(--gold);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.dim{color:var(--dim);}
.small{font-size:12px;}
.hl{color:var(--hl);}
.gold{color:var(--gold);}
.dia{color:#63c8e0;}
.plus{color:var(--hl);}
.danger{color:var(--red);}
.lose{color:var(--red);}
.win{color:var(--green);}
.sk{color:var(--purple);}
/* 技能附带回蓝的提示（v1.9.112） */
.mp-back{color:#7fd0ff;font-size:11px;margin-left:4px;opacity:.9;}
/* 技能特性小标签：必中 / 破甲 / 回蓝 */
.skill-item .tag.feat{
  background:rgba(127,208,255,.10);border-color:rgba(127,208,255,.42);color:#9fd8ff;
}
.crit{color:#ffb347;font-weight:600;}
.dmg{color:#ff8a80;}
.pot{color:var(--green);}
.tip{font-size:12px;color:var(--green);margin-top:8px;}

/* ---------- 提示条 ---------- */
.flash{
  padding:9px 12px;border-radius:5px;font-size:13px;margin-bottom:10px;
  border:1px solid var(--line2);background:var(--panel2);
}
.flash.ok{border-color:rgba(95,174,90,.4);background:rgba(95,174,90,.09);color:#a6d79f;}
.flash.err{border-color:rgba(192,80,77,.45);background:rgba(192,80,77,.1);color:#e8a09e;}
.flash.warn{border-color:rgba(201,162,77,.4);background:rgba(201,162,77,.08);color:var(--hl);}
.flog{font-size:11px;color:var(--dim);margin-top:6px;line-height:1.6;}

/* ---------- 转生提醒横幅（v1.9.67） ----------
 * 玩家练过转生门槛后很容易继续刷怪忘了转，这里用金色渐变 + 呼吸光晕 + 扫光，
 * 全站可见，点整条即可跳到转生页。整条是 <a>，要覆盖全局 a:hover 的 opacity 淡化。 */
.reborn-tip{
  display:flex;align-items:center;gap:12px;
  margin:0 0 12px;padding:12px 16px;border-radius:6px;
  border:1px solid rgba(232,200,119,.55);
  background:linear-gradient(100deg,rgba(201,162,77,.24),rgba(201,162,77,.05) 55%,rgba(201,162,77,.20));
  position:relative;overflow:hidden;color:var(--text);
  animation:rebornGlow 2.4s ease-in-out infinite;
}
.reborn-tip::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,240,200,.16) 50%,transparent 65%);
  transform:translateX(-100%);
  animation:rebornSweep 3.4s linear infinite;
}
.reborn-tip:hover{opacity:1;border-color:var(--hl);}
.reborn-tip .rt-ico{
  position:relative;font-size:20px;line-height:1;color:var(--hl);
  text-shadow:0 0 10px rgba(232,200,119,.7);
  animation:rebornSpin 7s linear infinite;
}
.reborn-tip .rt-txt{position:relative;flex:1;min-width:0;}
.reborn-tip .rt-txt b{display:block;color:var(--hl);font-size:15px;letter-spacing:1px;}
.reborn-tip .rt-txt span{display:block;font-size:12px;color:var(--dim);line-height:1.6;}
.reborn-tip .rt-btn{
  position:relative;flex:0 0 auto;white-space:nowrap;
  padding:6px 14px;border-radius:4px;font-size:13px;letter-spacing:1px;font-weight:600;
  background:linear-gradient(180deg,#c9a24d,#8a6a2a);border:1px solid #e8c877;color:#231a08;
}
.reborn-tip:hover .rt-btn{background:linear-gradient(180deg,#e8c877,#c9a24d);}
@keyframes rebornGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(232,200,119,.45);}
  50%{box-shadow:0 0 0 4px rgba(232,200,119,0);}
}
@keyframes rebornSweep{
  0%{transform:translateX(-100%);}
  55%,100%{transform:translateX(100%);}
}
@keyframes rebornSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@media (max-width:620px){
  .reborn-tip{gap:8px;padding:10px 12px;}
  .reborn-tip .rt-ico{font-size:17px;}
  .reborn-tip .rt-txt b{font-size:14px;}
  .reborn-tip .rt-btn{padding:5px 9px;font-size:12px;letter-spacing:0;}
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;background:linear-gradient(180deg,#2a2118,#1b1610);
  border:1px solid var(--line2);color:var(--text);
  padding:7px 16px;border-radius:4px;font-size:13px;font-family:inherit;
  cursor:pointer;letter-spacing:1px;transition:.18s;text-align:center;
}
.btn:hover{border-color:var(--gold);color:var(--hl);}
.btn.primary{
  background:linear-gradient(180deg,#8a6a2a,#6b4f1c);border-color:#a8853c;color:#fdf3dd;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.btn.primary:hover{background:linear-gradient(180deg,#a07c31,#7a5a20);}
.btn.danger{background:linear-gradient(180deg,#7a2b2b,#5a1e1e);border-color:#a04a4a;color:#ffe0e0;}
.btn.small{padding:5px 12px;font-size:12px;}

/* ---------- 商城 · 自选数量购买（v1.9.72） ----------
 * [ − ][ 1 ][ + ][ 购买 ]：step 用 button 而不是 input[type=number] 的上下箭头，
 * 手机上箭头太小点不准；输入框本身也去掉 spinner。 */
.buy-form{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.qty{
  display:inline-flex;align-items:center;overflow:hidden;
  border:1px solid var(--line2);border-radius:4px;background:#0f0c08;
}
.qty-btn{
  width:24px;height:26px;padding:0;border:0;background:transparent;
  color:var(--dim);font-size:14px;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s;
}
.qty-btn:hover{background:rgba(201,162,77,.14);color:var(--hl);}
.qty-btn:active{background:rgba(201,162,77,.24);}
.qty-in{
  width:38px;height:26px;padding:0;border:0;background:transparent;color:var(--text);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-size:12px;font-family:inherit;
  -moz-appearance:textfield;appearance:textfield;
}
.qty-in::-webkit-outer-spin-button,.qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qty-in:focus{outline:none;background:rgba(201,162,77,.07);}
@media (max-width:620px){
  .qty-btn{width:26px;height:28px;}
  .qty-in{width:34px;height:28px;}
}
.btn.tiny{padding:3px 9px;font-size:11px;}
.btn.big{padding:12px 26px;font-size:15px;width:100%;margin-top:14px;letter-spacing:3px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.inline{display:inline-block;margin:0;}
form.inline{display:inline-flex;align-items:center;gap:4px;}

/* ---------- 登录页 ---------- */
.login-wrap{
  max-width:420px;margin:60px auto;display:flex;flex-direction:column;gap:16px;
}
.login-box{
  background:linear-gradient(180deg,#1d1712,#120e0a);
  border:1px solid var(--line2);border-radius:10px;padding:32px 30px;
  box-shadow:0 12px 50px rgba(0,0,0,.7);position:relative;overflow:hidden;
}
.login-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.lb-head{text-align:center;margin-bottom:22px;}
.lb-head h1{font-size:26px;letter-spacing:8px;color:var(--hl);text-shadow:0 0 24px rgba(232,200,119,.4);}
.lb-head p{font-size:11px;color:var(--dim);letter-spacing:2px;margin-top:6px;}
.lb-foot{text-align:center;margin-top:16px;font-size:12px;color:var(--dim);}
.notice-box{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px 18px;
}
.notice-box h3{font-size:13px;color:var(--gold);letter-spacing:2px;margin-bottom:8px;}
.nt{margin-bottom:10px;font-size:12px;}
.nt b{color:var(--text);}
.nt p{color:var(--dim);font-size:12px;}

/* ---------- 创建角色 ---------- */
.create-card{max-width:720px;margin:0 auto;}
.job-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;}
.job-item{cursor:pointer;margin:0;}
.job-item input{display:none;}
.ji{
  border:1px solid var(--line);border-radius:6px;padding:14px 12px;background:var(--panel2);
  transition:.2s;height:100%;
}
.job-item input:checked + .ji{border-color:var(--gold);background:rgba(201,162,77,.08);
  box-shadow:0 0 0 1px rgba(201,162,77,.3) inset;}
/* v1.9.284 紧凑版：头像 68→46 并与名字同行，描述独占整宽，四维 2×2 ——
   原来头像独占一行、描述留 52px 空白、四维挤成两三行、末尾还有一行「初始技能」，
   六张卡要滚两屏多。现在一张卡约省三分之一高度。 */
.ji-top{display:flex;align-items:center;gap:9px;}
.job-item .ji-ava{margin:0;flex:0 0 auto;border-radius:4px;}
.ji-name{min-width:0;}
/* v1.9.286：名字与标签走 flex，标签**整体**换行 —— 两列时「召唤术士 / 5 转解锁」
   挤一行会变成「5 转解 / 锁」这种拆字，「圣导师 / 3 转解锁」也一样。 */
.jn{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;
  font-size:14px;color:var(--hl);letter-spacing:1.5px;line-height:1.3;}
.jn .tag{white-space:nowrap;letter-spacing:0;}
.jd{font-size:11px;color:var(--dim);margin:7px 0 0;line-height:1.55;}
/* 进阶职业未解锁：整张卡压暗，但保留可读性，让玩家知道「有这个东西、要怎么解锁」 */
.job-item.locked{cursor:not-allowed;}
.job-item.locked .ji{opacity:.62;border-style:dashed;}
.job-item.locked .ji-ava{filter:grayscale(1);}
.job-item .jn .tag{margin-left:6px;font-size:10px;letter-spacing:0;vertical-align:2px;}
.jlock{font-size:11px;color:#c98b6a;margin-top:6px;line-height:1.5;}

/* ---------- 角色概览 ---------- */
.hero-head{display:flex;gap:14px;align-items:center;margin-bottom:12px;}
.avatar{
  width:54px;height:54px;flex:0 0 54px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#f0e0bc;border:1px solid var(--line2);
  background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.avatar.j2{background:radial-gradient(circle at 30% 20%,#1f2c44,#0e1420);}
.avatar.j3{background:radial-gradient(circle at 30% 20%,#1f3a28,#0e1a12);}
.avatar.j4{background:radial-gradient(circle at 30% 20%,#3a2050,#150a1e);}
.avatar.j5{background:radial-gradient(circle at 30% 20%,#4a3a18,#1e1608);}
.avatar.j6{background:radial-gradient(circle at 30% 20%,#1a3a44,#08181e);}
.hero-info h2{font-size:17px;letter-spacing:1px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.hero-info .lv{color:var(--gold);font-size:12px;}
.hero-info p{font-size:12px;}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
.stat-grid > div{
  background:#100c09;border:1px solid var(--line);border-radius:5px;padding:8px 10px;
  display:flex;flex-direction:column;gap:2px;
}
.stat-grid span{font-size:11px;color:var(--dim);}
.stat-grid b{font-size:15px;color:var(--text);}
/* 后台详情里的长数字（经验 x / y、资金）收小一点，避免撑破格子 */
.stat-grid b.sv{font-size:12.5px;line-height:1.5;word-break:break-all;}
.stat-grid .wide{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;}

/* ---------- 详细数据列表（角色页属性来源） ---------- */
.ad-toggle{width:100%;margin:2px 0 10px;}
.attr-detail{border-top:1px dashed var(--line2);padding-top:10px;margin-bottom:8px;}
.ad-sec{margin:0 0 16px;}
.ad-sec h4{font-size:12.5px;color:var(--hl);letter-spacing:1px;margin:0 0 8px;
  padding-left:8px;border-left:2px solid var(--gold);line-height:1.4;}
.ad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
@media(max-width:1100px){.ad-grid{grid-template-columns:repeat(2,1fr);}}
.ad-attr{background:#100c09;border:1px solid var(--line);border-radius:5px;padding:7px 9px;}
.ad-hd{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:4px;}
.ad-hd span{font-size:11.5px;color:var(--dim);}
.ad-hd b{font-size:14px;color:var(--hl);}
.ad-row{display:flex;gap:8px;align-items:baseline;padding:2px 0;line-height:1.55;}
.ad-src{flex:none;width:66px;font-size:11px;color:var(--hl);}
.ad-note{flex:1;min-width:0;font-size:11px;color:var(--dim);word-break:break-word;}
.ad-v{flex:none;font-size:11.5px;color:var(--text);white-space:nowrap;text-align:right;}
.ad-v.up{color:var(--green);}
.ad-v.down{color:#e07a76;}
.ad-row.ad-fin{border-top:1px dashed var(--line2);margin-top:3px;padding-top:4px;}
.ad-row.ad-fin .ad-src,.ad-row.ad-fin .ad-v{color:var(--text);font-weight:600;}
.ad-power{grid-column:1 / -1;}

/* v1.9.137：旧的 .quick / .qk（主城那排固定入口宫格）随模块一起删除，
 * 主城现在用下面的 .td-* 系列。旧样式留在 git 历史里，要恢复直接查版本。 */
/* ---------- 主城「今日待办」（v1.9.137，v1.9.141 压缩） ----------
 * 三段用不同视觉层级区分：
 *   .tdc = 有奖励忘了领（金色边框，读者一眼扫到）
 *   .td  = 还有次数没用（中性边框，属于「顺便可以去」）
 *   .tdn = 影响效率的提醒（虚线红框：属性点没加 / 背包满）
 *
 * v1.9.141：卡片从整行搬到右侧栏（原右侧那张任务卡的位置），宽度砍半而项数没变少，
 * 原来「名称一行 + 说明一行」的方块每格 60px，13 项能撑到 500px 高。
 * 改成**单行**「名称 …… 说明」（flex + 右对齐小字），每格 28px，同样的项数只占一半高度。
 * 说明文字超长时省略号截断 —— 宁可截断也不要换行把行高撑开（完整文字挂在 title 上）。
 * 两段之间的间距只用相邻选择器给，不要给 .td-claim 加 margin-bottom ——
 * 那个坑在 .content 的 gap 上踩过一次（会叠成双倍）。 */
.td-claim{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:5px;}
.td-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;}
.td-claim + .td-grid{margin-top:8px;}
.td-grid + .td-note,.td-claim + .td-note{margin-top:8px;}
.td-note{display:grid;grid-template-columns:1fr;gap:5px;}

.td,.tdc,.tdn{
  display:flex;align-items:baseline;gap:6px;min-width:0;
  padding:4px 8px;border-radius:5px;
  border:1px solid var(--line);background:var(--panel2);
  transition:.18s;
}
.td b,.tdc b,.tdn b{flex:none;font-size:11.5px;letter-spacing:.3px;white-space:nowrap;}
.td span,.tdc span,.tdn span{
  flex:1;min-width:0;font-size:10px;color:var(--dim);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 还有次数：中性 */
.td b{color:var(--text);}
.td:hover{border-color:var(--hl);background:rgba(255,255,255,.035);}

/* 有奖励可领：金色 */
.tdc{border-color:rgba(201,162,77,.42);background:rgba(201,162,77,.07);}
.tdc:hover{border-color:var(--gold);background:rgba(201,162,77,.15);}
.tdc b{color:var(--gold);}
.tdc b::before{content:'●';font-size:8px;margin-right:4px;vertical-align:1px;}
.tdc span{color:var(--text);opacity:.8;}

/* 效率提醒：虚线红 */
.tdn{border-style:dashed;border-color:rgba(224,122,118,.45);background:rgba(224,122,118,.055);}
.tdn:hover{border-color:#e07a76;background:rgba(224,122,118,.12);}
.tdn b{color:#e07a76;}

.td-done{padding:14px 0 6px;text-align:center;color:var(--dim);font-size:12px;}
.td-done b{display:block;color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:5px;}
.guide{font-size:12px;color:var(--dim);line-height:2;}
.qname{font-size:14px;color:var(--hl);letter-spacing:1px;}
.qstep{font-size:11px;color:var(--dim);margin-left:6px;}

/* ---------- 狩猎地图带（v1.9.97） ----------
 * 旧的 .map-tabs / .mt（10 张卡片横排）已废弃删除。
 * 坐标口径见 mod/hunt.php 顶部注释，四个数字互相咬合，改一个要连带回算。
 */
/* v1.9.102：间距一律交给 .content 的 flex gap:12px ——
   v1.9.99 这里还写过 margin-bottom:12px，和 gap 叠加成 24px，地图带下面明显比上面空。
   .map-band-wrap 现在只是个语义容器，不需要样式。 */
.map-band{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;
  border-radius:6px;
}
.map-band::-webkit-scrollbar{display:none;}
/* 高度 144 = 地形带高度：上下各留 0，让地形带贴住轨道的上下边，
   地图带与前后卡片之间就只剩 gap 的 12px（上下对称） */
.map-track{position:relative;width:1076px;height:144px;}

/* 地形底图：纹理来自图片，色相来自 .mt-tint 的渐变（见下） */
.map-terrain{
  position:absolute;left:0;top:0;width:1076px;height:144px;
  border-radius:8px;overflow:hidden;
  border:1px solid rgba(201,162,77,.16);
  background:url(../img/map-band.jpg) 0 0/100% 100% no-repeat;
  /* 两端淡出：不让首尾地形被直角切断，同时暗示「路还往两边延伸」 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
/* soft-light 而不是 color：底图饱和度偏低，color 模式会把它整体拉灰 */
.mt-tint{position:absolute;left:0;top:0;right:0;bottom:0;mix-blend-mode:soft-light;opacity:.95;}
/* 下半部压暗：节点名字压在底图上，不压暗会跟地形纹理打架 */
.mt-shade{
  position:absolute;left:0;top:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(8,6,4,.06) 0%,rgba(8,6,4,.24) 55%,rgba(8,6,4,.56) 100%);
}
.map-line{position:absolute;left:0;top:0;pointer-events:none;}

.mnode{position:absolute;width:88px;text-align:center;z-index:2;transform:translateX(-50%);}
.mnode .mt-dot{
  display:block;width:24px;height:24px;margin:0 auto;border-radius:50%;
  background:#1a1510;border:2px solid #a8853c;transition:all .25s ease;
  position:relative;z-index:2;
}
.mnode b{
  display:block;font-size:12px;line-height:16px;font-weight:normal;margin-top:5px;
  color:#e8dfcd;background:rgba(10,8,6,.84);border-radius:4px;padding:1px 0;
  letter-spacing:.5px;white-space:nowrap;
}
.mnode .mt-rg{display:block;font-size:11px;line-height:14px;margin-top:2px;color:#b3a691;}
.mnode:hover .mt-dot{border-color:var(--hl);background:#2a2216;}
.mnode:hover b{color:var(--hl);}
.mnode.on .mt-dot{
  width:30px;height:30px;background:var(--gold);border-color:#f0d68a;
  box-shadow:0 0 0 5px rgba(201,162,77,.20);
  margin-top:-3px;   /* 放大后把圆心拉回原位，否则会往下坠 3px */
}
.mnode.on b{color:#ffd76a;background:rgba(0,0,0,.86);}
.mnode.on .mt-rg{color:#e0c68d;}
/* 锁定节点：灰掉但必须还能读 —— 底图是地形照片，纯深灰压不住 */
.mnode.lk .mt-dot{background:#12100d;border-color:#3a3228;}
.mnode.lk b{color:#a99d8a;background:rgba(10,8,6,.80);}
.mnode.lk .mt-rg{color:#8e8271;}
.mnode.lk:hover .mt-dot{border-color:#5a4e3c;}
.mnode .mt-arr{
  position:absolute;left:50%;top:-13px;transform:translateX(-50%);
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--gold);opacity:0;transition:opacity .25s;z-index:3;
}
.mnode.on .mt-arr{opacity:1;}

/* v1.9.101：地图带下面那行 footer 整块撤了（「当前：xxx」与地图卡片标题重复），
   间距由 .map-band-wrap 的 margin-bottom 负责。 */
/* 窄屏只缩节点本身：轨道高度和色带位置不能动 —— 节点 y 是 PHP 算死的，
   压高度会让谷底节点的两行标签再次跑出色带 */
@media (max-width:720px){
  .mnode{width:70px;}
  .mnode b{font-size:11.5px;line-height:15px;letter-spacing:0;}
  .mnode .mt-rg{font-size:11px;line-height:13px;margin-top:1px;}
}

/* ---------- 怪物（v1.9.103：一张一行 → 一行两列） ----------
 * 桌面内容区约 890px，单列时每张卡右边一大片空白。改两列后每列约 423px：
 * 立绘 42 + 信息(弹性) + 操作(下拉 68 + 按钮 54)，信息区还剩 210 左右。
 * 窄屏（≤820px）回落到单列，卡片竖排（沿用原有移动端布局）。 */
.mob-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;}
.mob{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#100c09;border:1px solid var(--line);border-radius:6px;padding:9px 11px;
  transition:.16s;margin:0;
}
.mob:hover{border-color:var(--line2);background:var(--panel2);}
/* flex-basis 140 是「换行闸门」：剩余宽度不够 140 时 .mob-act 自动掉到第二行，
   避免下拉框和按钮把怪物名挤成两三个字一行 */
.mob-main{flex:1 1 140px;min-width:0;}
.mn{font-size:13px;color:var(--text);letter-spacing:.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
/* 等级跟在名字后面（v1.9.121）：以前在第二行占一个坑，属性行挤成 5 项，加了加成标注后直接换行。
   现在归到名字行，用 11px 暗色，和 13px 的名字拉开层级。 */
.mn .mlv,.bn .mlv{font-size:11px;color:var(--dim);letter-spacing:0;font-weight:400;}
.mm{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-top:3px;}
/* 收益加成标注（v1.9.121）：跟在「经验 1167 / 金币 292」后面，说明这个数里含多少加成。
   压在暗底上、只有 10px，所以用绿色而不是金色 —— 金色在 .hl / .gold 上已经有了，加了会糊成一片。 */
.mm .gp{font-style:normal;margin-left:5px;font-size:10px;color:var(--green);letter-spacing:0;white-space:nowrap;}
.mm .gp.minus{color:var(--red);}
.mob-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;}
.mob-note{flex-basis:100%;text-align:right;font-size:11px;color:var(--dim);margin-top:-2px;}

/* ---------- 怪物立绘（v1.9.22） ---------- */
.mob-fig{flex:0 0 auto;}
.mob-fig img,.boss-fig img,.tw-fig img,.floor-fig img{
  display:block;border-radius:50%;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.05),transparent 60%),#0d0a07;
  border:1px solid var(--line2);
}
.mob-fig img{width:42px;height:42px;box-shadow:0 0 10px rgba(0,0,0,.55);}
.boss-fig img{width:72px;height:72px;border-color:rgba(192,80,77,.45);box-shadow:0 0 14px rgba(192,69,31,.3);}
.tw-fig{display:inline-flex;vertical-align:middle;margin-right:8px;}
.tw-fig img{width:64px;height:64px;}
.floor-fig{display:block;font-style:normal;}
.floor-fig img{width:40px;height:40px;}
.chk{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--dim);margin:0;white-space:nowrap;}
.chk input{width:auto;}
.tag{font-size:10px;padding:0 6px;border-radius:3px;border:1px solid var(--line2);color:var(--dim);line-height:16px;}
.tag.ok{color:var(--green);border-color:rgba(95,174,90,.4);}
.tag.warn{color:var(--gold);border-color:rgba(201,162,77,.4);}
.tag.danger{color:#e07a76;border-color:rgba(192,80,77,.5);}
.tag.dim{color:#6b6055;}
/* 赛季（v1.9.209）：星辰色，与稀有度的金色（.warn）区分开 —— 同一行里两个金色标签会糊在一起 */
.tag.season{color:#8fc9e8;border-color:rgba(120,180,220,.45);background:rgba(90,150,200,.10);}
/* 钻石位标签（v1.9.220）：与「积分位」用的 .tag.q3 紫金区分开 */
.tag.dia{color:#8fd8ef;border-color:rgba(99,200,224,.45);background:rgba(60,140,170,.10);}
.boss-box{
  margin-top:14px;padding:12px;border-radius:6px;
  border:1px solid rgba(192,80,77,.35);
  background:linear-gradient(90deg,rgba(192,80,77,.1),transparent);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.boss-info{flex:1;min-width:200px;}
.bn{font-size:15px;color:#e8a09e;letter-spacing:1px;display:flex;align-items:center;gap:8px;}
.dim-card{background:transparent;border-style:dashed;box-shadow:none;}

/* ---------- 战斗结算 ---------- */
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin:10px 0;}
.sum > div{
  background:#100c09;border:1px solid var(--line);border-radius:5px;padding:7px 9px;
  display:flex;flex-direction:column;
}
.sum span{font-size:10px;color:var(--dim);}
.sum b{font-size:14px;}
.drops h3{font-size:12px;color:var(--gold);letter-spacing:2px;margin:12px 0 6px;}
.droplist{display:flex;flex-wrap:wrap;gap:6px;}
.drop{
  font-size:12px;border:1px solid var(--line2);border-radius:3px;padding:2px 8px;background:var(--panel2);
}
.battlelog{
  background:#0a0806;border:1px solid var(--line);border-radius:5px;padding:10px 12px;
  max-height:230px;overflow-y:auto;font-size:12.5px;line-height:2;margin-top:10px;
}
.battlelog p{margin:0;border-bottom:1px dashed rgba(52,42,30,.5);padding:1px 0;}
.bl-head{font-size:11px;color:var(--gold);letter-spacing:1px;margin-bottom:6px;}

/* ---------- 装备 ---------- */
.item{
  border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:5px;
  padding:8px 11px;background:#100c09;margin-bottom:7px;
}
.iname{font-size:13.5px;letter-spacing:.5px;display:flex;align-items:center;gap:6px;}
/* 叠加角标（v1.9.216）：同款宝石 / 技能书在背包与仓库合并显示后的件数。
   紧跟名字与标签之后，不往右推 —— 宽屏下推到行尾会离名字太远，反而看不出属于哪一行。 */
.istack{
  flex:0 0 auto;line-height:18px;padding:0 6px;
  font-size:12px;font-weight:700;letter-spacing:0;
  color:#e8c46a;background:rgba(201,162,77,.14);
  border:1px solid rgba(201,162,77,.34);border-radius:4px;
}
.imeta{display:flex;gap:9px;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-top:3px;}
.imeta .s-atk{color:#e0a0a0;}
.imeta .s-def{color:#a0b8e0;}
.imeta .s-hp{color:#8fc98a;}
.imeta .s-mp{color:#8ec8e0;}
.imeta .s-crit{color:#e8b76a;}
.imeta .s-dodge{color:#b6a0e0;}
.iact{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;}
/* v1.9.93 背包「一键出售 普通/精良/稀有」：按钮文字跟着品质色走（.btn 会覆盖 .qN，这里提权） */
.btn.q0{color:#cfc4b3;} .btn.q1{color:#4a9eff;} .btn.q2{color:#ffd24a;}
.q0{color:#cfc4b3;} .q0.item{border-left-color:#5a5048;}
.q1{color:#4a9eff;} .q1.item{border-left-color:#3a6ab0;}
.q2{color:#ffd24a;} .q2.item{border-left-color:#b09020;}
.q3{color:#c066ff;} .q3.item{border-left-color:#7a3ab0;}
.q4{color:#35d07f;} .q4.item{border-left-color:#1f8a52;}
.bag-list{margin-top:10px;}
.pager{display:flex;gap:5px;margin-top:14px;flex-wrap:wrap;}
.pg{
  min-width:28px;text-align:center;padding:3px 8px;border:1px solid var(--line);
  border-radius:3px;font-size:12px;color:var(--dim);
}
.pg.on{border-color:var(--gold);color:var(--hl);background:rgba(201,162,77,.1);}
.filter{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.fbtn{
  padding:4px 12px;border:1px solid var(--line);border-radius:14px;font-size:12px;color:var(--dim);
  background:var(--panel2);
}
.fbtn.on{border-color:var(--gold);color:var(--hl);background:rgba(201,162,77,.12);}
/* 二级分类（v1.9.28 排行榜职业筛选）：小一号、与一级分类拉开层级 */
.filter.sub{margin:-4px 0 10px;padding-top:2px;border-top:1px dashed var(--line);}
.fbtn.sm{padding:2px 9px;font-size:11px;border-radius:11px;}

/* 装备栏 */
.equip-list{display:flex;flex-direction:column;gap:7px;}
.eq-slot{display:flex;gap:10px;align-items:flex-start;}
.eq-label{
  flex:0 0 46px;font-size:11px;color:var(--dim);padding-top:9px;letter-spacing:1px;
  border-right:1px solid var(--line);text-align:right;padding-right:8px;height:100%;
}
.eq-slot > .item, .eq-slot > .eq-empty{flex:1;margin-bottom:0;}
.eq-empty{
  border:1px dashed var(--line);border-radius:5px;padding:9px 11px;
  font-size:12px;color:#5f564c;background:transparent;
}
.skill-box{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;}
.skill-box h3{font-size:13px;color:var(--gold);letter-spacing:1px;}
.attr-list{display:flex;flex-direction:column;gap:5px;}
.attr-row{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:5px;
  background:#100c09;border:1px solid var(--line);
}
.attr-row .an{flex:1;font-size:13px;}
.attr-row .an span{font-size:11px;margin-left:4px;}
.attr-row .av{flex:0 0 108px;text-align:right;font-size:15px;color:var(--hl);white-space:nowrap;}
/* v1.9.83：四维拆成「属性点 + 养成加成」两段，加成用绿色小字，鼠标悬停看来源 */
.attr-row .av-add{margin-left:5px;font-size:12.5px;color:var(--green);}
.attr-row .ab{flex:0 0 auto;display:flex;gap:4px;}

/* ---------- 锻造 ---------- */
.rate-strip{display:flex;gap:3px;flex-wrap:wrap;margin:10px 0 14px;}
.rate{
  font-size:10px;padding:2px 6px;border:1px solid var(--line);border-radius:3px;color:var(--dim);
  background:#0e0b08;
}
.rate b{color:var(--text);font-weight:normal;}
.rate.risk{border-color:rgba(192,80,77,.35);}
.rate.risk b{color:#e07a76;}
.forge-list{display:flex;flex-direction:column;gap:7px;}
.forge-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:5px;
  padding:9px 12px;background:#100c09;
}
.fi-main{flex:1;min-width:180px;}
.fi-name{font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.fi-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fi-cost{display:flex;flex-direction:column;font-size:11px;text-align:right;line-height:1.5;}
/* 连续强化次数下拉（v1.9.134）
 * 全局 select 是 9px 内边距 + 14px 字号（表单控件尺寸），塞进 11px 的小按钮组里
 * 会比 .btn.tiny 高出一头，所以这里压成同高（24px）。宽度写死 min-width，
 * 让 ×5 / ×10 / ×20 三档切换时按钮位置不来回跳。 */
/* 排列本身由 form.inline 的 inline-flex 负责，这里只把间距收紧一点，
 * 让下拉和按钮贴得近，不至于被看成两个独立操作。 */
.fl-loop{gap:4px;}
.fl-sel{
  width:auto;min-width:52px;height:24px;padding:0 2px;
  font-size:11px;line-height:22px;text-align:center;border-radius:4px;
}
@media (max-width:640px){
  /* 手机上 24px 偏小，触控目标放到 28px（仍与 .btn.tiny 同一行放得下） */
  .fl-sel{height:28px;line-height:26px;font-size:12px;min-width:56px;}
}
/* v1.9.117：锻造列表分组条（身上装备 / 背包）。
   已装备的排在列表最前，否则背包一过 60 件，身上的 8 件就被挤到看不见的地方 */
.fg-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:1px;color:var(--dim);
  padding:8px 2px 5px;border-bottom:1px solid var(--line);margin-top:5px;
}
.fg-bar:first-child{margin-top:0;}
.fg-bar b{color:var(--text);font-weight:normal;}
.fg-bar.body{color:#c9b184;}
.fg-bar.body .dim{color:var(--dim);}

/* ---------- 商店 ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.shop-item{
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:12px;
  display:flex;flex-direction:column;gap:4px;
}
.si-name{font-size:13px;color:var(--text);letter-spacing:1px;}
.si-desc{min-height:32px;line-height:1.5;}
.si-price{font-size:14px;}
/* v1.9.84：商品卡上的「今日剩余 x/y」（限购） */
.si-limit{font-size:11px;line-height:1.6;margin:1px 0 2px;}
.dia-item{border-color:rgba(99,200,224,.25);}

/* ---------- 任务 ---------- */
.quest-list{display:flex;flex-direction:column;gap:8px;}
.quest-item{
  border:1px solid var(--line);border-radius:6px;padding:11px 13px;background:#100c09;position:relative;
}
.quest-item.current{border-color:rgba(201,162,77,.45);background:rgba(201,162,77,.06);}
.quest-item.done{opacity:.55;}
.quest-item.locked{opacity:.42;}
.qi-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;}
.qi-title{display:flex;align-items:center;gap:8px;font-size:13.5px;}
.qi-no{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--gold);
}
.qi-reward{font-size:11px;}
.qi-body{margin-top:7px;display:flex;flex-direction:column;gap:5px;}
.qi-act{margin-top:8px;}
.bar.quest{height:15px;}
.bar.quest i{background:linear-gradient(90deg,#6a5218,#d9b45c);}
.bar.quest span{line-height:15px;font-size:10px;}

/* ---------- 排行 ---------- */
.rank-list{display:flex;flex-direction:column;gap:5px;}
.rank-row{
  display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:5px;
  background:#100c09;border:1px solid var(--line);
}
.rank-row.me{border-color:rgba(201,162,77,.5);background:rgba(201,162,77,.07);}
.rno{
  flex:0 0 26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:12px;border:1px solid var(--line2);color:var(--dim);
}
.rno.r1{color:#ffd76a;border-color:#a8853c;background:rgba(201,162,77,.15);}
.rno.r2{color:#d8d8d8;border-color:#8a8a8a;}
.rno.r3{color:#d09a6a;border-color:#8a5a3a;}
.rmain{flex:1;min-width:0;}
.rname{font-size:13.5px;display:flex;align-items:center;gap:6px;}
/* v1.9.95 .gtag 自带 margin-right:5px（动态页那种行内文本流需要它），
   但排行榜是 flex + gap:6px，两者叠加成 11px，看着像「公会名和角色名隔了一截」。
   flex 容器里间距交给 gap 统一排，margin 归零。 */
.rname .gtag{margin-right:0;}
.rmeta{font-size:11px;}
.rval{font-size:13px;}

/* ---------- 竞技 ---------- */
/* 对手列表（v1.9.118）：三档 × 每行 4 个。改竖排卡片是因为横排「名字 + 按钮」
   在 1/4 宽度里塞不下，名字会被挤成一团省略号 */
.foe-group + .foe-group{margin-top:12px;}
.foe-hd{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:11px;padding:0 2px 6px;border-bottom:1px solid var(--line);margin-bottom:8px;
}
.foe-hd b{font-size:12.5px;color:var(--text);font-weight:normal;letter-spacing:1px;}
.foe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.foe{
  display:flex;flex-direction:column;justify-content:space-between;gap:7px;
  border:1px solid var(--line);border-radius:5px;padding:9px 11px;background:#100c09;
  min-width:0;
}
/* 头像 + 文字两栏（v1.9.119）：40px 头像在这张 1/4 宽卡片里刚好，
   再大就会把「名字 + 等级 + 战力 + 积分」四行挤成三行换行 */
.fmain{display:flex;align-items:center;gap:9px;min-width:0;}
.fava{flex:0 0 auto;line-height:0;}
/* 全局 .job-avatar 自带 3px 环 + 光晕，在 40px 的小卡片里偏粗，这里压到 2px
   （宽高由 job_avatar_html 的内联 style 给，不用再写一遍） */
.fava .job-avatar{box-shadow:0 0 0 2px rgba(8,6,4,.9);}
.finfo{flex:1;min-width:0;}
.fname{font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;}
.fname .fn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fname .lv{font-size:11px;color:var(--gold);flex:none;}
/* 强敌 / 轻松：只染名字，标签与等级保持各自的颜色，避免整张卡变红变绿 */
.fn.rel-strong{color:#e0605c;}
.fn.rel-easy{color:#58c07a;}
.fmeta{font-size:11px;line-height:1.6;}
/* 标签进了 .fmain 之后，同一个对手可能同时带「虚拟」和「强敌」两个标，
 * 把 .finfo 压到 ~110px —— 「弓箭手 · 战力 7.5万」原本会折成两行，卡片跟着变高、同排高度不齐。
 * 这里锁单行，并且**让职业名先被截**（.fjob 可缩可省略）、战力数字保住（.fpw 不缩）：
 * 被省略号吃掉「法师」无所谓，吃掉「7.5万」等于把判断强弱的依据弄丢了。 */
.foe .fmeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.afoe .fmeta{display:flex;align-items:baseline;}
.afoe .fmeta .fjob{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.afoe .fmeta .fpw{flex:none;}
/* 强弱 / 身份标签（v1.9.272）：从「独占一行」挪到卡片右上角。
 *
 * 做法是把它变成 .fmain 的第三个 flex 子项 + align-self:flex-start，
 * **不是** position:absolute —— 绝对定位会和长名字叠在一起，得手算 padding 让位，
 * 而标签宽度取决于「虚拟玩家」「强敌」是否同时出现（2 字还是 4 字），算不准。
 * 作为 flex 子项时 .finfo 会自动让出宽度，名字由 .fn 的 ellipsis 收尾，
 * 无论多长的名字都不会压到标签上；顺带卡片少了一整行（原来那行 22px 只放两个小标签）。 */
.foe .ftag{
  flex:none;align-self:flex-start;
  display:flex;gap:4px;flex-wrap:nowrap;
}
.foe .ftag:empty{display:none;}
.foe .tag{font-size:10px;padding:1px 5px;}
.foe .btn{width:100%;}
/* 挑战次数（v1.9.272）：×1 / ×5 / ×10 三个独立提交按钮，点哪个就是打几场。
 * 不用 select 也不用 radio —— 两次点击变一次，卡片里也塞不下多余的一行控制区。
 * .btn 原本是 width:100%，进 flex 后改成三等分；手机 2 列时每颗只有 ~50px，
 * 所以字号与左右 padding 都要压掉。 */
.foe .fgo{display:flex;gap:4px;}
.foe .fgo .btn{
  flex:1 1 0;width:auto;min-width:0;
  padding:5px 2px;font-size:12px;letter-spacing:0;
}
.foe .fgo .btn.ghost{background:transparent;color:var(--dim);}
/* 劫掠卡片的名次（v1.9.260）：原来放在 .ftag 里，等于独占一行 22px，
   而卡片右上角本来就是空的。挪进 .fname 用 margin-left:auto 顶到右端。
   names 过长时由 .fn 的 ellipsis 让位（.fn 有 min-width:0 + overflow:hidden），
   名次本身 flex:none，永远不会被挤没。前三名描金，其余用暗色不抢视线。
   nowrap 是必须的：.fname 默认 flex-wrap:wrap，手机 2 列时卡片只有 ~180px，
   名字+等级+名次放不下就会把名次甩到下一行 —— 比原来那个独立行还难看。 */
.fname .rk{margin-left:auto;flex:none;font-size:10px;line-height:1.4;color:var(--dim);letter-spacing:.5px;}
.fname .rk.top{color:var(--gold);}
.rob-foe .fname{flex-wrap:nowrap;}
/* 三行信息都不许折行：手机 2 列时 .finfo 只有 ~110px，
   任何一行折了都会让同一行的两张卡高度不齐（.foe-grid 是 grid，等高对齐）。
   宽度真的不够时用省略号收尾，而不是把「2转」甩到下一行。 */
.rob-foe .fmeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:900px){
  .foe-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* 2 列时卡片只有 ~180px：标签与按钮各再收一档，否则名字会被标签挤成一个字。
     只作用于竞技卡片（.afoe）—— 劫掠卡片共用 .foe，它靠 nowrap + 名次顶右，
     这里要是放开 wrap，名次会被甩到下一行。 */
  .afoe .tag{font-size:9px;padding:1px 4px;}
  /* 2 列时把「虚拟」让出来：它占的 22px 正好是「职业 · 战力」放不下的那 22px。
     手机上优先给真信息让路 —— 桌面端与战斗结果页仍然标着「虚拟」。 */
  .afoe .ftag .tag.dim{display:none;}
  .afoe .fmeta{font-size:10px;}
  /* 职业名让位（见 mod/arena.php 注释）：窄屏要塞下「战力 xx」与「积分 xx」的数字，
     头像本身就能看出职业，这块文字是最先可以不要的。 */
  .afoe .fmeta .fjob{display:none;}
  .afoe .fgo{gap:3px;}
  .afoe .fgo .btn{padding:5px 1px;font-size:11px;}
}
/* 连战逐场战绩（v1.9.272）：一行 chip 列完，胜绿负红。
 * 不做 10 份战报演出 —— 一次请求渲染 10 个 battle_stage 太长，也盖住了汇总数字。 */
.arena-runs{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;}
.arena-runs .ar{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;line-height:1.5;padding:2px 8px;border-radius:4px;
  border:1px solid var(--line);background:#100c09;color:var(--dim);
}
.arena-runs .ar.w{color:#58c07a;border-color:rgba(88,192,122,.34);}
.arena-runs .ar.l{color:#e0605c;border-color:rgba(224,96,92,.30);}
.arena-runs .ar b{font-weight:normal;opacity:.8;}
/* 竞技战报（v1.9.38 起与狩猎共用 .battle-card / .bstage，旧的 .arena-res 已废弃） */

/* ---------- 战团竞技（v1.9.262）：出战勾选 + 六人血条 ---------- */
/* 出战队伍的折叠面板（v1.9.263）：原生 <details>，队伍设好之后默认收起。
   收起时 summary 里仍写着「谁在阵上 / 总战力」，想改再点开 —— 信息不少，占位少一屏。
   默认的三角 marker 在部分浏览器里是灰的实体三角，和暗色主题不搭，
   统一用 ::before 画一个金色小三角，靠 open 状态旋转。 */
.carena-team{border:1px solid var(--line);border-radius:5px;background:#100c09;margin:12px 0;}
.carena-team>summary{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;   /* v1.9.265：见下方 .ct-now 注释 */
  padding:10px 12px;cursor:pointer;list-style:none;font-size:12.5px;
}
.carena-team>summary::-webkit-details-marker{display:none;}
.carena-team>summary::before{
  content:'▸';display:inline-block;flex:none;color:var(--gold);font-size:11px;
  transition:transform .15s;
}
.carena-team[open]>summary::before{transform:rotate(90deg);}
.carena-team .ct-t{font-size:13px;color:var(--text);letter-spacing:.5px;flex:none;}
/* 三个名字用 nowrap + 省略号：账号角色名可以起得很长，换行会把 summary 撑成两行。
 * v1.9.265：这里必须 flex:1 1 auto 吃满剩余宽度 —— 原来只有 min-width:0，
 * 于是「出战队伍 + 三个名字 + 总战力 + 调整」在 390px 上放不下时，
 * 最后那个「调整」被 flex-wrap 甩到第二行右端，整条从 40px 高变成 80px，
 * 而且孤零零挂着很难看。nowrap + 名字区弹性收缩，永远一行。 */
.carena-team .ct-now{color:var(--hl);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.carena-team .ct-need{color:var(--gold);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.carena-team .ct-op{margin-left:auto;flex:none;color:var(--hl);}
/* 总战力必须 nowrap：它是 flex:0 1 auto，被挤压时会在「11.4」和「万」之间断开，
 * 390px 上实测就是这么断的。 */
.carena-team .ct-pw{flex:none;white-space:nowrap;}
/* 窄屏（≤420）优先保证「谁在阵上」完整可读：15 个字的名字 + 总战力 + 调整
 * 在 342px 内容宽里放不下，必然牺牲一个。总战力点开面板就能看到，让它先让位。 */
@media (max-width:420px){
  .carena-team .ct-pw{display:none;}
}
.carena-team .ct-op::after{content:'调整';}
.carena-team[open] .ct-op{color:var(--dim);}
.carena-team[open] .ct-op::after{content:'收起';}
.carena-team .ct-body{padding:0 12px 12px;}
/* 勾选卡片：桌面 3 列（正好对应 3 个站位），手机 1 列。
   不用 4 列 —— 账号最多 7 个角色，4 列会排成 4+3，看起来像「前三行是主力」。 */
.carena-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0;}
.cpick{
  display:flex;align-items:center;gap:8px;padding:8px 10px;min-width:0;
  border:1px solid var(--line);border-radius:5px;background:#100c09;cursor:pointer;
}
.cpick.on{border-color:rgba(201,162,77,.55);background:rgba(201,162,77,.07);}
/* 等级不够：整块压暗 + not-allowed，但**不隐藏** —— 玩家得看见「还差几级」才有目标 */
.cpick.off{opacity:.45;cursor:not-allowed;}
.cpick input{flex:none;margin:0;}
.cpi{display:flex;flex-direction:column;min-width:0;line-height:1.5;}
.cpi b{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpi .small{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 战报里的双方阵容：桌面左右两栏，手机上下堆叠 */
.cteam-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 4px;}
.cteam{border:1px solid var(--line);border-radius:5px;padding:9px 10px;background:#100c09;min-width:0;}
.ct-hd{font-size:10.5px;color:var(--dim);letter-spacing:2px;margin-bottom:7px;}
.cunit + .cunit{margin-top:8px;}
/* 倒下的人整块压暗，血条被 .cbar i 的宽度 0% 自然清空 */
.cunit.dead{opacity:.42;}
.cn{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12px;min-width:0;}
.cn .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cn .lv{font-size:10px;color:var(--gold);flex:none;}
.cbar{height:5px;background:#241c14;border-radius:3px;overflow:hidden;margin:4px 0 2px;}
.cbar i{display:block;height:100%;background:linear-gradient(90deg,#3f7a3a,#5fae5a);transition:width .2s;}
/* 红条只给倒下的：活着的统一绿 —— 这一栏不是「谁伤得重」，是「谁还站着」 */
.cunit.dead .cbar i{background:linear-gradient(90deg,#7d2a27,#c0504d);}
.chp{font-size:10px;}
/* 对手卡片里的三人名单：小标签，一行塞得下就一行 */
.carena-foe .fteam{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;}
.ctag{
  font-size:10px;line-height:1.5;padding:0 4px;border-radius:3px;
  border:1px solid var(--line);background:#1a1410;color:var(--dim);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ctag i{font-style:normal;margin-left:3px;color:var(--text);}
@media (max-width:640px){
  .carena-pick{grid-template-columns:1fr;}
  .cteam-wrap{grid-template-columns:1fr;}
  /* 手机上一列勾选卡之后，保存按钮跟着整宽 —— 左对齐的小按钮在这里像个次要链接，
   * 但这其实是这个面板唯一的主操作 */
  .carena-team .ct-body .btn{width:100%;}
  /* 右侧让位给「动态」竖条：它 fixed 在屏幕右缘、宽 37px，而 .app 在真机上占满 390。
   * 实测勾选卡右边界压进去 16px（模拟器 375 宽时），真机更多 —— 边框被切、按钮右端发虚。
   * 让位加在 .ct-body 上，勾选卡和保存按钮一起收，不用给两者各写一遍。 */
  .carena-team .ct-body{padding-right:34px;}
  /* 战斗结算的四格（积分变化 / 我方伤害 / 敌方伤害 / 当前积分）：
   * auto-fit 在 331px 内容宽下只排得下 3 格，第四格被甩到第二行独占 1/3，
   * 看起来像漏了一格。固定 2×2，四格等宽成田字。 */
  .battle-card .sum{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* 连战汇总是 5 格（积分 / 战绩 / 消耗 / 金币 / 钻石），奇数格时最后一格横跨整行，
     不然右下角空一块、左边吊着半格，看着像渲染漏了。3 格时同理。 */
  .battle-card .sum > div:last-child:nth-child(odd){grid-column:1 / -1;}
}

/* ---------- 战团竞技布局（v1.9.265） ---------- */
/* 顶部三项数据：复用 .sum，但间距比战斗结算条紧一档 */
.carena-stat{margin:2px 0 10px;}
.carena-stat i{font-style:normal;font-size:10px;color:var(--dim);margin-top:2px;}
.carena-lead{margin:0;line-height:1.7;}
.carena-note{margin:0 0 10px;}

/* 对手列表：minmax(300px) 自适应，替代 .foe-grid 的 4 / 2 固定列。
 * 战团卡要放下「头像 + 名字 + 两行 meta + 3 个人名标签 + 整宽按钮」；
 * 手机 2 列时每列只有约 170px、文字区约 99px，卡内所有内容逐行堆叠，
 * 头像被 align-items:center 顶到卡片中间 —— 整张卡看起来像散架。 */
.carena-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;}
/* 手机：右侧给「动态」竖条让位。它 fixed 在屏幕右缘约 35px，
 * 卡片改满宽之后，「挑战」按钮的右端正好压在它下面。 */
@media (max-width:640px){
  .carena-grid{padding-right:28px;}
}
.carena-foe{gap:8px;}
/* 顶对齐：两行 meta 之后才接名单，居中会让头像浮在中间没有落点 */
.carena-foe .fmain{align-items:flex-start;}
.carena-foe .fname .fn{font-size:13.5px;}
.carena-foe .fmeta{white-space:normal;line-height:1.55;}
.carena-foe .fmeta b{color:var(--hl);font-weight:normal;}
/* 三人名单已在 PHP 里移出 .finfo，这里只需清掉旧的上边距（由 .foe 的 gap 负责） */
.carena-foe .fteam{margin-top:0;}

/* ---------- 战团竞技演出（v1.9.267） ----------
 * 原来这六条血条是「一次性写死终值」的静态图，只有战报文字在逐字打。
 * 现在由 carena-stage.js 按回合推进：血条滑动、受击抖动、掉血飘字、倒地灰化。
 * 全部动画都从 .cstage 之下生效 —— 没有这个容器（老页面 / JS 没加载）时
 * 血条保持服务端渲染的终值，不加任何过渡，不会出现「从满血滑到终值」的假动画。 */
.cstage .cunit{position:relative;}
.cstage .cbar i{transition:width .45s ease;}
.cunit.dead{transition:opacity .4s;}
/* 抖 3px：够看出「这一下打在他身上」，又不至于让整栏文字跟着晃到看不清 */
.cunit.hit{animation:cunit-shake .32s;}
@keyframes cunit-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-3px);}
  75%{transform:translateX(3px);}
}
/* 飘字挂在 .cbar 上（不是 .cunit），跟着血条走，不会盖住名字 */
.cp-pop{
  position:absolute;right:0;top:2px;
  font-size:11px;font-weight:700;color:#e0645f;pointer-events:none;
  text-shadow:0 1px 2px #000;animation:cpop-up .9s ease-out forwards;
}
@keyframes cpop-up{
  0%{opacity:0;transform:translateY(6px);}
  20%{opacity:1;transform:translateY(0);}
  100%{opacity:0;transform:translateY(-14px);}
}
.cs-ctl{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap;}
.cs-speeds{display:inline-flex;gap:4px;}
.cs-hint{margin-left:auto;}
/* 没有帧数据（老战斗记录 / 未跑升级 / 纯静态预览）时让战报自然展开：
 * .battlelog 的 230px 高度是为「跟着播放逐行揭示」准备的，
 * 一份不能播的静态战报压在 230px 里，玩家要滑五六屏才读得完。 */
.cstage:not([data-carena]) .cs-log{max-height:none;}
/* 系统开了「减少动态效果」：只留数值变化，抖动与飘字全部关掉 */
@media (prefers-reduced-motion: reduce){
  .cstage .cbar i{transition:none;}
  .cunit.hit{animation:none;}
  .cp-pop{display:none;}
}

/* 玩法规则折叠：和出战队伍同款，收起时只占一行 */
.carena-rule{border:1px solid var(--line);border-radius:5px;background:#100c09;margin:2px 0 0;}
.carena-rule>summary{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  cursor:pointer;list-style:none;font-size:12.5px;color:var(--dim);
}
.carena-rule>summary::-webkit-details-marker{display:none;}
.carena-rule>summary::before{
  content:'▸';display:inline-block;flex:none;color:var(--gold);font-size:11px;
  transition:transform .15s;
}
.carena-rule[open]>summary::before{transform:rotate(90deg);}
.carena-rule .cr-body{padding:0 12px 12px;font-size:12px;line-height:1.85;color:var(--dim);}
.carena-rule .cr-body b{color:var(--text);font-weight:normal;}
/* 战报里「每回合一行」的从属行（关键事件）：缩进 + 更暗，避免和回合汇总混成一片 */
.battlelog p.sub{padding-left:10px;font-size:12px;color:var(--dim);border-left:2px solid var(--line);margin:2px 0 2px 2px;}

/* ---------- 转生 ---------- */
/* 自动转生开关（v1.9.271）：一条横幅 + 右侧按钮。开启时描金，与「已生效」的系统一致 */
.arb{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  margin:0 0 12px;padding:9px 11px;border-radius:5px;
  background:#100c09;border:1px solid var(--line);
}
.arb.on{border-color:rgba(201,162,77,.4);background:rgba(201,162,77,.07);}
/* 按钮顶对齐：说明文字有三行，垂直居中会让按钮压在中间那行文字旁边，看着像重叠 */
.arb-info{display:flex;flex-direction:column;gap:3px;flex:1 1 220px;min-width:0;padding-right:4px;}
.arb-info b{font-size:13px;color:var(--text);}
.arb-info b .tag{font-weight:400;margin-left:4px;}
.arb form{margin-left:auto;flex:none;}
@media (max-width:520px){
  .arb form{margin-left:0;width:100%;}
  .arb form .btn{width:100%;}
}
.reborn-show{display:flex;flex-direction:column;gap:6px;margin:14px 0;}
.rs-row{
  display:flex;justify-content:space-between;padding:7px 11px;border-radius:5px;
  background:#100c09;border:1px solid var(--line);font-size:13px;
}
.rs-row span{color:var(--dim);font-size:12px;}
.reborn-steps{display:flex;flex-direction:column;gap:6px;}
.rstep{
  display:flex;flex-direction:column;padding:9px 12px;border-radius:5px;
  border:1px solid var(--line);background:#100c09;opacity:.5;
}
.rstep.on{opacity:1;border-color:rgba(201,162,77,.4);background:rgba(201,162,77,.07);}
.rstep b{color:var(--hl);font-size:13px;letter-spacing:1px;}
.rstep span{font-size:11px;color:var(--text);}

/* ---------- 日志 ---------- */
.loglist{list-style:none;padding:0;margin:0;font-size:12.5px;}
.loglist li{
  display:flex;align-items:baseline;gap:8px;padding:5px 0;
  border-bottom:1px dashed rgba(52,42,30,.6);flex-wrap:wrap;
}
.loglist.full li{padding:7px 0;}
.logtext{flex:1;min-width:160px;}

/* ---------- 后台 ---------- */
.admin-table{display:flex;flex-direction:column;gap:4px;font-size:12px;overflow-x:auto;}
.at-head, .at-row{
  display:grid;grid-template-columns:52px 1fr 70px 64px 90px 70px 1.6fr;
  gap:8px;align-items:center;min-width:700px;
}
.at-head{color:var(--dim);font-size:11px;padding:0 8px 6px;border-bottom:1px solid var(--line);letter-spacing:1px;}
.at-row{background:#100c09;border:1px solid var(--line);border-radius:4px;padding:7px 8px;margin:0;}
.at-name em{font-style:normal;font-size:10px;margin-left:4px;}
.at-give{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.tiny-input{width:64px !important;padding:3px 6px !important;font-size:11px !important;}
/* 占位文字超过 3 个字时用这个（如「怪物魂力」「魂卡强化石」）：
 * 64px 装不下，placeholder 会被截成「怪物魂」，看不出是发什么。 */
.tiny-input.wide{width:86px !important;}
/* v1.9.170：宽度带 !important，所以写内联 style="width:120px" 是无效的
 * （账号详情页的「增减（负数扣减）」输入框一直被压成 64px，placeholder 截成四个字）。
 * 需要更宽的场合改用这几个类，别再靠内联样式。 */
.tiny-input.w110{width:110px !important;}
.tiny-input.w120{width:120px !important;}
.tiny-input.w150{width:150px !important;}

/* ---------- 后台 · 分区导航 / 配置中心 ---------- */
.atabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.atab{
  padding:6px 12px;border:1px solid var(--line2);border-radius:4px;line-height:1.4;
  font-size:12.5px;color:var(--dim);text-decoration:none;background:#100c09;
}
.atab:hover{color:var(--text);border-color:rgba(201,162,77,.5);}
.atab.on{color:#1b1206;background:var(--gold);border-color:var(--gold);font-weight:700;}

/* 后台导航「全区统一」角标（v1.9.248）：公告/商城管理/导航排序 三个全区共享配置 */
.atab .g-tag{
  font-style:normal;font-size:10px;line-height:1;margin-left:4px;padding:2px 4px;
  border-radius:3px;color:#1b1206;background:#5ac8a0;vertical-align:1px;
}
.atab.on .g-tag{color:#fff;background:rgba(27,18,6,.55);}

.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:12px 0 2px;}
.cfg-item{display:flex;flex-direction:column;gap:5px;min-width:0;}
.cfg-item label{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.cfg-item label em{font-style:normal;font-size:11px;color:#6b6055;}
.cfg-item input,.cfg-item select{width:100%;}
.cfg-item.mine label{color:var(--gold);}
.cfg-act{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap;}
.act-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.admin-give{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.admin-form{margin-top:4px;}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:14px;flex-wrap:wrap;}

/* 不同列数的后台表格：默认模板是 7 列，这几张表列数不一样 */
.admin-table.c5 .at-head, .admin-table.c5 .at-row{
  grid-template-columns:44px 1.2fr 56px 66px 1.9fr;min-width:560px;
}
/* 账号列表（v1.9.168）：ID / 账号 / 积分 / R币 / VIP经验 / 角色位 / GM / 状态 / 操作
 * 后四项是账号级货币与额度，GM 判断「氪没氪、能建几个号」不必再点进详情。
 * 数字列固定宽度 + nowrap：积分到六位数也不会把「账号」列挤扁。 */
.admin-table.c-acc .at-head, .admin-table.c-acc .at-row{
  grid-template-columns:58px 1.1fr 82px 74px 84px 58px 44px 62px 152px;
  min-width:900px;font-size:11.5px;
}
/* ID 列的批量勾选框（v1.9.170）：和数字垂直居中，别把行高撑开 */
.admin-table.c-acc .acc-ck{vertical-align:-2px;margin:0 4px 0 0;}
/* 批量操作条（v1.9.170）：表格和分页之间的一行，间距交给自身 margin-top。
 * 子项一律 flex:none —— 否则那段长提示会把 select / 输入框挤窄，placeholder 被截成三个字。 */
.batch-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:10px;padding:8px 10px;border:1px dashed var(--line);border-radius:6px;
}
.batch-bar label{white-space:nowrap;flex:0 0 auto;}
.batch-bar select,.batch-bar input,.batch-bar button{flex:0 0 auto;}
.batch-bar>span{flex:1 1 260px;min-width:0;}
.admin-table.c-acc .at-num{white-space:nowrap;font-variant-numeric:tabular-nums;}
.admin-table.c-acc .at-num b{font-weight:normal;}
.at-acc-credit{color:#b6a0e0;}
.at-acc-rcoin{color:#35d07f;}
/* 账号列表排序 chip（v1.9.169）：注册时间没有独立列，所以不做表头排序 */
.at-sort{
  display:inline-block;padding:1px 7px;margin:0 2px;border-radius:3px;
  border:1px solid var(--line);color:var(--dim);font-size:11.5px;text-decoration:none;
}
.at-sort:hover{border-color:var(--line2);color:var(--text);}
.at-sort.on{border-color:var(--gold);color:var(--hl);background:rgba(201,162,77,.12);}
/* 可点的角色位：虚线底边暗示「能点」，不做成按钮以免和右侧操作列的按钮抢注意力 */
.at-slotlink{color:var(--text);text-decoration:none;border-bottom:1px dashed var(--line2);justify-self:start;}
.at-slotlink:hover{color:var(--hl);border-bottom-color:var(--gold);}
.admin-table.c-cdk .at-head, .admin-table.c-cdk .at-row{
  grid-template-columns:40px 128px 1.5fr 76px 86px 66px 1.3fr;min-width:740px;font-size:11.5px;
}
.admin-table.c-log .at-head, .admin-table.c-log .at-row{
  grid-template-columns:84px 78px 96px 1.8fr 96px;min-width:660px;font-size:11.5px;
}
/* 导航排序：# / 入口 / key / 说明 / 四个排序按钮 */
.admin-table.c-nav .at-head, .admin-table.c-nav .at-row{
  grid-template-columns:40px 1.2fr 96px 2.2fr 156px;min-width:680px;
}
.nv-name{display:flex;align-items:center;gap:6px;min-width:0;}
.nv-name i{font-style:normal;font-size:14px;color:var(--gold);}
.nv-act{display:flex;gap:4px;flex-wrap:wrap;margin:0;}
.nv-act .btn[disabled]{opacity:.35;cursor:not-allowed;}
/* 洗练台 · 词条一览：词条 / 效果 / 出现率（v1.9.27） */
.admin-table.c-rf .at-head, .admin-table.c-rf .at-row{
  grid-template-columns:104px 1fr 72px;min-width:480px;
}
.admin-table.c-rf .at-row:hover{background:#171009;}
/* 允许长文本换行，避免兑换码 / 日志详情把表格撑破 */
.admin-table .at-row > span{min-width:0;word-break:break-all;} 

/* ---------- 可折叠面板（v1.9.28） ----------
 * 原生 <details>：无 JS、无 CDN，收起时只占一行，展开后才渲染内容。 */
details.fold{border:1px solid var(--line);border-radius:6px;background:#0d0906;margin:8px 0;}
details.fold > summary{
  cursor:pointer;list-style:none;padding:8px 10px;font-size:13px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;user-select:none;
}
details.fold > summary::-webkit-details-marker{display:none;}
details.fold > summary::before{
  content:'▸';color:var(--gold);font-size:12px;transition:transform .15s;display:inline-block;
}
details.fold[open] > summary::before{transform:rotate(90deg);}
details.fold > summary:hover{background:#15100a;}
details.fold > .fold-body{padding:2px 10px 10px;border-top:1px solid var(--line);}
details.fold > .fold-body > p{margin:6px 0 0;}
/* 洗练台的词条一览：面板内表格不再自带外边距 */
details.rf-pool .admin-table{margin:8px 0 0;}

/* ---------- 页脚 ---------- */
.foot{
  text-align:center;font-size:11px;color:#5a5045;padding:24px 0 10px;letter-spacing:1px;
}

/* ==========================================================
   移动端
   ========================================================== */
@media (max-width:820px){
  .app{padding:0 8px 78px;}
  .topbar{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px;margin:8px 0;}
  /* v1.9.104：品牌名和副标题改上下排。
     原来是 flex 横排 + padding-right:166px（给右上角三个按钮让位），390px 屏上只剩 184px，
     副标题要 140px，于是 logo 被挤成「天使奇 / 迹」两行。
     竖排后两行各自完整，整体还矮了约 30px。 */
  .brand{
    border-right:none;border-bottom:1px solid var(--line);
    padding:0 0 6px;
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  }
  .brand .logo{font-size:16px;letter-spacing:3px;white-space:nowrap;max-width:140px;}
  .brand .sub{font-size:10px;white-space:nowrap;max-width:140px;}
  /* 右上角那组按钮是绝对定位（top:7 right:10），品牌区仍在正常流里 ——
   * 多了「选服」这颗胶囊后整组宽到约 238px，390 屏上会把游戏名压到只剩 140px。
   * 这里把胶囊和按钮一起收一档，同时给 .logo/.sub 一个硬上限，
   * 保证「放置勇者大陆」这类 6 字名 + 11 字副标题都完整显示且不贴到按钮上。 */
  .topbar .top-act{gap:6px;right:6px;}
  /* 同样要 .topbar 前缀压过后写的原始规则，否则手机端拿到的还是桌面那套 padding */
  .topbar .srv-open{padding:5px 7px;font-size:10.5px;gap:4px;}
  .topbar .top-set{padding:5px 9px;}
  /* 弹层改 fixed 左右留边（v1.9.271）：原来是 absolute right:0 贴着 .srv-sw 展开，
   * 而 .srv-sw 是这组按钮里最左边一个 —— 胶囊收窄到 ~90px 后，
   * 250px 宽的弹层右端对齐胶囊右边，左端直接顶出屏幕（实测 -18px，「选择区服」被切掉）。
   * 改成 fixed + 左右各留 8px，宽度自适应，任何屏宽都不会出界。
   * 选择器带 .topbar 前缀是必须的：原始 .srv-pop 规则在文件后面 1000 行，
   * 同特异性下后写的赢，光写 .srv-pop 会被它覆盖掉（第一版就这么失效的）。 */
  .topbar .srv-pop{position:fixed;top:74px;left:8px;right:8px;width:auto;max-width:none;z-index:78;}
  .pinfo{gap:8px;}
  .bars{max-width:none;flex:1 1 100%;}
  .wallet{font-size:11px;gap:8px;}
  .body{flex-direction:column;}
  .side{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:50;
    flex-direction:row;overflow-x:auto;gap:2px;
    border-radius:0;border-left:none;border-right:none;border-bottom:none;
    padding:6px 6px 8px;background:rgba(17,13,10,.97);
    backdrop-filter:blur(8px);
  }
  .ni{flex:0 0 auto;flex-direction:column;gap:2px;padding:6px 10px;min-width:52px;}
  .ni i{font-size:15px;}
  .ni em{font-size:10px;letter-spacing:0;}
  .ni.on::before{display:none;}
  .ni u{right:2px;top:0;}
  .content{width:100%;}
  .grid-2{grid-template-columns:1fr;}
  /* 待办：窄屏卡片变全宽，两列反而更松快；claim 段本来就是单列（说明文字长） */
  .td-grid{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .ad-grid{grid-template-columns:1fr;}
  .ad-src{width:60px;}
  /* v1.9.285：手机职业卡改两列 —— 四维块删掉后卡片只剩「头像+名字 / 描述 / 提示」，
     单列会让六张卡铺成一米长，玩家挑职业要来回滚。两列时每格约 180px，
     46 头像 + 名字仍放得下，六张正好三行。内距与字号同步收一档。 */
  .job-pick{grid-template-columns:repeat(2,1fr);gap:8px;}
  .ji{padding:10px 9px;}
  .ji-top{gap:7px;}
  /* 头像尺寸是 inline style（job_avatar_html 写死 width/height），CSS 覆盖要 !important；
     两列下 46px 放得下，就不跟它较劲了。 */
  .jn{font-size:13px;letter-spacing:.5px;}
  .jd{font-size:10.5px;line-height:1.5;margin-top:6px;}
  .card{padding:13px 13px;}
  /* v1.9.103：两列网格在窄屏回落单列。卡片用 block + 浮动 —— 立绘靠左、信息环绕，
     操作区 clear 后独占一行、每个控件 width:100%。
     （试过 flex 三列 / flex-basis:100% / grid，都会因为可用宽度被算小
      把「出发」挤出可视区；只有 block 布局的百分比宽度是稳定的。） */
  .mob-list{grid-template-columns:1fr;}
  .mob{display:block;overflow:hidden;}
  .mob-fig{float:left;margin:0 10px 4px 0;}
  .mob-act{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    clear:both;margin:8px 0 0;
  }
  .mob-act select{grid-column:1;grid-row:1;width:100%;padding:8px 4px;font-size:12px;}
  .mob-act .btn{grid-column:2;grid-row:1;width:100%;padding:8px 0;font-size:13px;}
  .mob-act .chk{grid-column:1/-1;grid-row:2;justify-content:center;font-size:12px;}
  .boss-box{flex-direction:column;align-items:stretch;}
  .forge-item{flex-direction:column;align-items:stretch;}
  .fi-act{justify-content:flex-end;}
  .eq-slot{flex-direction:column;gap:4px;}
  .eq-label{flex:none;text-align:left;border-right:none;padding:0;font-size:10px;}
  .login-wrap{margin:24px auto;}
  .lb-head h1{font-size:22px;letter-spacing:5px;}
  .battlelog{max-height:200px;}
}
@media (max-width:400px){
  .td-claim{grid-template-columns:1fr;}
  .td-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  .shop-grid{grid-template-columns:1fr 1fr;}
}

/* ==========================================================
   宠物 / 副本 / 交易行
   ========================================================== */
.wallet .ticket{color:#b6a0e0;}

/* ---------- 宠物稀有度 ---------- */
.pr1{color:#cfc4b3;}
.pr2{color:#4a9eff;}
.pr3{color:#ffd24a;}
.pr4{color:#c066ff;}
.pr5{color:#35d07f;}
.stars{color:#e8c877;font-size:11px;letter-spacing:1px;}

/* ---------- 抽卡 ---------- */
.gacha-box{
  border:1px solid rgba(168,111,224,.28);border-radius:6px;padding:13px 15px;
  background:linear-gradient(90deg,rgba(168,111,224,.09),transparent 70%);
}
.gacha-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.gacha-head b{color:var(--hl);letter-spacing:1px;}
.gacha-act{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.gacha-act form{margin:0;}
.pet-chip{
  display:inline-block;margin:3px 6px 3px 0;padding:2px 9px;border-radius:4px;
  border:1px solid var(--line2);background:#0f0c08;font-size:12px;
}

/* ---------- 出阵位 ---------- */
.deploy-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.deploy-slot{
  border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:#100c09;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-height:112px;
  border-left:3px solid var(--line2);
}
.deploy-slot.empty{
  border-style:dashed;border-left-width:1px;align-items:center;justify-content:center;
  color:#5f564c;font-size:12px;
}
.deploy-slot.on.pr1{border-left-color:#5a5048;}
.deploy-slot.on.pr2{border-left-color:#3a6ab0;}
.deploy-slot.on.pr3{border-left-color:#b09020;}
.deploy-slot.on.pr4{border-left-color:#7a3ab0;}
.deploy-slot.on.pr5{border-left-color:#1f8a52;}
.deploy-slot form{margin:0;}
.ds-ico{
  width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#f0e0bc;border:1px solid var(--line2);
  background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.ds-name{font-size:13px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.ds-meta{font-size:11px;line-height:1.5;}

/* ---------- 宠物列表（v1.9.75 改多列卡片） ---------- */
/* 一只一列太占纵向：桌面 3 列、平板 2 列、手机 1 列。列内信息靠 wrap 折行，不裁内容。 */
.pet-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;align-items:start;}
.pet-row{
  display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:5px;
  padding:9px 11px;background:#100c09;
}
.pet-row.on{border-color:rgba(201,162,77,.4);background:rgba(201,162,77,.05);}
.pet-row.pr1{border-left-color:#5a5048;}
.pet-row.pr2{border-left-color:#3a6ab0;}
.pet-row.pr3{border-left-color:#b09020;}
.pet-row.pr4{border-left-color:#7a3ab0;}
.pet-row.pr5{border-left-color:#1f8a52;}
.pet-ico{
  flex:0 0 34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#f0e0bc;border:1px solid var(--line2);
  background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.pet-main{flex:1;min-width:0;}
.pet-name{font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pet-bonus{color:#8fc98a;}
.pet-meta{font-size:11px;line-height:1.55;margin-top:2px;
  /* 描述是氛围文本，窄列里最多两行，超了省略，避免同排卡片高低差太多 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* 按钮组独占一行、左对齐；字与内边距收紧，四列宽下「撤下/升级/升星/放生」才塞得进一行 */
.pet-act{display:flex;gap:4px;row-gap:4px;flex-wrap:wrap;justify-content:flex-start;width:100%;max-width:none;margin-top:2px;}
.pet-act form{margin:0;}
.pet-act .btn{padding:3px 6px;font-size:10.5px;}

/* ---------- 图鉴 ---------- */
.codex{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:8px;}
.codex-item{
  display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-left:3px solid var(--line2);
  border-radius:5px;padding:8px 10px;background:#100c09;
}
.codex-item.lock{opacity:.42;}
.codex-item.pr1{border-left-color:#5a5048;}
.codex-item.pr2{border-left-color:#3a6ab0;}
.codex-item.pr3{border-left-color:#b09020;}
.codex-item.pr4{border-left-color:#7a3ab0;}
.codex-item.pr5{border-left-color:#1f8a52;}
.ci-ico{
  flex:0 0 26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:13px;border:1px solid var(--line2);background:#0f0c08;
}
.ci-main{flex:1;min-width:0;}
/* v1.9.210：品质标签挪进名字行后改成 flex，标签间距交给 gap（原来靠 inline 空白，标签贴得忽远忽近）；
   宽度不够时整枚标签换行，不会把标签内容拆成两半 */
.ci-name{font-size:12.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ci-bonus{font-size:10.5px;line-height:1.5;}
/* 图鉴（v2.6）：分组标题 + 基础/满级两行 + 本职业专属高亮 */
.codex-h{font-size:12px;color:var(--hl);letter-spacing:1px;margin:14px 0 6px;
  padding-left:8px;border-left:2px solid var(--gold);line-height:1.4;}
.codex-h:first-of-type{margin-top:8px;}
.codex-tip{margin:8px 0 2px;line-height:1.6;}
.ci-max{font-size:10.5px;line-height:1.5;color:var(--dim);}
.codex-item.mine{border-color:#a8853c;box-shadow:inset 0 0 0 1px rgba(168,133,60,.18);}

/* ---------- v1.9 · 养成 · 坐骑 ---------- */
/* 骑乘位：与宠物出阵位同构，但只有一个槽位 */
.ride-box{margin-bottom:12px;}
.ride-slot{
  display:flex;gap:12px;align-items:center;
  border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:6px;
  padding:12px 14px;background:#100c09;min-height:78px;
}
.ride-slot.empty{
  border-style:dashed;border-left-width:1px;justify-content:center;
  color:#5f564c;font-size:12px;
}
.ride-slot.pr1{border-left-color:#5a5048;}
.ride-slot.pr2{border-left-color:#3a6ab0;}
.ride-slot.pr3{border-left-color:#b09020;}
.ride-slot.pr4{border-left-color:#7a3ab0;}
.ride-slot.pr5{border-left-color:#1f8a52;}
.rs-ico{
  flex:0 0 46px;height:46px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#f0e0bc;border:1px solid var(--line2);
  background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.rs-main{flex:1;min-width:0;}
.rs-name{font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rs-meta{font-size:11px;margin-top:2px;}
.rs-bonus{color:#8fc98a;font-size:12px;margin-top:3px;}
.rs-desc{font-size:11px;margin-top:2px;}

/* 坐骑列表（v2.4）：一行两列，宽屏每格约 460px；窄屏 1 列 */
.mount-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:start;}
.mount-row{
  display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:5px;
  padding:9px 11px;background:#100c09;
}
.mount-row.on{border-color:rgba(201,162,77,.4);background:rgba(201,162,77,.05);}
.mount-row.pr1{border-left-color:#5a5048;}
.mount-row.pr2{border-left-color:#3a6ab0;}
.mount-row.pr3{border-left-color:#b09020;}
.mount-row.pr4{border-left-color:#7a3ab0;}
.mount-row.pr5{border-left-color:#1f8a52;}
.mt-ico{
  flex:0 0 34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#f0e0bc;border:1px solid var(--line2);
  background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.mt-main{flex:1;min-width:0;}
.mt-name{font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mt-bonus{color:#8fc98a;font-size:12px;}
.mt-meta{font-size:11px;line-height:1.55;margin-top:2px;
  /* 描述是氛围文本，两列时最多两行，避免同排卡片高低差太多 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* 按钮组独占一行、左对齐（两列宽下放不进 ico 右边）；四五个按钮才塞得下 */
.mt-act{display:flex;gap:4px;row-gap:4px;flex-wrap:wrap;justify-content:flex-start;width:100%;max-width:none;margin-top:2px;}
.mt-act form{margin:0;}
.mt-act .btn{padding:3px 6px;font-size:10.5px;}
.mt-act .btn.small{padding:3px 6px;font-size:10.5px;}

/* 异兽列表（v2.4）：一行两列。复用背包的 .item 卡片，只换外层排布 */
.beast-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.beast-list .item{margin-bottom:0;}

/* 两列卡片在 700px 以下挤成 330px/格，标签与按钮开始打架，回落单列 */
@media (max-width:700px){
  .mount-list,.beast-list{grid-template-columns:1fr;}
}

/* 出战位（账号级，顺序解锁） */
.mslot-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px;margin:10px 0 12px;
}
.mslot{
  display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;
  border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:6px;
  padding:9px 10px;background:#100c09;min-height:132px;
}
.mslot.on{border-color:rgba(201,162,77,.4);background:rgba(201,162,77,.05);}
.mslot.empty{border-style:dashed;border-left-width:1px;}
.mslot.buy{
  border-style:dashed;border-left-color:#7a6330;background:#120e08;
}
/* 钻石位（v1.9.220）：淡蓝虚线，和积分位那圈土金色分开 ——
   两种币种的位长得一样的话，玩家会以为「◆15000」也是花积分。 */
.mslot.buy.dia{
  border-left-color:#3a7a92;border-color:rgba(99,200,224,.28);
  background:linear-gradient(180deg,rgba(28,62,80,.35),#100c09);
}
.mslot.lock{opacity:.45;}
.mslot.pr1{border-left-color:#5a5048;}
.mslot.pr2{border-left-color:#3a6ab0;}
.mslot.pr3{border-left-color:#b09020;}
.mslot.pr4{border-left-color:#7a3ab0;}
.mslot.pr5{border-left-color:#1f8a52;}
.ms-head{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:10px;}
.ms-ico{
  width:42px;height:42px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#f0e0bc;border:1px solid var(--line2);
  background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.ms-name{font-size:12.5px;display:flex;flex-direction:column;align-items:center;gap:2px;}
.ms-meta{font-size:10.5px;}
.ms-bonus{color:#8fc98a;font-size:11px;line-height:1.45;}
.ms-act{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:auto;}
.ms-act form{margin:0;}
.ms-price{color:var(--gold);font-size:11.5px;}
.ms-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:#5f564c;font-size:12px;min-height:42px;
}
/* 等级门槛提示 */
.lock-box{
  display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;
  border:1px dashed rgba(201,162,77,.32);border-radius:8px;
  background:rgba(201,162,77,.04);padding:26px 18px;margin:14px 0 10px;
}
.lock-box b{font-size:15px;color:#e8d3a2;letter-spacing:1px;}
.lock-box span{max-width:420px;line-height:1.7;font-size:12px;}

/* ---------- 副本 ---------- */
/* 副本卡片铺场景图（v1.9.115）
   做法不是「整卡压暗」，而是**画面只从右边渗进来**：
   ::before 只占右侧 66%，左缘用 mask 渐隐，左 34% 完全留给卡片底色 ——
   那个区域的正文/奖励文字等于还在纯色面板上，可读性不受任何影响。
   图本身已由 design/dungeon-bg/process_bg.py 压到 P75 24~36%，
   这里只再轻压一层顶部（压住右上角的冷却/次数）和底部（压住奖励行）。 */
.dungeon-card{
  position:relative;overflow:hidden;
  background:#100c08;border-color:rgba(52,42,30,.85);
}
.dungeon-card::before{
  content:'';position:absolute;top:0;right:0;bottom:0;left:34%;z-index:0;
  background:center center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 24%,rgba(0,0,0,.52) 50%,#000 82%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 24%,rgba(0,0,0,.52) 50%,#000 82%);
}
.dgn1::before{background-image:url(../img/dg/dg1.jpg);}  /* 血色城堡 */
.dgn2::before{background-image:url(../img/dg/dg2.jpg);}  /* 恶魔广场 */
.dgn3::before{background-image:url(../img/dg/dg3.jpg);}  /* 亚特兰蒂斯之心 */
.dgn4::before{background-image:url(../img/dg/dg4.jpg);}  /* 天空之塔 */
.dgn5::before{background-image:url(../img/dg/dg5.jpg);}  /* 龙之巢穴 */
.dgn6::before{background-image:url(../img/dg/dg6.jpg);}  /* 混沌裂缝 */
/* v1.9.116 高阶副本，图在 design/dungeon-bg/ 生成后由 process_bg.py 压到 P75 0.25~0.33 */
.dgn7::before{background-image:url(../img/dg/dg7.jpg);}   /* 荒漠王陵 */
.dgn8::before{background-image:url(../img/dg/dg8.jpg);}   /* 冰封王座 */
.dgn9::before{background-image:url(../img/dg/dg9.jpg);}   /* 亡者圣殿 */
.dgn10::before{background-image:url(../img/dg/dg10.jpg);} /* 深渊王座 */
.dungeon-card::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(13,10,7,.62),rgba(13,10,7,0) 20%),
    linear-gradient(0deg,rgba(13,10,7,.60),rgba(13,10,7,0) 30%),
    linear-gradient(90deg,rgba(13,10,7,0) 30%,rgba(13,10,7,.10) 55%,rgba(13,10,7,.22) 100%);
}
.dungeon-card > *{position:relative;z-index:1;}
.dungeon-card .bt{border-bottom-color:rgba(201,162,77,.16);}
/* 奖励行会压在图区上，提亮一档补对比度（--dim 在图上只有 3:1） */
.dungeon-card .dg-reward{color:#b6a68f;}
/* 窄屏：卡片矮、图区窄，渐隐边会横穿正文 —— 直接铺满再整体重压 */
@media (max-width:820px){
  .dungeon-card::before{
    left:0;background-position:center top;
    -webkit-mask-image:none;mask-image:none;
  }
  .dungeon-card::after{
    background:
      linear-gradient(180deg,rgba(13,10,7,.84) 0%,rgba(13,10,7,.76) 45%,rgba(13,10,7,.88) 100%);
  }
}
.dungeon-card.lock{opacity:.55;}
.floor-strip{display:flex;gap:6px;overflow-x:auto;margin:10px 0;padding-bottom:4px;}
.floor{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  border:1px solid var(--line);border-radius:5px;background:#0f0c08;padding:6px 10px;min-width:86px;
}
.floor b{
  font-size:10px;color:var(--gold);border:1px solid var(--line2);border-radius:50%;
  width:16px;height:16px;line-height:14px;text-align:center;font-weight:normal;
}
.floor span{font-size:11.5px;color:var(--text);white-space:nowrap;}
.floor em{font-size:10px;font-style:normal;}
.floor.boss{border-color:rgba(192,80,77,.45);background:rgba(192,80,77,.07);}
.floor.boss span{color:#e8a09e;}
.dg-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
}
.dg-foot form{margin:0;}
.dg-floor{
  color:var(--gold);font-size:11px;letter-spacing:1px;margin-top:8px;
  border-bottom:1px dashed rgba(52,42,30,.6);padding-bottom:2px;
}
.dg-log{max-height:320px;}

/* ---------- 交易行 ---------- */
.mk-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:6px 0;}
.mk-form-main{flex:1;min-width:240px;}
.mk-form-price{flex:0 0 118px;}
.mk-form label{margin-top:0;}
.mk-search{display:flex;gap:6px;margin:0 0 12px;}
.mk-search input{flex:0 1 260px;width:auto;}
.mk-list{display:flex;flex-direction:column;gap:9px;}
/* v1.9.80：每件商品独立成卡。原来只有一条虚线分隔，长列表里分不清哪行属于哪件，
   价格又贴在右边，视线要横跨一整屏才能把「这件」和「多少钱」对上。 */
.mk-row{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-radius:6px;background:#100c09;padding:10px 12px;
  transition:border-color .15s,background .15s;
}
.mk-row:hover{border-color:var(--line2);background:#140f0a;}
.mk-item{flex:1;min-width:0;}
.mk-item .item{margin-bottom:0;}
.mk-side{flex:0 0 165px;display:flex;flex-direction:column;gap:5px;align-items:flex-end;text-align:right;}
.mk-price{font-size:16px;letter-spacing:.3px;}
.mk-side form{margin:0;}
/* 右列按钮撑满：只给「购买」这种单按钮表单，竞拍那个是 input + 按钮，撑满会溢出 */
.mk-side form:not(.bid-form) .btn{width:100%;}
/* 折叠框内的筛选行去掉多余下边距 */
.mk-more .fold-body > .filter:last-child{margin-bottom:0;}
.mk-more > summary b{margin-left:4px;}
.mk-put{margin-top:4px;}
.mk-mine{display:flex;flex-direction:column;gap:6px;margin-bottom:4px;}
.mk-mine-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:5px;padding:8px 11px;background:#100c09;
}
.mk-mine-row form{margin:0;}
.mkm-main{flex:1;min-width:170px;}

@media (max-width:820px){
  .deploy-slots{grid-template-columns:1fr;}
  .codex{grid-template-columns:1fr 1fr;}
  /* .pet-row / .pet-act / .mount-row / .mt-act 的全宽换行已提升到基础样式
     （列表本身就是多列网格），此处不再重复 */
  .mslot-grid{grid-template-columns:1fr 1fr;}
  .ride-slot{flex-wrap:wrap;}
  .subnav{gap:5px;padding:6px 8px;}
  .subnav a{flex:1 1 auto;justify-content:center;padding:5px 8px;}
  /* 页签多的组（「角色」组 10 项）折成多行时，均分会让最后一行单独一个页签
     被拉成整条大金按钮，看着像布局坏了（.subnav-set 踩过同一个坑）。
     这项按内容宽度排，放不下就换行，不拉伸。 */
  .subnav-many a{flex:0 1 auto;padding:5px 9px;}
  /* 三级栏（v1.9.286）：窄屏不再左缩进（横向不留白），两个页签等宽撑满 */
  .subnav.sub2{margin-left:0;padding:4px 8px;}
  .subnav.sub2 a{flex:1 1 0;padding:4px 6px;font-size:11px;}
  /* v1.9.200 设置页 5 个页签：窄屏隐掉图标、收紧内边距。
     上面那条 flex:1 1 auto 会让第 5 个页签单独换行后撑满整行（像布局坏了）；
     这里改成按内容宽度，5 个正好一行，放不下时换行也不拉伸。 */
  .subnav-set a{flex:0 1 auto;padding:5px 7px;font-size:11px;}
  .subnav-set a i{display:none;}
  .mk-row{flex-direction:column;}
  /* v1.9.80：窄屏下右列改「价格占左 + 信息靠右 + 按钮独占一行」。
     原来是一整行 space-between，竞拍那行的「最低加价 / 剩余 / 输入框 / 出价」
     会被摊到屏幕两端，输入框还会被 flex:1 拉到半屏宽。 */
  .mk-side{
    flex:none;width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:flex-start;gap:5px 10px;text-align:left;
  }
  .mk-side .mk-price{margin-right:auto;}
  .mk-side > form{flex:1 1 100%;}
  .mk-form-price{flex:1 1 100%;}
  .gacha-act .btn{flex:1 1 auto;}
  .dg-log{max-height:260px;}
}
@media (max-width:400px){
  .codex{grid-template-columns:1fr;}
}

/* ==========================================================
   v1.2.0 新增：洗练 / 宝石 / 拍卖 / 挂机 / 日常 / 公会 / 协同
   ========================================================== */

/* ---------- 通用表格 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0;}
.tbl th{
  text-align:left;color:var(--dim);font-weight:400;letter-spacing:1px;
  padding:6px 8px;border-bottom:1px solid var(--line2);
}
.tbl td{padding:6px 8px;border-bottom:1px dashed rgba(52,42,30,.55);}
.tbl tr:last-child td{border-bottom:none;}
/* ---------- 页签 ---------- */
.tabs{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  margin-bottom:12px;padding:5px;background:var(--panel);
  border:1px solid var(--line);border-radius:7px;
}
.tab{
  padding:7px 20px;border-radius:5px;font-size:13px;letter-spacing:2px;
  color:var(--dim);border:1px solid transparent;
}
.tab:hover{color:var(--hl);}
.tab.on{
  color:#fdf3dd;background:linear-gradient(180deg,#8a6a2a,#6b4f1c);
  border-color:#a8853c;
}
.tab-right{margin-left:auto;display:flex;gap:12px;align-items:center;padding-right:8px;font-size:12px;}
.stone{color:#8fd0c8;}

/* ---------- 洗练词条 ---------- */
.rf-line{margin:3px 0 4px;font-size:12px;display:flex;gap:7px;flex-wrap:wrap;}
.rf{padding:0 6px;border-radius:3px;line-height:17px;border:1px solid var(--line2);}
.rg1{color:#a9a094;border-color:#4a4238;}
.rg2{color:#7fc47a;border-color:rgba(95,174,90,.45);}
.rg3{color:#6fa8e0;border-color:rgba(74,158,255,.4);}
.rg4{color:#c08ff0;border-color:rgba(168,111,224,.5);}

/* ---------- 宝石 ---------- */
.gem-bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:10px 0;}
.gem-item{
  position:relative;padding:9px 11px;border-radius:6px;
  background:#100c09;border:1px solid var(--line);border-left:3px solid var(--line2);
}
.gem-item b{display:block;font-size:13px;font-weight:500;}
.gem-item span{display:block;font-size:11px;color:var(--dim);}
.gem-item em{position:absolute;right:9px;top:8px;font-style:normal;font-size:11px;color:var(--dim);}
/* 宝石合成按钮（v1.9.28）：挤在一行里，别把卡片撑高 */
.gem-fuse{display:inline-block;margin:6px 4px 0 0;}
.gem-fuse .btn{padding:2px 7px;font-size:11px;}
.g1{border-left-color:#c0504d;} .g1 b{color:#e08a86;}
.g2{border-left-color:#4a9eff;} .g2 b{color:#8cc4ff;}
.g3{border-left-color:#5fae5a;} .g3 b{color:#9fdc9a;}
.g4{border-left-color:#c9a24d;} .g4 b{color:#e8c877;}
.g5{border-left-color:#a86fe0;} .g5 b{color:#c9a6f0;}

.slots{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px;}
.slot{
  flex:1 1 120px;min-width:110px;min-height:56px;
  display:flex;flex-direction:column;gap:3px;justify-content:center;
  padding:6px 9px;border-radius:5px;font-size:11px;
  border:1px dashed var(--line2);background:#0f0c08;margin:0;
}
.slot.locked{color:#5a5048;align-items:center;justify-content:center;font-size:11px;}
.slot.empty{color:var(--dim);}
.slot.empty select{font-size:11px;padding:4px 5px;width:100%;}
.slot.filled{border-style:solid;border-width:1px;border-left-width:3px;}
.slot.filled b{font-size:12px;font-weight:500;}
.slot.filled span{color:var(--dim);font-size:10px;}
.slot.filled .btn{align-self:flex-start;}
.gem-row .fi-main{flex:1 1 100%;}

/* ---------- 打字机战报 ---------- */
.typer-bar{
  display:flex;gap:5px;align-items:center;justify-content:flex-end;
  margin-bottom:6px;
}
.typer-btn{
  background:#1b1610;border:1px solid var(--line2);color:var(--dim);
  font-size:11px;padding:2px 10px;border-radius:3px;cursor:pointer;font-family:inherit;
}
.typer-btn:hover{color:var(--hl);border-color:var(--gold);}
.typer-btn.on{color:#fdf3dd;background:#6b4f1c;border-color:#a8853c;}
.typer-bar.done .typer-btn:first-child{display:none;}
.battlelog[data-typewriter] p{opacity:1;}
.battlelog p.typing::after{
  content:"▍";color:var(--gold);animation:typer-blink .8s steps(1) infinite;
  margin-left:1px;
}
@keyframes typer-blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .battlelog p.typing::after{display:none;}
}

/* ---------- 挂机 ---------- */
.idle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;}
.idle-box{
  padding:12px 14px;border-radius:7px;background:#100c09;
  border:1px solid var(--line);text-align:center;
}
.idle-box b{display:block;font-size:19px;font-weight:500;margin:3px 0;letter-spacing:1px;}
.idle-box span{display:block;font-size:11px;}

/* ---------- 每日任务 / 签到 ---------- */
.sign-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0;}
.sign-cell{
  padding:8px 6px;border-radius:6px;text-align:center;
  background:#100c09;border:1px solid var(--line);font-size:10px;
}
.sign-cell b{display:block;font-size:11px;color:var(--dim);margin-bottom:3px;letter-spacing:0;}
.sign-cell span{display:block;color:#6b6055;line-height:1.4;min-height:28px;}
.sign-cell.past{opacity:.45;}
.sign-cell.now{border-color:var(--gold);background:rgba(201,162,77,.09);}
.sign-cell.now b{color:var(--hl);}
.sign-cell.now span{color:var(--text);}
.sign-cell em{display:block;margin-top:3px;font-style:normal;}

.daily-list{display:flex;flex-direction:column;gap:8px;}
.daily-row{
  display:flex;gap:12px;align-items:center;
  padding:10px 12px;border-radius:6px;background:#100c09;border:1px solid var(--line);
}
.daily-row.done{opacity:.55;}
.dl-ico{
  flex:0 0 34px;height:34px;line-height:34px;text-align:center;border-radius:50%;
  background:var(--panel2);border:1px solid var(--line2);color:var(--gold);font-size:15px;
}
.dl-main{flex:1;min-width:0;}
.dl-name{font-size:13px;margin-bottom:2px;display:flex;gap:7px;align-items:center;}
.dl-desc{margin-bottom:2px;}
.dl-act{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end;}
.dl-reward{line-height:1.5;font-size:11px;}
.dl-act form{margin:0;}

.chest-box{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  /* v1.9.150：从列表下方挪到标题下方 —— 它是这一页的「总奖励」，
   * 位置在任务列表之上才符合「先看目标再看待办」的阅读顺序。
   * 所以 margin 从「上 14」改成「下 12」，别让标题和它之间空一截。 */
  margin:0 0 12px;padding:12px 14px;border-radius:7px;
  border:1px dashed var(--gold);background:rgba(201,162,77,.06);
}
.chest-box.done{opacity:.5;border-color:var(--line2);background:#100c09;}
.chest-main b{color:var(--hl);letter-spacing:1px;margin-right:8px;}

/* ---------- 公会 ---------- */
.g-notice{margin:12px 0;padding:10px 12px;border-radius:6px;background:#100c09;border:1px solid var(--line);}
.g-notice b{color:var(--gold);font-size:12px;letter-spacing:1px;}
.g-notice p{font-size:12px;color:var(--dim);margin:4px 0 0;}
.g-notice-form{display:flex;gap:6px;margin-top:8px;}
.g-notice-form input{flex:1;padding:6px 9px;font-size:12px;}
.g-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center;}
.g-act form{margin:0;}
/* 捐献次数输入框：窄一点，别把一排按钮挤下去 */
.g-act input.num-in{width:64px;padding:4px 6px;font-size:12px;text-align:right;}

.gboss-card{border-color:rgba(192,80,77,.35);}
.boss-hp{margin:12px 0;}
.bar.hp i{background:linear-gradient(90deg,#7a2b2b,#c0504d);}
.team-slots{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.team-slot{
  flex:1 1 140px;padding:9px 12px;border-radius:6px;
  background:#100c09;border:1px solid var(--line);border-left:3px solid var(--line2);
}
.team-slot.leader{border-left-color:var(--gold);}
.team-slot b{display:block;font-size:13px;font-weight:500;}
.form-row{display:flex;gap:8px;margin:10px 0;}
.form-row input{flex:1;}

/* ---------- 宠物系别 / 技能 / 协同 ---------- */
.el-tag{
  font-size:10px;padding:0 5px;border-radius:3px;line-height:15px;
  border:1px solid var(--line2);display:inline-block;
}
.el1{color:#e08a86;border-color:rgba(192,80,77,.45);}
.el2{color:#8cc4ff;border-color:rgba(74,158,255,.4);}
.el3{color:#9fdc9a;border-color:rgba(95,174,90,.45);}
.el4{color:#d8b06a;border-color:rgba(201,162,77,.4);}
.el5{color:#f0e0a0;border-color:rgba(232,200,119,.45);}
.el6{color:#c9a6f0;border-color:rgba(168,111,224,.5);}
.el0{color:#6b6055;}

.ds-skill{font-size:10px;color:#c9a6f0;margin:2px 0 4px;}
.pet-skill{color:#c9a6f0;margin:1px 0;}
.pet-skill b.sk,.ci-skill b.sk{color:#c9a6f0;font-weight:500;}
.ci-skill{margin-top:1px;}

.syn-box{
  margin-top:12px;padding:10px 12px;border-radius:6px;
  background:#100c09;border:1px solid var(--line);
}
.syn-line{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:3px 0;font-size:12px;}
.syn-line b{color:var(--gold);font-weight:500;min-width:64px;letter-spacing:1px;}

.combo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:10px 0;}
.combo-item{
  padding:8px 10px;border-radius:6px;background:#100c09;
  border:1px solid var(--line);font-size:11px;
}
.combo-item b{display:block;font-size:12px;font-weight:500;color:var(--text);margin-bottom:2px;}
.combo-item.on{border-color:var(--gold);background:rgba(201,162,77,.08);}
.combo-item em{display:inline-block;margin-top:4px;font-style:normal;}

/* ---------- 拍卖 ---------- */
.bid-form{display:flex;gap:4px;margin:0;}
.bid-form input[type=number]{
  width:88px;padding:4px 6px;font-size:12px;text-align:right;
}
.mk-price + .dim.small{line-height:1.5;}

/* ---------- 移动端 ---------- */
@media (max-width:820px){
  .idle-grid{grid-template-columns:1fr;}
  .sign-row{grid-template-columns:repeat(4,1fr);}
  .tabs{padding:4px;}
  .tab{padding:6px 13px;font-size:12px;letter-spacing:1px;}
  .tab-right{width:100%;justify-content:flex-end;padding:2px 6px 0;}
  .daily-row{flex-wrap:wrap;}
  .dl-act{width:100%;flex-direction:row;justify-content:space-between;align-items:center;}
  .slot{flex:1 1 100%;}
  /* v1.9.80：输入框别再抢满整行 —— 出价金额只有五六位数字，拉成半屏宽反而难看出该填多少 */
  .bid-form{width:100%;justify-content:flex-end;}
  .bid-form input[type=number]{flex:0 0 120px;width:120px;}
}

/* ==========================================================
   v1.3.0 新增：体力 / BOSS 次数 / 职业头像 / 技能树 / 组队独立页
   ========================================================== */

/* ---------- 职业头像 ---------- */
.job-avatar{
  display:block;flex:0 0 auto;border-radius:50%;object-fit:cover;
  background:#0c0906;border:1px solid rgba(201,162,77,.4);
  box-shadow:0 0 0 3px rgba(8,6,4,.92),0 4px 14px rgba(0,0,0,.55);
}
.ja1{box-shadow:0 0 0 3px rgba(8,6,4,.92),0 0 18px rgba(192,69,31,.4);}
.ja2{box-shadow:0 0 0 3px rgba(8,6,4,.92),0 0 18px rgba(74,124,224,.45);}
.ja3{box-shadow:0 0 0 3px rgba(8,6,4,.92),0 0 18px rgba(63,168,106,.4);}
.ja4{box-shadow:0 0 0 3px rgba(8,6,4,.92),0 0 18px rgba(198,210,226,.42);}  /* 魔剑士改银白镜面甲后，光色跟银白走；紫会与 .ja6 撞 */
.ja7{box-shadow:0 0 0 3px rgba(8,6,4,.92),0 0 18px rgba(200,110,50,.42);}  /* 预留：格斗家 赤铜橙 */
.ja8{box-shadow:0 0 0 3px rgba(8,6,4,.92),0 0 18px rgba(122,158,220,.45);}  /* 预留：梦幻骑士 幽蓝银 */
.ja5{box-shadow:0 0 0 3px rgba(8,6,4,.92),0 0 18px rgba(240,205,120,.45);}
.ja6{box-shadow:0 0 0 3px rgba(8,6,4,.92),0 0 18px rgba(168,62,96,.45);}
.char-head{
  display:flex;gap:13px;align-items:center;
  margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line2);
}
.ch-info b{font-size:16px;letter-spacing:1px;}
.ch-info .lv{color:var(--gold);font-size:12px;margin-left:6px;}
.rava{flex:0 0 auto;display:flex;align-items:center;}
/* 公会榜的头像位（v1.9.79）：公会没有职业，用名字首字做一个风格一致的小方块，
   尺寸对齐 job_avatar_html(·,34)，这样公会榜与角色榜的行高不会差一截。 */
.gava{
  width:34px;height:34px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:#1a1512;border:1px solid var(--line2);color:var(--hl);
}

/* ---------- 体力 / BOSS 次数（v1.9.100 紧凑版：两块并排、单块三行） ---------- */
.stamina-card{padding:10px 14px;}
.stamina-card .res-row{display:flex;gap:16px;}
.res-box{flex:1 1 0;min-width:0;}
.res-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:3px;font-size:12px;}
.res-top b{letter-spacing:1px;color:var(--hl);font-weight:500;white-space:nowrap;}
.res-top span{font-size:11px;color:var(--dim);white-space:nowrap;}
.res-tip{margin-top:3px;font-size:11px;line-height:1.5;color:var(--dim);}
/* 注意：修饰类不要用 .bt / .st —— .bt 是标题栏（flex + padding + border-bottom），
   撞上会把进度条撑成一条细线。这里用 stamina / boss 两个独立名。 */
/* 公会成员行的操作列（v1.9.106）：会长可能同时看到「设为副会长」和「移出」两个按钮，
   表格最后一列窄，用 flex 右对齐并允许换行，别把表格撑宽。 */
.gact{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap;}
.gact form{margin:0;}
.gact .btn{padding:2px 7px;font-size:10.5px;}

/* v1.9.105：体力 / BOSS 条加高到 16px，倒计时（或「已满」）从条下方挪进条内居中 ——
   原来 8px 的细条配条底一行小字，扫一眼时对不上号，也没法一眼看出还剩多久。 */
.bar.stamina{height:16px;}
.bar.stamina i{background:linear-gradient(90deg,#4e6516,#8fad3e);}
.bar.boss{height:16px;}
.bar.boss i{background:linear-gradient(90deg,#6a2b1c,#c96d4d);}
/* 条内文案层：用 <em> 而不是 <span> —— 上面 `.bar span{}` 是给 HP/MP 百分比用的绝对定位规则，
   套在这里会把内层 [data-cd] 也铺满；文字要压得住右侧的亮绿/亮棕填充，所以给两道阴影。 */
.bar-tip{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:10.5px;line-height:1;letter-spacing:.3px;
  color:#f7efdd;
  /* 三道阴影：1px 投影 + 0 半径描边 + 外扩柔光。条是亮绿 / 亮棕，白字不加描边会糊在底色里 */
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.55);
}
.bar-tip b{font-weight:400;}
.wallet .stam{color:#a8c94d;}
.wallet .btk{color:#c96d4d;}

.mob.cooling{opacity:.62;}

/* ---------- 技能树 ---------- */
.skill-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px;margin:9px 0;}
.skill-item{
  padding:8px 10px;border-radius:6px;background:#100c09;
  border:1px solid var(--line);border-left:3px solid var(--line2);
}
.skill-item.lock{opacity:.55;}
.skill-item.on{border-left-color:var(--gold);background:rgba(201,162,77,.05);}
.skill-item p{margin:3px 0 0;line-height:1.5;}
.sk-head{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px;}
.sk-head b{font-size:13px;font-weight:500;}
.sk-kind{font-size:10px;padding:0 5px;border-radius:3px;line-height:15px;border:1px solid var(--line2);}
.sk-dmg{color:#e0a06a;border-color:rgba(224,160,106,.4);}
.sk-crit{color:#e08a86;border-color:rgba(192,80,77,.45);}
.sk-heal{color:#9fdc9a;border-color:rgba(95,174,90,.45);}
.sk-multi{color:#8cc4ff;border-color:rgba(74,158,255,.4);}
.sk-pierce{color:#d8b06a;border-color:rgba(201,162,77,.4);}
.sk-drain{color:#c9a6f0;border-color:rgba(168,111,224,.5);}
/* 技能等级栏（v1.9.68）：左边倍率、右边升级按钮 */
.sk-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:5px;
  padding-top:5px;border-top:1px dashed rgba(74,59,40,.7);}
.sk-foot form{margin:0;}

/* ---------- 说明框 / 表格高亮行 ---------- */
.note-box{
  margin-top:12px;padding:10px 12px;border-radius:6px;
  background:#100c09;border:1px dashed var(--line2);
}
.note-box b{color:var(--gold);font-size:12px;letter-spacing:1px;}
.note-box ul{margin:6px 0 0;padding-left:18px;}
.note-box li{font-size:11px;color:var(--dim);line-height:1.75;}
.note-box p{margin:5px 0 0;}
.row-cur td{background:rgba(201,162,77,.07);}

/* ---------- 组队 ---------- */
.team-slot.empty{
  border-left-color:var(--line2);border-style:dashed;
  display:flex;align-items:center;justify-content:center;
}

@media (max-width:820px){
  .stamina-card .res-row{gap:10px;}
  /* 两块始终并排 —— 之前这里是 flex:1 1 100%，窄屏会各占一整行，白占 60px 高度 */
  .res-box{flex:1 1 0;}
  .res-top b{letter-spacing:0;}
  .skill-list{grid-template-columns:1fr;}
  .char-head{gap:10px;}
}

/* ==========================================================
   v1.4.0：战斗演出 / 新属性配色 / 移动端菜单重构
   ========================================================== */

/* ---------- 战斗演出 ---------- */
.bstage{
  margin:14px 0;padding:12px;border-radius:9px;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% -10%,rgba(201,162,77,.09),transparent 62%),#0d0a07;
}
.bstage.boss{border-color:rgba(192,69,31,.4);}
.bs-head{
  text-align:center;font-size:11px;color:var(--dim);letter-spacing:1px;
  margin-bottom:10px;
}
.bs-head b{color:var(--hl);font-weight:500;}
.bs-arena{display:flex;align-items:center;gap:10px;}
.bf{
  position:relative;flex:1 1 0;min-width:0;
  display:flex;align-items:center;gap:9px;
  padding:8px 9px;border-radius:7px;
  border:1px solid var(--line);background:#100c09;
}
.bf.m{flex-direction:row-reverse;text-align:right;border-color:rgba(168,111,224,.3);}
.bstage.boss .bf.m{
  border-color:rgba(192,69,31,.55);
  box-shadow:inset 0 0 22px rgba(192,69,31,.16);
}
/* 【类名雷区】这里用 .mon 不是 .mob。
   `.mob` 是狩猎列表的怪物卡片（padding:9px 11px），撞上后内圆被挤到 30x34，
   图片只剩 28px —— 表现为「敌人头像小一圈、显示不全」（v1.9.114 修）。
   padding:0 再上一道保险：圆形容器里除了图不该有任何内边距。 */
.bf-face{flex:0 0 auto;display:flex;}
.bf-face.mon{
  width:52px;height:52px;border-radius:50%;padding:0;
  align-items:center;justify-content:center;
  font-size:21px;color:#f0dcc4;
  background:radial-gradient(circle at 34% 26%,#3a1f3f,#150d18);
  border:1px solid rgba(168,111,224,.42);
  text-shadow:0 0 14px rgba(190,140,255,.6);
  overflow:hidden;
}
.bf-face.mon img{width:100%;height:100%;display:block;}
/* ---------- 世界BOSS 立绘 ---------- */
.wb-hero{display:flex;gap:12px;align-items:stretch;margin:10px 0;}
.wb-fig{
  flex:0 0 112px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 6px;border-radius:8px;
  border:1px solid rgba(192,69,31,.4);
  background:radial-gradient(circle at 50% 22%,rgba(192,69,31,.14),transparent 70%),#100c09;
}
.wb-fig .wb-img{width:96px;height:96px;border-radius:50%;box-shadow:0 0 16px rgba(192,69,31,.28);}
.wb-fig-name{font-size:9px;color:var(--dim);letter-spacing:.5px;text-align:center;}
.wb-sum{flex:1 1 auto;min-width:0;margin:0;align-content:start;}
.bstage.boss .bf-face.mon{
  background:radial-gradient(circle at 34% 26%,#4d2018,#180b08);
  border-color:rgba(224,120,90,.5);color:#ffd3bd;
  text-shadow:0 0 14px rgba(255,120,80,.6);
}
.bf-side{flex:1 1 auto;min-width:0;}
.bf-name{
  font-size:12px;color:var(--text);margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bf-bar{
  position:relative;height:13px;margin-top:4px;
  background:#0a0806;border:1px solid var(--line);border-radius:3px;overflow:hidden;
}
.bf-bar i{display:block;height:100%;transition:width .22s linear;}
.bf-bar.hp i{background:linear-gradient(90deg,#7a1f1c,#c0504d);}
.bf.m .bf-bar.hp i{background:linear-gradient(90deg,#4b2470,#9a5fd0);}
.bf-bar.mp{height:5px;}
.bf-bar.mp i{background:linear-gradient(90deg,#1c3a6a,#4a9eff);}
.bf-bar span{
  position:absolute;inset:0;font-size:10px;line-height:13px;text-align:center;
  color:#efe4d0;text-shadow:0 1px 2px #000;letter-spacing:.4px;
}
.bs-vs{flex:0 0 auto;font-size:11px;color:var(--dim);letter-spacing:1px;}
.bf.hit{animation:bshake .26s ease-in-out;}
@keyframes bshake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  60%{transform:translateX(4px);}
  85%{transform:translateX(-2px);}
}
.bs-pop{
  position:absolute;left:50%;top:4px;z-index:3;
  font-size:15px;font-weight:600;color:#ffd9a0;
  text-shadow:0 2px 7px #000;white-space:nowrap;pointer-events:none;
  animation:bspop .85s ease-out forwards;
}
.bs-pop.crit{color:#ff9f6a;font-size:17px;}
.bs-pop.lethal{color:#e8b6ff;font-size:19px;text-shadow:0 0 12px rgba(200,130,255,.7),0 2px 7px #000;}
.bs-pop.miss{color:#9aa3ad;font-size:13px;letter-spacing:1px;}
/* v1.9.80：技能帧单独成一档 —— 比暴击更亮更大，配合 .sk-flash 的整区闪光 */
.bs-pop.skill{
  color:#ffe9a8;font-size:18px;font-weight:700;letter-spacing:.5px;
  text-shadow:0 0 14px rgba(232,200,119,.95),0 0 4px #fff2c0,0 2px 7px #000;
}
.bs-pop.skill-miss{color:#a89a7d;font-size:13px;letter-spacing:.5px;}
/* 技能 + 暴击 / 会心：保留技能的金色发光，但颜色回到暴击橙 / 会心紫，
 * 让「这一下是技能」和「这一下爆了」两个信息同时读得出来 */
.bs-pop.skill.crit{
  color:#ffb066;font-size:19px;
  text-shadow:0 0 14px rgba(255,150,80,.85),0 0 5px #ffe0c0,0 2px 7px #000;
}
.bstage.sk-flash .bs-arena{animation:skflash .55s ease-out;}
@keyframes skflash{
  0%{filter:none;}
  25%{filter:brightness(1.5) drop-shadow(0 0 10px rgba(232,200,119,.85));}
  100%{filter:none;}
}
@media (prefers-reduced-motion: reduce){
  .bstage.sk-flash .bs-arena{animation:none;}
}
.bs-pop.dmg{color:#ff8a7a;}
.bs-pop.heal{color:#8fe0a0;}
.bs-pop.thorn{color:#c9a6f0;}
.bs-pop.shield{color:#8cc4ff;font-size:12px;}
@keyframes bspop{
  0%{opacity:0;transform:translate(-50%,8px) scale(.82);}
  28%{opacity:1;transform:translate(-50%,-4px) scale(1.06);}
  100%{opacity:0;transform:translate(-50%,-28px) scale(1);}
}
.bs-log{
  margin-top:10px;padding-top:8px;max-height:196px;overflow-y:auto;
  border-top:1px dashed var(--line2);
}
.bs-log p{font-size:12px;line-height:1.75;margin:0 0 2px;color:var(--dim);}
.bs-log p:last-child{color:var(--text);}
.bs-ctl{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:6px;flex-wrap:wrap;}
.bs-speeds{display:inline-flex;gap:3px;margin-right:auto;}
.bs-hint{margin-left:2px;}

/* 会心 / 未命中 / 新词条配色 */
.lethal{color:#e8b6ff;font-weight:600;text-shadow:0 0 8px rgba(200,130,255,.45);}
.miss{color:#9aa3ad;}
.s-hit{color:#8fd0c8;}
.s-critdmg{color:#e0a06a;}
.s-lethal{color:#c9a6f0;}
.s-lethaldmg{color:#d8a8f0;}
/* 抗暴：防御向，用冷色与暴击的暖色区分 */
.s-critres{color:#7fb6e8;}

/* ---------- 移动端：底部主菜单 + 更多抽屉 ---------- */
/* 桌面下整套移动导航都不渲染，否则会挤进 .body 的横向 flex 里 */
.mnav{display:none;}

@media (max-width:820px){
  /* 桌面侧栏在手机上隐藏，改用 .mnav */
  .side{display:none;}
  .mnav{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;align-items:stretch;gap:2px;
    padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));
    background:rgba(16,12,9,.98);border-top:1px solid var(--line);
    backdrop-filter:blur(10px);
  }
  .mnav a,.mnav .mnav-tg{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;
    padding:6px 2px;border-radius:6px;color:var(--dim);
    font-size:10px;letter-spacing:0;position:relative;
  }
  .mnav a i,.mnav .mnav-tg i{font-style:normal;font-size:16px;line-height:1;opacity:.85;}
  .mnav a em,.mnav .mnav-tg em{font-style:normal;white-space:nowrap;}
  .mnav a.on{color:var(--hl);background:linear-gradient(180deg,rgba(201,162,77,.2),transparent);}
  .mnav a.on i{opacity:1;}
  .mnav u{
    position:absolute;top:2px;right:calc(50% - 20px);
    min-width:14px;height:14px;line-height:14px;padding:0 3px;
    border-radius:7px;background:var(--red);color:#fff;
    font-size:9px;text-decoration:none;text-align:center;
  }
  .mnav-cb{display:none;}
  .mnav-sheet{
    position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0px));
    z-index:59;display:none;
    padding:12px;background:rgba(18,14,10,.99);
    border-top:1px solid var(--line);border-radius:12px 12px 0 0;
    max-height:58vh;overflow-y:auto;
    box-shadow:0 -12px 30px rgba(0,0,0,.6);
  }
  .mnav-cb:checked ~ .mnav-sheet{display:block;}
  .mnav-cb:checked ~ .mnav-more{color:var(--hl);}
  .mnav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .mnav-grid a{
    flex-direction:column;gap:3px;padding:10px 4px;
    border:1px solid var(--line);border-radius:7px;background:#100c09;
    font-size:11px;
  }
  .mnav-grid a i{font-size:17px;}
  .mnav-grid a.on{border-color:var(--gold);color:var(--hl);}
  .mnav-sheet h4{
    margin:0 0 8px;font-size:11px;color:var(--dim);letter-spacing:2px;font-weight:400;
  }
  .app{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));}

  /* 战斗演出移动端压缩 */
  .bs-arena{gap:6px;}
  .bf{padding:6px 7px;gap:6px;}
  .bf-face.mon{width:42px;height:42px;font-size:17px;}
  .bf .job-avatar{width:40px !important;height:40px !important;}
  .bs-log{max-height:170px;}
  .bs-vs{font-size:9px;}
}
@media (max-width:400px){
  .mnav-grid{grid-template-columns:repeat(3,1fr);}
}

.bs-title{margin:12px 0 0;letter-spacing:1px;}

/* ==========================================================
   v1.5.1：顶栏精简（货币条移入设置页）+ 设置页
   ========================================================== */

/* ---------- 顶栏右侧按钮组（v1.9.241） ----------
 * 邮件 / 切换 / 设置三颗按钮包在一个 .top-act 里整组右对齐。
 * 以前只有 `.top-sw{margin-left:auto}` —— auto 边距只把那颗「切换」推到右边，
 * 前面的「邮件」留在原地，于是中间空出一大截（玩家报的正是这个）。
 * 现在 auto 边距挂在整组上，三颗之间只隔 gap，永远贴在一起。 */
.top-act{
  flex:0 0 auto;margin-left:auto;
  display:flex;align-items:center;gap:8px;
}
.top-set{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:6px 13px;border-radius:6px;
  border:1px solid var(--line);background:rgba(201,162,77,.04);
  color:var(--dim);font-size:10px;letter-spacing:1px;
  transition:color .15s,border-color .15s,background .15s;
}
.top-set i{
  font-style:normal;font-size:17px;line-height:1;color:var(--gold);
  transition:transform .3s;
}
.top-set em{font-style:normal;}
.top-set:hover{color:var(--hl);border-color:var(--gold);background:rgba(201,162,77,.1);}
.top-set:hover i{transform:rotate(60deg);}
.top-sw:hover i{transform:rotate(180deg);}

/* ---------- 区服切换（v1.9.227 / 位置改于 v1.9.243） ----------
 * 纯 CSS 弹层：checkbox + 兄弟选择器，不引 JS。
 * 这样在禁用脚本的浏览器里、以及快照工具里都能正常展开（快照工具会点不开 JS 弹层）。
 * 单区部署整段 DOM 不输出，这些样式不会被命中。
 *
 * v1.9.243：按钮从「品牌副标题旁边」挪进右上角按钮组（邮件左边），
 * 所以定位锚点从 .brand 换成 .srv-sw —— 勾选框、遮罩、弹层都包在 .srv-sw 里，
 * 兄弟选择器关系不变；弹层改 right:0，贴着屏幕右边展开，不会顶出去。 */
.srv-sw{position:relative;display:flex;align-items:center;flex:0 0 auto;align-self:center;}
.brand{position:relative;}   /* 别的装饰仍可能挂绝对定位，别顺手删 */
.srv-cb{display:none;}
/* 区服胶囊（v1.9.271）
 * 原来 align-self:stretch + height:100%，把按钮拉成一根顶满顶栏的"柱"：
 * 旁边三颗 .top-set 是 6px 内边距的小方块，它却一直顶到上下边框，像被拉变形的输入框。
 * 现在改成垂直居中的胶囊，与按钮组同色系，左边加一颗绿色在线点 ——
 * 「我在哪个区」和「这个区是通的」一次说清，不用再靠边框粗细去猜。 */
.srv-open{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(201,162,77,.32);
  background:linear-gradient(180deg,rgba(201,162,77,.16),rgba(201,162,77,.04));
  color:var(--hl);font-size:12px;letter-spacing:.5px;
  transition:border-color .15s,background .15s,color .15s;
}
.srv-open .so-dot{
  flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--green);box-shadow:0 0 6px rgba(95,174,90,.8);
}
.srv-open i{
  font-style:normal;font-size:9px;line-height:1;opacity:.6;
  transition:transform .2s,opacity .15s;
}
.srv-open:hover{
  border-color:rgba(201,162,77,.65);color:#f6e6bd;
  background:linear-gradient(180deg,rgba(201,162,77,.26),rgba(201,162,77,.09));
}
.srv-open:hover i{opacity:1;transform:translateY(1px);}
.srv-mask{display:none;}
.srv-cb:checked ~ .srv-mask{
  display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:55;
}
.srv-pop{
  display:none;position:absolute;right:0;left:auto;top:calc(100% + 8px);z-index:60;
  width:250px;max-width:calc(100vw - 36px);padding:10px;
  background:linear-gradient(180deg,#221a12,#161110);
  border:1px solid var(--line2);border-radius:8px;
  box-shadow:0 14px 34px rgba(0,0,0,.65);
}
.srv-cb:checked ~ .srv-pop{display:block;}
.srv-pop h4{margin:0 0 6px;font-size:10px;letter-spacing:2px;color:var(--dim);font-weight:400;}
.srv-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 9px;border-radius:5px;border:1px solid transparent;
  color:#cbbfae;font-size:13px;letter-spacing:1px;text-decoration:none;
}
.srv-item b{flex:1;font-weight:400;}
.srv-item:hover{background:rgba(201,162,77,.08);border-color:var(--line2);}
.srv-item.on{border-color:rgba(201,162,77,.5);background:rgba(201,162,77,.12);color:var(--hl);}
.srv-item.lock{opacity:.45;cursor:not-allowed;}
.srv-tag{font-size:10px;padding:0 5px;border-radius:3px;border:1px solid rgba(201,162,77,.4);color:var(--hl);}
.srv-tag.off{color:#8a8177;border-color:var(--line2);}
.srv-cur-mark{font-size:10px;color:var(--gold);}

/* ---------- 登录 / 注册页的区选择（v1.9.232） ----------
 * 顶栏切换器只在有角色时输出，未登录的新玩家看不到它 ——
 * 于是在登录框里再放一排 chip。同样是纯链接（切区只写 cookie），不引 JS。 */
.srv-pick{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px dashed var(--line2);
}
.srv-pick .sp-t{font-size:11px;letter-spacing:2px;color:var(--dim);margin-right:2px;}
.srv-pick .sp-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:3px;text-decoration:none;
  border:1px solid var(--line2);color:#cbbfae;font-size:12px;letter-spacing:1px;
  transition:border-color .15s,background .15s,color .15s;
}
.srv-pick .sp-chip:hover{border-color:rgba(201,162,77,.5);background:rgba(201,162,77,.08);}
.srv-pick .sp-chip.on{border-color:rgba(201,162,77,.55);background:rgba(201,162,77,.14);color:var(--hl);}
.srv-pick .sp-chip em{font-style:normal;font-size:9px;padding:0 4px;border-radius:2px;
  border:1px solid rgba(201,162,77,.4);color:var(--hl);}
.srv-pick .sp-chip.lock{opacity:.45;cursor:not-allowed;border-style:dashed;}
.srv-pick .sp-chip.lock i{font-style:normal;font-size:9px;color:#8a8177;}

/* ---------- 后台区服管理（v1.9.232） ---------- */
.srv-edit{padding:10px 0;border-bottom:1px dashed var(--line2);}
.srv-edit .se-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0;}
.srv-edit .se-id{font-size:13px;letter-spacing:1px;color:var(--hl);}
.srv-edit .se-id em{font-style:normal;font-size:10px;margin-left:6px;}
.srv-edit input[type=text]{flex:1;min-width:120px;}
/* 经济倍率行（v1.9.246）：label + 小输入框紧凑排开，不跟区名/角标抢 flex */
.srv-edit .se-rates label{flex:none;margin-right:2px;}
.srv-edit .se-rates input[type=text]{flex:0 0 auto;min-width:0;width:64px;}
.srv-edit .se-rates .dim{margin-left:2px;}
/* 播种检查行（v1.9.250）：状态标签 + 补种按钮，与其它行同款紧凑排布 */
.srv-edit .se-seed{gap:8px;}
.srv-edit .se-seed .tag{flex:none;}
.srv-edit .se-seed .btn.tiny{flex:none;margin-left:auto;}

/* ---------- 选区页（v1.9.233） ---------- */
.srv-zone{margin-top:12px;}
.srv-zone .sz-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:11px 12px;margin-bottom:8px;border-radius:6px;
  background:#100c09;border:1px solid var(--line);
}
.srv-zone .sz-row.cur{border-color:rgba(201,162,77,.5);background:rgba(201,162,77,.07);}
.srv-zone .sz-row.lock{opacity:.55;border-style:dashed;}
.srv-zone .sz-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.srv-zone .sz-name{font-size:14px;letter-spacing:1px;color:var(--hl);}
.srv-zone .sz-tag{font-size:10px;padding:1px 5px;border-radius:2px;
  border:1px solid rgba(201,162,77,.4);color:var(--gold);}
.srv-zone .sz-here{font-size:10px;padding:1px 5px;border-radius:2px;
  background:rgba(201,162,77,.18);color:var(--gold);}
.srv-zone .sz-cnt{font-size:11px;color:var(--dim);}
.srv-zone .sz-lock{font-size:11px;color:#c96d4d;}
.srv-zone .sz-r .btn{padding:5px 14px;font-size:12px;}

/* 后台引导里的命令行片段 */
.code-block{
  margin:6px 0 10px;padding:8px 11px;border-radius:5px;overflow-x:auto;
  background:#100c09;border:1px solid var(--line);border-left:2px solid var(--gold);
  color:var(--hl);font:12px/1.6 Consolas,Monaco,monospace;white-space:pre;
}
.btn.ghost{background:transparent;color:var(--dim);}
.btn.off{opacity:.45;cursor:not-allowed;}

/* ---------- 多区漏改审计（v1.9.232，仅 DEBUG + GM 可见） ---------- */
.srv-leak{
  margin:10px 14px;padding:10px 12px;overflow-x:auto;
  background:#2a1410;border:1px solid #7a3a33;border-radius:6px;
  color:#f0a49c;font:11px/1.7 Consolas,Monaco,monospace;white-space:pre-wrap;word-break:break-all;
}
.srv-leak b{color:#ffd0c8;letter-spacing:1px;}

/* ---------- 设置页：资源总览 ----------
 * v1.9.139：去掉 5 项冗余资源后只剩 7 格，3 列会排成 3+3+1（末尾一个孤格）→ 改 4 列排 4+3。
 * v1.9.140：再删「月卡 / 角色位」只剩 5 格，直接排一行 5 列。 */
.res-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:8px;margin-top:10px;
}
.res-cell{
  padding:9px 12px;border-radius:6px;
  background:#100c09;border:1px solid var(--line);
  border-left:2px solid var(--line2);
}
.res-cell span{display:block;font-size:11px;color:var(--dim);line-height:1.4;}
.res-cell span em{font-style:normal;font-size:10px;}
.res-cell b{
  display:block;font-size:15px;font-weight:500;
  margin-top:3px;letter-spacing:.5px;color:var(--text);
}
.res-cell b.gold{color:var(--gold);}
.res-cell b.dia{color:#63c8e0;}
.res-cell b.tick{color:#b6a0e0;}
.res-cell b.stn{color:#8fd0c8;}
.res-cell b.stam{color:#a8c94d;}
.res-cell b.btk{color:#c96d4d;}

/* ---------- 设置页：偏好 ---------- */
.pref-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 13px;border-radius:6px;
  background:#100c09;border:1px solid var(--line);
  margin-top:8px;
}
.pref-main{min-width:0;flex:1 1 auto;}
.pref-main b{display:block;font-size:13px;font-weight:500;margin-bottom:2px;color:var(--text);}
.pref-main span{display:block;line-height:1.5;}
.seg{
  flex:0 0 auto;display:inline-flex;gap:3px;padding:3px;
  border-radius:5px;background:#0b0906;border:1px solid var(--line2);
}
.seg button{
  font-family:inherit;font-size:12px;padding:4px 15px;border-radius:3px;
  background:none;border:1px solid transparent;color:var(--dim);cursor:pointer;
  transition:color .15s,background .15s,border-color .15s;
}
.seg button:hover{color:var(--hl);}
.seg button.on{
  color:#fdf3dd;border-color:#a8853c;
  background:linear-gradient(180deg,#8a6a2a,#6b4f1c);
}

/* ---------- 设置页：退出 ---------- */
.quit-box{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding:12px 14px;border-radius:7px;
  border:1px dashed rgba(192,80,77,.45);background:rgba(192,80,77,.06);
}
.qb-main{min-width:0;flex:1 1 auto;}
.qb-main b{display:block;font-size:13px;color:#e08a86;margin-bottom:2px;letter-spacing:1px;}
.qb-main span{display:block;line-height:1.5;}
.quit-box .btn{flex:0 0 auto;}

/* ---------- 移动端 ---------- */
@media (max-width:820px){
  .top-set{padding:5px 10px;font-size:9px;}
  .top-set i{font-size:15px;}
  .res-grid{grid-template-columns:repeat(2,1fr);gap:6px;}
  /* 2 列且格数为奇数时，最后一格横跨整行，别在右下角留个孤格 */
  .res-cell:last-child:nth-child(odd){grid-column:1 / -1;}
  .res-cell{padding:8px 10px;}
  .res-cell b{font-size:14px;}
  .pref-row{padding:10px 11px;gap:8px;}
  .seg{width:100%;}
  .seg button{flex:1 1 0;padding:6px 4px;}
  .quit-box{flex-direction:column;align-items:stretch;}
  .quit-box .btn{width:100%;text-align:center;}
}
@media (max-width:400px){
  .res-grid{grid-template-columns:1fr 1fr;}
  .res-cell b{font-size:13px;}
}

/* 移动端：整组按钮钉在右上角，不参与 pinfo 的换行流。
 * v1.9.241：改成整组定位 —— 原来是三颗各自 absolute + 手写 right:10 / 58 / 154，
 * 按钮宽度一改就错位（「邮件」因此离「切换」空出一大截）。现在只钉 .top-act 一个点，
 * 组内用 gap 排版；.brand 也只需给整组让出约 140px。 */
@media (max-width:820px){
  .topbar .top-act{position:absolute;top:7px;right:10px;}
  .topbar .top-set{padding:5px 9px;}
  /* v1.9.243：区服切换按钮也进了这一组（4 颗 ≈ 190px），让位同步加宽 */
  .brand{padding-right:200px;}
}

/* ---------- 后台配置中心：窄屏单列，输入框铺满 ---------- */
@media (max-width:820px){
  .cfg-grid{grid-template-columns:1fr;gap:12px;}
  .atabs{gap:5px;}
  .atab{padding:5px 9px;font-size:12px;}
  .act-row .btn, .admin-give .btn{flex:0 0 auto;}
}

/* ---------- v1.7 · 公会科技树 ---------- */
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 8px;}
.tech-item{
  border:1px solid var(--line);border-radius:5px;padding:9px 10px;background:#100c09;
  display:flex;flex-direction:column;gap:4px;
}
.tech-item.on{border-color:rgba(201,162,77,.45);background:#171208;}
.ti-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;}
.ti-ico{font-size:15px;}
.ti-desc{font-size:11.5px;line-height:1.6;}
.ti-next{font-size:11px;}

/* ---------- v1.7 · 装备套装 ---------- */
.set-tag{
  display:inline-block;padding:1px 6px;border-radius:3px;font-size:10.5px;
  border:1px solid currentColor;opacity:.9;vertical-align:middle;margin-left:4px;font-weight:400;
}
/* v1.9.202：套装效果并入装备栏，只列已激活的 —— 一条套装一行，档位跟名字后面 */
.set-box{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;}
.set-box > h3{
  font-size:13px;color:var(--gold);letter-spacing:1px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.set-box > h3 .dim{font-weight:normal;letter-spacing:0;}
.set-act{display:flex;flex-direction:column;gap:5px;margin-top:8px;}
.set-row{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  padding:6px 9px;border-radius:5px;background:#100c09;
  border:1px solid rgba(201,162,77,.26);font-size:11.5px;line-height:1.55;
}
.set-row .sr-hd{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding-top:1px;}
.set-row .sr-n{font-size:12.5px;letter-spacing:1px;}
.set-row .sr-c{color:var(--dim);font-size:10.5px;}
.set-row .sr-ts{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:2px;}
.set-row .sr-t{display:flex;align-items:baseline;gap:6px;color:#cbbfae;min-width:0;}
.set-row .sr-t .tag{flex:0 0 auto;}
.set-box .sr-note{margin:6px 0 0;}
.set-box details.fold{margin:8px 0 0;}
.st0{color:#9d9484;} .st1{color:#b9c4cc;} .st2{color:#e8c877;}
.st3{color:#7fd18a;} .st4{color:#8ab6ff;} .st5{color:#e08fd0;}
/* v2.2 战术四套：血契(吸血) / 荆棘(反伤) / 破军(破甲) / 壁垒(护盾) */
.st6{color:#d96a6a;} .st7{color:#c98a54;} .st8{color:#a98ce0;} .st9{color:#5fb8c9;}
/* v1.9.283 大天使五套：圣(生命反伤) / 暗(魔力护盾) / 血(攻击吸血) / 幽(防御抗暴) / 幻(会心) */
.a10{color:#f0d68a;} .a11{color:#8f8fd6;} .a12{color:#e8776f;}
.a13{color:#8fc7b0;} .a14{color:#e6a8dd;}
/* v1.9.284：天使套装名前置，左边不再留空、右边留一点与名字的间距 */
.set-tag.pre{margin-left:0;margin-right:5px;}

/* ---------- v1.7 · 月卡 ---------- */
.mcard-on{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0;}
.mo-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.perk-list{list-style:none;margin:10px 0 0;padding:0;font-size:12px;line-height:1.9;}
.perk-list li{padding-left:14px;position:relative;}
.perk-list li:before{content:'▸';position:absolute;left:0;color:var(--gold);}

/* ---------- v1.7 · 自动出售（v1.9.31 压成单行胶囊） ---------- */
.autosell-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0;}
.autosell-row .btn{margin:0;}
.seg-radio{display:inline-flex;gap:4px;flex-wrap:wrap;}
.seg-radio .sr{
  position:relative;display:inline-flex;align-items:center;padding:3px 10px;border:1px solid var(--line2);
  border-radius:999px;font-size:12px;line-height:1.6;cursor:pointer;background:#100c09;user-select:none;
}
.seg-radio .sr input{position:absolute;opacity:0;width:0;height:0;margin:0;}
.seg-radio .sr.on{border-color:var(--gold);background:#1d1508;}
.seg-radio .sr.on:before{content:'✓';margin-right:4px;color:var(--gold);font-size:11px;}
.seg-radio .sr:hover{border-color:#5a4520;}
.seg-radio .sr:active{transform:translateY(1px);}

/* ---------- v1.7 · 宠物融合 ---------- */
.fuse-group{border-top:1px solid var(--line);padding:8px 0;}
.fg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.fg-head .btn{margin-left:auto;}
/* 材料网格（v1.9.73）：一行多列，宽屏 4 列、平板 2~3 列、手机 1 列，5 只材料不再占 5 行 */
.fuse-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px;}
/* 批量融合：与「选材料手动融合」区分开，单独一条说明 + 按钮 */
.fuse-batch{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:8px;border-radius:6px;
  border:1px dashed rgba(201,162,77,.45);background:rgba(201,162,77,.05);
}
.fuse-batch span{flex:1 1 220px;min-width:0;}
/* 融合材料（v1.9.70 改成列表行）：一行一只，左边勾选、中间名字、右边等级 */
.fuse-chip{
  display:flex;align-items:center;gap:8px;
  padding:5px 10px;margin:0;border-radius:3px;font-size:12px;cursor:pointer;letter-spacing:0;
  background:rgba(255,255,255,.012);border:1px solid transparent;
  border-left:3px solid var(--line2);transition:background .15s,border-color .15s;
}
.fuse-chip:hover{background:rgba(201,162,77,.07);border-color:rgba(201,162,77,.28);border-left-color:var(--gold);}
.fuse-chip:has(input:checked){
  background:rgba(201,162,77,.13);border-color:rgba(201,162,77,.5);border-left-color:var(--hl);
}
.fuse-chip input{margin:0;flex:0 0 14px;width:14px;height:14px;}
.fc-ico{flex:0 0 20px;text-align:center;font-size:14px;}
/* 名字按内容宽度，品质标签紧跟其后；多余空间全部留给右侧等级，避免名字和标签被拉成两半 */
.fc-name{flex:0 1 auto;min-width:0;max-width:200px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fc-tag{
  flex:0 0 auto;font-size:10px;line-height:14px;padding:0 5px;border-radius:3px;
  border:1px solid var(--line2);color:var(--dim);
}
.fc-meta{flex:0 0 auto;font-size:10.5px;min-width:52px;text-align:right;margin-left:auto;}
/* 品质色（与图鉴的 pr1~pr5 同色系，这里只用于左侧色条与标签描边） */
.fuse-chip.pr1{border-left-color:#7d7d7d;}
.fuse-chip.pr2{border-left-color:#5fae5a;}
.fuse-chip.pr3{border-left-color:#4a9eff;}
.fuse-chip.pr4{border-left-color:#a86fe0;}
.fuse-chip.pr5{border-left-color:#e8c877;}
.fc-tag.pr1{color:#9a9a9a;border-color:rgba(125,125,125,.5);}
.fc-tag.pr2{color:#8fd08a;border-color:rgba(95,174,90,.5);}
.fc-tag.pr3{color:#8cc4ff;border-color:rgba(74,158,255,.5);}
.fc-tag.pr4{color:#c9a6f0;border-color:rgba(168,111,224,.55);}
.fc-tag.pr5{color:#e8c877;border-color:rgba(232,200,119,.55);}
@media (max-width:620px){
  /* 窄屏固定两列；品质标签在同组内每行都重复，收起来换出名字的宽度 */
  .fuse-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;}
  .fuse-chip{padding:6px 8px;gap:6px;}
  .fc-tag{display:none;}
  .fc-meta{min-width:44px;}
  /* 窄屏：按钮独占一行，说明整行铺开，否则说明被按钮压成三行 */
  .fuse-batch span{flex:1 1 100%;}
}

/* ---------- v1.7 · 竞技赛季 ---------- */
.season-claim{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px solid rgba(201,162,77,.45);background:#171208;border-radius:5px;padding:10px 12px;margin:8px 0;
}
.ok-t{color:#6cbf5a;} .bad-t{color:#d9534f;}

/* 后台表格：6 列 */
.admin-table.c6 .at-head, .admin-table.c6 .at-row{
  grid-template-columns:76px 96px 1.1fr 1fr 1.8fr 84px;min-width:660px;font-size:11.5px;
}

/* ---------- v1.7 · 窄屏 ---------- */
@media (max-width:820px){
  .tech-grid{grid-template-columns:1fr;}
  .season-claim{flex-direction:column;align-items:stretch;}
  .season-claim form .btn{width:100%;}
}

/* ---------- v1.8 · 选择 / 切换角色 ---------- */
/* 世界等级横幅（v1.9.271）：左边一个大数字（世界等级），中间口径说明，右边「我几转」。
   用金色渐变边框区分「这是服级信息，不是你的进度」—— 别让玩家以为自己又多了个头衔。 */
.wbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:12px 0 4px;padding:10px 12px;border-radius:6px;
  background:linear-gradient(90deg,rgba(201,162,77,.10),rgba(201,162,77,.03));
  border:1px solid rgba(201,162,77,.28);
}
.wbar.off{background:#100c09;border-color:var(--line);}
.wb-rank{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:74px;padding-right:12px;border-right:1px solid var(--line);
}
.wb-rank b{font-size:26px;line-height:1.1;color:var(--hl);font-weight:700;}
.wb-rank span{font-size:10px;color:var(--dim);letter-spacing:1px;}
.wb-main{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:3px;}
.wb-t{font-size:13px;color:var(--text);}
.wb-me{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;}
@media (max-width:520px){
  .wbar{gap:8px;padding:9px 10px;}
  .wb-rank{min-width:60px;padding-right:9px;}
  .wb-rank b{font-size:22px;}
  .wb-me{width:100%;padding-top:6px;border-top:1px solid var(--line);}
}
.char-list{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px;}
.char-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid var(--line);border-radius:5px;background:#100c09;text-decoration:none;color:inherit;
}
.char-item:hover{border-color:rgba(201,162,77,.4);}
.char-item.cur{border-color:rgba(201,162,77,.55);background:#171208;}
.ch-ava{flex:0 0 40px;width:40px;height:40px;border-radius:4px;overflow:hidden;background:#171310;}
.ch-ava .ch-ava-img{width:40px;height:40px;display:block;}
.ch-main{flex:1;min-width:0;}
.ch-name{font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
/* v1.9.94 角色名前缀「【公会名】」：排行榜与全服动态共用，暗金色小字不抢主角 */
.gtag{display:inline-block;font-size:11px;color:#a8853c;margin-right:5px;letter-spacing:0;
  max-width:9em;overflow:hidden;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap;}
.ch-meta{font-size:11.5px;line-height:1.7;color:var(--dim);}
/* v1.9.92 角色卡上的体力 / BOSS 次数：两枚小徽章，满值时数字转绿 */
.ch-res{display:flex;gap:14px;flex-wrap:wrap;margin-top:1px;}
.ch-res span{display:inline-flex;align-items:baseline;gap:3px;}
.ch-res b{font-weight:400;color:var(--hl);font-variant-numeric:tabular-nums;}
.ch-res b.ok-t{color:var(--green);}
.ch-res i{font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums;}
.ch-go{flex:0 0 auto;font-size:12px;color:var(--gold);}
/* 窄屏角色卡：右下角「进入 ›」占的位置比它传达的信息多，直接省掉（整卡可点） */
@media(max-width:520px){ .ch-go{display:none;} }

/* v1.8 的角色位大卡片样式已在 v1.9.190 删除：角色位改成选择角色卡里的
   一条七格状态条（.slot-bar / .sb-c），不再有独立的卡片网格。
   .sc-head / .sc-body 保留 —— 魂卡页还在用。 */
/* v1.9.91 战团（账号 · 选择角色页）：左边一个大等级数字，右边是经验条与进度文案 */
.corps-top{display:flex;gap:14px;align-items:center;margin:8px 0 10px;}
.corps-lv{flex:0 0 86px;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 6px;}
.corps-lv b{display:block;font-size:24px;line-height:1.15;color:var(--gold);font-weight:400;font-variant-numeric:tabular-nums;}
.corps-lv span{display:block;font-size:11px;color:var(--dim);letter-spacing:1px;}
.corps-bar{flex:1;min-width:0;}
.corps-bar .bar{margin:0 0 4px;}
.corps-bar p{margin:0;}
.corps-tbl th{white-space:nowrap;}
@media(max-width:520px){
  .corps-top{flex-direction:column;align-items:stretch;}
  .corps-lv{flex:none;}
}
.sc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;}
.sc-body{font-size:11px;line-height:1.6;}
.slot-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}


.sc-body b{white-space:nowrap;}

/* ==========================================================
   v1.9.3 · 图鉴 / 积分商城 / 公会战 / 自助删除
   ========================================================== */

/* ---------- 称号（顶栏 / 角色页 / 选角页） ---------- */
.ptitle{
  font-size:11px;color:#e8c877;opacity:.85;letter-spacing:1px;margin-right:4px;
  border:1px solid rgba(201,162,77,.35);border-radius:3px;padding:0 4px;
}

/* ---------- 设置页 · 删除角色 ---------- */
.danger-card{border-color:rgba(217,83,79,.35);}
.del-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;}
.del-row input{flex:1;min-width:140px;max-width:240px;}

/* ---------- 图鉴 ---------- */
.codex-bar{margin:10px 0 6px;}
.codex-ms{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:10px;}
.cm{
  border:1px solid var(--line);border-radius:5px;padding:8px 10px;background:#100c09;
  display:flex;flex-direction:column;gap:4px;
}
.cm.ready{border-color:rgba(201,162,77,.55);background:#171208;}
.cm.done{opacity:.66;}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13px;}
.cm-reward{font-size:11px;line-height:1.6;}

.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-top:8px;}
.cx{
  display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:5px;
  background:#0d0a08;padding:9px 10px;opacity:.62;
}
.cx.got{opacity:1;border-color:rgba(201,162,77,.35);background:#100c09;}
.cx-ico{
  flex:0 0 30px;width:30px;height:30px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-size:14px;background:#1a1512;border:1px solid var(--line2);color:var(--dim);
}
.cx.got .cx-ico{color:#e8c877;border-color:rgba(201,162,77,.4);}
.cx-ico.rf{color:#7fb6e8;}
.cx-main{flex:1;min-width:0;}
.cx-name{font-size:13px;line-height:1.5;}
.cx-desc{font-size:11px;line-height:1.6;margin:1px 0 3px;}
.cx-meta{font-size:11px;}

/* ---------- 积分商城（v1.9.75 重排） ----------
 * 旧卡片是「图标 / 文字 / 步进器+按钮」横向三等分：280px 的格子里
 * 文字只分到 90px，商品名、说明、限购全被挤断行，看着像坏掉了。
 * 现在改成上下两段 —— 头部（图标 + 名称 + 说明）占满整宽，
 * 底部一条（价格 / 限购 / 操作）用虚线隔开、两端对齐。
 * 这样格宽只决定「一行放几个」，不再直接决定文字能不能读。 */
.cr-sec{margin-top:16px;}
.cr-sec:first-of-type{margin-top:8px;}
.cr-sec-t{font-size:12px;color:var(--gold);letter-spacing:1px;}
.cr-sec-n{font-size:11px;color:var(--dim);line-height:1.7;margin-top:2px;}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:8px;}
.cr-item{
  display:flex;flex-direction:column;gap:9px;
  border:1px solid var(--line);border-radius:6px;background:#100c09;padding:10px 11px;
}
.cr-item.off{opacity:.6;}
.cr-head{display:flex;gap:10px;align-items:flex-start;min-width:0;}
.cr-ico{
  flex:0 0 36px;width:36px;height:36px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:15px;background:#1a1512;border:1px solid var(--line2);color:var(--hl);
}
.cr-info{flex:1;min-width:0;}
.cr-name{font-size:13px;line-height:1.5;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.cr-desc{font-size:11.5px;line-height:1.65;margin-top:2px;color:var(--dim);}
.cr-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  border-top:1px dashed rgba(74,59,40,.75);padding-top:8px;margin-top:auto;
}
.cr-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;min-width:0;}
.cr-coin{color:var(--hl);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.5px;}
.cr-limit{font-size:11px;color:var(--dim);white-space:nowrap;}
.cr-act{flex:0 0 auto;display:flex;align-items:center;margin-left:auto;}
.cr-act .btn{padding:4px 11px;}
/* 份数 > 1 才出现的合计金额（buy.js 控制显隐） */
.buy-sum{font-size:11px;color:var(--hl);white-space:nowrap;font-variant-numeric:tabular-nums;}
.buy-sum[hidden]{display:none;}

.my-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.title-list{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px;}

/* ---------- 公会战 ---------- */
.gwar-card .gwar-top{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:8px 0 10px;
}
.gw-cell{
  border:1px solid var(--line);border-radius:4px;background:#100c09;padding:7px 9px;
  display:flex;flex-direction:column;gap:3px;
}
.gw-cell span{font-size:10.5px;color:var(--dim);letter-spacing:1px;}
.gw-cell b{font-size:14px;}
.gw-cell b.small{font-size:12px;font-weight:400;color:var(--dim);}
.tbl tr.me{background:#171208;}
.tbl tr.me td{color:#e8c877;}
/* 组队列表（v1.9.39）：已满的队伍整行压暗，招募中的保持原色 */
.tbl tr.row-full td{opacity:.55;}
.tbl tr.row-open td .tag.ok{white-space:nowrap;}

/* ---------- 后台 · 积分商城 ---------- */
.admin-table.c-shop .at-head, .admin-table.c-shop .at-row{
  grid-template-columns:1.5fr 100px 68px 72px 1.1fr 168px;min-width:760px;font-size:11.5px;
}
/* ---------- 后台 · 商店 / 组队 / 公会（v1.9.8）---------- */
.admin-table.c-store .at-head, .admin-table.c-store .at-row{
  grid-template-columns:1.4fr 84px 72px 1.2fr 62px 168px;min-width:780px;font-size:11.5px;
}
/* 成员 / 等级 / 职业 / 加入时间 / 最近活跃 / 操作 */
.admin-table.c-team .at-head, .admin-table.c-team .at-row{
  grid-template-columns:1.4fr 62px 84px 96px 96px 72px;min-width:720px;font-size:11.5px;
}
/* 公会 / 会长 / 等级 / 成员 / 资金 / BOSS / 操作 */
.admin-table.c-guild .at-head, .admin-table.c-guild .at-row{
  grid-template-columns:1.4fr 100px 62px 74px 92px 96px 72px;min-width:820px;font-size:11.5px;
}
/* 成员 / 职位 / 等级 / 职业 / 贡献 / 入会时间 / 操作 */
.admin-table.c-guildmem .at-head, .admin-table.c-guildmem .at-row{
  grid-template-columns:1.4fr 84px 62px 84px 88px 96px 148px;min-width:800px;font-size:11.5px;
}
.admin-table .at-row.off{opacity:.55;}
/* 当前正在查看的那一行（公会列表里「管理」点开的那个） */
.admin-table .at-row.on{background:rgba(201,162,77,.10);box-shadow:inset 2px 0 0 var(--gold);}
.at-act{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.af-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:10px 0;}
.af-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim);}
.af-wide{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim);margin-bottom:12px;}
.af-grid input,.af-grid select,.af-wide input{width:100%;}

@media (max-width:820px){
  .codex-grid{grid-template-columns:1fr;}
  /* v1.9.75：卡片本身已是上下结构，窄屏只要把底部那条改成两行排列，
   * 不再需要把 .cr-act 拉满整宽（那样按钮会横成一条巨块）。 */
  .cr-item{padding:9px 10px;}
  .cr-foot{gap:6px;}
  .del-row input{max-width:none;}
}
/* 手机才退成单列：平板宽度下 auto-fill 自己会排两列，硬压一列反而浪费 */
@media (max-width:640px){
  .cr-grid{grid-template-columns:1fr;}
}

/* ---------- 称号页（v1.9.4） ---------- */
.tl-sum{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:#141009;}
.tl-sum-l{display:flex;flex-direction:column;gap:3px;}
.tl-sum-l b{font-size:12.5px;letter-spacing:.5px;}
.tl-sum-r{font-size:11.5px;}

.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;margin-top:8px;}
.tl-item{
  display:flex;align-items:flex-start;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:6px;background:#141009;
}
.tl-item.on{border-color:var(--gold);background:#1b1409;}
/* 未获得：压暗，但依然展示属性与来源，让玩家知道值不值得去拿 */
.tl-item.lock{opacity:.62;}
.tl-ico{
  flex:0 0 30px;height:30px;line-height:30px;text-align:center;font-size:15px;
  border:1px solid var(--line2);border-radius:5px;background:#201a14;color:var(--gold);
}
.tl-item.on .tl-ico{border-color:var(--gold);color:var(--hl);}
.tl-main{flex:1;min-width:0;}
.tl-name{font-size:13px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.tl-item.on .tl-name{color:var(--hl);}
.tl-desc{font-size:11px;line-height:1.6;margin:2px 0 3px;}
.tl-bonus{font-size:11.5px;color:var(--green);}
.tl-src{font-size:11px;margin-top:2px;}
.tl-act{flex:0 0 auto;display:flex;align-items:center;}

@media (max-width:820px){
  .tl-grid{grid-template-columns:1fr;}
  .tl-item{flex-wrap:wrap;}
  .tl-act{width:100%;}
  .tl-act .btn{width:100%;}
}

/* ---------- 精灵页（v1.9.5） ---------- */
.sp-sum{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:#141009;}
.sp-sum-l{display:flex;flex-direction:column;gap:3px;}
.sp-sum-l b{font-size:12.5px;letter-spacing:.5px;}
.sp-sum-r{font-size:11.5px;}

.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px;margin-top:8px;}
.sp-item{
  display:flex;align-items:flex-start;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:6px;background:#141009;
}
.sp-item.on{border-color:var(--gold);background:#1b1409;}
.sp-ico{
  flex:0 0 30px;height:30px;line-height:30px;text-align:center;font-size:14px;
  border:1px solid var(--line2);border-radius:5px;background:#201a14;color:var(--gold);
}
.sp-item.on .sp-ico{border-color:var(--gold);color:var(--hl);}
.sp-main{flex:1;min-width:0;}
.sp-name{font-size:13px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.sp-item.on .sp-name{color:var(--hl);}
.sp-eff{font-size:11.5px;color:var(--green);margin:2px 0;}
.sp-desc{font-size:11px;line-height:1.6;margin-bottom:3px;}
.sp-meta{font-size:11px;}
.sp-act{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;align-items:stretch;}
.sp-act .btn{white-space:nowrap;}

@media (max-width:820px){
  .sp-grid{grid-template-columns:1fr;}
  .sp-item{flex-wrap:wrap;}
  .sp-act{flex-direction:row;width:100%;}
  .sp-act .btn{flex:1;}
}

/* ---------- 爬塔（v1.9.6） ---------- */
.tw-top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg2);}
.tw-cur{display:flex;flex-direction:column;gap:2px;}
.tw-cur b{font-size:19px;letter-spacing:.5px;}
.tw-act{display:flex;gap:8px;flex-wrap:wrap;}
.tw-next{margin-top:9px;padding:9px 11px;border:1px dashed var(--line2);border-radius:6px;background:rgba(20,16,9,.6);}
.tw-next-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px;}
.tw-next-h b{font-size:13px;color:var(--hl);}
.tw-next-b{display:flex;flex-direction:column;gap:2px;}
.tw-mob b{font-size:13px;}
.tw-reward{color:var(--gold);font-size:11.5px;}

/* ---------- 矿脉（v1.9.6 / 矿脉背景 v1.9.118） ---------- */
/* 每个矿等级一个 `.mn-lv` 区块，铺一张矿洞场景背景（assets/img/mine-bg/d{1..10}.jpg）。
   图的用法和副本卡同一套：左 38% 压到接近纯色留给标题和卡片，中右侧露矿洞。
   矿位卡改成半透明（rgba .78），让底下的岩壁透出一点 —— 不透明的话图就全被挡住了。 */
.mn-mine{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg2);}
.mn-mine-l{display:flex;gap:12px;align-items:flex-start;min-width:0;}
.mn-mine-t{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mn-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mn-name b{font-size:14px;}
.mn-pend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;}
.mn-pend b{font-size:16px;}
.mn-mine-r{display:flex;gap:8px;flex-wrap:wrap;}

.mn-lv{margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:6px;
  background:#100c08;position:relative;overflow:hidden;}
.mn-lv + .mn-lv{margin-top:7px;}
.mn-lv::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:center center/cover no-repeat;
}
.mn-lv::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(13,10,7,.60),rgba(13,10,7,0) 24%,rgba(13,10,7,.52)),
    linear-gradient(90deg,rgba(13,10,7,.90) 0%,rgba(13,10,7,.84) 38%,rgba(13,10,7,.52) 70%,rgba(13,10,7,.34) 100%);
}
.mn-lv > *{position:relative;z-index:1;}
.mn-lv.lv1::before{background-image:url(../img/mine-bg/d1.jpg);}   /* 碎石矿 */
.mn-lv.lv2::before{background-image:url(../img/mine-bg/d2.jpg);}   /* 铜矿 */
.mn-lv.lv3::before{background-image:url(../img/mine-bg/d3.jpg);}   /* 铁矿 */
.mn-lv.lv4::before{background-image:url(../img/mine-bg/d4.jpg);}   /* 银矿 */
.mn-lv.lv5::before{background-image:url(../img/mine-bg/d5.jpg);}   /* 金矿 */
.mn-lv.lv6::before{background-image:url(../img/mine-bg/d6.jpg);}   /* 秘银矿 */
.mn-lv.lv7::before{background-image:url(../img/mine-bg/d7.jpg);}   /* 精金矿 */
.mn-lv.lv8::before{background-image:url(../img/mine-bg/d8.jpg);}   /* 魔晶矿 */
.mn-lv.lv9::before{background-image:url(../img/mine-bg/d9.jpg);}   /* 星辉矿 */
.mn-lv.lv10::before{background-image:url(../img/mine-bg/d10.jpg);} /* 龙晶矿 */
.mn-lv-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.mn-lv-h b{font-size:13px;color:var(--hl);}
/* 等级行的说明文字会压到图区（横向 70% 处遮罩只剩 .52），--dim 在上面只有 3:1，提一档 */
.mn-lv-h .dim{color:#a8997f;}
.mn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px;}
.mn-item{padding:6px 8px;border:1px solid var(--line);border-radius:5px;
  background:rgba(13,10,7,.78);
  display:flex;flex-direction:column;gap:2px;}
.mn-item.mine{border-color:var(--gold);background:rgba(26,19,9,.86);}
.mn-i-h{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.mn-i-h b{font-size:12px;color:var(--gold);}
.mn-i-n{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mn-i-a{margin-top:2px;}

/* ---------- 页面头图背景（v1.9.121） ---------- */
/* 竞技场 / 爬塔 / 世界BOSS / 营地 / 野外首领 / 商店，各一张场景图铺在主卡片上。
   手法跟矿脉一致：整块铺 + 左暗右明 + 顶底收边，子卡片保持不透明 ——
   它们自带边框，浮在图上就是「桌子摆在场景里」的层次，不用再做半透明。
   图已由 design/page-bg 压到 P75 0.28（比矿脉 0.30 再低一点，这些页面小字更密）。 */
.page-hero{position:relative;overflow:hidden;background:#100c08;}
.page-hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:center center/cover no-repeat;
}
.page-hero::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(13,10,7,.66) 0%,rgba(13,10,7,.22) 24%,rgba(13,10,7,.14) 58%,rgba(13,10,7,.70) 100%),
    linear-gradient(90deg,rgba(13,10,7,.88) 0%,rgba(13,10,7,.78) 42%,rgba(13,10,7,.48) 74%,rgba(13,10,7,.30) 100%);
}
.page-hero > *{position:relative;z-index:1;}
.ph-arena::before{background-image:url(../img/bg/arena.jpg);}  /* 石制斗兽场 */
.ph-tower::before{background-image:url(../img/bg/tower.jpg);}  /* 螺旋石阶 */
.ph-wboss::before{background-image:url(../img/bg/wboss.jpg);}  /* 火山口祭坛 */
.ph-idle::before{background-image:url(../img/bg/idle.jpg);}    /* 篝火营地 */
.ph-fboss::before{background-image:url(../img/bg/fboss.jpg);}  /* 荒野血战 */
.ph-shop::before{background-image:url(../img/bg/shop.jpg);}    /* 商铺柜台（积分商城共用） */
.ph-plant::before{
  background-image:url(../img/bg/plant.jpg);   /* 白天农场：田垄 + 风车 + 阳光 */
  background-position:center 34%;             /* 往上挪，让天空和阳光多露一点 */
}
/* v1.9.129：切换角色 / 战团 / 怪物狂潮 / 公会 / 我的队伍 / 强化洗练台 */
.ph-chars::before{background-image:url(../img/bg/chars.jpg);}  /* 英雄殿堂 */
.ph-corps::before{background-image:url(../img/bg/corps.jpg);}  /* 军团营地 */
.ph-wave::before{background-image:url(../img/bg/wave.jpg);}    /* 兽潮荒野 */
.ph-guild::before{background-image:url(../img/bg/guild.jpg);}  /* 公会大厅 */
.ph-team::before{background-image:url(../img/bg/team.jpg);}    /* 小队行囊 */
.ph-forge::before{background-image:url(../img/bg/forge.jpg);}  /* 铁匠铺（强化台 / 洗练台共用） */
/* 公会卡和队伍卡躺在 .grid-2 的左列，宽只有一半、还很高 —— 横图 cover 进去会被裁成竖条，
   横向遮罩（左暗右明）在这种窄卡里几乎不起作用，所以换成纵向压暗，整块压得住字。 */
.ph-guild::after,
.ph-team::after{
  background:
    linear-gradient(180deg,rgba(13,10,7,.58) 0%,rgba(13,10,7,.44) 42%,rgba(13,10,7,.64) 100%),
    linear-gradient(90deg,rgba(13,10,7,.34) 0%,rgba(13,10,7,.24) 60%,rgba(13,10,7,.18) 100%);
}
/* 这六页的内容块比竞技场/商店更密（角色条目、兽潮信息、装备行都是实底），
   遮罩比默认放轻一档，让图至少在四周和块间看得出来。 */
.ph-chars::after,
.ph-corps::after,
.ph-wave::after,
.ph-forge::after{
  background:
    linear-gradient(180deg,rgba(13,10,7,.58) 0%,rgba(13,10,7,.16) 22%,rgba(13,10,7,.10) 58%,rgba(13,10,7,.62) 100%),
    linear-gradient(90deg,rgba(13,10,7,.82) 0%,rgba(13,10,7,.68) 42%,rgba(13,10,7,.38) 74%,rgba(13,10,7,.20) 100%);
}
/* 角色条目 / 塔与狂潮的 tw-* 块原本是实底，会把整块铺的图压得只剩缝。
   用 `[class^=]` + `[class*=]` 两段兜住「类名以 tw- 开头」和「tw- 在中间」两种情况，
   只动 background-color，不碰布局。 */
.page-hero .char-item{background:rgba(13,10,7,.74);}
.page-hero [class^="tw-"],
.page-hero [class*=" tw-"]{background-color:rgba(13,10,7,.70);}
/* 种植这张是六页里唯一「亮」的图（P75 0.48 vs 其他 0.28），遮罩也跟着放轻一档，
   否则「光亮 / 绿色 / 农场」会被压成黄昏。文字都落在不透明的地块卡和状态条上，不怕。 */
.ph-plant::after{
  background:
    /* 顶部只压标题行那一窄条（0~16%），后面立刻放开 —— 天空和阳光是这张图的主角 */
    linear-gradient(180deg,rgba(13,10,7,.74) 0%,rgba(13,10,7,.10) 17%,rgba(13,10,7,.06) 55%,rgba(13,10,7,.58) 100%),
    linear-gradient(90deg,rgba(13,10,7,.80) 0%,rgba(13,10,7,.68) 40%,rgba(13,10,7,.34) 72%,rgba(13,10,7,.18) 100%);
}
/* 这块卡内容太满（状态条 + 四格地块横跨整宽），不透明的子块会把图全挡住。
   状态条和地块改成半透明后，绿色田野能从格子缝里透上来，才看得出是「农场」。
   地块里的作物图本身带黑底 + 径向 mask，所以不会跟背景打架。 */
.ph-plant .plant-hud{
  background:linear-gradient(90deg,rgba(201,162,77,.06),rgba(16,12,9,.74) 62%);
}
.ph-plant .fp{
  background:radial-gradient(circle at 50% 26%,rgba(27,21,9,.88),rgba(11,9,6,.80) 72%);
}
/* 竞技场对手卡原色是实色 #100c09，整块铺图会被它挡得只剩缝隙 —— 在这里改成半透明，
   卡片边界改由 1px 描边维持。其它页面的子块本来就是半透明，不用动。 */
.page-hero .foe{background:rgba(13,10,7,.80);}
@media (max-width:820px){
  .page-hero::after{
    background:
      linear-gradient(180deg,rgba(13,10,7,.80) 0%,rgba(13,10,7,.70) 40%,rgba(13,10,7,.86) 100%);
  }
}

.mn-log{display:flex;flex-direction:column;gap:3px;margin-top:6px;}
.mn-log-row{font-size:12px;line-height:1.7;padding:3px 0;border-bottom:1px dashed rgba(52,42,30,.5);}
.mn-log-row:last-child{border-bottom:none;}

@media (max-width:820px){
  .tw-act,.mn-mine-r{width:100%;}
  .tw-act .btn,.mn-mine-r .btn{flex:1;}
  .mn-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .wb-hero{flex-direction:column;}
  .wb-fig{flex-direction:row;flex:0 0 auto;align-self:center;}
  .wb-fig .wb-img{width:72px;height:72px;}
  .mob-fig img{width:44px;height:44px;}
  .tw-fig img{width:48px;height:48px;}
  .floor-fig img{width:32px;height:32px;}
  .boss-fig{align-self:center;}
}

/* ===== 大天使装备（v1.9.14）===== */
.tag.arch{color:#f0d68a;border-color:rgba(240,214,138,.55);background:rgba(201,162,77,.12);}
.item.arch-item{border-left-color:#c9a24a;background:linear-gradient(90deg,rgba(201,162,77,.07),#100c09 45%);}

/* ===== 异兽上阵位 + 图鉴（v1.9.15）===== */
.bslot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:10px;}
.bslot{
  border:1px solid var(--line);border-radius:5px;padding:9px 11px;background:#100c09;
  border-left:3px solid var(--line2);display:flex;flex-direction:column;gap:4px;
}
.bslot.on.pr1{border-left-color:#5a5048;}
.bslot.on.pr2{border-left-color:#3a6ab0;}
.bslot.on.pr3{border-left-color:#b09020;}
.bslot.on.pr4{border-left-color:#7a3ab0;}
.bslot.on.pr5{border-left-color:#1f8a52;}
.bslot.lock{opacity:.62;}
.bs-head{display:flex;justify-content:space-between;align-items:center;}
.bs-head b{font-size:12px;color:var(--dim);letter-spacing:1px;}
.bs-name{font-size:13px;font-weight:bold;}
.bs-empty{font-size:12px;color:#5f564c;padding:4px 0 2px;}
.bs-empty form{margin-top:4px;}

.bs-codex{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:10px;}
.bs-card{
  display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:5px;
  border:1px solid var(--line);border-left:3px solid var(--line2);background:#100c09;
}
.bs-card.pr1{border-left-color:#5a5048;}
.bs-card.pr2{border-left-color:#3a6ab0;}
.bs-card.pr3{border-left-color:#b09020;}
.bs-card.pr4{border-left-color:#7a3ab0;}
.bs-card.pr5{border-left-color:#1f8a52;}
.bs-card.no{opacity:.45;}
.bs-card.no .bs-cname{color:#5f564c;}
.bs-icon{
  flex:0 0 34px;width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:17px;color:#f0e0bc;border:1px solid var(--line2);
  background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.bs-info{flex:1;min-width:0;}
.bs-cname{font-size:13px;font-weight:bold;}
.bs-cname .dim{font-weight:normal;}
.bs-cbonus{font-size:11px;color:var(--dim);margin-top:2px;}
.bs-cdesc{font-size:11px;color:#7a6f5f;margin-top:3px;line-height:1.5;}
@media(max-width:640px){.bslot-grid,.bs-codex{grid-template-columns:1fr;}}

/* 公会科技：属性类分组小标题（v1.9.16，8 项科技分两段） */
.tech-sep{
  grid-column:1/-1;font-size:12px;color:var(--gold);letter-spacing:1px;
  padding:6px 2px 2px;border-bottom:1px solid var(--line);margin-top:2px;
}
.tech-sep .dim{font-size:11px;letter-spacing:0;}

/* ===== 可用职业要求标签（v1.9.18）===== */
.tag.job{letter-spacing:0;}
.tag.job.jt1{color:#d98d6a;border-color:#7a4a3a;}
.tag.job.jt2{color:#7aa3e0;border-color:#3a4a7a;}
.tag.job.jt3{color:#7ad08a;border-color:#3a6a4a;}
.tag.job.jt4{color:#c98de0;border-color:#6a3a7a;}
.tag.job.jt5{color:#ffd98a;border-color:#7a6a3a;}
.tag.job.jt6{color:#8ad6e0;border-color:#3a6a7a;}
.tag.job.ok{box-shadow:inset 0 0 0 1px rgba(95,174,90,.35);}
.tag.job.bad{opacity:.55;}

/* ===== 种植（v1.9.32 / 田地图 v1.9.123）===== */
/* 顶部状态条 */
.plant-hud{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  margin:2px 0 12px;padding:10px 13px;border-radius:7px;
  border:1px solid var(--line);
  background:linear-gradient(90deg,rgba(201,162,77,.07),#100c09 62%);
}
.ph-lvbox{flex:1 1 260px;min-width:200px;display:flex;flex-direction:column;gap:5px;}
.ph-lvrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.ph-lvrow b{font-size:17px;color:var(--hl);letter-spacing:1px;}
.ph-bar{
  position:relative;height:12px;border-radius:6px;overflow:hidden;
  background:#0a0806;border:1px solid var(--line);
}
.ph-bar i{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#5a7a22,#9bc94f,#5a7a22);
  background-size:200% 100%;animation:plantFlow 3.4s linear infinite;
}
.ph-bar span{
  position:absolute;inset:0;font-size:10px;line-height:12px;text-align:center;
  color:#efe4d0;text-shadow:0 1px 2px #000;letter-spacing:.4px;
}
@keyframes plantFlow{from{background-position:0 0;}to{background-position:200% 0;}}
.plant-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;}

/* ---------- 种植位（v1.9.182：从独立卡片合并进种植模块内部） ----------
 * 不再是单独一张 .card，而是种植模块里的一个分区：顶部金线分隔，
 * 半透明底与农场背景同族，避免在风景图上"贴一块突兀的卡片"。 */
.plant-slots{
  margin:14px 0 0;padding:12px 14px 14px;
  border-top:1px solid rgba(201,162,77,.28);
  background:rgba(10,8,5,.40);border-radius:0 0 10px 10px;
}
.plant-slots .ps-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
}
.plant-slots .ps-head b{font-size:13px;color:var(--text);}
.plant-slots .sum{margin:0 0 8px;}

/* v1.9.178：标题右侧那排（地块 / 种子 / 块可收）压在农场背景图上，纯文字读不清；
 * 给整排一个半透明底。只挂 .ph-plant，别的头图页不受影响。 */
.ph-plant .bt .br{
  padding:3px 10px;border-radius:12px;
  background:rgba(10,8,5,.62);border:1px solid rgba(52,42,30,.75);
}

/* ---------- 田地 ---------- */
.farm{display:grid;grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:10px;margin:4px 0 2px;}
.fp{
  position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:8px;
  background:radial-gradient(circle at 50% 26%,#1b1509,#0b0906 72%);
  display:flex;flex-direction:column;gap:6px;padding:8px 9px 9px;
  transition:border-color .2s,box-shadow .2s;
}
/* 作物图：成熟态是亮点，生长态压暗缩小 —— 同一张图演出两个阶段。
   四边叠一层径向 mask 渐隐：生成图是纯黑底的方形图，直接贴上去会在卡片上
   露出一块"图框"；渐隐后作物像是直接长在土里。 */
.fp-art{
  display:block;width:100%;height:86px;object-fit:cover;border-radius:5px;
  filter:saturate(.62) brightness(.70);transform:scale(.84);opacity:.86;
  transition:filter .45s ease,transform .45s ease,opacity .45s ease;
  -webkit-mask-image:radial-gradient(ellipse 74% 66% at 50% 52%,#000 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 74% 66% at 50% 52%,#000 62%,transparent 100%);
}
.fp.ready .fp-art{
  filter:none;transform:scale(1);opacity:1;
  animation:fpBob 3s ease-in-out infinite;
}
@keyframes fpBob{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-2px) scale(1.02);}
}
.fp.ready{
  border-color:rgba(201,162,77,.65);
  box-shadow:0 0 0 1px rgba(201,162,77,.22),0 0 18px rgba(201,162,77,.18);
  animation:fpGlow 2.6s ease-in-out infinite;
}
@keyframes fpGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(201,162,77,.22),0 0 14px rgba(201,162,77,.12);}
  50%{box-shadow:0 0 0 1px rgba(201,162,77,.42),0 0 26px rgba(201,162,77,.30);}
}
/* 成熟角标 */
.fp-badge{
  position:absolute;top:10px;right:10px;z-index:2;
  font-size:10px;line-height:1;padding:4px 7px;border-radius:9px;
  color:#1a1206;font-weight:600;letter-spacing:.5px;
  background:linear-gradient(180deg,#f0d089,#c9a24d);
  box-shadow:0 2px 8px rgba(201,162,77,.45);
}
.fp-badge::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#1a1206;margin-right:4px;vertical-align:1px;
  animation:fpDot 1.6s ease-in-out infinite;
}
@keyframes fpDot{0%,100%{opacity:1;}50%{opacity:.25;}}
/* 剩余时间 / 进度 */
.fp-clock{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;color:#c9bda8;
  background:rgba(8,6,4,.72);border:1px solid var(--line);border-radius:8px;padding:3px 7px;}
.fp-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fp-meta b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fp-gain{font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fp-bar{height:8px;border-radius:4px;background:#1a1610;border:1px solid var(--line2);overflow:hidden;}
.fp-bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#4d7a1e,#9cc94a,#4d7a1e);
  background-size:200% 100%;animation:plantFlow 3s linear infinite;}
.fp .btn{width:100%;}
/* 空地（v1.9.176：改成 <label> 打开选种弹层，所以要 pointer 和完整的点击态） */
.fp.empty{
  border-style:dashed;border-color:var(--line2);align-items:center;justify-content:center;
  gap:4px;min-height:158px;background:rgba(12,9,6,.5);cursor:pointer;
  transition:border-color .2s,background .2s;
}
/* v1.9.178：空地现在是唯一的播种入口，＋和提示不能再是「几乎看不见的灰」——
   在农场背景图上原来那档 --dim 基本糊成一片，玩家看不出这里能点。 */
.fp.empty .fp-plus{color:rgba(201,162,77,.55);}
.fp.empty .fp-hint{color:#cbbfa8;}
.fp.empty:hover{border-color:rgba(201,162,77,.5);background:rgba(201,162,77,.05);}
.fp-plus{font-size:26px;line-height:1;color:var(--line2);transition:color .2s,transform .2s;}
.fp.empty:hover .fp-plus{color:var(--gold);transform:scale(1.15);}
.fp-hint{font-size:10.5px;color:var(--dim);text-align:center;line-height:1.5;}

/* ---------- 种子背包（v1.9.128：纯数字，一行五列） ---------- */
/* 五种种子各占一列，去掉配图只留数字：名字/时长 + 经验/金币/钻石 + 库存与播种。
   刻意**不做卡片**（无底、无框、只留竖分隔线）—— 它是一张数字表，
   做成一块块小卡会把下面这张农场背景图切成碎片。 */
.seeds{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:2px;}
.seed-c{
  display:flex;flex-direction:column;gap:3px;padding:2px 12px;
  border-left:1px solid rgba(52,42,30,.55);transition:background .2s;
}
.seed-c:first-child{border-left:none;padding-left:0;}
.seed-c:hover{background:rgba(201,162,77,.04);}
.seed-c.off{opacity:.42;filter:saturate(.4);}
.sc-name{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  font-size:12.5px;padding-bottom:4px;margin-bottom:2px;border-bottom:1px dashed rgba(52,42,30,.55);}
.sc-name b{letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-name span{font-size:10.5px;flex:0 0 auto;}
.sc-num{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  font-size:10.5px;color:var(--dim);}
.sc-num b{font-size:12px;color:var(--text);letter-spacing:.3px;}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px;}
.sc-cnt{font-size:12px;color:var(--gold);}
.sc-foot form{margin:0;}
.sc-foot .btn{padding:3px 8px;}
@media(max-width:820px){
  .seeds{grid-template-columns:repeat(3,1fr);row-gap:14px;}
  .seed-c:nth-child(3n+1){border-left:none;padding-left:0;}
}
@media(max-width:640px){
  /* v1.9.256：地田改一行三列。
   * 两列时一屏只放得下 4 块地（十块要滑三四屏），玩家看不出"哪块熟了、空着几块"；
   * 三列后 6 块地两行收完，十块地也只要四行。
   * 卡片内部的图高 / 字号 / 内边距同步收一档 —— 100px 宽的格子照原尺寸摆，
   * 「赤纹南瓜 8 小时」和倒计时会互相挤，最后全被省略号吃掉。 */
  .farm{grid-template-columns:repeat(3,1fr);gap:7px;
    /* 右侧那根「动态」竖条是 fixed 在屏幕右缘的，两列时它只盖住卡片阴影，
       三列之后必然会压到第三列的边（进度条 / 收获按钮的右端）。
       只在这一页给田地留出它的宽度，不动全局 .content —— 别的页面没有格子贴边。 */
    padding-right:24px;}
  .fp{padding:6px 6px 7px;gap:4px;border-radius:7px;}
  .fp-art{height:52px;}
  .fp-clock{top:6px;left:6px;font-size:9px;line-height:1.3;padding:2px 5px;border-radius:6px;}
  .fp-badge{top:6px;right:6px;font-size:9px;padding:3px 5px;}
  .fp-badge::before{width:4px;height:4px;margin-right:3px;vertical-align:0;}
  .fp-meta b{font-size:11px;letter-spacing:0;}
  /* 收益行：窄格里一行放不下「经验 +1.2万 · ◎+800 · ◆2」，
     允许折两行并夹断，比留半行省略号好认。 */
  .fp-gain{font-size:9.5px;line-height:1.35;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .fp-bar{height:6px;border-radius:3px;}
  .fp.empty{min-height:98px;gap:3px;}
  .fp-plus{font-size:20px;}
  .fp-hint{font-size:9.5px;line-height:1.4;}
  .fp .btn{padding:4px 0;font-size:11px;letter-spacing:0;}

  .seeds{grid-template-columns:repeat(2,1fr);}
  .seed-c:nth-child(3n+1){border-left:1px solid rgba(52,42,30,.55);padding-left:12px;}
  .seed-c:nth-child(odd){border-left:none;padding-left:0;}
}
@media (prefers-reduced-motion: reduce){
  .ph-bar i,.fp-bar i,.fp.ready,.fp.ready .fp-art,.fp-badge::before{animation:none;}
}

/* ---------- 种植 · 选种 / 收获弹层（v1.9.176） ----------
 * 两处用到：① 点空地选种子（种子背包从页面里整块收进弹层，平常不占版面）；
 * ② 收获结算。和挂机「快速挂机」同一套纯 CSS 开关（checkbox + label），
 * 不引脚本：POST 后如果有结果，PHP 直接输出带 checked 的 input，
 * 页面一渲染弹层就是展开的，关掉就是取消勾选。
 *
 * 结构硬要求：`.fm-cb` 与 `.fm-modal` 必须**相邻**，选择器用 `+` 而不是 `~`。
 * 一块空地配一个弹层（各自的 slot 不同），用 `~` 会让整页弹层同时展开。
 *
 * z-index 说明同 .ifast-modal：`.page-hero > *` 给直接子元素设了
 * `position:relative;z-index:1`，弹层被裹进那个层叠上下文里，
 * 所以这里必须显式抬到 100，否则手机上会被底栏（z-index:60）盖住。 */
.fm-cb{display:none;}
.fm-modal{display:none;z-index:100;}
.fm-cb:checked + .fm-modal{display:block;}
.fm-mask{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:75;}
.fm-panel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:76;width:min(560px,calc(100% - 26px));max-height:86vh;overflow:auto;
  padding:14px 18px 16px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 18px 52px rgba(0,0,0,.66);
}
.fm-head{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
.fm-head b{font-size:14px;letter-spacing:1.5px;color:var(--hl);}
.fm-head .dim{flex:1 1 auto;min-width:0;}
.fm-x{
  flex:none;width:26px;height:26px;line-height:24px;text-align:center;
  border:1px solid var(--line2);border-radius:4px;color:var(--dim);
  cursor:pointer;font-size:15px;transition:.18s;
}
.fm-x:hover{border-color:var(--gold);color:var(--hl);}
.fm-tip{margin:10px 0 0;line-height:1.7;}

/* 种子行：名字(+时长+库存) / 播种。只有两段 —— 收益不在这里显示（选种就只选种），
   提前摆出经验/金币/钻石会让人以为播种即到账。收益在收获结算弹层里给。
   库存 ×N 放在 .fm-name **里面**：它要和名字贴着（谁说这个可不可以种，得先看数量），
   单独当一个 grid 列时，手机上那格会被挤成 0 宽直接看不见（踩过两次，别再拆出去）。 */
/* 选种弹层比通用的窄：一屏只有「名字 / 按钮」，560px 会拉开一大条空白。
   单类选择器，手机上被下面媒体查询里的 .fm-panel 覆盖回满宽（要的就是满宽）。 */
.fm-sow{width:min(430px,calc(100% - 26px));}
.fm-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.fm-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:7px 10px;
  border:1px solid var(--line);border-radius:6px;background:rgba(13,10,7,.55);
}
.fm-row.off{opacity:.45;filter:saturate(.4);}
.fm-name{display:flex;align-items:baseline;gap:7px;min-width:0;}
.fm-name b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fm-name span{flex:0 0 auto;}
.fm-cnt{font-size:12px;color:var(--gold);margin-left:6px;white-space:nowrap;}
.fm-row form{margin:0;display:flex;align-items:center;gap:6px;}
/* v1.9.256：一行两个按钮（一键播种 / 播种）。
 * 「播种」保持金色主按钮，「一键播种」用默认暗底 —— 批量操作不该比单块更抢眼，
 * 但也不能是灰到看不见的次级色，所以就用 .btn 的本色。 */
.fm-acts{flex:0 0 auto;}
.fm-sow-tip{margin-top:9px;line-height:1.6;}

/* 收获结算：按钮靠右，用 label 冒充按钮，和真 button 并排时要显式撑行高 */
.fm-panel .sum{margin:12px 0 0;}
.fm-panel .flash{overflow-wrap:anywhere;}
.fm-foot{margin-top:12px;display:flex;justify-content:flex-end;}
.fm-ok{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1.3;box-sizing:border-box;min-height:33px;cursor:pointer;
}

@media(max-width:640px){
  .fm-panel{width:calc(100% - 24px);max-height:82vh;
    padding:13px 13px calc(13px + env(safe-area-inset-bottom,0px));}
  /* 手机上只剩「名字 + 按钮」两段，一行放得下：名字吃满剩余宽度并截断，
   * 按钮靠右固定宽 —— 别再折成整行按钮，那会让列表凭空高一倍。
   * v1.9.256：右侧变成两个按钮（一键播种 / 播种），按钮内边距跟着收，
   * 否则 320px 的窄屏上名字会被挤得只剩半个字。 */
  .fm-row{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;}
  .fm-name{flex:1 1 auto;min-width:0;}
  .fm-row form{flex:0 0 auto;margin-left:auto;gap:5px;}
  .fm-row .btn{width:auto;min-width:54px;padding:5px 8px;font-size:11.5px;letter-spacing:0;}
  .fm-foot .btn{width:100%;}
  /* 收获结算的四格：`.sum` 本身是 auto-fit + minmax(88px,1fr)，
   * 在 340px 的弹层里硬塞 4 列会横向溢出（右侧「种植经验」被裁掉）。
   * 手机上固定两列，两行放完。 */
  .fm-panel .sum{grid-template-columns:1fr 1fr;}
}
/* v1.9.256：一行两个按钮之后，320px 那档（iPhone SE 一代 / 老安卓）放不下
 * 「赤纹南瓜 8 小时 ×2」+ 两个 54px 按钮，名字会被截成「赤纹…」。
 * 在这一档把按钮内边距和最小宽度都放开（按文字自然宽度排），
 * 让名字整行显示 —— 选种弹层里说什么种子比按钮大不大重要得多。 */
@media(max-width:340px){
  .fm-row form{gap:4px;}
  .fm-row .btn{min-width:0;padding:5px 6px;font-size:11px;}
}

/* ===== 佣兵（v1.9.38）===== */
.merc-slot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:10px;}
.merc-slot{
  border:1px solid var(--line);border-radius:5px;padding:9px 11px;background:#100c09;
  border-left:3px solid var(--line2);display:flex;flex-direction:column;gap:5px;
}
.merc-slot.on{border-left-color:#b09020;background:linear-gradient(90deg,rgba(201,162,77,.08),#100c09 55%);}
.merc-slot.lock{opacity:.62;}
.ms-head{display:flex;justify-content:space-between;align-items:center;}
.ms-head b{font-size:12px;color:var(--dim);letter-spacing:1px;}
.ms-body{display:flex;align-items:center;gap:9px;}
.ms-body .job-avatar{flex:0 0 40px;width:40px;height:40px;border-radius:6px;border:1px solid var(--line2);}
.ms-info{flex:1;min-width:0;}
.ms-name{font-size:13px;font-weight:bold;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.ms-meta{font-size:11px;margin-top:2px;line-height:1.45;}

.merc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin-top:10px;}
.merc-item{
  border:1px solid var(--line2);border-radius:7px;background:#100c09;padding:10px 12px;
  display:flex;flex-direction:column;gap:7px;
}
.merc-item.on{border-color:rgba(201,162,77,.45);background:linear-gradient(160deg,rgba(201,162,77,.07),#100c09 60%);}
.mi-top{display:flex;align-items:center;gap:10px;}
.mi-top .job-avatar{flex:0 0 46px;width:46px;height:46px;border-radius:6px;border:1px solid var(--line2);}
.mi-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.35;}
.mi-name b{font-size:13.5px;}
.mi-name .tag{align-self:flex-start;}
.mi-lv{text-align:right;white-space:nowrap;font-size:12px;}
.mi-lv b{font-size:15px;}
.mi-bonus{font-size:12px;color:var(--hl);}
.mi-next{font-size:11px;}
.mi-desc{line-height:1.55;}
.bar.merc{height:11px;}
.bar.merc i{background:linear-gradient(90deg,#3a6a8a,#7ab8e0);}
.bar.merc span{line-height:11px;font-size:10px;}

/* 佣兵品质 0~5：从灰到橙。
 * 刻意用 mq 前缀而不是复用装备的 q0~q4 —— 异兽 / 宠物的星级标签已经在用 .tag.q3，
 * 直接覆盖会把那两页的紫色也改掉。 */
.tag.mq0{color:#9a8f80;border-color:#4a423a;}
.tag.mq1{color:#8fd0a0;border-color:#3a6a4a;}
.tag.mq2{color:#7ab8e0;border-color:#3a5a7a;}
.tag.mq3{color:#c79ae8;border-color:#6a3a8a;}
.tag.mq4{color:#ffc46a;border-color:#8a6a2a;}
.tag.mq5{color:#ff9a6a;border-color:#8a4a2a;box-shadow:inset 0 0 0 1px rgba(255,154,106,.25);}
@media(max-width:640px){
  .merc-slot-grid{grid-template-columns:1fr;}
  .merc-grid{grid-template-columns:1fr;}
}

/* ===== 光环（v1.9.37）===== */
.halo-sum{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px;}
.hs-item{
  display:flex;align-items:baseline;gap:6px;padding:4px 10px;border:1px solid var(--line);
  border-radius:5px;background:#100c09;font-size:12px;
}
.hs-item i{font-style:normal;color:var(--dim);font-size:11px;}
.hs-item b{font-size:13px;}

.halo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:4px;}
.halo-item{
  border:1px solid var(--line2);border-radius:7px;background:#100c09;padding:10px 12px;
  display:flex;flex-direction:column;gap:8px;
}
.halo-item.max{border-color:rgba(201,162,77,.55);background:#171006;}
.hi-top{display:flex;align-items:center;gap:10px;}
.hi-ico{
  flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(201,162,77,.35);box-shadow:0 0 10px rgba(0,0,0,.5);
}
.hi-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35;}
.hi-name b{font-size:13.5px;}
.hi-lv{text-align:right;white-space:nowrap;font-size:12px;}
.hi-lv b{font-size:15px;}
.hi-eff{font-size:12px;}
.hi-desc{line-height:1.55;}
.hi-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;}
.hi-act .btn{min-width:66px;}
.hi-n{
  width:62px;padding:4px 6px;font-size:12px;border-radius:4px;
  border:1px solid var(--line2);background:#1a1410;color:var(--text);
}
.bar.halo{height:11px;}
.bar.halo i{background:linear-gradient(90deg,#8a6a20,#e0c072);}
.bar.halo span{line-height:11px;font-size:10px;}
@media(max-width:640px){
  .halo-grid{grid-template-columns:1fr;}
}

/* ==========================================================
   野外首领（v1.9.40 / v1.9.41）
   按转生分段：头图 + 立绘 + 血条 + 奖励一览 + 主奖锁定态
   ========================================================== */
.fb-hero{
  position:relative;margin:12px 0;border:1px solid var(--line);border-radius:8px;
  background-color:#0b0806;background-size:cover;background-position:center 40%;
  overflow:hidden;box-shadow:var(--shadow);
}
.fb-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,4,3,.94) 0%,rgba(6,4,3,.72) 42%,rgba(6,4,3,.28) 100%);
}
.fb-hero-in{position:relative;padding:22px 24px 20px;}
.fb-tag{
  display:inline-block;font-size:10px;letter-spacing:2px;color:var(--hl);
  border:1px solid rgba(201,162,77,.45);background:rgba(201,162,77,.10);
  padding:1px 8px;border-radius:3px;
}
.fb-hero h2{
  font-size:26px;letter-spacing:4px;color:#f2e4c8;margin:10px 0 4px;
  text-shadow:0 2px 16px rgba(0,0,0,.85);
}
.fb-hero-sub{font-size:12px;color:var(--dim);}
.fb-hero-state{margin-top:12px;display:flex;align-items:center;gap:10px;}

.fb-panel .fb-body{display:flex;gap:18px;align-items:flex-start;}
.fb-face{flex:0 0 auto;}
.fb-img{display:block;border-radius:50%;box-shadow:0 0 26px rgba(0,0,0,.6);}
.fb-info{flex:1;min-width:0;}
.fb-hp-line{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--dim);margin-bottom:5px;}
.fb-hp-line b{font-size:13px;color:var(--text);}
.bar.fb-hp{height:16px;margin-bottom:12px;}
.bar.fb-hp i{background:linear-gradient(90deg,#6a1f18,#c0504d 55%,#e88a5a);box-shadow:0 0 12px rgba(192,80,77,.5) inset;}
.bar.fb-hp span{line-height:16px;font-size:10px;}

.fb-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:12px;}
.fb-meta > div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed rgba(52,42,30,.6);padding-bottom:4px;}
.fb-meta span{color:var(--dim);}
.fb-meta b{font-weight:600;}
.fb-meta .tag{margin-left:6px;vertical-align:1px;}

.fb-flash{
  margin:12px 0 0;padding:9px 12px;border-radius:4px;font-size:12px;line-height:1.7;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
}
.fb-flash.ok{color:#cfe8c6;border-color:rgba(95,174,90,.35);background:rgba(95,174,90,.08);}
.fb-flash.warn{color:#f0d9a8;border-color:rgba(201,162,77,.4);background:rgba(201,162,77,.08);}
.fb-flash.win{color:#ffd9a8;border-color:rgba(230,140,60,.45);background:rgba(230,140,60,.10);}
.fb-flash.dim{color:var(--dim);}

.fb-acts{margin-top:14px;}
.fb-note{
  margin:12px 0 0;font-size:11px;color:var(--dim);
  border-left:2px solid var(--line2);padding-left:10px;line-height:1.8;
}

.fb-log{list-style:none;margin:0;padding:0;font-size:12px;}
.fb-log li{padding:5px 0;border-bottom:1px dashed rgba(52,42,30,.55);line-height:1.6;}
.fb-log li:last-child{border-bottom:0;}
.fb-log .small{margin-right:7px;}
.fb-log .win{color:#8fd08a;}


.fb-wait{text-align:center;}
.fb-count{margin:18px 0 8px;}
.fb-count b{display:block;font-size:34px;letter-spacing:3px;color:var(--hl);text-shadow:0 0 22px rgba(232,200,119,.3);}
.fb-count span{font-size:11px;}

.fb-codex{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;}
.fb-codex-i{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 4px;border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.015);
}
.fb-codex-i i{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:1px dashed var(--line2);color:#4a4038;font-style:normal;font-size:16px;
}
.fb-codex-i span{font-size:10px;color:var(--dim);}
.fb-codex-i.on{border-color:rgba(201,162,77,.45);background:rgba(201,162,77,.07);}
.fb-codex-i.on span{color:var(--hl);}

.fb-rules{margin:0;padding-left:18px;font-size:12px;line-height:1.8;color:var(--dim);}
.fb-rules b{color:var(--text);}

@media(max-width:820px){
  .fb-hero h2{font-size:20px;letter-spacing:2px;}
  .fb-hero-in{padding:18px 16px 16px;}
  .fb-panel .fb-body{flex-direction:column;align-items:center;}
  .fb-face{margin-bottom:12px;}
  .fb-info{width:100%;}
  .fb-meta{grid-template-columns:1fr;}
  .fb-count b{font-size:26px;}
}

/* 野外首领 · 奖励说明（v1.9.40） */
.fb-gain{
  margin:10px 0 0;font-size:11px;line-height:1.9;color:var(--dim);
  padding:7px 10px;border-radius:4px;background:rgba(201,162,77,.05);
  border:1px solid rgba(201,162,77,.18);
}
.fb-gain b{color:var(--hl);}
.fb-reward td:nth-child(2){color:var(--hl);font-weight:600;white-space:nowrap;}
.fb-reward .rw-main td{background:rgba(201,162,77,.06);}
.fb-reward .rw-main .tag{font-size:9px;margin-left:5px;vertical-align:1px;}
.fb-reward .rw-sub td{color:var(--dim);border-top:1px solid var(--line);}
.fb-reward .rw-sub td:nth-child(2){color:var(--dim);font-weight:normal;}

/* 野外首领 · 本场结束后的下一轮倒计时（v1.9.43） */
.fb-next{border-color:rgba(201,162,77,.28);background:rgba(201,162,77,.035);}
.fb-next .fb-count{margin:10px 0 4px;}
.fb-next .fb-count b{font-size:30px;}

/* 野外首领 · 自动攻击（v1.9.42） */
.fb-auto{display:flex;align-items:center;gap:10px;margin-top:8px;}
.fb-auto .btn.on{
  border-color:rgba(95,174,90,.55);color:#cfe8c6;
  background:rgba(95,174,90,.12);box-shadow:0 0 12px rgba(95,174,90,.15) inset;
}
.fb-auto #fbCd{flex:1;min-width:0;}

/* 野外首领 · 今日主奖已满的锁定态（v1.9.41） */
.fb-locked{border-color:rgba(192,80,77,.35);background:rgba(192,80,77,.05);}
.fb-locked h2{color:#e8a08a;margin-bottom:6px;}
.fb-locked p{margin:4px 0;font-size:12px;}

/* ==========================================================
   转生天赋树（v2.0）
   三列树：根基 / 支线A / 支线B，状态 = on 已点 / can 可点 / lock 不可点
   ========================================================== */
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.tal-bar{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:10px 12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  margin-bottom:12px;font-size:12px;color:var(--dim);}
.tal-bar b{color:var(--text);}
.tal-col{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;}
.tal-col>h3{font-size:12px;color:var(--dim);letter-spacing:1px;margin:0 0 10px;text-align:center;}
.tal-n{display:block;border:1px solid var(--line);border-radius:8px;padding:8px 9px;
  margin-bottom:8px;background:#0f0c08;}
.tal-n:last-child{margin-bottom:0;}
.tal-n .tn{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:12px;}
.tal-n .tn b{color:var(--text);font-weight:600;}
.tal-n .tn span{color:var(--dim);flex:0 0 auto;}
.tal-n .td{font-size:12px;color:var(--dim);line-height:1.5;margin-top:3px;}
.tal-n.on{border-color:var(--gold);background:rgba(201,162,77,.10);}
.tal-n.on .tn b{color:var(--hl);}
.tal-n.on .tn span{color:var(--gold);}
.tal-n.can{border-color:var(--line2);}
.tal-n.can:hover{border-color:var(--gold);}
.tal-n.lock{opacity:.42;}
.tal-n.aw{border-style:dashed;}
.tal-why{color:var(--red)!important;}
.tal-btn{display:block;width:100%;background:none;border:0;padding:0;margin:0;
  color:inherit;font:inherit;text-align:left;cursor:pointer;}
.tal-btn:hover{opacity:1;}
.tal-foot{margin-top:10px;}
@media (max-width:820px){
  .grid-3{grid-template-columns:1fr;}
  .tal-col>h3{text-align:left;}
}

.imeta .s-score{color:var(--gold);}

/* ==========================================================
   邀请（v1.9.45）
   账号级页面：邀请码大字 + 复制 + 名额 + 名单三格进度
   ========================================================== */
.iv-hero{padding:0;overflow:hidden;}
.iv-hero-in{
  padding:20px 22px 14px;
  background:radial-gradient(600px 200px at 20% 0%,rgba(201,162,77,.13),transparent 70%);
  border-bottom:1px solid var(--line);
}
.iv-tag{font-size:10px;letter-spacing:2px;color:var(--hl);
  border:1px solid rgba(201,162,77,.45);background:rgba(201,162,77,.10);
  padding:1px 8px;border-radius:3px;display:inline-block;}
.iv-code{
  margin:12px 0 10px;font-size:32px;letter-spacing:8px;color:#f2e4c8;
  font-family:Consolas,"Courier New",monospace;text-shadow:0 0 24px rgba(232,200,119,.28);
  word-break:break-all;
}
.iv-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.iv-actions #ivTip{flex:1;min-width:120px;}
.iv-nums{display:grid;grid-template-columns:repeat(4,1fr);}
.iv-nums > div{
  padding:10px 12px;border-right:1px solid var(--line);text-align:center;
}
.iv-nums > div:last-child{border-right:0;}
.iv-nums span{display:block;font-size:11px;color:var(--dim);margin-bottom:2px;}
.iv-nums b{font-size:16px;font-weight:600;}

.iv-list td{padding:7px 8px;}
.iv-list .iv-dot{
  display:inline-block;font-size:10px;line-height:1.5;padding:0 5px;margin-right:4px;
  border:1px solid var(--line2);border-radius:3px;color:#5b4f42;
}
.iv-list .iv-dot.on{
  color:#cfe8c6;border-color:rgba(95,174,90,.5);background:rgba(95,174,90,.12);
}
.iv-list .iv-void td{opacity:.45;}
.iv-list .iv-void-t{color:#a86f6f;}
.iv-hint{margin-bottom:10px;}

@media(max-width:820px){
  .iv-code{font-size:24px;letter-spacing:5px;}
  .iv-nums{grid-template-columns:repeat(2,1fr);}
  .iv-nums > div{border-right:0;border-bottom:1px solid var(--line);}
  .iv-nums > div:nth-child(odd){border-right:1px solid var(--line);}
  .iv-nums > div:nth-last-child(-n+2){border-bottom:0;}
}

/* ==========================================================
   队伍列表（v1.9.48）
   去掉「成员」列后，其余列不许折行 —— 折行会吃掉刚腾出来的空间。
   等级/人数/操作三列收到内容宽度，队长列吃掉剩余空间。
   ========================================================== */
.tbl.tm-list th,
.tbl.tm-list td{white-space:nowrap;}
.tbl.tm-list .tm-lead{white-space:normal;word-break:break-word;}
.tbl.tm-list td:nth-child(2),
.tbl.tm-list td:nth-child(3),
.tbl.tm-list td:nth-child(5){width:1%;}   /* 收成内容宽度，剩余全给队长列 */

/* ==========================================================
   角色页属性表（v1.9.49）
   原来是「每项一个小卡片、标签在上数值在下」，17 项铺成 6 行卡片，
   占掉大半屏、重点还散。改成一行一条：标签靠左、数值靠右、虚线分隔，
   一屏能看完所有属性，扫视时眼睛只走两条竖线。
   ========================================================== */
.stat-grid.compact{
  /* 固定列数而不是 auto-fit：auto-fit 在宽一点的屏上会挤成 4 列，
   * 标签和数值就又贴在一起了。按断点定死，每格至少 200px 才有呼吸空间。 */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 22px;                    /* 行间不留空隙，靠虚线分隔 */
  margin:10px 0 6px;
}
@media(min-width:560px){.stat-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:940px){.stat-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr));}}
.stat-grid.compact > div{
  background:none;border:0;border-bottom:1px dashed rgba(52,42,30,.5);
  border-radius:0;padding:5px 2px;
  flex-direction:row;justify-content:space-between;align-items:baseline;gap:10px;
}
.stat-grid.compact span{white-space:nowrap;}
.stat-grid.compact b{font-size:13px;line-height:1.45;font-variant-numeric:tabular-nums;}
.stat-grid.compact .wide{
  grid-column:1 / -1;margin-top:8px;padding-top:9px;
  border-bottom:0;border-top:1px solid var(--line2);
}
.stat-grid.compact .wide b{font-size:16px;}

/* ---- 后台 · 邀请管理（v2.1） ---- */
/* 邀请人 / 邀请码 / 绑定 / 有效 / ②转生 / ③长留 / 钻石(估) / 操作 */
.admin-table.c-invagg .at-head, .admin-table.c-invagg .at-row{
  grid-template-columns:1.4fr 96px 56px 72px 62px 62px 84px 76px;min-width:760px;font-size:11.5px;
}
/* 邀请人 / 被邀请人 / 阶段 / 注册IP / 绑定时间 / 最近变更 / 操作 */
.admin-table.c-invlog .at-head, .admin-table.c-invlog .at-row{
  grid-template-columns:1.3fr 1.3fr 148px 108px 84px 84px 76px;min-width:860px;font-size:11.5px;
}

/* ==========================================================
   领地攻城战（v1.9.68）· 公会 → 领地战
   地图是服务端生成的 SVG，这里只管配色与交互；
   --c 由 PHP 按公会写进 <g style="--c:#xxx">，同一公会永远同一个色。
   ========================================================== */
.terr-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 8px;}
.terr-stats > div{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:6px 9px;}
.terr-stats span{display:block;font-size:11px;color:var(--dim);line-height:1.6;}
.terr-stats b{font-size:14px;color:var(--hl);font-weight:400;font-variant-numeric:tabular-nums;}
/* 顺序不能反：窄屏那条必须写在后面，否则被 3 列的规则盖掉 */
@media(max-width:900px){.terr-stats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.terr-stats{grid-template-columns:repeat(2,1fr);}}

.terr-buff{font-size:12px;color:var(--dim);margin-top:4px;}
.terr-buff b{color:var(--green);font-weight:400;}

.terr-wrap{width:100%;overflow:hidden;margin:4px 0;}
.terr-map{width:100%;height:auto;display:block;max-height:74vh;}

/* ---- 连线 ---- */
.tm-e0{stroke:#2b2317;stroke-width:1;}
.tm-e1{stroke:#5a4630;stroke-width:1.4;}

/* ---- 据点 ---- */
.tm-hex{
  stroke:var(--c,#4a3b28);fill:var(--c,#4a3b28);fill-opacity:.07;
  stroke-width:1.4;transition:fill-opacity .2s,stroke-width .2s;
}
.tm-base{stroke:var(--gold);stroke-dasharray:4 3;fill:#1b1510;fill-opacity:1;}
.tm-king{stroke-width:1.7;}
.tm-foe{fill-opacity:.20;}
.tm-me{fill-opacity:.30;stroke-width:1.8;}
.tm-mine{stroke-width:2.4;fill-opacity:.42;}
.tm-act{cursor:pointer;}
.tm-act:hover{stroke:var(--hl);stroke-width:2.2;fill-opacity:.30;}
/* v1.9.85：我方改成恒绿，会长目标不能再占绿色，改用金色虚线 */
.tm-target{stroke:var(--gold) !important;stroke-width:2.2 !important;stroke-dasharray:5 3;}

.tm-t{fill:#8a7c69;font-size:12px;text-anchor:middle;dominant-baseline:central;pointer-events:none;}
.tm-tb{fill:var(--gold);font-size:13px;}
.tm-tk{fill:#9b8558;font-size:9.5px;text-anchor:middle;dominant-baseline:central;pointer-events:none;}
.tm-c{fill:#6b5f4e;font-size:9px;text-anchor:middle;pointer-events:none;}
.tm-c-on{fill:#d8cbb8;}

/* ---- 在途部队 ---- */
.tm-u{fill:var(--red);stroke:#0d0b09;stroke-width:1.2;}
.tm-u-me{fill:var(--green);}
/* 我自己的位置（一人一军：地图上那个白点就是我） */
.tm-mypos{fill:#fff;stroke:#0d0b09;stroke-width:1.2;}

/* ---- 图例 ---- */
.terr-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--dim);margin-top:2px;}
.terr-legend span{display:inline-flex;align-items:center;gap:5px;}
.lg{display:inline-block;width:10px;height:10px;border-radius:2px;border:1px solid var(--line2);}
/* 色块的内联样式由 terr_legend() 按实际公会色写进 style，这两行只是兜底 */
.lg-me{border-color:var(--green);background:rgba(95,174,90,.35);}
.lg-foe{border-color:var(--red);background:rgba(192,80,77,.28);}
.lg-none{border-color:var(--line2);background:#140f0a;}
.lg-target{border:1px dashed var(--gold);background:transparent;}

/* ---- 战报 ---- */
.terr-log{max-height:300px;overflow-y:auto;font-size:12px;line-height:1.7;}
.terr-log > div{padding:3px 0;border-bottom:1px dashed rgba(52,42,30,.7);}
.terr-log .t{color:var(--dim);margin-right:6px;font-variant-numeric:tabular-nums;}
.terr-log .win{color:var(--green);}
.terr-log .lose{color:var(--red);}
.terr-log .info{color:var(--hl);}

/* ---- 规则 ---- */
.terr-rule{font-size:12px;color:var(--dim);line-height:1.95;}
.terr-rule b{color:var(--text);font-weight:400;}
.terr-rule b.hl{color:var(--hl);}

.terr-mapnote{margin-top:8px;font-size:12px;color:var(--dim);}

/* ==========================================================
   v1.9.69 · 全服动态
   ========================================================== */

/* 顶栏按钮上的未读角标：小红点 + 条数，钉在按钮右上角外侧 */
.top-set{position:relative;}
.top-set u.tdot{
  position:absolute;top:-6px;right:-6px;
  min-width:15px;height:15px;line-height:15px;
  padding:0 3px;border-radius:8px;
  background:var(--red);color:#fff;
  font-size:9px;font-style:normal;text-decoration:none;
  text-align:center;letter-spacing:0;
  box-shadow:0 0 0 2px var(--bg);
  animation:tdotPulse 2.4s ease-in-out infinite;
}
@keyframes tdotPulse{
  0%,100%{box-shadow:0 0 0 2px var(--bg),0 0 0 0 rgba(192,80,77,.55);}
  50%    {box-shadow:0 0 0 2px var(--bg),0 0 0 5px rgba(192,80,77,0);}
}

/* 动态列表：一条一行，图标 | 正文 + 元信息 */
.feedlist{list-style:none;margin:0;padding:0;}
.feedlist li{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 2px;border-bottom:1px dashed rgba(52,42,30,.8);
}
.feedlist li:last-child{border-bottom:0;}
.fd-ico{
  flex:0 0 auto;width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--gold);
  background:rgba(201,162,77,.07);border:1px solid var(--line);
  margin-top:1px;
}
.fd-main{flex:1 1 auto;min-width:0;}
.fd-txt{font-size:13px;line-height:1.6;word-break:break-all;}
.fd-name{
  color:var(--hl);font-weight:400;margin-right:4px;
  border-bottom:1px dotted rgba(201,162,77,.4);
}
.fd-name.j1{color:#d98d6a;} .fd-name.j2{color:#7aa3e0;} .fd-name.j3{color:#7ad08a;}
.fd-name.j4{color:#c98de0;} .fd-name.j5{color:#ffd98a;} .fd-name.j6{color:#8ad6e0;}
.fd-body{color:var(--text);}
.fd-meta{margin-top:2px;font-size:11px;color:var(--dim);display:flex;gap:8px;align-items:center;}
.fd-tag{
  padding:0 5px;border-radius:3px;font-size:10px;
  border:1px solid var(--line2);color:var(--dim);
}

/* 分组配色：一眼分得出「战利品 / 成就 / 首领 / 战争」 */
.fd-g-item .fd-ico{color:#c98de0;border-color:rgba(168,111,224,.35);background:rgba(168,111,224,.08);}
.fd-g-ach  .fd-ico{color:var(--hl);border-color:rgba(201,162,77,.35);background:rgba(201,162,77,.08);}
.fd-g-boss .fd-ico{color:#e08a86;border-color:rgba(192,80,77,.35);background:rgba(192,80,77,.08);}
.fd-g-war  .fd-ico{color:#8ad6e0;border-color:rgba(74,158,255,.3);background:rgba(74,158,255,.07);}

/* 移动端顶栏按钮的定位与让位已全部收口到上面那条 @media (max-width:820px)
 * 的 `.topbar .top-act` / `.brand{padding-right}` —— v1.9.243 删掉了这里的重复声明。
 * 两处同优先级同属性，源码靠后的那份会静默覆盖靠前的，改出来非常难查（踩过一次）。 */


/* ==========================================================
   魂卡（v1.9.81）· 角色 → 魂卡
   资源条 + 卡片网格。卡片是「头 / 属性 / 说明 / 按钮」四段竖排，
   和积分商城同款思路：格宽只决定一行放几个，不决定文字能不能读。
   ========================================================== */
.sc-res{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 6px;}
.sc-res-i{background:#100c09;border:1px solid var(--line);border-radius:5px;padding:7px 10px;}
.sc-res-i span{display:block;font-size:11px;color:var(--dim);line-height:1.6;}
.sc-res-i b{font-size:15px;font-weight:400;font-variant-numeric:tabular-nums;}

.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:9px;margin-top:10px;}
.sc-card{
  display:flex;flex-direction:column;gap:7px;
  border:1px solid var(--line);border-radius:6px;background:#100c09;padding:10px 11px;
}
.sc-head{display:flex;gap:9px;align-items:flex-start;min-width:0;}
.sc-ico{
  flex:0 0 32px;width:32px;height:32px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:15px;background:#1a1512;border:1px solid var(--line2);color:var(--hl);
}
.sc-t{flex:1;min-width:0;}
.sc-name{font-size:13px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.sc-desc{font-size:11px;line-height:1.6;margin-top:2px;}
.sc-stat{
  font-size:12px;color:var(--hl);line-height:1.6;
  border-top:1px dashed rgba(74,59,40,.6);padding-top:7px;
}
.sc-meta{font-size:11px;line-height:1.75;}
.sc-act{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;}
.sc-act form{margin:0;}
.sc-act .btn{padding:4px 8px;font-size:10.5px;}

@media (max-width:620px){
  .sc-res{grid-template-columns:repeat(2,1fr);}
  .sc-grid{grid-template-columns:1fr;}
  .sc-act .btn{width:100%;}
}

/* ==========================================================
   角色名片（v1.9.96）
   入口：全服动态 / 排行榜点角色名。只有弹层，没有独立页 ——
   内容一样的话第二个页面没有价值，分享靠 ?card=ID 深链接。
   ========================================================== */
/* 名字本身是 <a>，颜色跟随所在位置（动态里的职业色、榜里的正文色），不要变成链接金 */
.js-card{color:inherit;cursor:pointer;}
.js-card:hover{color:var(--hl);text-decoration:none;}
.rname a.js-card{border-bottom:1px dashed rgba(232,200,119,.28);}
.rname a.js-card:hover{border-bottom-color:var(--hl);}

.pcard-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:80;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.pcard-mask.on{opacity:1;pointer-events:auto;}

.pcard{
  position:fixed;z-index:90;
  width:420px;max-width:calc(100vw - 28px);
  left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);
  max-height:86vh;display:flex;flex-direction:column;
  background:#1b1510;border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  overflow:hidden;
}
.pcard.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}

/* 手机：底部抽屉。用媒体查询而不是 JS 切类，窗口缩放也能跟着变 */
@media (max-width:620px){
  .pcard{
    top:auto;bottom:0;left:50%;width:100%;max-width:100%;
    transform:translate(-50%,16px);
    border-radius:16px 16px 0 0;max-height:88vh;
  }
  .pcard.on{transform:translate(-50%,0);}
}

.pcard-head{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:10px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#241a10,#1b1510);
}
.pcard-head b{font-size:12px;font-weight:400;color:var(--dim);letter-spacing:2px;}
.pcard-x{
  margin-left:auto;background:none;border:0;color:var(--dim);
  font-size:20px;line-height:1;cursor:pointer;padding:0 2px;
}
.pcard-x:hover{color:var(--hl);}
.pcard-body{padding:14px 16px 0;overflow:auto;flex:1;min-height:0;}

/* —— 身份 —— */
.pcard-who{display:flex;align-items:center;gap:10px;}
.pcard-ava{flex:0 0 46px;overflow:hidden;border-radius:8px;}
.pcard-ava img{display:block;width:46px;height:46px;object-fit:cover;border-radius:8px;}
.pcard-ava span{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:8px;font-size:20px;color:#f0e0bc;border:1px solid var(--line2);
  background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.pcard-meta{flex:1;min-width:0;}
.pcard-nm{font-size:18px;letter-spacing:1px;line-height:1.35;}
.pcard-nm.j1{color:#d98d6a;} .pcard-nm.j2{color:#7aa3e0;} .pcard-nm.j3{color:#7ad08a;}
.pcard-nm.j4{color:#c98de0;} .pcard-nm.j5{color:#ffd98a;} .pcard-nm.j6{color:#8ad6e0;}
.pcard-sub{font-size:12px;color:var(--dim);margin-top:2px;}
.pcard-g{color:var(--gold);}

/* —— 战力 —— */
.pcard-pw{
  margin-top:12px;padding:9px 12px;border-radius:6px;
  border:1px solid rgba(201,162,77,.35);background:rgba(201,162,77,.06);
  display:flex;align-items:baseline;gap:8px;
}
.pcard-pw span{font-size:11px;color:var(--dim);letter-spacing:1px;}
.pcard-pw b{font-size:19px;color:var(--hl);font-weight:500;letter-spacing:1px;}

/* —— 分区 —— */
.pcard-sec{margin-top:13px;}
.pcard-hd{font-size:11px;color:#6b6055;letter-spacing:2px;margin-bottom:5px;}
.pcard-honor{font-size:12.5px;line-height:1.85;}
.pcard-honor b{color:var(--hl);font-weight:400;}
.pcard-honor b.off{color:var(--dim);}
.pcard-sep{color:#4a3b28;margin:0 6px;}

.pcard-nums{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.pcard-num{border:1px solid var(--line);border-radius:6px;background:#141009;padding:6px 10px;}
.pcard-num span{display:block;font-size:11px;color:var(--dim);}
.pcard-num b{font-size:13.5px;font-weight:500;color:var(--text);letter-spacing:.5px;}

.pcard-lineup{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px;}
.pcard-lineup:last-child{margin-bottom:0;}
.pcard-chip{
  display:inline-flex;align-items:center;gap:4px;max-width:100%;
  font-size:11.5px;color:var(--text);line-height:1.5;
  border:1px solid var(--line);border-radius:5px;background:#141009;padding:2px 7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pcard-chip i{
  font-style:normal;flex:0 0 auto;width:17px;height:17px;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;color:#f0e0bc;border:1px solid var(--line2);
  background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.pcard-chip em{font-style:normal;color:var(--gold);font-size:10px;letter-spacing:-1px;}
.pcard-chip.empty{color:var(--dim);border-style:dashed;}

.pcard-foot{
  margin-top:13px;padding:9px 0 13px;border-top:1px solid var(--line);
  font-size:11px;color:var(--dim);line-height:1.7;
}
.pcard-del{display:block;color:#e07a76;}

.pcard-empty{padding:26px 16px 30px;text-align:center;color:var(--dim);font-size:13px;}
.pcard-empty span{display:block;font-size:11.5px;margin-top:4px;color:#6b6055;}

/* 骨架屏：慢网下点一下要立刻有反应，否则玩家会以为没点上 */
.pcard-skel{padding:14px 16px 6px;}
.pcard-skel i{
  display:block;background:#241d16;border-radius:5px;margin-bottom:10px;
  animation:cmPulse 1.1s ease-in-out infinite;
}
@keyframes cmPulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .pcard,.pcard-mask{transition:none;}
  .pcard-skel i{animation:none;opacity:.7;}
}

/* ---------- 战团仓库（v1.9.133，v1.9.166 重排） ----------
 * 一屏要同时塞下：容量、金币、筛选、两组物品网格。原来的做法是三段说明文字各占 2~4 行，
 * 光说明就吃掉 300px —— 现在全部收进 .fold，容量并进标题行的 HUD，
 * 金币做成「左右对照 + 一行操作」的一体面板（原来两个 form 各占一行、输入框只有 64px 宽）。
 */
.st-hud{display:flex;align-items:center;gap:7px;}
.st-hud i{display:block;width:92px;height:6px;border-radius:3px;background:#241c15;overflow:hidden;}
.st-hud i u{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#7a5a26,#c9a24d);transition:width .25s;}
.st-hud b{font-size:13px;color:var(--hl);font-variant-numeric:tabular-nums;white-space:nowrap;}
.st-hud.full b{color:#d9654d;}
.st-hud.full i u{background:linear-gradient(90deg,#7a2626,#d9654d);}

/* 标题下面那行：只留「谁在用 / 几格 / 还剩几格」，其余进折叠 */
.st-lead{margin:-6px 0 10px;line-height:1.75;}

/* 金币面板：仓库 ←→ 角色 左右对照，操作行在下方，一个 form 两个提交按钮
 * （button 带 name=act 不同 value，PHP 取被点那个 —— 省掉一个重复的 form） */
.st-gold{margin-top:11px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;
  background:linear-gradient(180deg,#181208,#100c08);}
.st-gold-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.st-gold-c{flex:1 1 130px;min-width:0;}
.st-gold-c span{display:block;font-size:11px;color:var(--dim);line-height:1.5;}
.st-gold-c b{font-size:17px;color:var(--gold);letter-spacing:.5px;font-variant-numeric:tabular-nums;}
.st-gold-ar{flex:0 0 auto;font-size:15px;color:var(--gold);opacity:.55;}
.st-gold-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:9px;padding-top:9px;border-top:1px solid rgba(52,42,30,.65);}
.st-gold-tip{font-size:11px;color:var(--dim);}

/* 仓库与背包两栏用同一套卡片网格（.item 是全局物品行，直接复用），
 * 只把 .item 自带的 margin-bottom 清掉 —— 网格的 row-gap 已经在管间距了。 */
.st-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:8px;margin-top:10px;
}
.st-grid .item{margin-bottom:0;display:flex;flex-direction:column;height:100%;}
/* 同一行里的卡片内容长短不一（有的只有等级+类型，有的带六条属性），
 * 让按钮用 margin-top:auto 贴底 —— 否则两列的「取出 / 存入」会一高一低。 */
.st-grid .item .iact{margin-top:auto;padding-top:7px;}
.st-empty{
  border:1px dashed var(--line2);border-radius:6px;padding:22px 14px;
  text-align:center;color:var(--dim);font-size:12px;line-height:1.8;margin-top:10px;
}
@media (max-width:700px){
  .st-grid{grid-template-columns:1fr;}
  .st-gold-top{gap:8px;}
  .st-gold-c b{font-size:15px;}
  .st-hud i{width:64px;}
  .st-gold-tip{display:none;}   /* 窄屏这行会把两个按钮挤到换行，纯提示信息先让位 */
}

/* ---------- 快速挂机弹层（v1.9.145） ----------
 * 营地挂机页的「快速挂机」整块内容收成一个按钮：平时只有一个价格 + 三个数字，
 * 每天最多点 3 次，常态占掉小半屏是噪音，收进弹层只留一行。
 *
 * 开关是 checkbox + label（纯 CSS），和移动端「更多」抽屉同一套 ——
 * 不多引一个脚本、不需要初始化，POST 后页面重定向也自然回到关闭态。
 * 结构上 .ifast-modal 必须是 .ifast-cb 的**同级兄弟且在后**，
 * 否则 `~` 选不中（把它塞进 .ifast-bar 里就白点）。
 */
.ifast-cb{display:none;}
/* 按钮行：立即入账 + 快速挂机并排（v1.9.146 快挂按钮从独立卡片挪进来） */
.idle-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* 这一行里「立即入账」是真 <button>、「快速挂机」是 <label>（弹层开关）。
 * 同样 padding 下两者的内容盒高度不一样：button 按字体行高撑，label 继承 body 的
 * line-height:1.8 —— 视觉上快挂按钮高出 6~7px，并排看着像没对齐。
 * 不用 height 硬写死（改字号就会崩），改成 inline-flex 居中 + 统一行高，谁都不会多撑。 */
.idle-act .btn{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1.3;box-sizing:border-box;min-height:33px;cursor:pointer;
}
/* 次数用完 / 积分不够：按钮仍可点开看原因，但别给「能买」的暗示 */
.ifast-off{opacity:.5;}

/* v1.9.153：`.page-hero > *` 给所有直接子元素加了 `position:relative;z-index:1`
 * （为了压住头图），而 `.ifast-modal` 正好是 `.card.page-hero` 的直接子元素 ——
 * 于是它自己成了一个 z-index:1 的**层叠上下文**，里面的 mask/panel（75/76）
 * 只在这个上下文内部比较大小。对根上下文来说整块只有 1，
 * 手机底栏 `.mnav`（z-index:60）就盖在弹层之上：表现是「弹层底部被切掉 / 确认按钮点不到」。
 * 解决：给 modal 自己一个够高的层级，让整块浮到最上面。 */
.ifast-modal{display:none;z-index:100;}
.ifast-cb:checked ~ .ifast-modal{display:block;}
/* 顺带记一笔：`body:has(.ifast-cb:checked){overflow:hidden}` 试过，能锁背景滚动，
 * 但实测把整页的滚动容器换掉后，某些自动化截图会一直等不到 layout 稳定；
 * 弹层是 fixed 全屏遮罩，背景能滚也不影响操作，这里不冒这个险。 */
.ifast-mask{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:75;display:block;}
.ifast-panel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:76;width:min(620px,calc(100% - 26px));max-height:86vh;overflow:auto;
  padding:14px 18px 18px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 18px 52px rgba(0,0,0,.66);
}
.ifast-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.ifast-head b{font-size:14px;letter-spacing:1.5px;color:var(--hl);}
.ifast-head .dim{flex:1;min-width:0;}
.ifast-x{
  flex:none;width:26px;height:26px;line-height:24px;text-align:center;
  border:1px solid var(--line2);border-radius:4px;color:var(--dim);
  cursor:pointer;font-size:15px;transition:.18s;
}
.ifast-x:hover{border-color:var(--gold);color:var(--hl);}
.ifast-panel .idle-grid{margin:12px 0 14px;}
.ifast-panel .idle-box{padding:10px 12px;}
.ifast-panel .idle-box b{font-size:17px;}

@media (max-width:700px){
  /* v1.9.153：手机上原来是从底部滑上来的抽屉（bottom:0 + 88vh），
   * 内容一多就被顶出可视区，加上手机浏览器地址栏收放，底部的「确认」按钮经常看不到。
   * 改成**居中**：宽度留边、高度收到 80vh 并允许内部滚动，底部按钮永远够得着。
   * 居中完全靠基类的 left/top:50% + translate，这里千万不要再写 top/bottom —— 
   * 一写就会把 transform 的居中基准带偏。 */
  .ifast-panel{width:calc(100% - 24px);max-height:80vh;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));}
  .ifast-panel .idle-grid{grid-template-columns:1fr 1fr;gap:7px;}
  .ifast-panel .idle-box:last-child{grid-column:1 / -1;}
  .ifast-panel .idle-box b{font-size:15px;}
  .idle-act .btn,.ifast-panel form .btn{width:100%;}
}

/* ---------- 每日任务 · 月卡「一键完成」（v1.9.151） ----------
 * 按钮塞在「每日任务」标题右边。`.bt` 是 `space-between` 的 flex，
 * 现在里面有三个孩子（h2 / form / .br）；给 form 一个 `margin-right:auto`
 * 才能把右侧那组推到底、按钮贴住标题，否则它会被均分到中间。
 * flex-wrap 已在 .bt 上，窄屏时按钮会跟着换行，不用另写媒体查询。 */
.bt .dl-fast{flex:none;margin:0 auto 0 0;display:flex;align-items:center;gap:6px;}

/* ---------- 选择角色页 · 「切换区服」（v1.9.237） ----------
 * 和上面的 .dl-fast 同一个套路：`.bt` 是 `space-between`，现在孩子变成
 * h2 / a / .br 三个，给 a 一个 `margin-right:auto` 才能让它贴住标题，
 * 否则会被均分到标题和「积分」中间。窄屏时 .bt 的 flex-wrap 会让它整颗换行。 */
.bt .srv-sw{flex:none;margin:0 auto 0 0;white-space:nowrap;}
/* 触控高度跟 .btn.tiny 对齐后仍偏小，手机上给到 28px（与顶栏 chip 同高） */
@media (max-width:560px){
  .bt .srv-sw{padding:5px 10px;font-size:11.5px;line-height:1.3;}
}

/* ============ 邮件 / 站内信（v1.9.159） ============
 * 未读用「左侧金线 + 浅金底」而不是加粗字重 —— 加粗会让列表整体变重，
 * 而这里真正要突出的是「有附件没领」，不是「有新消息」。 */
.mail-act{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.ma-form{margin:0;display:flex;}
.maillist{list-style:none;margin:0;padding:0;}
.maillist li{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 2px;border-bottom:1px dashed rgba(52,42,30,.8);
}
.maillist li:last-child{border-bottom:0;}
.maillist li.unread{
  background:rgba(201,162,77,.07);
  border-left:2px solid var(--gold);
  border-radius:0 6px 6px 0;
  padding-left:8px;
}
.ml-ico{
  flex:0 0 auto;width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--gold);
  background:rgba(201,162,77,.07);border:1px solid var(--line);
  margin-top:1px;
}
.ml-main{flex:1 1 auto;min-width:0;}
.ml-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;flex-wrap:wrap;
}
.ml-title{font-size:14px;color:var(--hl);font-weight:400;word-break:break-all;}
.ml-new{
  margin-left:6px;padding:0 5px;border-radius:3px;font-size:10px;
  background:rgba(201,162,77,.18);border:1px solid var(--gold);color:var(--gold);
}
.ml-body{margin-top:3px;font-size:13px;line-height:1.6;color:var(--text);word-break:break-all;}
.ml-att{margin-top:4px;font-size:12px;color:var(--dim);}
.ml-att b{color:var(--gold);font-weight:400;}
.ml-exp{margin-left:6px;color:#c0704a;}
.ml-ops{margin-top:7px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* ---------- 赛季通行证（v1.9.181） ----------
 * 三个要注意的地方：
 * ① 一行三块（等级 / 免费 / 付费），手机上三列一定挤 —— 直接改成上下堆两块，
 *    等级当行首的小标题，别再学 daily 那样横向铺。
 * ② 已领的那半格整体压暗（.got），不是只把按钮 disable —— 玩家扫一眼要知道哪些还没拿。
 * ③ 没到级的整行 .off；置灰用 opacity 而不是把颜色改浅 —— 深色面板上浅色字反而更扎眼。 */
.pass-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:2px;}
.pass-lv{display:flex;align-items:baseline;gap:6px;flex:0 0 auto;}
.pass-lv .lv-num{font-size:22px;color:var(--gold);letter-spacing:1px;}
/* 买等级的「+」（v1.9.189）：紧跟在「/ 20 级」后面。
 * 24px 的圆是视觉尺寸，触控半径靠 ::after 往外撑到 40px ——
 * 圆再大就会把 Lv 那行顶高，一个 20 级的小东西没必要抢主角。 */
.pass-plus{
  position:relative;align-self:center;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-left:4px;border-radius:50%;
  border:1px solid rgba(201,162,77,.55);background:rgba(201,162,77,.12);
  color:var(--gold);font-size:17px;line-height:1;font-weight:400;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.pass-plus::after{content:"";position:absolute;left:-8px;top:-8px;right:-8px;bottom:-8px;}
.pass-plus:hover,.pass-plus:active{background:rgba(201,162,77,.24);}
.pass-bar{
  position:relative;flex:1 1 200px;min-width:150px;height:16px;border-radius:8px;
  background:#1a1610;border:1px solid var(--line2);overflow:hidden;
}
.pass-bar i{
  display:block;height:100%;border-radius:7px;
  background:linear-gradient(90deg,#8a6a1e,#e0be6a,#8a6a1e);
  background-size:200% 100%;animation:plantFlow 3s linear infinite;
}
.pass-bar i.full{background:#4b6b2a;}
.pass-bar em{
  position:absolute;left:0;top:0;width:100%;text-align:center;font-style:normal;
  font-size:10px;line-height:16px;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.pass-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.pass-row{
  display:grid;grid-template-columns:38px minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:10px;padding:7px 10px;
  border:1px solid var(--line);border-radius:6px;background:rgba(13,10,7,.55);
}
.pass-row.off{opacity:.45;filter:saturate(.4);}
.ps-lv b{font-size:15px;color:var(--gold);font-weight:400;}
.ps-cell{display:flex;align-items:center;gap:8px;min-width:0;}
.ps-cell.got{opacity:.5;}
.ps-tag{
  flex:none;font-size:10px;padding:0 5px;border-radius:3px;line-height:15px;
  border:1px solid var(--line2);color:var(--dim);
}
.ps-cell.pay .ps-tag{color:var(--gold);border-color:rgba(201,162,77,.4);}
.ps-txt{flex:1 1 auto;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:640px){
  /* 手机上三列排不开：等级 + 免费档占第一行，付费档跨到第二行整行
     （付费那一半才是玩家真正关心的，别把它压成窄条）。 */
  .pass-row{grid-template-columns:32px minmax(0,1fr);}
  .ps-cell.pay{grid-column:1 / -1;padding-top:6px;border-top:1px dashed var(--line);}
  .pass-bar em{font-size:10px;}
}

/* ---------- 外观：头像框（v1.9.184） ----------
 * 结构：.ava-fr（容器，尺寸 = 头像尺寸）> img.job-avatar + i.ava-fr-ring（覆盖层）
 *
 * **框比头像大（132%），头像保持原尺寸** —— 这是第二版。
 * 第一版把头像缩到 72% 塞进框内，实测 72px 下框只剩一圈暗金边：
 * 星芒与羽翼本来就在方形画布的边缘，缩到 72px 时它们只占几像素，全糊了。
 * 反过来让框溢出到 95px、头像不动，星芒才伸得出来、头像也不会「戴了框反而变小」。
 *
 * 溢出是靠负 left/top 做的，所以父容器不能 overflow:hidden（.pcard-ava 已单独放开）。
 * 头像有**内联** width/height（job_avatar_html 生成），必须 !important 压掉。
 *
 * 只在 ≥46px 的展示位启用（角色页 72 / 名片 46）：
 * 34/40px 的列表位框体会糊成一圈金边，反而比没有更难看。 */
.ava-fr{position:relative;display:inline-block;flex:0 0 auto;vertical-align:middle;line-height:0;}
.ava-fr > img.job-avatar{
  position:relative;
  width:100%!important;height:100%!important;
  border-radius:50%;object-fit:cover;
}
.ava-fr .ava-fr-ring{
  position:absolute;left:-16%;top:-16%;width:132%;height:132%;display:block;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  pointer-events:none;
}
/* 名片里的头像比角色页小，132% 会蹭到右边的名字，单独收窄到 118% */
.pcard-ava .ava-fr .ava-fr-ring{left:-9%;top:-9%;width:118%;height:118%;}
/* 名片里 .pcard-ava 原本 overflow:hidden + 圆角，会把框顶的星芒和底部羽翼裁掉 */
.pcard-ava.has-fr{overflow:visible;}

/* ---------- 外观：名片皮肤（v1.9.184 起，v1.9.185 换亮版星辰） ----------
 * 负 margin 抵消 .pcard-body 的 padding（14px 16px 0），让背景铺满整卡。
 *
 * 渐变遮罩刻意是「两头重、中间轻」：上下压深保住标题栏与页脚的可读性，
 * 中间 40% 处只压 24% —— 银河正好落在这一段，压重了就又变回一张深色底图
 * （v1.9.184 就是压到 .74 被反馈「像深海色背景图」）。
 *
 * 底图按名片比例预裁（640×760 ≈ 卡面 420×500），所以用 center center：
 * 用 center bottom 会把银河推到卡片下缘、上半部只剩黑场。
 *
 * 子块必须半透明 —— .pcard-num 原本是实色 #141009，铺在星空上就是四个黑方块。
 */
.pcard-in{margin:-14px -16px 0;padding:14px 16px 0;}
.pcard-sk-starfield{
  background-image:
    /* 第一层是「标题栏投影」：.pcard-head 是不在 .pcard-in 里的棕色实色条，
       不加这一层，星空会从标题栏下面硬切一刀，像两张图拼起来。 */
    linear-gradient(180deg,rgba(27,21,16,.80) 0,rgba(27,21,16,0) 74px),
    linear-gradient(180deg,rgba(14,19,38,.44) 0%,rgba(10,13,26,.22) 40%,rgba(8,10,20,.58) 100%),
    url("../img/card/card_starfield.jpg");
  background-size:auto,auto,cover;
  background-position:center top,center center,center center;
  background-repeat:no-repeat,no-repeat,no-repeat;
}
.pcard-sk-starfield .pcard-nm{color:#e8eefc;text-shadow:0 1px 4px rgba(0,0,0,.95);}
.pcard-sk-starfield .pcard-sub,
.pcard-sk-starfield .pcard-hd{color:#9aa4bd;}
.pcard-sk-starfield .pcard-honor{color:#cfd6e6;}
.pcard-sk-starfield .pcard-honor b{color:#f0d79a;}
.pcard-sk-starfield .pcard-sep{color:#4b5570;}
.pcard-sk-starfield .pcard-num,
.pcard-sk-starfield .pcard-chip{background:rgba(10,12,22,.46);}
.pcard-sk-starfield .pcard-num span{color:#96a0b8;}
.pcard-sk-starfield .pcard-num b{color:#e3eaf8;}
.pcard-sk-starfield .pcard-foot{color:#8f99b2;}

/* ---------- 外观：活动名片皮肤（v1.9.189，四张） ----------
 * 和 starfield 那种「一张写一套」不同：这四张共用一套遮罩与文字配色，只换底图
 * （底图走 --sk-img，因为 background-image 是整条覆盖，没法在四个类里各追加一层）。
 *
 * 为什么文字不跟着底色走：四张分别是赤红战场 / 青绿深渊 / 黄绿林径 / 紫金王座，
 * 各自调一套字色要写 4×8 条，还容易在灰度下糊成一片。统一用暖白 + 强投影，
 * 压在哪种底色上都读得清。
 *
 * 四张现在都是 live=false（目录里躺着、外观页不显示、名片也用不到），
 * 但样式先备好 —— 投放时只改 data.php 一个字段，不用回来补 CSS。
 */
.pcard-sk-crimson,.pcard-sk-abyss,.pcard-sk-vale,.pcard-sk-throne{
  --sk-img:none;
  background-image:
    /* 第一层：标题栏投影，和 starfield 同一套（不然星空/场景会从标题栏下面硬切） */
    linear-gradient(180deg,rgba(27,21,16,.82) 0,rgba(27,21,16,0) 74px),
    /* 第二层：上下压深、中间轻 —— 保住标题栏与页脚，中间留给场景露脸 */
    linear-gradient(180deg,rgba(10,9,7,.52) 0%,rgba(8,7,6,.26) 40%,rgba(6,5,4,.64) 100%),
    /**/
    var(--sk-img);
  background-size:auto,auto,cover;
  background-position:center top,center center,center center;
  background-repeat:no-repeat,no-repeat,no-repeat;
}
.pcard-sk-crimson{--sk-img:url("../img/card/card_crimson.jpg");}
.pcard-sk-abyss  {--sk-img:url("../img/card/card_abyss.jpg");}
.pcard-sk-vale   {--sk-img:url("../img/card/card_vale.jpg");}
.pcard-sk-throne {--sk-img:url("../img/card/card_throne.jpg");}

.pcard-sk-crimson .pcard-nm,
.pcard-sk-abyss .pcard-nm,
.pcard-sk-vale .pcard-nm,
.pcard-sk-throne .pcard-nm{color:#f4ead8;text-shadow:0 1px 4px rgba(0,0,0,.95);}
.pcard-sk-crimson .pcard-sub,
.pcard-sk-abyss .pcard-sub,
.pcard-sk-vale .pcard-sub,
.pcard-sk-throne .pcard-sub,
.pcard-sk-crimson .pcard-hd,
.pcard-sk-abyss .pcard-hd,
.pcard-sk-vale .pcard-hd,
.pcard-sk-throne .pcard-hd{color:#a89a84;}
.pcard-sk-crimson .pcard-honor,
.pcard-sk-abyss .pcard-honor,
.pcard-sk-vale .pcard-honor,
.pcard-sk-throne .pcard-honor{color:#ded2bc;}
.pcard-sk-crimson .pcard-honor b,
.pcard-sk-abyss .pcard-honor b,
.pcard-sk-vale .pcard-honor b,
.pcard-sk-throne .pcard-honor b{color:#f0d79a;}
.pcard-sk-crimson .pcard-sep,
.pcard-sk-abyss .pcard-sep,
.pcard-sk-vale .pcard-sep,
.pcard-sk-throne .pcard-sep{color:#5c5142;}
/* 数字格与徽章必须半透明：实色 #141009 铺在场景上就是四个黑方块 */
.pcard-sk-crimson .pcard-num,
.pcard-sk-abyss .pcard-num,
.pcard-sk-vale .pcard-num,
.pcard-sk-throne .pcard-num,
.pcard-sk-crimson .pcard-chip,
.pcard-sk-abyss .pcard-chip,
.pcard-sk-vale .pcard-chip,
.pcard-sk-throne .pcard-chip{background:rgba(12,10,8,.50);}
.pcard-sk-crimson .pcard-num span,
.pcard-sk-abyss .pcard-num span,
.pcard-sk-vale .pcard-num span,
.pcard-sk-throne .pcard-num span{color:#a2937c;}
.pcard-sk-crimson .pcard-num b,
.pcard-sk-abyss .pcard-num b,
.pcard-sk-vale .pcard-num b,
.pcard-sk-throne .pcard-num b{color:#efe3cd;}
.pcard-sk-crimson .pcard-foot,
.pcard-sk-abyss .pcard-foot,
.pcard-sk-vale .pcard-foot,
.pcard-sk-throne .pcard-foot{color:#9a8c76;}

   不加右边距星芒会压到名字第一个字。上下溢出各 8px 落在 .bf 的内边距里，不用管。 */
.bf .ava-fr{margin:0 8px 0 2px;}

/* ---------- 外观页（v1.9.185） ----------
 * 一张卡 = 一件外观：预览在上、名字与来源在中、按钮在下。
 * 未获得的那张整体压暗 + 去掉按钮，来源说明照常显示 —— 玩家想知道的是「去哪拿」，
 * 不是「我不能点」。用 opacity 置灰，别改颜色：浅色在夜间主题下会发光。 */
.ap-sec{margin-top:14px;}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:8px;}
.ap-card{
  display:flex;flex-direction:column;gap:7px;
  padding:10px;border:1px solid var(--line);border-radius:7px;background:rgba(13,10,7,.55);
}
.ap-card.on{border-color:rgba(201,162,77,.45);background:rgba(38,29,15,.5);}
.ap-card.lock{opacity:.5;}
.ap-thumb{
  height:76px;border-radius:6px;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 30%,#241b10,#0f0c09);
  display:flex;align-items:center;justify-content:center;overflow:visible;
}
.ap-thumb.sk{
  border-color:var(--line2);
  background-size:cover;background-position:center center;
}
/* v1.9.186：名片未获得时也显示皮肤底图（与头像框口径一致，让玩家看到外观长啥样），
 * 但盖一层深色遮罩 + 「未获得」文字提示 —— 不是灰掉一整块让人误以为没图。 */
.ap-card.lock .ap-thumb.sk{
  position:relative;
}
.ap-card.lock .ap-thumb.sk::after{
  content:'';position:absolute;inset:0;border-radius:6px;
  background:rgba(8,6,4,.62);
}
.ap-card.lock .ap-thumb.sk .small{
  position:relative;z-index:1;color:#e8d3a2;
}
/* v1.9.192：活动外观（目录里有、还没开放）。**不清灰** —— 这是给玩家看的预告，
 * 看不清等于没放；只加虚线边 + 右上角「未解锁」角标。卡片本来就没有按钮可点，
 * 所以不需要额外禁用控件。注意这条要写在 `.ap-card.lock` 之后才盖得住 opacity .5。 */
.ap-card.soon{position:relative;opacity:.94;border-style:dashed;border-color:rgba(201,162,77,.24);}
.ap-card.soon .ap-thumb.sk::after{background:rgba(8,6,4,.12);}
.ap-thumb.sk{height:88px;}
.ap-tag{
  position:absolute;right:7px;top:7px;z-index:3;
  padding:1px 6px;border-radius:3px;font-size:10px;line-height:1.5;letter-spacing:.5px;
  color:#e8d3a2;background:rgba(18,13,8,.88);border:1px solid rgba(201,162,77,.42);
}
.ap-nm{font-size:13px;}
.ap-src{font-size:11px;color:var(--dim);line-height:1.5;min-height:32px;}
/* 6 列一排后每张卡只有 118px，描述原本 2~4 行不定 → 卡高参差、下面的按钮也不齐。
 * 描述钳到 3 行，最后一行（获取途径 / 按钮 / 使用中）用 margin-top:auto 贴底。 */
.ap-card .ap-src{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.ap-card > *:last-child{margin-top:auto;}
.ap-use{font-size:11px;color:var(--gold);}
@media(max-width:640px){
  /* 手机上 auto-fill 会排出 4 列、每列 100px 出头，名字都放不下，改成固定 2 列 */
  .ap-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .ap-thumb{height:64px;}
  .ap-thumb.sk{height:76px;}
}

/* 战报里的头像框（v1.9.185）两处特调：
 * ① 框是 132% 溢出的，.bf-face 里头像紧贴名字，不加右边距星芒会压到名字第一个字。
 * ② **头像不缩**：通用规则是缩到 72% 塞进镂空圆（角色页 72px 时好看），
 *    但战报只有 52px，缩完变 37px，比不戴框还小 —— 小尺寸改成「框压边」，
 *    头像铺满 52px，金环压在头像外圈上。 */
.bf .ava-fr{margin:0 8px 0 2px;}
.bf .ava-fr > img.job-avatar{
  left:0;top:0;width:100%!important;height:100%!important;
}

/* ================= 通行证 · 购买确认弹层（v1.9.187）=================
 * 100 R币的通行证与「R币买等级」都走这套弹层，一个按钮直接扣款太容易误触。
 * 结构照挂机页的快挂弹层：checkbox + .pm-modal 必须同级兄弟且紧邻，
 * 选择器用 `+` 而不是 `~` —— 同一张卡里有两个弹层，`~` 会把它们一起展开。 */
.pm-cb{display:none;}
.pm-cb:checked + .pm-modal{display:block;}
.pm-modal{display:none;}
.pm-mask{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:75;display:block;}
.pm-panel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:76;width:min(420px,calc(100% - 26px));max-height:86vh;overflow:auto;
  padding:14px 18px 18px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 18px 52px rgba(0,0,0,.66);
}
.pm-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pm-head b{flex:1;}
.pm-x{cursor:pointer;color:var(--dim);font-size:18px;line-height:1;}
.pm-act{display:flex;gap:8px;margin-top:14px;}
.pm-act > *{flex:1;text-align:center;}
/* 买等级弹层里的表单：标签与数字框同一行，按钮在下面 */
.pm-form{margin-top:10px;}
.pm-form .tiny-input{margin-left:6px;}

/* ================= 通行证 · 窄屏重排（v1.9.188） =================
 * 桌面版是「一行铺开」：等级 + 进度 + 购买一行、四格指标一行、三个操作一行。
 * 390px 下全部会挤：四格指标压到 85px 一格（「满 3 天 +250 点」直接溢出）、
 * 购买按钮被迫折行、经验说明变成一堵五行的字墙。
 * 这里只做**窄屏重排**，桌面样式保持原样。
 */
.pass-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.ps-src{
  display:inline-flex;align-items:baseline;gap:5px;padding:3px 8px;
  border:1px solid var(--line);border-radius:4px;background:rgba(13,10,7,.5);
  font-size:11.5px;color:var(--dim);
}
.ps-src b{font-size:13px;color:var(--gold);font-weight:400;}
.pass-note{margin-top:8px;font-size:11.5px;line-height:1.7;}
.pass-buy-note{
  margin-top:10px;padding:2px 0 2px 10px;border-left:2px solid rgba(201,162,77,.5);
  font-size:11.5px;line-height:1.8;color:var(--dim);
}
/* 操作行是卡片最后一块：.bt 自带的下边框在这里只会变成一条「分隔了个寂寞」的线 */
.pass-ops{gap:8px;margin-top:12px;border-bottom:0;padding-bottom:0;}
.pass-ops .pass-own{flex:1 1 auto;}
.pass-legend .m-only{display:none;}

@media(max-width:640px){
  /* ① 头部三段各占整行：Lv + 状态一行、进度条一整行、购买按钮做满宽 CTA。
        顺序靠 order 定 —— 状态标签在 DOM 里排在进度条后面，不排一下会单独占一行。 */
  .pass-top{gap:8px 10px;}
  .pass-top .pass-lv{flex:1 1 auto;}
  /* 加号在手机上放大到 28px：24px 的圆点触控太容易点到旁边 */
  .pass-plus{width:28px;height:28px;font-size:19px;margin-left:6px;}
  .pass-plus::after{left:-6px;top:-6px;right:-6px;bottom:-6px;}
  .pass-top > .tag{order:1;}
  .pass-top .pass-bar{order:2;flex:1 1 100%;height:18px;min-width:0;}
  .pass-top .pass-bar em{line-height:18px;}
  .pass-top > .btn,
  .pass-top > label.btn{order:3;flex:1 1 100%;padding:9px 0;font-size:13px;}

  /* ② 四格指标 2×2（auto-fit 在 390px 只能挤出 85px 一格，副文案必然溢出） */
  .sum.pass-sum{grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 0;}
  .sum.pass-sum > div{padding:7px 9px;}
  .sum.pass-sum b{font-size:15px;}
  .sum.pass-sum span{font-size:10.5px;}

  /* 经验来源：窄屏改成三行清单（点数右对齐），不是 2+1 的错行 chip ——
     390px 下三个 chip 必然折成「两个 + 一个」，看着像排错了版。 */
  .pass-src{flex-direction:column;gap:0;margin-top:8px;}
  .ps-src{
    justify-content:space-between;padding:6px 0;border:0;border-radius:0;background:transparent;
    border-bottom:1px dashed var(--line);font-size:12px;
  }
  .ps-src b{font-size:13px;order:2;}
  .pass-src .ps-src:last-child{border-bottom:0;}
  .pass-note,.pass-buy-note{font-size:11px;line-height:1.75;}

  /* ③ 底部操作拆两行：已领数独占一行，「一键领取」满宽铺开
        （v1.9.189 起「买等级」已挪到等级旁，这一行不再需要两列按钮） */
  .pass-ops{gap:6px;}
  .pass-ops .pass-own{flex:1 1 100%;}
  .pass-ops > .btn,
  .pass-ops > label.btn{flex:1 1 0;min-width:0;padding:9px 4px;font-size:12.5px;}
  .pass-ops > form.inline{flex:1 1 100%;min-width:0;display:flex;}
  .pass-ops > form.inline .btn{flex:1 1 auto;padding:10px 4px;font-size:13px;}

  /* ④ 奖励行：正文允许换行（否则「限定传说宠物【星辰守望者】」被省略号吃掉）；
        领取按钮加高到 30px 触控；「购买后解锁」与左侧「未解锁」标签重复，窄屏省掉 */
  .pass-row{grid-template-columns:26px minmax(0,1fr);gap:6px 8px;padding:9px 9px;}
  .ps-lv b{font-size:14px;}
  .ps-txt{white-space:normal;line-height:1.35;}
  .ps-cell.pay{grid-column:1 / -1;padding-top:8px;}
  .ps-cell .btn{min-height:30px;padding:0 11px;display:inline-flex;align-items:center;}
  .ps-hint{display:none;}

  /* ⑤ 图例：桌面「左免费右付费」在窄屏变成「上免费下付费」 */
  .pass-legend .pc-only{display:none;}
  .pass-legend .m-only{display:inline;}
}

/* ---------- 外观 · 收集加成条（v1.9.188） ----------
 * 放在页面顶部而不是塞进每个分类的小标题里：加成是「两类合计」才看得清的一天账，
 * 拆开两处玩家还要自己加。左边是结果，右边是单价与数量，方便对账。 */
.ap-bonus{
  margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:5px;
  background:rgba(13,10,7,.55);font-size:12px;line-height:1.75;
}
.ap-bonus .dim{margin-top:2px;}
/* 标题行 / 数值行 / 单价行：数值单独一行，避免「生命 +1000 · 攻击 +200」
   在窄屏从「·」处折断，剩下半截单独占一行。 */
.ap-bonus-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.ap-bonus-h .dim{font-size:11px;}
.ap-bonus-v{display:flex;gap:16px;flex-wrap:wrap;margin:3px 0 2px;font-size:13px;}
.ap-bonus-v b{color:var(--hl);font-weight:400;}

/* ---------- 角色位 · 紧凑状态条（v1.9.190）----------
 * 原来是 7 张带标题带说明的卡片（每个 150px 起），单独占一张卡、一整屏；
 * 而这个页 99% 的用途只是「点一下切角色」。压成一行七格：
 *   上排 = 来源（初始 / 1转 / 3转 / ★30…），下排 = 状态（已建号 / 空闲 / 待转生 / 可解锁 / 未开放）。
 * 七格一行在 390px 下每格约 44px：字号必须压到 11/10px 且 nowrap，否则会折行把条撑成两行。 */
.slot-bar{
  margin-top:12px;padding:9px 10px 10px;
  border:1px solid var(--line);border-radius:6px;background:rgba(13,10,7,.5);
}
.sb-head{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;margin-bottom:7px;}
.sb-head > b{font-size:13px;font-weight:400;color:var(--gold);letter-spacing:1px;}
.sb-cells{display:flex;gap:4px;}
.sb-c{
  flex:1 1 0;min-width:0;padding:4px 2px;text-align:center;overflow:hidden;
  border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.22);
}
.sb-c b{display:block;font-size:11px;font-weight:400;line-height:1.35;white-space:nowrap;}
.sb-c span{display:block;font-size:10px;line-height:1.35;color:var(--dim);white-space:nowrap;}
.sb-c.used{border-color:rgba(201,162,77,.4);background:#171208;}
.sb-c.used b{color:var(--gold);}
.sb-c.open{border-color:rgba(108,191,90,.4);}
.sb-c.open b{color:#8fd46a;}
.sb-c.buy{border-color:rgba(201,162,77,.55);background:#171208;}
.sb-c.buy b{color:var(--gold);}
.sb-c.cond{border-style:dashed;border-color:rgba(230,225,215,.16);opacity:.75;}
.sb-c.lock{opacity:.5;}
.slot-bar .slot-act{margin-top:9px;gap:8px;}
/* 说明文字是这一行的最后一项：桌面跟按钮同排（省一层高度），窄屏自动落到下一行 */
.slot-bar .slot-act > span.dim{flex:1 1 220px;min-width:0;font-size:11px;line-height:1.6;}
@media(max-width:520px){
  .sb-cells{gap:3px;}
  .sb-c{padding:4px 1px;}
  .sb-c b{font-size:10.5px;}
  .sb-c span{font-size:9.5px;}
}

/* ===== 养成线图标（宠物 / 坐骑 / 异兽）=====
   96px 方图铺满 34 / 32 / 26 / 20 四种容器，按容器圆角裁切。
   缺图时 companion_img() 回落成 .cmp-txt 里的汉字，所以这些容器两种内容都要能居中。
   ⚠️ .fc-ico 原本只有 flex-basis 与字号，高度是行高撑出来的；
      放图片必须显式给 20px，否则 img 的 height:100% 会退回图片原始 96px，把融合行整行撑开。 */
.pet-ico,.ds-ico,.bs-icon,.ci-ico,.fc-ico,.ms-ico,.mt-ico{overflow:hidden;}
.fc-ico{width:20px;height:20px;border-radius:4px;}
.pet-ico img,.ds-ico img,.bs-icon img,.ci-ico img,.fc-ico img,.ms-ico img,.mt-ico img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;
}
.cmp-txt{display:block;line-height:1;}

/* ==========================================================
 * v1.9.204 · 装备页：8 部位卡片网格
 *
 * 原来是一条条横排（eq-slot + eq-label + item 行），8 件摊下来是一列长条，
 * 视觉上像「列表」而不是「装备栏」。改成两列卡片后，每张卡里塞得下
 * 「等级 / 强化 / 有效属性 / 洗练词条 / 宝石孔」+ 强化·洗练·镶嵌·卸下 四个动作。
 *
 * 品质色只染左边框和装备名：整卡上色会把按钮和数值一起染绿/染紫，读起来很累。
 * ========================================================== */
.eq-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.eq-card{
  display:flex;gap:9px;padding:9px 10px;border-radius:6px;
  border:1px solid var(--line);border-left:3px solid var(--line2);
  background:#100c09;
}
.eq-card.empty{border-style:dashed;border-left:1px dashed var(--line2);align-items:center;}
.eq-card.q0{color:inherit;border-left-color:#5a5048;}
.eq-card.q1{color:inherit;border-left-color:#3a6ab0;}
.eq-card.q2{color:inherit;border-left-color:#b09020;}
.eq-card.q3{color:inherit;border-left-color:#7a3ab0;}
.eq-card.q4{color:inherit;border-left-color:#1f8a52;}

.ec-tag{
  flex:0 0 30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);border-radius:5px;background:#0a0806;
  font-size:13px;color:var(--gold);
}
.eq-card.empty .ec-tag{color:#5f564c;border-style:dashed;}
.ec-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.ec-name{font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ec-score{margin-left:auto;font-size:10.5px;color:var(--dim);white-space:nowrap;}
.ec-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;}
.ec-act form{margin:0;}
.ec-act .btn.tiny{padding:2px 8px;font-size:11px;}

/* 镶嵌抽屉：summary 做成一枚小按钮，展开后才出现孔位与开孔按钮 */
.ec-gem{margin-top:3px;}
.ec-gem > summary{list-style:none;cursor:pointer;display:flex;align-items:center;}
.ec-gem > summary::-webkit-details-marker{display:none;}
.ec-gem-sum{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;padding:2px 8px;border-radius:4px;
  border:1px solid var(--line2);background:#0e0b08;color:var(--text);
}
.ec-gem-sum .tag{line-height:13px;font-size:9.5px;padding:0 4px;}
.ec-caret{color:var(--dim);transition:transform .15s;}
.ec-gem[open] .ec-caret{transform:rotate(180deg);}
.ec-gem[open] > summary .ec-gem-sum{border-color:rgba(201,162,77,.45);color:var(--gold);}
.ec-gem .slots{margin-top:7px;}
.ec-hole{display:inline-block;margin-top:7px;font-size:11px;}

@media (max-width:820px){
  .eq-grid{grid-template-columns:1fr;}
  .ec-tag{flex:0 0 26px;height:26px;font-size:12px;}
}
/* 空槽那句「背包里有更合适的…」：跟卡片正文同字号，别抢装备名的视线 */
.ec-meta{font-size:11px;line-height:1.6;color:var(--dim);}

/* ---------- 锻造页：「身上装备」分组默认收起（v1.9.204） ---------- */
.fg-worn{flex:0 0 auto;margin:0 0 2px;}
.fg-worn > summary{padding:7px 10px;font-size:12px;gap:8px;}
.fg-worn > summary b{font-size:12.5px;font-weight:normal;color:var(--text);letter-spacing:1px;}
.fg-worn[open] > summary{border-bottom:1px solid var(--line);}
.fg-worn .fg-body{
  display:flex;flex-direction:column;gap:7px;padding:8px 8px 9px;
}

/* ---------- 异兽头像（v1.9.205） ----------
 * 宠物 pet-row / 坐骑 mount-row 早就有头像，异兽的「出战位」和「我的异兽」一直是纯文字。
 * 图鉴用的 .bs-icon 不动（34px，带 ? 未获得态）；这里是列表/出战位共用的 .bs-ico。
 * 「我的异兽」沿用通用 .item 行，用 grid 把头像单独放到第一列，不必再套一层 div —— 少一层就少一处剪错的风险。
 */
.bs-ico{
  flex:0 0 32px;width:32px;height:32px;border-radius:6px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#f0e0bc;
  border:1px solid var(--line2);background:radial-gradient(circle at 30% 20%,#3a2c1a,#1a140e);
}
.bs-ico img{width:100%;height:100%;object-fit:cover;display:block;}
.bs-top{display:flex;align-items:center;gap:8px;}
.item.bs-item{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:9px;align-items:start;}
.item.bs-item > .bs-ico{grid-column:1;grid-row:1 / span 3;}
.item.bs-item > .iname,
.item.bs-item > .imeta,
.item.bs-item > .iact{grid-column:2;}

/* 宝石背包折叠条（v1.9.211）：它与正下方的「身上装备」是同款 details，
   两条挨着容易看混 —— 标题用金色、外框稍亮一档，区分「我的库存」与「待处理的装备」 */
/* 必须带 details.fold 前缀：`details.fold{border:1px solid ...}` 是「元素+类」，
   单类选择器压不过它，写 .fg-gem{border-color} 会静默失效 */
details.fold.fg-gem{border-color:rgba(201,162,77,.34);}
details.fold.fg-gem > summary b{color:var(--gold);}

/* ==========================================================
   全服动态 · 右侧贴边挂件 + **右侧**抽屉（v1.9.226 / 抽屉方向改于 v1.9.240）
   ----------------------------------------------------------
   原来「动态」是顶栏的一个按钮，玩家必须先离开当前页面才能看到它 ——
   可动态的价值恰恰是「顺手瞄一眼此刻服里在发生什么」，一离开就断了。
   v1.9.240：抽屉从「底部上滑」改成「右侧滑出」，挂件在右边、列表也从右边出来。

   层级：挂件 70（压正文、不压任何弹层）｜遮罩 88 ｜抽屉 89。
   都高于手机底栏 .mnav(60)，低于角色名片 .pcard(90) ——
   抽屉里点角色名时，名片要能盖在抽屉之上。
   .app 没有 transform / filter，所以这里的 fixed 是相对视口，不会跑偏。
   ========================================================== */
/* v1.9.239：整体放大到原来的 1.275 倍（= 上一版 1.5× 再收 15%，玩家反馈偏大）。
 * 尺寸全部按倍数写死而不是用 transform:scale() —— scale 会把边框、红点和字体
 * 一起做亚像素缩放，1px 边框会糊成灰线、字也会发虚。
 * 换算表（原值 → 现在）：padding 9/6/10→12/8/13、字号 12→15、图标 14→18、
 * 字距 2→2.5、圆角 9→11、红点 16→20。 */
.fdock{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:70;
  display:flex;flex-direction:column;align-items:center;
  padding:12px 8px 13px;
  background:linear-gradient(180deg,#2b2116,#191309);
  border:1px solid var(--line2);border-right:0;
  border-radius:11px 0 0 11px;
  box-shadow:-3px 0 17px rgba(0,0,0,.5);
  color:var(--hl);
  font-size:15px;line-height:1.1;letter-spacing:2.5px;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.fdock i{
  font-style:normal;font-size:18px;line-height:1;color:var(--gold);
  margin-bottom:6px;transition:color .18s ease;
}
.fdock em{font-style:normal;display:block;}
.fdock:hover{background:linear-gradient(180deg,#3a2c1a,#221a10);color:#f4e3b8;}
.fdock:hover i{color:var(--hl);}
.fdock:active{transform:translateY(-50%) translateX(-2px);}

/* 红点：内容为空时整块收起来 —— 不靠 JS 切 display，少一处状态要同步 */
.fdock-dot{
  position:absolute;top:-7px;left:-8px;
  min-width:20px;height:20px;line-height:20px;
  padding:0 4px;border-radius:11px;
  background:var(--red);color:#fff;
  font-size:11px;font-style:normal;text-decoration:none;
  text-align:center;letter-spacing:0;
  box-shadow:0 0 0 2px var(--bg);
  animation:tdotPulse 2.4s ease-in-out infinite;
}
.fdock-dot:empty{display:none;}

.fdock-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.62);
  z-index:88;opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.fdock-mask.on{opacity:1;visibility:visible;}

/* v1.9.240：抽屉从「底部上滑」改成**右侧滑出**。
 *
 * 原来是从底下顶起来的一条（bottom:0 + translateY(101%)），在手机上等于又盖住
 * 半个屏幕的下半截，和右下角的底栏、挂件挤在一起。改成右侧整条：
 * 挂件在右边，列表也从右边出来，「点哪儿出哪儿」，动线最短。
 *
 * · 宽度 min(92vw, 380px)：窄屏留 8% 的缝能看见后面的页面（也顺便能点遮罩关掉），
 *   宽屏固定 380px，太宽反而不好读。
 * · 进出靠 translateX(101%)，不是 display 切换 —— 收起时还能有滑出动画，
 *   而且 pointer-events:none 保证它不挡住正文链接。
 * · 原来的顶部小把手（::before）去掉了：整条面板贴满上下边，没有「可以往上推」的暗示，
 *   留着反而误导；关闭方式仍是 × 与点遮罩。 */
.fdock-sheet{
  position:fixed;top:0;right:0;bottom:0;z-index:89;
  width:min(92vw,380px);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#241b12,#15100c);
  border:1px solid var(--line2);border-right:0;
  border-radius:14px 0 0 14px;
  box-shadow:-12px 0 34px rgba(0,0,0,.62);
  transform:translateX(101%);
  transition:transform .26s cubic-bezier(.22,.9,.32,1);
  pointer-events:none;                 /* 收起时不接点击，别挡住正文的链接 */
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.fdock-sheet.on{transform:translateX(0);pointer-events:auto;}

.fdock-head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
  padding:14px 14px 10px;      /* 顶部原来留 17px 是给「小把手」的，把手去掉后收回常规间距 */
  border-bottom:1px solid var(--line);
}
.fdock-head b{font-size:14px;color:var(--hl);letter-spacing:1px;}
.fdock-x{
  margin-left:auto;
  width:28px;height:28px;padding:0;
  background:transparent;border:1px solid var(--line);border-radius:6px;
  color:var(--dim);font-size:16px;line-height:1;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.fdock-x:hover{color:var(--hl);border-color:var(--gold);}

.fdock-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 14px 8px;
}
.fdock-body .feedlist li{padding:10px 2px;}
.fdock-empty{padding:24px 6px;color:var(--dim);font-size:13px;text-align:center;}

.fdock-more{
  flex:0 0 auto;display:block;text-align:center;
  padding:11px 14px;
  border-top:1px solid var(--line);
  color:var(--gold);font-size:12.5px;letter-spacing:1px;
  background:rgba(201,162,77,.04);
}
.fdock-more:hover{background:rgba(201,162,77,.1);color:var(--hl);}

@media (max-width:820px){
  /* v1.9.238：手机上**不再**把挂件挪到底部。
   * 原来这里写 `top:auto;bottom:78px`（贴手机底栏上沿），理由是怕它压住正文中间那几行；
   * 但底栏本身已经占了最下面一条，挂件再叠上去就变成「右下角一坨」，
   * 跟「右侧居中」的语义完全不搭 —— 玩家找不到它，还挡着底栏的角标。
   * 现在手机也保持垂直居中（top:50% + translateY(-50%)），只把字距收回一点。
   * v1.9.239 收尺后挂件宽约 35px，390px 屏上只贴住很窄一条边。 */
  .fdock{letter-spacing:2px;}
  /* v1.9.240：抽屉也从右边出来，窄屏收窄一点，好让后面那条遮罩能点到 */
  .fdock-sheet{width:min(88vw,360px);border-radius:12px 0 0 12px;}
}

/* ==========================================================
   主城顶部 · 种植入口徽章（v1.9.277：文字压进圈内）
   ----------------------------------------------------------
   一张图搞定，不在 HTML 里拼文字 —— 文字要跟圆盘一起缩放、一起投阴影，
   叠一层就得算字号/定位/间距三套数，改一次尺寸全要重调。

   图是**正方形**（圆盘占满图宽 98%，导出前按 alpha 包围盒裁紧了）：
   上半嫩芽、下半「种植」二字压在圈内，所以前端宽高一起写，不存在跳动。

   96px 时圆盘约 94px，圈内字号约 21px（源图 140/640）；手机上 84px 约 18px，
   是一眼能读的下限，再小就该只留图标、把字交给别处了。

   左对齐（justify-content:flex-start）而不是居中：徽章下面就是卡片网格，
   居中会在左上角留一个突兀的空洞；贴左缘跟卡片同一列，视线从左上往下走。

   红点走右上：字在圈内下半区，圆顶是空的。20px 的点挂在圆周 45° 外侧，不压图案。
   ========================================================== */
.plant-hub{display:flex;justify-content:flex-start;padding:2px 0 6px;}
.plant-hub a{
  position:relative;display:block;line-height:0;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.55));
  transition:transform .18s ease,filter .18s ease;
}
.plant-hub a:hover{transform:translateY(-2px);filter:drop-shadow(0 7px 18px rgba(201,162,77,.42));}
.plant-hub a:active{transform:scale(.97);}
.plant-hub img{display:block;width:96px;height:96px;}
.plant-hub .ph-dot{
  position:absolute;right:4px;top:4px;
  min-width:20px;height:20px;line-height:20px;padding:0 5px;
  border-radius:10px;background:var(--red);color:#fff;
  font-size:12px;font-style:normal;text-align:center;letter-spacing:0;
  box-shadow:0 0 0 2px rgba(12,9,6,.85);
  animation:tdotPulse 2.4s ease-in-out infinite;
}
@media (max-width:820px){
  /* 手机首屏高度紧张，徽章再收一档；红点同比缩，否则相对图面太抢眼 */
  .plant-hub{padding:0 0 4px;}
  .plant-hub img{width:84px;height:84px;}
  .plant-hub .ph-dot{right:3px;top:3px;min-width:18px;height:18px;line-height:18px;font-size:11px;padding:0 4px;border-radius:9px;}
}

/* ==========================================================
   幻境 BOSS 卡片网格（v1.9.288）
   ----------------------------------------------------------
   参照「BOSS 选择」布局：每行 3 张卡，卡上自上而下是
   等级标签 / 立绘 / 名字 / 转生门槛 / 掉落预览 / 进入按钮。
   未解锁的卡整张置灰（转生不够），但仍展示目标（看得见才想冲）。
   ========================================================== */
.illu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0;}
.illu-card{
  position:relative;display:flex;flex-direction:column;align-items:center;
  border:1px solid var(--line);border-radius:8px;background:var(--panel2);
  padding:12px 10px 10px;text-align:center;transition:.2s;
}
.illu-card.locked{opacity:.55;filter:grayscale(.6);}
/* 掉落名称长短不一（专属翅膀 / 专属耳环），让按钮用 margin-top:auto 贴底，
   卡片等高时「进入」按钮才对齐到同一行，不会高低错落。 */
.illu-card form{margin-top:auto;width:100%;}
.illu-lv{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  font-size:12px;color:#ffd24a;letter-spacing:1px;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.illu-fig{margin:22px 0 8px;}
.illu-fig img{border-radius:6px;border:1px solid var(--line);background:#0e0b08;display:block;}
.illu-name{font-size:14px;color:var(--hl);letter-spacing:1px;margin-bottom:6px;}
.illu-req{font-size:11px;color:var(--ok);margin-bottom:8px;}
.illu-req.no{color:var(--red);}
.illu-drop{width:100%;margin-bottom:10px;display:flex;flex-direction:column;gap:4px;}
.illu-drop-item{
  display:flex;justify-content:space-between;align-items:center;
  background:#0e0b08;border:1px solid var(--line);border-radius:4px;padding:3px 8px;
}
.illu-drop-name{font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.illu-drop-rate{font-size:11px;color:var(--gold);flex:0 0 auto;margin-left:6px;}
.illu-go{width:100%;}
.illu-cfg{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap;}
.illu-cfg label{font-size:13px;}
.illu-cfg select{max-width:120px;}
.illu-fight{display:flex;align-items:center;gap:6px;}
.illu-fight .illu-go{flex:1;}
.illu-sel select{
  height:100%;min-width:64px;padding:6px 8px;font-size:14px;font-weight:600;
  color:var(--gold);background:var(--panel);border:1px solid var(--gold);border-radius:6px;cursor:pointer;
}
.battle-lines{font-size:13px;line-height:1.7;}
@media (max-width:820px){
  .illu-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
}

/* ==========================================================
   专属装备 · 已穿戴槽位（v1.9.290）
   ----------------------------------------------------------
   5 个部位做成「槽位卡」而非表格：已穿戴的槽带品质发光边框，
   空槽用虚线框 + 「＋」提示可穿戴。品质色沿用 q0~q4。
   ========================================================== */
.uq-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.uq-slot{
  position:relative;display:flex;flex-direction:column;
  border-radius:10px;padding:12px 11px 10px;min-height:132px;
  background:linear-gradient(180deg,var(--panel2),#0e0b08);
  border:1px solid var(--line);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
/* 已穿戴：按品质给发光边框（q0灰 q1蓝 q2金 q3紫 q4绿） */
.uq-slot.q0{border-color:#5a5048;box-shadow:0 0 10px rgba(90,80,72,.35) inset;}
.uq-slot.q1{border-color:#3a6ab0;box-shadow:0 0 12px rgba(74,158,255,.28);}
.uq-slot.q2{border-color:#b09020;box-shadow:0 0 12px rgba(255,210,74,.30);}
.uq-slot.q3{border-color:#7a3ab0;box-shadow:0 0 14px rgba(192,102,255,.35);}
.uq-slot.q4{border-color:#1f8a52;box-shadow:0 0 14px rgba(53,208,127,.38);}
.uq-slot:hover{transform:translateY(-2px);}
/* 空槽：虚线 + 淡入 */
.uq-slot.empty{border:1px dashed var(--line);background:rgba(14,11,8,.35);}
.uq-slot-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.uq-slot-type{font-size:12px;color:var(--dim);letter-spacing:.5px;}
.uq-slot-q{font-size:11px;font-weight:bold;text-shadow:0 0 6px currentColor;}
.uq-slot-name{font-size:13px;color:var(--hl);margin-bottom:7px;letter-spacing:.5px;}
.uq-slot-stats{font-size:11px;color:var(--text);line-height:1.55;margin-bottom:9px;flex:1;}
.uq-slot form{margin-top:auto;}
/* 部位图标：居中，带轻微投影，已穿戴发亮、空槽置灰 */
.uq-slot-icon{display:flex;justify-content:center;margin:4px 0 7px;}
.uq-slot-icon img{display:block;border-radius:50%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));}
.uq-slot-icon.dim img{opacity:.4;filter:grayscale(.5) drop-shadow(0 2px 4px rgba(0,0,0,.4));}
/* 合并后背包区的分隔小标题 */
.uq-bag-head{margin:14px 0 6px;font-size:13px;color:var(--dim);letter-spacing:.5px;
  border-top:1px solid var(--line);padding-top:12px;}
.uq-bag-head span{color:var(--text);font-weight:bold;}
.uq-slot-plus{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--line);line-height:1;
}
.uq-slot-empty-txt{font-size:11px;color:var(--dim);text-align:center;margin-top:2px;}
@media (max-width:820px){
  .uq-slots{grid-template-columns:repeat(2,1fr);}
}