/* 月萌萌彩 · TYPE-MOON 人气预测
   暗夜金红 / 魔术回路 / 圣杯战争视觉体系 */

:root{
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",STSong,SimSun,"Yu Mincho",serif;
  --latin:"Georgia","Times New Roman",serif;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;

  --void:#05060d;
  --void-2:#0a0c17;
  --panel:rgba(16,19,31,.92);
  --panel-2:#151929;
  --panel-3:#1b2036;
  --text:#ece7db;
  --text-2:#c3bfb4;
  --muted:#8f8c9e;
  --muted-2:#6b6a80;
  --line:rgba(214,183,116,.18);
  --line-2:rgba(214,183,116,.34);
  --gold:#d6b774;
  --gold-1:#ecd49b;
  --gold-2:#9c7d3c;
  --crimson:#c8102e;
  --crimson-2:#e5384a;
  --crimson-3:#8d0b20;
  --saber:#5f8fd8;
  --emerald:#3f9e86;
  --radius:10px;
  --radius-sm:8px;
  --shadow:0 18px 44px rgba(0,0,0,.55);
  --header-h:68px;
  color-scheme:dark;   /* 让原生控件（按钮 / 滚动条 / 下拉）也按暗色渲染，避免出现白色系统底 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 关闭手机浏览器自动放大字号（Android Chrome 的 font boosting 会把对战界面数值/血条挤成一团） */
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--void);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
/* 星图 + 魔术阵背景 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  /* 【性能】这两层是全屏固定的装饰背景：给它们各自一个合成层（translateZ / will-change），
     滚动时就不会被当成内容的一部分反复重绘 —— 之前每次滚动 Chrome 都要把整页重新算样式 + 重画。 */
  transform:translateZ(0);will-change:transform;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(200,16,46,.16), rgba(200,16,46,0) 62%),
    radial-gradient(1000px 620px at 6% 4%, rgba(95,143,216,.14), rgba(95,143,216,0) 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(214,183,116,.09), rgba(214,183,116,0) 60%),
    linear-gradient(180deg,#05060d,#080a14 40%,#05060d);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  transform:translateZ(0);will-change:transform;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 68% 8%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 34% 46%, rgba(255,240,200,.55), transparent),
    radial-gradient(1px 1px at 84% 32%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 56% 72%, rgba(255,235,190,.5), transparent),
    radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.1px 1.1px at 92% 66%, rgba(255,255,255,.5), transparent);
  background-size:100% 100%;
}
body>*{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;background:none;border:0}
h1,h2,h3,h4{margin:0;line-height:1.32;font-family:var(--serif);font-weight:700;letter-spacing:.5px}
p{margin:0}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.num{font-family:var(--latin);font-variant-numeric:tabular-nums;letter-spacing:.4px}
.eyebrow{
  font-family:var(--latin);text-transform:uppercase;letter-spacing:3.6px;font-size:10.5px;
  color:var(--gold);opacity:.85;
}
.rule{flex:1 1 auto;height:1px;align-self:center;
  background:linear-gradient(90deg,rgba(214,183,116,.45),rgba(214,183,116,0));}

/* ---------- 顶部 ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  /* 【性能】原来是「半透明 + backdrop-filter:blur(14px)」。顶栏是 sticky 的，
     每滚一帧浏览器都要把背后整屏内容重新模糊一遍（1440 宽 ≈ 130 万像素），
     这是「PC 所有页面都卡」的主因。改成接近实色的渐变背景，观感几乎一样，但滚动不再有逐帧模糊。 */
  background:linear-gradient(180deg,rgba(6,7,14,.99),rgba(8,9,17,.94));
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(200,16,46,.25), 0 14px 34px rgba(0,0,0,.5);
}
.header-inner{height:var(--header-h);display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand-mark{
  width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;position:relative;
}
.brand-mark svg{position:absolute;inset:0;width:100%;height:100%}
.brand-mark b{
  position:relative;z-index:2;font-family:var(--serif);font-size:17px;color:#fff2e0;
  text-shadow:0 0 10px rgba(229,56,74,.9);
}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font-family:var(--serif);font-size:19px;letter-spacing:2px;color:#f4efe4}
.brand-text i{font-style:normal;font-family:var(--latin);font-size:8.5px;letter-spacing:2.4px;color:var(--gold-2)}
.main-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto}
.main-nav a{
  padding:9px 15px;color:var(--text-2);font-size:14.5px;font-weight:600;letter-spacing:1px;
  border-bottom:2px solid transparent;transition:.2s;
}
.main-nav a:hover{color:var(--gold-1)}
.main-nav a.active{color:var(--gold-1);border-bottom-color:var(--crimson-2);
  background:linear-gradient(180deg,rgba(200,16,46,0),rgba(200,16,46,.14))}
.header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* ---------- 控件 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  padding:10px 18px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-weight:700;font-size:14.5px;letter-spacing:.6px;transition:.2s;white-space:nowrap;
}
.btn-primary{
  color:#fff6ef;border-color:rgba(236,212,155,.5);
  background:linear-gradient(150deg,#8d0b20,#c8102e 48%,#dc3b45);
  box-shadow:0 10px 26px rgba(200,16,46,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(200,16,46,.5)}
.btn-primary:disabled{background:#22263a;border-color:var(--line);color:var(--muted-2);box-shadow:none;transform:none;cursor:not-allowed}
.btn-gold{
  color:#2a1e05;border-color:rgba(255,236,186,.6);
  background:linear-gradient(150deg,#e8c877,#b9954a);
  box-shadow:0 10px 24px rgba(214,183,116,.28);
}
.btn-gold:hover{transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line-2);color:var(--gold-1)}
.btn-ghost:hover{background:rgba(214,183,116,.1)}
.btn-soft{background:rgba(95,143,216,.12);border-color:rgba(95,143,216,.4);color:#a8c6f0}
.btn-soft:hover{background:rgba(95,143,216,.2)}
.btn-lg{padding:13px 24px;font-size:15.5px}
.btn-block{width:100%}
.btn.is-busy:disabled{opacity:.86;background:linear-gradient(150deg,#6d1525,#9b2233);color:#fff1e7;cursor:wait}
.btn.is-busy:disabled::before{content:"";width:13px;height:13px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:mmcSpin .7s linear infinite}
@keyframes mmcSpin{to{transform:rotate(360deg)}}

.coin-chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:linear-gradient(150deg,rgba(214,183,116,.18),rgba(200,16,46,.14));
  border:1px solid var(--line-2);color:var(--gold-1);font-weight:700;font-size:14px;
}
.coin-chip .dot{
  width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff6d8,#d6b774 60%,#8d6f2c);
  box-shadow:0 0 10px rgba(214,183,116,.7);
}

/* 六角徽章（角色） */
.medal{position:relative;width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center}
.medal::before,.medal::after{content:"";position:absolute;clip-path:polygon(50% 0,94% 26%,94% 74%,50% 100%,6% 74%,6% 26%)}
.medal::before{inset:0;background:linear-gradient(160deg,rgba(236,212,155,.9),rgba(120,95,40,.45))}
.medal::after{inset:2px;background:linear-gradient(160deg,var(--c1,#5f8fd8),var(--c2,#22314f))}
.medal span{
  position:relative;z-index:2;font-family:var(--serif);font-weight:700;font-size:16px;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.75);
}
.medal.sm{width:34px;height:34px}
.medal.sm span{font-size:12.5px}
.medal.lg{width:66px;height:66px}
.medal.lg span{font-size:24px}
/* img 是替换元素，width:auto 会取原始尺寸，必须显式给宽高 */
.medal .av{position:absolute;top:2px;left:2px;z-index:1;
  width:calc(100% - 4px);height:calc(100% - 4px);object-fit:cover;
  clip-path:polygon(50% 0,94% 26%,94% 74%,50% 100%,6% 74%,6% 26%)}

/* 账号弹窗里的头像设置 */
.avatar-edit{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
  margin-bottom:18px;padding-bottom:16px;border-bottom:1px dashed var(--line-2)}
.avatar-acts{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.avatar-edit .hint{grid-column:1/-1;font-size:12px;color:var(--muted);line-height:1.6}
.name-row{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.name-row h3{min-width:0;overflow:hidden;text-overflow:ellipsis}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.6px;border:1px solid transparent}
.pill-open{background:rgba(200,16,46,.16);border-color:rgba(229,56,74,.5);color:#ff8f97}
.pill-open::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5b68;
  box-shadow:0 0 8px #ff5b68;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.pill-soon{background:rgba(214,183,116,.14);border-color:rgba(214,183,116,.42);color:var(--gold-1)}
.pill-done{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--muted)}
.pill-tag{background:rgba(200,16,46,.1);border-color:rgba(200,16,46,.42);color:#f09aa2}
.pill-soft{background:rgba(95,143,216,.12);border-color:rgba(95,143,216,.4);color:#a8c6f0}
.pill-gold{background:rgba(214,183,116,.14);border-color:rgba(214,183,116,.45);color:var(--gold-1)}

/* ---------- 卡面 ---------- */
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.card::before,.card::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;z-index:3}
.card::before{top:-1px;left:-1px;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.card::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.card-pad{padding:22px}
.sec-title{display:flex;align-items:baseline;gap:14px;margin:0 0 16px}
.sec-title h2{font-size:22px;display:flex;align-items:center;gap:10px;flex:0 0 auto;color:#f2ece0}
.sec-title h2::before{content:"◆";font-size:11px;color:var(--crimson-2);text-shadow:0 0 10px rgba(229,56,74,.8)}
.sec-title .link{color:var(--gold-1);font-size:13.5px;font-weight:700}
.sec-title .muted{font-size:13px;flex:0 0 auto}

/* ---------- 榜单切换（积分榜 / 决斗胜率榜） ---------- */
.rank-switch{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:0 0 auto}
.rank-switch button{
  appearance:none;border:0;background:transparent;color:var(--muted);font-family:inherit;
  font-size:13px;padding:7px 15px;cursor:pointer;transition:.2s;white-space:nowrap;
}
.rank-switch button + button{border-left:1px solid var(--line)}
.rank-switch button:hover:not(.on){color:var(--text-2)}
.rank-switch button.on{background:rgba(214,183,116,.15);color:var(--gold-1);font-weight:700}

/* ---------- 决斗胜率（对战模块 / 胜率榜） ---------- */
.duel-rate{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:#0f1220}
.duel-rate .big{font-family:var(--latin);font-size:22px;font-weight:700;color:var(--gold-1);letter-spacing:1px}
.duel-rate .sub{font-size:12.5px;color:var(--muted)}
.duel-rate .acts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.dh-list{display:flex;flex-direction:column;gap:8px;max-height:min(56vh,440px);overflow-y:auto;overflow-x:hidden}
.dh-row{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;
  padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:#111526}
.dh-row .tag{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;text-align:center;border:1px solid var(--line)}
.dh-row.w .tag{color:#7fe0bd;border-color:rgba(95,208,165,.45);background:rgba(95,208,165,.08)}
.dh-row.l .tag{color:#ff9aa1;border-color:rgba(229,56,74,.45);background:rgba(229,56,74,.08)}
.dh-row .who{min-width:0}
.dh-row .who b{display:block;font-size:14px}
.dh-row .who em{font-style:normal;display:block;font-size:12px;color:var(--muted);margin-top:2px}
.dh-row .num{font-family:var(--latin);font-size:13px;color:var(--gold-1);text-align:right;white-space:nowrap}
.dh-stat{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 14px;font-size:13px;color:var(--muted)}
.dh-stat b{font-family:var(--latin);font-size:17px;color:var(--gold-1)}

/* ---------- Hero ---------- */
.hero{
  position:relative;margin:20px 0 24px;padding:20px 24px;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(760px 420px at 86% 18%, rgba(200,16,46,.34), rgba(200,16,46,0) 62%),
    radial-gradient(620px 380px at 10% 96%, rgba(95,143,216,.22), rgba(95,143,216,0) 62%),
    linear-gradient(150deg,#0b0d18,#141020 45%,#1a0d15);
  border:1px solid var(--line-2);
  box-shadow:0 20px 48px rgba(0,0,0,.55), inset 0 0 70px rgba(200,16,46,.09);
}
.hero::before,.hero::after{content:"";position:absolute;width:18px;height:18px}
.hero::before{top:7px;left:7px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.hero::after{bottom:7px;right:7px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}
.hero-inner{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.hero-lead{min-width:0}
.hero h1{
  margin-top:6px;font-size:26px;letter-spacing:2px;line-height:1.3;
  background:linear-gradient(100deg,#fff6e2,#ecd49b 40%,#e8e2d4 62%,#f0a9a2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.7));
}
.hero-stats{display:flex;gap:32px;margin:0;flex-wrap:wrap}
.hero-stats .stat{border-left:2px solid var(--crimson-2);padding-left:12px}
.hero-stats .stat b{display:block;font-family:var(--latin);font-size:21px;color:var(--gold-1);letter-spacing:.5px;line-height:1.3}
.hero-stats .stat span{font-size:12px;color:var(--muted)}
.magic-circle{position:absolute;right:-34px;top:50%;transform:translateY(-50%);width:320px;height:320px;
  opacity:.4;pointer-events:none;z-index:2;animation:spin 150s linear infinite;
  will-change:transform}   /* 旋转留在合成层里跑，别每帧重画这张 320px 的法阵 */
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.magic-circle{animation:none}}

/* ---------- 布局 ---------- */
.layout{display:flex;gap:24px;align-items:flex-start;padding-bottom:70px}
.main-col{flex:1 1 auto;min-width:0}
.side-col{width:356px;flex:0 0 356px;display:flex;flex-direction:column;gap:20px}

/* ---------- 工具条 ---------- */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.seg{display:inline-flex;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px}
.seg button{
  border:0;background:transparent;padding:8px 17px;border-radius:6px;cursor:pointer;
  font-weight:700;font-size:14px;color:var(--muted);letter-spacing:.6px;transition:.2s;
}
.seg button:hover{color:var(--gold-1)}
.seg button.on{
  color:#fff4ea;background:linear-gradient(150deg,#8d0b20,#c8102e 60%,#d93b45);
  box-shadow:0 8px 20px rgba(200,16,46,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:999px;padding:7px 15px;
  cursor:pointer;font-size:13.5px;font-weight:700;color:var(--text-2);transition:.2s;
}
.chip:hover{border-color:var(--line-2);color:var(--gold-1)}
.chip.on{background:rgba(214,183,116,.14);border-color:var(--line-2);color:var(--gold-1)}
.search{position:relative;margin-left:auto}
.search input{
  width:226px;padding:10px 14px 10px 36px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:rgba(0,0,0,.35);color:var(--text);font-size:14px;outline:none;transition:.2s;
}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{border-color:var(--line-2);box-shadow:0 0 0 3px rgba(214,183,116,.12)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gold);opacity:.75}

/* ---------- 对决卡 ---------- */
.match-list{display:flex;flex-direction:column;gap:16px}
.match-card{padding:20px 22px 18px;transition:.25s;overflow:hidden}
.match-card::before{width:22px;height:22px}
.match-card:hover{transform:translateY(-2px);border-color:var(--line-2);
  box-shadow:0 24px 56px rgba(0,0,0,.62), 0 0 0 1px rgba(200,16,46,.22)}
.match-card .top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.match-card .league{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.8px}
.duel{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.duel .side{display:flex;align-items:center;gap:12px;min-width:0}
.duel .side .nm{font-family:var(--serif);font-size:22px;letter-spacing:1px;color:#f2ece0}
.duel .side .cl{display:block;font-size:11.5px;color:var(--muted);letter-spacing:1.4px;
  font-family:var(--latin);text-transform:uppercase;margin-top:2px}
.duel-vs{
  font-family:var(--latin);font-style:italic;font-size:16px;color:var(--gold-1);letter-spacing:2px;
  padding:0 4px;position:relative;
}
.duel-vs::before,.duel-vs::after{content:"";position:absolute;top:50%;width:14px;height:1px;background:var(--line-2)}
.duel-vs::before{left:-14px}
.duel-vs::after{right:-14px}
.match-card .meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--muted)}
.match-card .meta b{color:var(--gold-1);font-weight:700}
.match-card .divider{height:1px;background:linear-gradient(90deg,var(--line),rgba(214,183,116,0));margin:16px 0 14px}
.match-card .foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.match-card .foot .pool-bar{flex:1 1 160px;min-width:120px;margin-top:0}
.rate-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.rate-chip{
  display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 13px;background:rgba(0,0,0,.3);font-size:13px;color:var(--text-2);font-weight:700;
}
.rate-chip .sw{width:8px;height:8px;border-radius:1px;transform:rotate(45deg)}
.rate-chip i{font-style:normal;font-family:var(--latin);color:var(--gold-1);font-weight:700}
.pool-bar{height:7px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;display:flex;margin-top:10px}
.pool-bar span{display:block;height:100%}

/* ---------- 侧栏 ---------- */
.side-card{padding:20px}
.side-card h3{font-size:17px;margin-top:8px;display:flex;align-items:center;gap:9px;color:#f2ece0}
.side-card .eyebrow{margin-top:2px}
.rule-list{margin:15px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.rule-list li{display:flex;gap:10px;font-size:13.5px;color:var(--text-2);line-height:1.62}
.rule-list li .dot{width:6px;height:6px;background:var(--crimson-2);transform:rotate(45deg);margin-top:9px;flex:0 0 auto;
  box-shadow:0 0 8px rgba(229,56,74,.7)}
.rule-list li b{color:var(--gold-1)}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.mini{background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 13px}
.mini span{font-size:12px;color:var(--muted)}
.mini b{display:block;font-family:var(--latin);font-size:17px;margin-top:4px;color:var(--gold-1)}

.rank-list{margin:15px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.rank-list li{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(214,183,116,.09)}
.rank-list li:last-child{border-bottom:0}
.rank-no{width:22px;text-align:center;font-family:var(--latin);font-weight:700;color:var(--muted-2);font-size:14px}
.rank-no.top1{color:#f0c352;text-shadow:0 0 10px rgba(240,195,82,.6)}
.rank-no.top2{color:#c9cbd6}
.rank-no.top3{color:#c98a52}
.rank-list .name{flex:1 1 auto;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list .pts{font-family:var(--latin);font-weight:700;font-size:13.5px;color:var(--gold-1)}
.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-size:13px;color:var(--muted)}

/* 对战表 */
.bracket{display:flex;flex-direction:column;margin-top:14px}
.bracket-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(214,183,116,.08);font-size:13px}
.bracket-row:last-child{border-bottom:0}
.bracket-row .bn{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.bracket-row .bn.lead{color:var(--gold-1);font-weight:700}
.bracket-row .bn.right{text-align:right}
.bracket-row .bvs{font-family:var(--latin);font-style:italic;font-size:11.5px;color:var(--muted-2);flex:0 0 auto}
.bracket-row .bno{font-family:var(--latin);font-size:11px;color:var(--muted-2);width:16px;flex:0 0 auto}

/* ---------- 详情 ---------- */
.crumb{display:inline-flex;align-items:center;gap:8px;margin:26px 0 18px;color:var(--muted);
  font-weight:700;font-size:13.5px;letter-spacing:1px}
.crumb:hover{color:var(--gold-1)}
.detail-head{padding:28px 30px}
.detail-head h1{font-size:34px;letter-spacing:2px;margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:#f4efe3}
.detail-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.tagchip{
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 15px;font-size:12.5px;font-weight:700;color:var(--text-2);
}
.tagchip b{color:var(--gold-1)}
.tagchip-warn{border-color:rgba(229,56,74,.5);color:#ffc2c8}
.tagchip-warn b{color:#ff8f97}
.countdown{color:#ff8f97;font-family:var(--latin);font-weight:700}

/* 往期结算（历史周榜）：周次标签 + 左右两张榜 */
.wh-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.wh-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.wh-tab{
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--text-2);cursor:pointer;
  font-family:var(--latin);letter-spacing:.6px;transition:.18s;
}
.wh-tab:hover{border-color:var(--line-2);color:#f2ece0}
.wh-tab.on{border-color:rgba(214,183,116,.6);color:var(--gold-1);background:rgba(214,183,116,.08)}
.wh-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.wh-col>b{display:block;font-family:var(--serif);font-size:14.5px;color:#f2ece0;margin-bottom:8px}
.wh-list{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.wh-row{display:flex;align-items:center;gap:9px;padding:7px 11px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.wh-row:last-child{border-bottom:0}
.wh-row .rk{width:22px;flex:0 0 auto;text-align:center;font-family:var(--latin);font-weight:700;color:var(--muted)}
.wh-row .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.wh-row .vl{flex:0 0 auto;text-align:right;font-family:var(--latin);font-weight:700;color:var(--gold-1)}
.wh-row .vl em{display:block;font-style:normal;font-family:var(--sans);font-size:11px;color:var(--muted);font-weight:400}
.wh-row.top1{background:linear-gradient(90deg,rgba(214,183,116,.14),transparent)}
.wh-row.top2{background:linear-gradient(90deg,rgba(201,203,214,.1),transparent)}
.wh-row.top3{background:linear-gradient(90deg,rgba(201,138,82,.1),transparent)}
.wh-row.top1 .rk{color:#f0c352}
.wh-row.top2 .rk{color:#c9cbd6}
.wh-row.top3 .rk{color:#c98a52}
@media(max-width:760px){.wh-wrap{grid-template-columns:1fr}}

.option{
  display:flex;align-items:center;gap:15px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--radius);background:rgba(0,0,0,.3);cursor:pointer;transition:.2s;margin-bottom:12px;
}
.option:hover{border-color:var(--line-2);background:rgba(214,183,116,.05)}
.option.locked{opacity:.5;cursor:not-allowed;filter:saturate(.5)}
.option.locked:hover{border-color:var(--line);background:rgba(0,0,0,.3)}
.option.on{border-color:rgba(229,56,74,.65);background:linear-gradient(120deg,rgba(200,16,46,.16),rgba(214,183,116,.05));
  box-shadow:0 10px 30px rgba(200,16,46,.22)}
.option .radio{width:19px;height:19px;transform:rotate(45deg);border:1.5px solid var(--muted-2);flex:0 0 auto;position:relative;transition:.2s}
.option.on .radio{border-color:var(--crimson-2);box-shadow:0 0 12px rgba(229,56,74,.7)}
.option.on .radio::after{content:"";position:absolute;inset:3.5px;background:var(--crimson-2)}
.option .info{flex:1 1 auto;min-width:0}
.option .info b{font-family:var(--serif);font-size:17px;display:block;color:#f2ece0}
.option .info span{font-size:12.5px;color:var(--muted)}
.option .rate{text-align:right;flex:0 0 auto}
.option .rate b{display:block;font-family:var(--latin);color:var(--gold-1);font-size:17px}
.option .rate b em{font-style:normal;font-size:11.5px;color:var(--muted);font-family:var(--sans)}
.option .rate span{font-size:12px;color:var(--muted)}

.stake-box{padding:22px}
.stake-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.stake-input{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 15px;background:rgba(0,0,0,.4);flex:1 1 220px;transition:.2s;
}
.stake-input:focus-within{border-color:var(--line-2);box-shadow:0 0 0 3px rgba(214,183,116,.13)}
.stake-input input{border:0;background:transparent;outline:none;font-family:var(--latin);
  font-size:19px;font-weight:700;width:100%;color:var(--gold-1)}
.stake-input .unit{color:var(--muted);font-weight:700;font-size:13px;white-space:nowrap}
.quick{display:flex;gap:8px;flex-wrap:wrap}
.quick button{
  border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:var(--radius-sm);
  padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;color:var(--text-2);transition:.2s;
}
.quick button:hover{border-color:var(--line-2);color:var(--gold-1);background:rgba(214,183,116,.1)}
.summary{
  margin-top:18px;padding:16px 18px;border-radius:var(--radius);display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(120deg,rgba(200,16,46,.12),rgba(214,183,116,.06));
  border:1px solid rgba(229,56,74,.28);
}
.summary .row{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--text-2)}
.summary .row b{font-family:var(--latin);font-size:16px;color:var(--gold-1)}
.summary .row.total b{font-size:23px;color:#ff9aa1}
.hint{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.7}

.donut-wrap{display:flex;align-items:center;gap:18px;margin-top:18px}
.donut{
  width:124px;height:124px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(#c8102e 0 50%,#5f8fd8 50% 80%,#d6b774 80% 100%);
}
.donut::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px dashed rgba(214,183,116,.45)}
.donut::after{content:"";position:absolute;inset:20px;border-radius:50%;background:#0b0d17;border:1px solid var(--line)}
.donut .center{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center;line-height:1.3}
.donut .center b{display:block;font-family:var(--latin);font-size:15px;color:var(--gold-1)}
.donut .center span{font-size:11px;color:var(--muted)}
.legend{display:flex;flex-direction:column;gap:9px;font-size:13px;flex:1 1 auto;min-width:0}
.legend div{display:flex;align-items:center;gap:9px}
.legend .k{width:9px;height:9px;transform:rotate(45deg);flex:0 0 auto}
.legend .nm{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.legend .vl{font-family:var(--latin);font-weight:700;color:var(--gold-1)}

.feed{display:flex;flex-direction:column;margin-top:6px}
.feed .item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid rgba(214,183,116,.08)}
.feed .item:last-child{border-bottom:0}
.feed .item .txt{flex:1 1 auto;min-width:0;font-size:13px;color:var(--text-2)}
.feed .item .txt b{color:#f2ece0}
.feed .item .amt{font-family:var(--latin);font-weight:700;font-size:13.5px;color:var(--gold-1)}
.feed .item .time{font-size:11.5px;color:var(--muted-2)}

/* ---------- 我的应援 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat-card{padding:20px}
.stat-card span{font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.6px}
.stat-card b{display:block;font-family:var(--latin);font-size:28px;margin-top:6px;color:var(--gold-1);letter-spacing:1px}
.stat-card .delta{font-size:12.5px;font-weight:700;margin-top:4px;display:inline-block}
.up{color:#5fd0a5}
.down{color:#ff8f97}

.bet-row{display:flex;align-items:center;gap:16px;padding:17px 20px;border-bottom:1px solid rgba(214,183,116,.09);flex-wrap:wrap}
.bet-row:last-child{border-bottom:0}
.bet-row .bl{flex:1 1 260px;min-width:0}
.bet-row .bl .t{font-family:var(--serif);font-weight:700;font-size:17px;color:#f2ece0}
.bet-row .bl .m{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;gap:12px;flex-wrap:wrap}
.bet-row .bm{text-align:right;min-width:124px}
.bet-row .bm .s{font-size:12px;color:var(--muted)}
.bet-row .bm .v{font-family:var(--latin);font-weight:700;font-size:16px;color:var(--text)}
.result-tag{font-weight:800;font-size:12px;padding:4px 11px;border-radius:999px;border:1px solid transparent}
.r-win{background:rgba(63,158,134,.18);border-color:rgba(95,208,165,.45);color:#7fe0bd}
.r-lose{background:rgba(200,16,46,.16);border-color:rgba(229,56,74,.42);color:#ff9aa1}
.r-wait{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--muted)}

.empty{padding:58px 20px;text-align:center;color:var(--muted)}
.empty .emoji{font-size:38px;filter:grayscale(.3)}
.empty b{display:block;font-family:var(--serif);color:var(--text);font-size:18px;margin:12px 0 6px}

/* ---------- 御主榜 ---------- */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:34px 20px 0}
.podium .p{
  flex:0 1 240px;text-align:center;border:1px solid var(--line);border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;padding:24px 16px 20px;position:relative;
  background:linear-gradient(180deg,rgba(20,23,38,.95),rgba(12,14,24,.95));
}
.podium .p1{border-color:rgba(214,183,116,.5);background:linear-gradient(180deg,rgba(56,42,16,.85),rgba(14,12,18,.95));padding-bottom:32px;
  box-shadow:0 -14px 50px rgba(214,183,116,.14) inset}
.podium .p2{border-color:rgba(200,200,215,.3)}
.podium .p3{border-color:rgba(190,130,80,.32)}
.podium .crown{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:24px;
  filter:drop-shadow(0 0 12px rgba(240,195,82,.9))}
.podium .p b.nm{display:block;margin-top:12px;font-family:var(--serif);font-size:17px;color:#f2ece0}
.podium .p .pt{font-family:var(--latin);font-size:20px;font-weight:700;color:var(--gold-1);margin-top:6px}
.podium .p .hh{font-size:12px;color:var(--muted);margin-top:4px}
.rank-table{width:100%;border-collapse:collapse;margin-top:4px}
.rank-table .col-rank{width:78px}
.rank-table .col-main{width:158px}
.rank-table .col-rec{width:150px}
.rank-table .col-perc{width:110px}
.rank-table th{
  text-align:left;font-size:12px;color:var(--muted);font-weight:800;padding:13px 16px;letter-spacing:1px;
  background:rgba(255,255,255,.03);border-bottom:1px solid var(--line);
}
.rank-table td{padding:13px 16px;border-bottom:1px solid rgba(214,183,116,.09);font-size:14.5px}
.rank-table tr:last-child td{border-bottom:0}
.rank-table tr.me td{background:rgba(200,16,46,.1)}
.rank-table .u{display:flex;align-items:center;gap:11px;font-weight:600}
.lvl{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.lvl.vip{border-color:rgba(214,183,116,.45);color:var(--gold-1)}
.lvl.moon{border-color:rgba(229,56,74,.45);color:#ff9aa1}

/* ---------- 积分中心 ---------- */
.balance-card{
  padding:30px;border-radius:14px;position:relative;overflow:hidden;
  background:
    radial-gradient(560px 300px at 88% 6%, rgba(200,16,46,.4), rgba(200,16,46,0) 62%),
    linear-gradient(140deg,#0d0f1b,#1a1020 55%,#241016);
  border:1px solid var(--line-2);
  box-shadow:0 26px 64px rgba(0,0,0,.6), inset 0 0 80px rgba(200,16,46,.12);
}
.balance-card::after{
  content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  border:1px dashed rgba(214,183,116,.4);box-shadow:0 0 0 24px rgba(214,183,116,.05),0 0 0 48px rgba(214,183,116,.04);
}
.balance-card .lab{font-size:13px;color:var(--muted);font-weight:700;letter-spacing:1px}
.balance-card .big{font-family:var(--latin);font-size:46px;font-weight:700;letter-spacing:2px;line-height:1.2;
  margin-top:6px;color:var(--gold-1);text-shadow:0 0 26px rgba(214,183,116,.35)}
.balance-card .big small{font-size:15px;font-family:var(--sans);font-weight:700;opacity:.8;margin-left:10px;color:var(--text-2)}
.balance-card .acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;position:relative;z-index:2}
/* 累计签到 7 天面板 */
.sb-wrap{margin-top:22px;position:relative;z-index:2}
.sb-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sb-head b{font-size:14.5px;color:var(--gold-1);letter-spacing:.5px}
.sb-tab{font-size:11.5px;padding:3px 10px;border-radius:999px;background:rgba(214,183,116,.14);
  border:1px solid var(--line-2);color:var(--gold-1)}
.sb-tip{margin-left:auto;font-size:11.5px;color:var(--muted)}
.sb-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
/* 保底福利提示条（积分不足 50 万的御主签到额外 +5 万） */
.sb-safety{margin:0 0 12px;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.5;
  background:rgba(214,183,116,.13);border:1px solid rgba(214,183,116,.4);color:var(--gold-1)}
.sb-safety b{font-family:var(--latin)}
.sb-safety-2{opacity:.75;margin-left:2px}
.sb-safety-off{background:rgba(255,255,255,.035);border-color:var(--line);color:var(--muted)}
.sb-day{position:relative;border:1px solid var(--line);border-radius:10px;padding:14px 6px 10px;text-align:center;
  background:rgba(255,255,255,.02);min-height:92px;display:flex;flex-direction:column;gap:6px}
.sb-day em{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.5px}
.sb-day .sb-rw{display:flex;flex-direction:column;gap:3px;align-items:center;font-size:11.5px;color:var(--text-2);line-height:1.35}
.sb-day .sb-rw b{color:var(--gold-1);font-family:var(--latin);font-size:12.5px}
.sb-day .sb-it{font-size:11px;color:var(--text-2);max-width:100%;line-height:1.25}
.sb-day.done{opacity:.5}
.sb-day.done .sb-rw b{color:var(--muted)}
.sb-day.cur{border-color:var(--gold);background:linear-gradient(160deg,rgba(214,183,116,.14),rgba(200,16,46,.12));
  box-shadow:0 0 0 1px rgba(214,183,116,.35),0 12px 26px rgba(0,0,0,.42)}
.sb-day .sb-ok{position:absolute;top:5px;right:7px;font-style:normal;font-size:12px;color:var(--gold)}
.sb-day .sb-now{position:absolute;top:-1px;left:50%;transform:translate(-50%,-50%);font-style:normal;
  font-size:10px;padding:1px 8px;border-radius:999px;background:var(--gold);color:#20160a;font-weight:700;white-space:nowrap}
@media (max-width:760px){
  .sb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sb-tip{margin-left:0}
  .sb-day{padding:12px 4px 8px;min-height:84px}
  .sb-day .sb-it{font-size:10px}
  .sb-day .sb-rw b{font-size:11.5px}
}
.task{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(214,183,116,.09)}
.task:last-child{border-bottom:0}
.task .ic{
  width:44px;height:44px;display:grid;place-items:center;font-size:19px;flex:0 0 auto;
  background:rgba(214,183,116,.1);border:1px solid var(--line);border-radius:6px;
}
.task .tx{flex:1 1 auto;min-width:0}
.task .tx b{display:block;font-size:15px;font-family:var(--serif);color:#f2ece0}
.task .tx span{font-size:12.5px;color:var(--muted)}
.task .rw{font-family:var(--latin);font-weight:700;color:var(--gold-1);font-size:13.5px;white-space:nowrap}

/* ---------- 邀请御主 ---------- */
.inv-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inv-code{
  font-family:var(--latin);font-weight:700;font-size:19px;letter-spacing:2px;color:var(--gold-1);
  padding:10px 18px;border:1px dashed rgba(214,183,116,.5);border-radius:6px;
  background:rgba(214,183,116,.07);user-select:all;word-break:break-all;
}
.inv-stat{margin-top:12px;font-size:13px;color:var(--muted)}
.inv-stat b{font-family:var(--latin);color:var(--gold-1);font-weight:700}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px;margin-top:6px}
.shop-item{
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;
  background:linear-gradient(180deg,rgba(22,26,42,.9),rgba(11,13,22,.9));transition:.25s;
}
.shop-item:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.shop-item .emo{font-size:32px;filter:drop-shadow(0 0 12px rgba(214,183,116,.4));
  display:flex;align-items:center;justify-content:center;min-height:72px}
.shop-item .emo img{height:66px;width:auto;max-width:100%;object-fit:contain;display:block}
.medal .frame{position:absolute;inset:-24%;z-index:3;pointer-events:none;
  background:url(../img/avatar-frame.webp) center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(232,200,119,.65))}
/* 神遗留之爱的圆环视觉中心比头像略低：只上移这一款，避免挡住人物脸部。 */
.medal .frame[data-frame-key="valhalla-love"]{transform:translateY(-5%)}
.medal.framed{margin-right:1px}

/* ---------- 冠位职介头像框：粒子 + 呼吸辉光 ----------
   图标本身是「职阶卡背」顶部装饰边框展开成的环（asset/img/frames/gg-*.png），
   这里再加两层动态：① 一圈呼吸的冷光；② 八颗粒子绕着环慢慢转、还带闪烁。
   光点位置用 radial-gradient 的百分比坐标写，能跟着头像框尺寸一起缩放
   （表头 34px、榜单 46px、大徽章 66px 都共用这一套）。 */
.medal .frame.grand{filter:drop-shadow(0 0 6px rgba(170,210,255,.85))}
/* 【性能·2026-10-17】原来这里挂了一条 3.8s 无限呼吸动画。
   实测（points.html 滚动 60 帧，Chrome 的样式耗时）：带滤镜的元素上挂无限动画，
   会让浏览器**每一帧**都重算这条动画的样式 —— 积分中心一页有 8 个头像框，
   光这一条就占掉滚动时 3/4 的样式时间（59ms → 15ms）。
   现在头像框本身是静态的（那圈冷光由下面的 ::before 缓慢明灭，粒子由 ::after 静态铺着），
   皇冠框的观感保留，滚动不再逐帧重算。 */
.medal .frame.grand::before,
.medal .frame.grand::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.medal .frame.grand::before,
.frame-card .emo.grand::before{
  background:radial-gradient(circle,rgba(255,255,255,0) 54%,rgba(160,210,255,.34) 70%,rgba(160,210,255,0) 88%);
  animation:grandGlow 2.8s ease-in-out infinite}
.medal .frame.grand::after,
.frame-card .emo.grand::after{
  background:
    radial-gradient(circle 2.6px at 50% 8%, #fff8e2 0 55%, rgba(255,248,226,0) 100%),
    radial-gradient(circle 2.0px at 79% 22%, #d6ecff 0 55%, rgba(214,236,255,0) 100%),
    radial-gradient(circle 2.4px at 92% 50%, #fff1c6 0 55%, rgba(255,241,198,0) 100%),
    radial-gradient(circle 2.0px at 78% 79%, #e2f2ff 0 55%, rgba(226,242,255,0) 100%),
    radial-gradient(circle 2.6px at 50% 92%, #fff8e2 0 55%, rgba(255,248,226,0) 100%),
    radial-gradient(circle 2.0px at 21% 78%, #d6ecff 0 55%, rgba(214,236,255,0) 100%),
    radial-gradient(circle 2.4px at 8% 50%, #fff1c6 0 55%, rgba(255,241,198,0) 100%),
    radial-gradient(circle 2.0px at 22% 21%, #e2f2ff 0 55%, rgba(226,242,255,0) 100%);
  /* 【性能】原来的 grandOrbit（旋转）+ grandTwinkle（闪烁）同样是逐帧动画，
     8 个头像框一起跑会一直占着主线程。粒子改成静态铺好 —— 远看还是那圈星光。 */
  animation:none}
/* 「头像框」收藏页里的大预览：也一样有粒子 */
.frame-card .emo{position:relative}
.frame-card .emo.grand::before,
.frame-card .emo.grand::after{content:"";position:absolute;left:50%;top:50%;width:80px;height:80px;
  margin:-40px 0 0 -40px;border-radius:50%;pointer-events:none}
@keyframes grandGlow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes grandOrbit{to{transform:rotate(360deg)}}
/* 【性能】grandTwinkle 原本动的是 filter:brightness() —— 滤镜动画每帧都要重绘这颗粒子层。
   改成动透明度：亮度闪烁的观感保留，但完全在合成层里跑，不再逐帧重绘。
   头像框一页有 8 个（积分中心），这是手机端那一页卡顿的主因之一。 */
@keyframes grandTwinkle{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes grandBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes grandBreathSoft{0%,100%{opacity:.88}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .medal .frame.grand,.medal .frame.grand::before,.medal .frame.grand::after,
  .frame-card .emo.grand::before,.frame-card .emo.grand::after{animation:none}
}
.shop-item b{display:block;margin:10px 0 4px;font-family:var(--serif);color:#f2ece0}
.shop-item span{font-size:12.5px;color:var(--muted)}
.shop-item .price{margin-top:12px;font-family:var(--latin);font-weight:700;color:var(--gold-1)}

/* ---------- 页脚 ---------- */
.site-footer{border-top:1px solid var(--line);background:rgba(0,0,0,.4);padding:26px 0 30px;margin-top:10px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--muted);font-size:12.5px;letter-spacing:.5px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a:hover{color:var(--gold-1)}

/* ---------- 弹窗 ---------- */
.mask{
  position:fixed;inset:0;background:rgba(3,4,9,.9);z-index:110;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow-y:auto;overscroll-behavior:contain;padding:6vh 20px 48px;
}
.mask .modal{margin:0 auto;flex:0 0 auto}
.mask[hidden]{display:none}
.modal{
  width:100%;max-width:432px;padding:30px;border-radius:12px;position:relative;
  background:linear-gradient(160deg,#12162a,#0b0d17);
  border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 0 60px rgba(200,16,46,.12);
  animation:pop .24s ease;
}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal::before,.modal::after{content:"";position:absolute;width:18px;height:18px}
.modal::before{top:6px;left:6px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.modal::after{bottom:6px;right:6px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}
.modal h3{font-size:21px;letter-spacing:1.5px;color:#f4efe3}
.modal p.sub{color:var(--muted);font-size:13.5px;margin-top:10px}
.modal p.sub b{color:var(--gold-1)}
.field{margin-top:20px}
.field label{font-size:12.5px;font-weight:800;color:var(--gold-1);display:block;margin-bottom:8px;letter-spacing:1px}
.field input{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:rgba(0,0,0,.45);color:var(--text);font-size:15px;outline:none;transition:.2s;
}
.field input:focus{border-color:var(--line-2);box-shadow:0 0 0 3px rgba(214,183,116,.14)}
.modal .acts{display:flex;gap:10px;margin-top:22px}

/* 应援二次确认弹窗 + 「还没选角色」提示 */
.modal-confirm{max-width:470px}
.modal-confirm .summary{margin-top:16px}
.modal-confirm .summary .row b{font-size:15px}
.pick-hint{margin-top:12px;color:#ffc2c8}

/* 自选英灵扭蛋的二次确认：立绘 + 名字 */
.pick-confirm{display:flex;align-items:center;gap:14px;margin-top:16px}
.pick-confirm .pick-art{width:104px;flex:0 0 auto;margin-bottom:0}
.pick-confirm-txt{flex:1 1 auto;min-width:0}
.pick-confirm-txt b{display:block;font-family:var(--serif);font-size:18px;color:#f2ece0;line-height:1.35}
.pick-confirm-txt span{display:block;font-size:12px;color:var(--muted);letter-spacing:.6px;margin-top:4px}
.pick-confirm-txt .pick-confirm-note{font-size:11.5px;color:var(--gold-1);opacity:.9}

.toast-wrap{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:120;display:flex;
  flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{
  padding:12px 20px;border-radius:var(--radius-sm);font-weight:700;font-size:14px;letter-spacing:.6px;
  background:linear-gradient(150deg,#141829,#0b0d18);border:1px solid var(--line-2);color:var(--text);
  box-shadow:0 18px 44px rgba(0,0,0,.7);animation:tin .26s ease;display:flex;align-items:center;gap:9px;
}
.toast.good{border-color:rgba(95,208,165,.5);box-shadow:0 18px 44px rgba(0,0,0,.7),0 0 24px rgba(63,158,134,.3)}
.toast.bad{border-color:rgba(229,56,74,.6);box-shadow:0 18px 44px rgba(0,0,0,.7),0 0 24px rgba(200,16,46,.35)}
@keyframes tin{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}

.tabbar{display:none}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .side-col{width:322px;flex-basis:322px}
  .hero{padding:18px 20px}
  .hero h1{font-size:23px}
  .magic-circle{width:270px;height:270px;right:-60px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  /* 关键：align-items 也要改成 stretch。原来只改 flex-direction:column，
     上一级还留着 align-items:flex-start，会让整列按「内容宽度」撑开——
     只要卡片里有一行长文字（比如随机匹配那段说明），整页就会比屏幕宽，手机就得缩放。 */
  .layout{flex-direction:column;align-items:stretch}
  .side-col{width:100%;flex-basis:auto}
  .main-nav{display:none}
  .magic-circle{opacity:.22;right:-90px}
  .hero-stats{gap:24px}
}
@media (max-width:640px){
  body{font-size:14.5px;padding-bottom:64px}
  .wrap{padding:0 15px}
  .hero{padding:16px 16px;margin:14px 0 18px}
  .hero h1{font-size:19px;letter-spacing:1px}
  .hero-stats{gap:16px;margin-top:10px}
  .hero-stats .stat b{font-size:16px}
  .magic-circle{width:200px;height:200px;right:-80px;opacity:.16}
  .duel .side .nm{font-size:18px}
  .match-card{padding:17px 16px}
  .detail-head{padding:22px 18px}
  .detail-head h1{font-size:24px}
  .stat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .stat-card b{font-size:22px}
  .search{flex:1 1 auto;margin-left:0}
  .search input{width:100%}
  .podium{gap:8px;padding:26px 8px 0}
  .podium .p{padding:16px 10px 14px;flex:1 1 0}
  .podium .p .pt{font-size:16px}
  .rank-table th:nth-child(4),.rank-table td:nth-child(4){display:none}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;height:58px;
    background:linear-gradient(180deg,rgba(8,9,16,.96),rgba(6,7,13,.99));
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font-size:11px;color:var(--muted);font-weight:700;letter-spacing:1px}
  .tabbar a span{font-size:18px;line-height:1}
  .tabbar a.active{color:var(--gold-1)}
}

/* ---------- 英灵扭蛋与养成 ---------- */
.gacha-head{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.gacha-intro{flex:1 1 360px;min-width:0}
.gacha-intro b{color:var(--gold-1)}
.gacha-actions{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.gacha-count{font-size:13px;color:var(--muted)}
.gacha-count b{font-family:var(--latin);font-size:19px;color:var(--gold-1)}
.egg-roster-closed{padding:18px 14px;border:1px dashed rgba(214,183,116,.25);border-radius:12px;text-align:center}
.egg-roster-closed .hint{margin:0}
.egg-roster-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:16px 0 10px;padding:9px 12px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);
  color:var(--text-2);font-size:12.5px}
.egg-roster-toolbar b{color:var(--gold-1)}
.egg-view-switch{display:inline-flex;gap:4px;padding:3px;border-radius:8px;background:rgba(255,255,255,.04)}
.egg-view-switch button{border:0;border-radius:6px;padding:5px 9px;background:transparent;color:var(--muted);
  cursor:pointer;font-family:inherit;font-size:11.5px}
.egg-view-switch button.on{background:rgba(214,183,116,.20);color:#ffe6a8}
.egg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:16px}
.egg-grid.text-mode{display:flex;flex-direction:column;gap:8px}
.egg-text-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(0,0,0,.22)}
.egg-text-main{min-width:0;flex:1}
.egg-text-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.egg-text-title>b{font-family:var(--serif);font-size:13.5px;color:#f2ece0}
.egg-text-title>span:not(.egg-rarity){font-size:11px;color:var(--muted)}
.egg-text-sub{font-size:11px;color:var(--muted);margin-top:3px}
.egg-text-card .egg-btns{margin-top:7px}
.egg-text-card>.egg-btns{justify-content:flex-end;max-width:58%}
.egg-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;transition:.25s;
  background:linear-gradient(180deg,rgba(20,24,38,.92),rgba(10,12,20,.96))}
.egg-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.55);border-color:var(--line-2)}
.egg-card.stage4{border-color:rgba(232,200,119,.6);box-shadow:0 0 0 1px rgba(232,200,119,.22),0 18px 44px rgba(0,0,0,.6)}
.egg-art{position:relative;aspect-ratio:220/290;overflow:hidden;background:#05060d}
.egg-art .sv-art{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
.egg-art .art-base,.egg-art .art-base .sv-art{width:100%;height:100%;display:block}
/* 卡面填满卡框：cover 会按原图比例放大到铺满，多出来的部分裁掉（对齐顶部，保住人物的头），
   以前用 contain 会按比例缩到能放下，四周就留出黑边（立绘比例和卡框不一样时特别明显）。 */
.egg-art .art-img{position:absolute;inset:0;z-index:1;object-fit:cover;object-position:center top;background:#05060d}
.egg-stage,.egg-stars{position:absolute;top:10px;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px}
.egg-stage{left:10px;background:rgba(5,6,13,.75);border:1px solid var(--line-2);color:var(--gold-1);letter-spacing:1px}
.egg-stars{right:10px;color:#ffd977;background:rgba(5,6,13,.65)}
.egg-art[data-art-cycle]{cursor:pointer}
.egg-body{padding:8px 14px 16px}
/* 卡面正下方：职阶图标 + 星级 + 职阶名 */
.egg-meta{display:flex;align-items:center;gap:7px;padding:10px 14px 0}
/* 职阶图标本身是官方那张金色菱形图标，直接贴、不再套底板 */
.egg-ci{flex:0 0 auto;display:block;width:21px;height:21px;object-fit:contain}
.egg-rarity{flex:0 0 auto;font-size:13px;letter-spacing:.5px;font-weight:800;color:#ffd977}
.egg-cls-name{flex:1 1 auto;min-width:0;font-size:12px;color:var(--gold-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.egg-name{font-family:var(--serif);font-size:16.5px;color:#f2ece0;line-height:1.35}
.egg-cls{font-size:12px;color:var(--muted);margin-top:3px}
.egg-lv{margin-top:10px;font-family:var(--latin);font-size:14px;color:var(--text-2)}
.egg-lv b{color:var(--gold-1);font-size:16px}
.egg-exp{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.egg-exp span{display:block;height:100%;background:linear-gradient(90deg,#c8102e,#e8c877)}
.egg-exp-txt{font-size:11.5px;color:var(--muted-2);margin-top:6px;font-family:var(--latin)}
.egg-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{display:inline-block;font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--muted)}
.tag-gold{background:rgba(232,200,119,.14);border-color:rgba(232,200,119,.5);color:var(--gold-1)}
.shop-item.growth{border-color:rgba(214,183,116,.28)}
.shop-item .own{font-size:11.5px;color:var(--muted);margin-top:8px}
.shop-item .own b{color:var(--gold-1);font-family:var(--latin)}
.buy-batch{margin-top:16px;padding:13px 14px;border:1px solid rgba(214,183,116,.28);border-radius:12px;
  background:linear-gradient(150deg,rgba(214,183,116,.08),rgba(0,0,0,.18))}
.buy-batch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:13px;color:var(--text-2)}
.buy-batch-qty{display:flex;align-items:center;gap:6px}
.buy-batch-qty button{height:34px;min-width:34px;border-radius:8px;border:1px solid rgba(214,183,116,.35);
  background:rgba(255,255,255,.055);color:var(--gold-1);font:700 18px/1 var(--latin);cursor:pointer}
.buy-batch-qty button:hover{background:rgba(214,183,116,.16)}
.buy-batch-qty input{width:76px;height:34px;padding:0 8px;border-radius:8px;border:1px solid rgba(214,183,116,.4);
  background:rgba(0,0,0,.35);color:#fff4dc;text-align:center;font:700 15px var(--latin);outline:none}
.buy-batch-qty input:focus{border-color:var(--gold-1);box-shadow:0 0 0 2px rgba(214,183,116,.12)}
.buy-batch-qty .buy-batch-max{min-width:48px;padding:0 9px;font-size:12px}
.buy-batch-summary{margin-top:12px}
.buy-batch-error{min-height:20px;margin:8px 0 0;color:#ff9aa1}
.buy-batch-error:empty{display:none}
.buy-batch .hint{margin:7px 0 0}
#tripleGrid.is-busy{opacity:.58;pointer-events:none;filter:saturate(.7)}
@media (max-width:640px){
  .egg-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px}
  .gacha-actions{align-items:stretch;width:100%;text-align:left}
  .gacha-actions .btn{width:100%}
  .buy-batch-head{align-items:flex-start;flex-direction:column}
  .buy-batch-qty{width:100%}
  .buy-batch-qty input{flex:1 1 auto;width:auto}
}

/* ---------- 公告 / 登录注册 / 账号（v2 新增） ---------- */
.announce{
  background:linear-gradient(90deg,rgba(200,16,46,.22),rgba(214,183,116,.12));
  border-bottom:1px solid var(--line);color:var(--gold-1);font-size:13.5px;padding:9px 0;
}
.announce .tag{
  display:inline-block;background:rgba(200,16,46,.4);border:1px solid rgba(229,56,74,.55);
  color:#ffd7da;border-radius:4px;padding:1px 8px;margin-right:10px;font-size:11.5px;letter-spacing:1px;
}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}
.tabs button{
  flex:1;background:transparent;border:0;border-bottom:2px solid transparent;padding:9px 0;
  cursor:pointer;color:var(--muted);font-weight:700;font-size:14.5px;letter-spacing:1px;transition:.2s;
}
.tabs button.on{color:var(--gold-1);border-bottom-color:var(--crimson-2)}
.msg{margin-top:14px;font-size:13px;min-height:18px;line-height:1.6}
.msg.bad{color:#ff9aa1}
.msg.good{color:#7fe0bd}
.user-btn{background:none;border:0;padding:0;cursor:pointer;line-height:0}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:6px}
.notice{
  border:1px solid rgba(229,56,74,.4);background:rgba(200,16,46,.12);color:#ffc9ce;
  border-radius:var(--radius-sm);padding:12px 15px;font-size:13.5px;margin-bottom:16px;
}

/* ---------- 每周御主榜 · 头像框图鉴 ---------- */
.wk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.wk-clock{text-align:right;flex:0 0 auto}
.wk-clock span{display:block;font-size:12px;color:var(--muted)}
.wk-clock b{font-family:var(--latin);font-size:19px;color:var(--gold-1)}
.wk-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid rgba(214,183,116,.09)}
.wk-row .rk{width:26px;text-align:center;font-size:16px;flex:0 0 auto}
.wk-row .nm{font-family:var(--serif);color:#f2ece0;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-row .gn{font-family:var(--latin);font-weight:700;color:#7fe0bd;flex:0 0 auto}
.wk-row .rw{font-size:12px;color:var(--muted);flex:0 0 auto}
.wk-row.me{background:rgba(200,16,46,.1);border-radius:8px;padding-left:10px;padding-right:10px}
.wk-me{margin-top:12px;font-size:13.5px;color:var(--text-2)}
.wk-me b{color:var(--gold-1);font-family:var(--latin)}
.wk-last{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2);font-size:12.5px;color:var(--muted);line-height:1.7}
.frame-card .emo img{height:80px}
.frame-card.locked{opacity:.62;filter:grayscale(.3)}
.frame-card.on{border-color:rgba(232,200,119,.55);box-shadow:0 0 0 1px rgba(232,200,119,.2), 0 16px 38px rgba(0,0,0,.5)}
.modal-pick{max-width:820px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin-top:18px;max-height:52vh;overflow:auto}
/* 三选一：固定三列，一眼看全三位候选 */
.triple-grid{grid-template-columns:repeat(3,1fr);gap:14px;max-height:none;overflow:visible;margin-top:14px}
.triple-grid .pick-card{padding:10px}
.triple-grid .pick-card b{font-size:14px}
.ten-result-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;max-height:60vh;overflow:auto;margin-top:14px}
.ten-result-card{text-align:center;cursor:default}
.ten-result-card:hover{transform:none}
.ten-result-card .pick-art{width:100%;height:118px}
.ten-result-card em{display:block;margin-top:4px;font-style:normal;color:var(--gold-1);font-size:11px}
.batch-melt-modal{max-width:760px}
.batch-melt-list{display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow:auto;margin-top:14px;padding-right:4px}
.batch-melt-row{display:grid;grid-template-columns:24px 42px minmax(0,1fr) auto;align-items:center;gap:9px;
  width:100%;padding:7px 9px;border-radius:9px;border:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.24);color:var(--text);font-family:inherit;text-align:left;cursor:pointer}
.batch-melt-row:hover{border-color:rgba(214,183,116,.45)}
.batch-melt-row.on{border-color:#e05f6b;background:rgba(120,20,35,.22)}
.batch-check{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;
  border:1px solid rgba(214,183,116,.45);color:#0b0d16;font-weight:900}
.batch-melt-row.on .batch-check{background:#e0b43c;border-color:#e0b43c}
.batch-melt-row img{width:42px;height:56px;object-fit:cover;border-radius:5px}
.batch-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.batch-name b{font-size:12.5px;color:#f2ece0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.batch-name em{font-size:10.5px;font-style:normal;color:var(--muted)}
.batch-pts{font-size:12px;color:#ffe6a8;font-weight:700}
.batch-melt-summary{margin-top:10px;padding:8px 10px;border-radius:8px;text-align:center;
  background:rgba(214,183,116,.09);color:var(--text-2);font-size:12.5px}
.batch-melt-summary b{color:var(--gold-1)}
/* 三选一卡片上的星级标注 */
.triple-stars{position:absolute;top:6px;left:6px;z-index:3;font-size:13px;letter-spacing:1px;color:#ffd98a;
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8)}
.triple-rarity{display:inline-block;margin-top:5px;padding:1px 8px;border-radius:999px;font-family:var(--latin);
  font-size:11.5px;font-weight:800;letter-spacing:1px}
.triple-rarity.rarity-5{color:#ffd98a;border:1px solid rgba(255,217,138,.55);background:rgba(255,217,138,.12)}
.triple-rarity.rarity-4{color:#c9b6ff;border:1px solid rgba(201,182,255,.5);background:rgba(201,182,255,.1)}
/* 三选一卡片上的「技能 / 牌组」按钮：先看清再选（点卡片本身还是「选它」） */
.triple-info{display:block;width:100%;margin-top:8px;padding:6px 4px;font-size:11.5px;text-align:center}

/* ---------- 防守阵容 ---------- */
.def-sel{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.def-chip{width:104px;border:1px solid var(--line-2);border-radius:10px;padding:8px;background:rgba(0,0,0,.3);
  display:flex;flex-direction:column;gap:4px;position:relative}
.def-chip .def-art{display:block;width:100%;aspect-ratio:1/1.25;border-radius:7px;overflow:hidden;position:relative}
.def-chip .def-art img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.def-chip b{font-size:12px;font-family:var(--serif);color:#f2ece0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.def-chip .def-lv{font-size:10.5px;color:var(--muted)}
.def-no{position:absolute;top:12px;left:12px;z-index:2;font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px;
  background:rgba(0,0,0,.7);color:var(--gold-1);border:1px solid var(--line-2)}
.def-ops{display:flex;gap:3px;margin-top:2px}
.def-ops .btn{padding:1px 6px;font-size:11px;min-height:0}
.def-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.def-pool{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.def-pick{width:96px;display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--line);border-radius:10px;
  background:rgba(0,0,0,.28);color:var(--text);cursor:pointer;text-align:left;transition:.18s;position:relative}
.def-pick:hover{border-color:var(--line-2);transform:translateY(-2px)}
.def-pick:disabled{opacity:.45;cursor:not-allowed;transform:none}
.def-pick .def-art{display:block;width:100%;aspect-ratio:1/1.25;border-radius:7px;overflow:hidden}
.def-pick .def-art img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.def-pick b{font-size:12px;font-family:var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.def-pick span{font-size:10.5px;color:var(--muted)}
.def-pick i{position:absolute;right:8px;bottom:8px;font-style:normal;font-weight:800;color:var(--gold-1)}
.def-pick.dup{opacity:.4;cursor:not-allowed}
.def-pick.dup i{color:var(--muted);font-weight:600;font-size:9.5px;letter-spacing:0}

/* 随机匹配英灵队伍 / 防守阵容：多队预设页签 */
.team-preset-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:10px;
  border:1px solid rgba(214,183,116,.18);border-radius:10px;background:rgba(214,183,116,.045)}
.team-preset-label{font-size:11px;letter-spacing:1px;color:var(--gold-1);font-weight:700;margin-right:2px}
.team-preset-btn{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;background:rgba(255,255,255,.025);color:var(--text);cursor:pointer}
.team-preset-btn b{font-size:12px;font-family:var(--serif);font-weight:700}
.team-preset-btn em{font-style:normal;font-size:9px;color:#171108;background:var(--gold-1);
  border-radius:999px;padding:1px 5px;font-weight:800}
.team-preset-btn:hover{border-color:rgba(214,183,116,.48)}
.team-preset-btn.on{border-color:rgba(214,183,116,.64);background:rgba(214,183,116,.12);
  box-shadow:0 0 0 1px rgba(214,183,116,.1)}
.team-preset-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.team-preset-actions .btn{padding:4px 8px;font-size:11px;min-height:0}

/* ---------- 积分明细 ---------- */
.pl-sum{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.25);font-size:12.5px}
.pl-sum b{font-family:var(--latin)}
.pl-sum b.in{color:#7fe0bd}
.pl-sum b.out{color:#ff9aa1}
.pl-list{margin-top:12px;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.22)}
.pl-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px dashed rgba(214,183,116,.1)}
.pl-row:last-child{border-bottom:0}
.pl-time{flex:0 0 auto;font-size:11px;color:var(--muted);font-family:var(--latin)}
.pl-txt{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--text-2)}
.pl-txt em{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.pl-amt{flex:0 0 auto;font-family:var(--latin);font-weight:800;font-size:13px}
.pl-amt.in{color:#7fe0bd}
.pl-amt.out{color:#ff9aa1}
.pick-card{border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;transition:.2s;background:rgba(0,0,0,.3)}
.pick-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.pick-art{position:relative;aspect-ratio:220/290;overflow:hidden;border-radius:7px;background:#05060d;margin-bottom:8px}
.pick-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.pick-art .pick-ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  font-family:var(--serif);font-size:34px;color:rgba(255,255,255,.88);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.pick-search{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
/* 自选扭蛋 / 双重降灵：搜索框右边那组「实装 旧→新 / 新→旧」排序按钮 */
.pick-search .codex-sort{margin-left:auto}
.pick-search .pick-sort .codex-fbtn{padding:6px 11px}
.pick-search input{flex:1 1 auto;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:10px;padding:10px 13px;color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:.2s}
.pick-search input:focus{border-color:var(--line-2);background:rgba(255,255,255,.08)}
.pick-search input::placeholder{color:var(--muted-2)}
.pick-count{flex:0 0 auto;font-size:12px;color:var(--muted);font-family:var(--latin);white-space:nowrap}
@media (max-width:600px){
  /* 自选扭蛋 / 双重降灵：手机上搜索框独占一行，排序按钮再铺一行 */
  .pick-search input{flex:1 1 100%;min-width:0}
  .pick-search .codex-sort{flex:1 1 100%;margin-left:0}
  .pick-search .pick-sort .codex-fbtn{flex:1}
  .pick-search .pick-count{margin-left:auto}
}
.pick-card b{display:block;font-family:var(--serif);font-size:13px;color:#f2ece0;line-height:1.3}
.pick-card span{font-size:11px;color:var(--muted)}

/* ---------- 英灵分解 ---------- */
.skill-box{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(214,183,116,.05)}
.skill-head{font-size:13px;color:var(--gold-1);font-weight:700;letter-spacing:.5px;margin-bottom:9px}
.skill-head .hint{font-weight:400;margin-left:6px}
.skill-hint{margin:0;font-size:12.5px;color:var(--muted)}
.skill-box select{width:100%;background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;color:var(--text);font-size:13.5px;font-family:inherit}
.skill-box select:focus{outline:none;border-color:var(--line-2);box-shadow:0 0 0 3px rgba(214,183,116,.12)}
.skill-desc{margin-top:10px;font-size:12.5px;line-height:1.75;color:var(--text-2)}
.skill-desc b{display:block;color:var(--gold-1);font-size:13px}
.skill-desc span{display:block;color:var(--muted)}
.skill-desc .skill-extra{color:#7fe0bd}
.skill-mini{display:inline-block;margin-top:4px;font-size:11.5px;color:var(--gold-1)}

/* ---------- 英灵技能一览弹窗 ---------- */
.modal-skill{max-width:600px}
.skill-list{margin-top:16px;max-height:56vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.skill-item{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);opacity:.62}
.skill-item.on{opacity:1;border-color:rgba(214,183,116,.42);background:rgba(214,183,116,.07)}
.skill-item.locked{opacity:.58;filter:grayscale(.35);border-style:dashed}
.skill-ico{flex:0 0 auto;width:46px;height:46px;border-radius:9px;object-fit:cover;
  background:#05060d;border:1px solid var(--line)}
.skill-ico.none{visibility:hidden}
.skill-main{flex:1 1 auto;min-width:0}
.skill-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.skill-t b{font-family:var(--serif);font-size:15px;color:#f2ece0}
.skill-tag{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(214,183,116,.16);color:var(--gold-1)}
.skill-on{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(127,224,189,.16);color:#7fe0bd}
.skill-d{font-size:12.5px;color:var(--text-2);margin-top:5px;line-height:1.65}
.skill-u{font-size:11.5px;color:var(--muted-2);margin-top:5px}
.skill-item.on .skill-u{color:var(--muted)}
.skill-item.complex{border-color:rgba(232,200,119,.34)}
.skill-item.on.complex{border-color:rgba(232,200,119,.62);background:linear-gradient(135deg,rgba(214,183,116,.12),rgba(214,183,116,.04))}
.skill-star5{font-size:11px;padding:2px 8px;border-radius:999px;background:linear-gradient(90deg,#e8c877,#d6b774);color:#2a1e08;font-weight:700}
.skill-aux{color:#e8c877}
.skill-d.skill-aux{margin-top:4px}
.skill-d2{display:flex;align-items:center;gap:7px}
.skill-ico-sm{width:20px;height:20px;border-radius:5px;object-fit:cover;flex:0 0 auto}

/* 牌组查看：卡牌图标统一缩小 */
.skill-item .cb-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;overflow:hidden;
  display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:16px}
.skill-item .cb-ic img{width:100%;height:100%;object-fit:cover;display:block}

/* 牌组图标（金色魔导书） */
.deck-ic{display:inline-block;width:18px;height:18px;flex:0 0 auto;vertical-align:-3px;border-radius:4px;
  background:url(../img/deck.webp) center/cover no-repeat;box-shadow:0 0 0 1px rgba(214,183,116,.45)}

.btn-melt{border:1px solid rgba(201,88,88,.45);background:rgba(160,44,44,.13);color:#e6a2a2}
.btn-melt:hover{background:rgba(184,52,52,.24);color:#ffc2c2;border-color:rgba(220,110,110,.6)}
.btn-melt-solid{background:linear-gradient(180deg,#bf3a30,#8b1f18);color:#fff;
  border:1px solid rgba(255,180,180,.35);box-shadow:0 10px 24px rgba(140,30,26,.35)}
.btn-melt-solid:hover{filter:brightness(1.08)}
.modal-melt{max-width:520px}
.melt-box{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:6px 14px;background:rgba(255,255,255,.03)}
.melt-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0}
.melt-row + .melt-row{border-top:1px dashed var(--line)}
.melt-row > span:first-child{font-size:13px;color:var(--muted);flex:0 0 auto}
.melt-pt{font-family:var(--latin);font-size:19px;color:var(--gold-1)}
.melt-items{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.melt-item{font-size:12.5px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--text-2)}

/* ---------- 自由出题：题面 + 选项平铺 ---------- */
.q-line{display:flex;align-items:flex-start;gap:10px;margin-top:16px;
  font-family:var(--serif);font-size:19px;line-height:1.5;color:#f4efe3}
.q-line .qm{flex:0 0 auto;color:var(--crimson-2);text-shadow:0 0 10px rgba(229,56,74,.7)}
.q-duel{gap:10px 14px;margin-top:12px}
.q-duel .side{padding:6px 15px 6px 7px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:999px}
.q-duel .side .nm{font-size:16px}
.q-duel .side .cl{letter-spacing:1px}
.detail-head .q-h1{display:flex;align-items:flex-start;gap:10px;font-size:30px;letter-spacing:1px;line-height:1.45}
.detail-head .q-h1 .qm{color:var(--crimson-2);text-shadow:0 0 14px rgba(229,56,74,.7)}

/* ---------- 手机端适配（v3） ---------- */
.hide-sm{display:inline}

@media (max-width:640px){
  .hide-sm{display:none}

  /* 顶栏：品牌与按钮一起压缩，保证一行放得下、不再顶出屏幕 */
  .header-inner{gap:10px;justify-content:space-between}
  .brand{gap:8px;min-width:0;overflow:hidden}
  .brand-mark{width:32px;height:32px}
  .brand-mark b{font-size:14px}
  .brand-text{min-width:0}
  .brand-text b{font-size:16px;letter-spacing:1px;white-space:nowrap}
  .brand-text i{display:none}
  .header-actions{gap:6px;min-width:0}
  .header-actions .btn{padding:8px 10px;font-size:12.5px;letter-spacing:.2px}
  .coin-chip{padding:5px 9px;font-size:12.5px;gap:5px}
  .coin-chip .dot{width:11px;height:11px}
  .site-header .medal{width:34px;height:34px}
  .site-header .medal span{font-size:14px}
  .site-header .medal .frame{inset:-22%}

  /* 首屏数据卡：一行三格，别再撑高 banner */
  .hero .eyebrow{display:none}
  .hero h1{margin-top:0;font-size:18px;letter-spacing:.5px;line-height:1.35}
  .hero-stats{display:flex;gap:16px;margin-top:10px;width:auto;flex-wrap:wrap}
  .hero-stats .stat{padding-left:9px}
  .hero-stats .stat b{font-size:16px}
  .hero-stats .stat span{font-size:11px}

  /* 榜单 */
  .rank-table th,.rank-table td{padding:11px 10px;font-size:13.5px}
  .rank-table .u{gap:8px}

  /* 对决卡 */
  .duel{gap:10px}
  .duel .side{gap:9px}
  .duel .side .nm{font-size:17px}
  .duel-vs{padding:3px 7px;font-size:10px}
  .q-line{font-size:16px;gap:8px}
  .q-duel{gap:8px 10px}
  .q-duel .side{padding:5px 11px 5px 6px;gap:8px}
  .q-duel .side .nm{font-size:15px}
  .detail-head .q-h1{font-size:21px}

  /* 每周榜 / 头像框 / 自选扭蛋 */
  .wk-row .rw{display:none}
  .wk-clock{text-align:left}
  .wk-clock b{font-size:16px}
  .frame-card .emo img{height:64px}
  .pick-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;max-height:56vh}
  .triple-grid{grid-template-columns:repeat(3,1fr);gap:9px;max-height:none}
  .ten-result-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ten-result-card .pick-art{height:104px}
  .batch-melt-list{max-height:48vh}
  .batch-melt-row{grid-template-columns:22px 36px minmax(0,1fr) auto;gap:6px}
  .batch-melt-row img{width:36px;height:48px}
  .pick-card b{font-size:12px}
  .rate-row{gap:7px}
  .match-card{padding:16px 14px}
  .match-card .meta{gap:12px;font-size:12.5px}

  /* 详情页选项 */
  .option{padding:13px;gap:10px}
  .option .info b{font-size:15.5px}
  .option .rate b{font-size:15px}
  .detail-head h1{gap:9px}
  .detail-head h1 .medal{width:38px;height:38px}

  /* 弹窗：几乎全屏，按钮竖排更好点 */
  .mask{padding:16px 12px 40px}
  .modal{padding:22px 18px;border-radius:10px}
  .modal h3{font-size:19px}
  .modal .acts{flex-direction:column;gap:8px}

  /* 工房 */
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .shop-item .emo{min-height:48px}
  .shop-item .emo img{height:46px}
  .egg-name{font-size:15px}

  /* 小节标题 / 余额卡：允许换行与缩放，避免把整页撑宽 */
  .sec-title{flex-wrap:wrap;gap:6px 10px;margin-bottom:12px}
  .sec-title h2{font-size:18px;gap:8px}
  .sec-title .muted{font-size:12px;flex:1 1 auto;min-width:0}
  .balance-card{padding:20px}
  .balance-card .big{font-size:34px;letter-spacing:1px}
  .balance-card .big small{font-size:13px;margin-left:6px}

  /* 积分任务：奖励与按钮换到第二行，标题不再被挤成竖排 */
  .task{flex-wrap:wrap;gap:10px 12px}
  .task .tx{flex:1 1 150px;min-width:0}
  .task .tx b{font-size:14.5px}
  .task .rw{flex:1 1 auto;text-align:left}
  .task .btn{flex:0 0 auto;margin-left:auto;padding:8px 12px;font-size:13px}
}

@media (max-width:400px){
  .brand-text b{font-size:15px}
  .header-actions .btn{padding:7px 9px;font-size:12px}
  .hero{padding:14px 14px}
  .hero h1{font-size:17px;letter-spacing:1px}
  .egg-grid{grid-template-columns:1fr 1fr}
  .egg-text-card{align-items:stretch;flex-direction:column;gap:8px}
  .egg-text-card>.egg-btns{max-width:none;justify-content:flex-start}
  .shop-grid{grid-template-columns:1fr 1fr}
}

/* ---------- PvE 随机匹配对战 ---------- */
#duelBox .duel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
#duelBox h3{font-size:20px}
.duel-left{font-family:var(--latin);font-size:14px;color:var(--gold-1)}
.duel-team{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.duel-chip{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0f1220;color:var(--text);cursor:pointer;transition:.2s;min-width:132px}
.duel-chip:hover{border-color:var(--line-2)}
.duel-chip.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.duel-chip b{font-family:var(--serif);color:#f2ece0}
.duel-chip span{font-size:11.5px;color:var(--muted)}
.duel-chip .duel-st{font-family:var(--latin);font-size:11px;color:var(--gold-1)}
.duel-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
/* 队伍编辑弹窗：置灰的按钮（同一位英灵只能上一位 / 已经到 6 位）要看得出来 */
#teamMask button[data-duel-team]:disabled{opacity:.35;cursor:not-allowed}
#teamMask button[data-duel-team]:not(:disabled){cursor:pointer}

/* 御主技能（令咒）：开打前挑一个带上，一局只能用一次 */
.ms-box{margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.22)}
.ms-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ms-head b{font-family:var(--serif);color:#f2ece0;font-size:14px}
.ms-head .hint{margin:0;font-size:12px;color:var(--muted)}
.ms-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:11px}
.ms-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--line);
  border-radius:10px;background:#0f1220;color:var(--muted);cursor:pointer;transition:.18s;font-size:11.5px;line-height:1.25;
  font-family:var(--serif)}
.ms-item:hover{border-color:var(--line-2)}
.ms-item.on{border-color:var(--gold);background:#1d1a2e;color:var(--gold-1);box-shadow:inset 0 0 0 1px var(--gold)}
.ms-item img{width:34px;height:34px;object-fit:contain;display:block;filter:drop-shadow(0 0 5px rgba(229,56,74,.35))}
.ms-item span{text-align:center}
.team-master-pick{margin:12px 0 14px;padding:10px 12px}
.team-master-pick .team-master-none{justify-content:center;min-height:62px;font-size:12px}
.draw-choice-modal{max-width:520px}
.draw-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.draw-choice-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:88px;
  border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.28);color:var(--text-2);cursor:pointer;
  font-family:var(--serif);transition:.18s}
.draw-choice-btn i{font-style:normal;font-size:25px;line-height:1}
.draw-choice-btn b{font-size:14px}
.draw-choice-btn:hover,.draw-choice-btn:focus-visible{border-color:var(--gold);color:var(--gold-1);background:rgba(214,183,116,.09)}
.ms-tip{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.ms-tip b{color:var(--gold-1)}
/* 战斗界面里的「令咒」按钮 */
.ms-btn{display:inline-flex;align-items:center;gap:7px}
.ms-btn .ms-ico{width:18px;height:18px;object-fit:contain;display:block}
.ms-btn:disabled{opacity:.55}
/* 平时页面上只留一个「✦ 令咒：XX」按钮，点开才是那十条清单（弹窗里） */
.duel-acts .ms-open b{color:var(--gold-1);font-family:var(--serif)}
.modal-ms{max-width:560px}
.modal-ms .ms-box{margin-top:10px;padding:0;border:0;background:none}
/* 弹窗自己已经有标题和说明了，清单顶部那行就不用再重复一遍 */
.modal-ms .ms-head{display:none}
/* 长段规则说明收进这个小问号里 */
.duel-help{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);color:var(--gold-1);font-family:var(--serif);font-weight:800;font-size:16px;
  line-height:1;cursor:pointer;transition:.18s}
.duel-help:hover{background:rgba(214,183,116,.14);border-color:rgba(214,183,116,.6);transform:translateY(-1px)}
.modal-help{max-width:520px}
.modal-help .sub{line-height:1.85}
@media (max-width:560px){
  .ms-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 自选对手弹窗 */
.opp-list{display:flex;flex-direction:column;gap:8px;max-height:min(56vh,440px);overflow-y:auto;overflow-x:hidden}
.opp-row{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;
  padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#111526;
  color:var(--text);cursor:pointer;text-align:left;transition:.18s}
.opp-row:hover{border-color:var(--gold);background:#1d1a2e}
.opp-row .opp-name{font-family:var(--serif);color:#f2ece0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp-row .opp-name em{font-style:normal;font-size:10.5px;color:var(--gold-1);border:1px solid var(--line-2);
  border-radius:999px;padding:1px 7px;margin-left:6px}
.opp-row .opp-pts{font-family:var(--latin);color:var(--gold-1);font-size:13.5px}
.opp-row .opp-diff{font-size:11.5px;color:var(--muted);white-space:nowrap}
.opp-row .opp-diff.out{color:#e0a35a}
.opp-row .opp-go{font-size:12.5px;color:var(--gold-1);white-space:nowrap}
/* 自选对手：按名字搜索 */
.opp-search{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.opp-search input{flex:1 1 auto;min-width:0;background:rgba(0,0,0,.42);border:1px solid var(--line);
  border-radius:9px;color:var(--text);padding:9px 11px;font-size:13.5px;font-family:inherit}
.opp-search input:focus{outline:none;border-color:var(--line-2);box-shadow:0 0 0 3px rgba(214,183,116,.12)}
.opp-search .opp-count{flex:0 0 auto;font-size:12px;color:var(--muted);font-family:var(--latin)}
.opp-empty{margin:0 0 8px;color:#e0a35a}
.ticket-row{grid-template-columns:auto 1fr auto}
.ticket-row .opp-pts{text-align:right;font-size:12.5px}
.ticket-row .opp-pts b{color:var(--gold-1)}
.ticket-row.lock{opacity:.45;cursor:not-allowed}
.ticket-row.lock:hover{border-color:var(--line);background:#111526}
.ticket-row.lock .opp-go{color:var(--muted)}
.tk-done{font-style:normal;font-size:10px;color:#7fcf9b;border:1px solid rgba(127,207,155,.45);
  border-radius:999px;padding:0 6px;margin-left:5px;vertical-align:1px}
.tk-used{font-style:normal;font-size:10px;color:#e0a35a;border:1px solid rgba(224,163,90,.45);
  border-radius:999px;padding:0 6px;margin-left:5px;vertical-align:1px}
@media (max-width:560px){
  .opp-row{grid-template-columns:1fr auto;grid-template-areas:"name go" "pts diff"}
  .opp-row .opp-name{grid-area:name}.opp-row .opp-go{grid-area:go}
  .opp-row .opp-pts{grid-area:pts}.opp-row .opp-diff{grid-area:diff}
}
.duel-history{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.duel-history span{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line)}
.duel-history .w{color:#7fe0bd;border-color:rgba(95,208,165,.4)}
.duel-history .l{color:#ff9aa1;border-color:rgba(229,56,74,.4)}

/* 卡牌战斗弹窗（杀戮尖塔式） */
.modal-card-battle{max-width:640px;padding:20px}
/* 对战弹窗重画（出牌 / 敌方行动）时不再重播「弹入」动画 —— 见 renderDuelGame 的注释 */
.modal-card-battle.no-anim{animation:none}
.cb-opp,.cb-me{padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.22)}
.cb-me{margin-top:12px}
/* 上排：头像 + 名字 + 血条；下排：数值 + 行动意图 */
.cb-top{display:flex;align-items:center;gap:12px}
.cb-bot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.cb-avatar{width:64px;height:76px;flex:0 0 auto;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(160deg,#39405c,#12151f);color:#fff;font-family:var(--serif);font-size:24px}
.cb-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.cb-info{flex:1 1 auto;min-width:0}
.cb-name{font-family:var(--serif);font-size:15px;color:#f2ece0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow:hidden}
.cb-nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-left{font-size:11px;color:var(--gold-1);flex:0 0 auto}
.cb-muted{font-size:11.5px;color:var(--muted);font-family:var(--latin);flex:0 0 auto}
.cb-bar{position:relative;font-size:11.5px;height:1.68em;background:rgba(255,255,255,.1);border-radius:5px;overflow:hidden;margin-top:8px;
  border:1px solid rgba(255,255,255,.08)}
.cb-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#c8102e,#ff6b78);transition:width .25s}
.cb-bar.me i{background:linear-gradient(90deg,#3fae7d,#7fe0bd)}
/* 血量数字直接压在血条里 */
.cb-bar em{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--latin);font-size:1em;line-height:1;font-style:normal;font-weight:700;letter-spacing:.4px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 7px rgba(0,0,0,.7);pointer-events:none;white-space:nowrap}
/* 格挡条：贴在血量数字右边，血量越少越往左靠 */
.cb-blkseg{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#d7deeb);border-left:1px solid rgba(8,10,18,.5);
  font-family:var(--latin);font-size:1em;line-height:1;font-style:normal;font-weight:900;
  letter-spacing:.3px;color:#1e2438;white-space:nowrap;animation:blkIn .18s ease-out}
@keyframes blkIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
/* 加成后的暴击/闪避（基础值 → 提升值） */
.cb-up{color:#7fe0bd}
.cb-down{color:#ff9a9a}
.cb-meta{font-family:var(--latin);font-size:11.5px;color:var(--muted);flex:1 1 auto;min-width:0}
.cb-intent{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;background:rgba(0,0,0,.3);text-align:left;flex:0 0 auto;max-width:46%}
.cb-it-hd{font-size:10.5px;color:var(--muted);letter-spacing:1px;text-align:center}
.cb-intent .cb-it{display:flex;align-items:center;gap:6px;font-size:12px;color:#e6d9b8;white-space:nowrap}
.cb-intent .cb-it i{font-style:normal;font-size:14px;flex:0 0 auto}
.cb-intent .cb-it b{font-weight:700;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cb-intent .cb-it.on{color:#ffd98a}
.cb-intent .cb-it.on b{font-weight:900}
.cb-energy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:56px;font-family:var(--latin);font-size:20px;color:#ffd98a;font-weight:800;flex:0 0 auto}
.cb-team{display:flex;gap:8px;margin-top:12px}
.cb-t{width:46px;height:54px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#39405c,#12151f);position:relative;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:16px}
.cb-t img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.cb-t em{position:absolute;left:0;right:0;bottom:0;text-align:center;background:rgba(0,0,0,.6);font-size:10px;font-style:normal;color:#7fe0bd}
.cb-t.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(214,183,116,.4)}
.cb-t.down{opacity:.4;filter:grayscale(1)}
.cb-result{text-align:center;padding:12px;border-radius:10px;margin-top:12px;font-size:15px;font-weight:700}
.cb-result.won{background:rgba(95,208,165,.12);border:1px solid rgba(95,208,165,.4);color:#7fe0bd}
.cb-result.lost{background:rgba(229,56,74,.1);border:1px solid rgba(229,56,74,.35);color:#ff9aa1}
.cb-log{max-height:120px;overflow:auto;margin-top:12px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.22);font-size:12px;line-height:1.6}
.cb-log .dl{padding:1px 0;border-bottom:1px dashed rgba(214,183,116,.07)}
/* 战斗记录面板的折叠把柄：只在手机端显示（桌面端保持原来的样子） */
.cb-log-hd{display:none}
.cb-log-body{display:block}
.cb-hand{display:flex;gap:9px;margin-top:16px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}
.cb-card{flex:0 0 128px;display:flex;flex-direction:column;gap:5px;text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(170deg,#14182a,#0d0f1b);color:var(--text);cursor:pointer;transition:.15s;position:relative}
.cb-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.cb-card.lock{opacity:.45;cursor:not-allowed}
.cb-card .cb-ic{width:30px;height:30px;flex:0 0 auto;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:17px}
.cb-card .cb-ic img{width:100%;height:100%;object-fit:cover;display:block}
.cb-card b{font-family:var(--serif);font-size:13.5px;color:#f2ece0;line-height:1.25}
.cb-card .cb-srv{font-size:10.5px;color:var(--gold-1);opacity:.8}
.cb-card .cb-desc{font-size:11px;color:var(--muted);line-height:1.45;min-height:32px}
.cb-card em{font-size:10.5px;font-style:normal;font-weight:800;letter-spacing:1px}
.cb-cost{position:absolute;top:-8px;left:-7px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--latin);font-weight:800;font-size:15px;color:#0c0e16;border:2px solid var(--panel)}
.cb-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
/* 控制栏右边那组按钮（令咒 / 退出战斗 / 结束回合）。
   桌面端：令咒排在最前面，顺序和以前一模一样；
   手机端在下面的媒体查询里重排成「退出战斗 —— 结束回合」一行 + 令咒靠右下。 */
.cb-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cb-acts .cb-master-wrap{display:flex;gap:8px;order:-1}
/* PC 端（≥601px）：「结束回合」和「退出战斗」对调位置 ——
   第一行「令咒 …… 结束回合」，第二行「退出战斗」。
   这里用 grid 明确摆位，而不是靠 flex 自动换行：三个按钮的宽度略有差别，
   自动换行时「谁来第二行」会随文案长短变，摆死才不会飘。
   手机端（≤600px）另有排法，见下面的媒体查询。 */
@media (min-width:601px){
  .cb-acts{display:grid;grid-template-columns:auto auto;justify-content:end;justify-items:start;
    column-gap:8px;row-gap:8px}
  .cb-acts .cb-master-wrap{grid-area:1 / 1;display:flex;gap:8px}
  .cb-acts [data-duel="endturn"]{grid-area:1 / 2}
  .cb-acts [data-duel="quit"]{grid-area:2 / 1}
}
.cb-pile{font-size:12.5px;color:var(--muted)}
/* 牌堆 / 除外 / 弃牌 / 消耗：做成按钮，点一下就能看这四堆里有什么牌 */
.cb-pilet{font-family:inherit;font-size:12.5px;color:var(--muted);background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:8px;padding:5px 10px;margin-right:7px;cursor:pointer;transition:.15s;
  white-space:nowrap}
.cb-pilet:hover{color:var(--gold-1);border-color:var(--line-2);background:rgba(255,255,255,.08)}
.cb-pilet:active{transform:translateY(1px)}
/* 三堆的查看窗 */
.modal-pile{max-width:820px;max-height:86vh;overflow-y:auto}
.pile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px 10px;margin:16px 0 4px;padding:10px 2px 2px}
.pile-card{position:relative;display:flex;flex-direction:column;gap:5px;text-align:left;padding:11px 12px;
  border:1px solid var(--line);border-radius:11px;background:linear-gradient(170deg,#14182a,#0d0f1b)}
.pile-card .cb-ic{width:30px;height:30px;flex:0 0 auto;border-radius:7px;overflow:hidden;display:grid;place-items:center;
  background:rgba(255,255,255,.06);font-size:17px}
.pile-card .cb-ic img{width:100%;height:100%;object-fit:cover;display:block}
.pile-card b{font-family:var(--serif);font-size:13.5px;color:#f2ece0;line-height:1.25}
.pile-card .cb-srv{font-size:10.5px;color:var(--gold-1);opacity:.8}
.pile-card .cb-desc{font-size:11px;color:var(--muted);line-height:1.45}
.pile-card em{font-size:10.5px;font-style:normal;font-weight:800;letter-spacing:1px}

/* ---------- 对战卡牌特效（攻击 / 格挡 / 技能 / 宝具） ---------- */
.fx-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:400;
  /* 【性能】特效层是全屏的：不单独给一个合成层的话，层里每一颗火花 / 每个伤害数字的动画
     都会让「底下整屏内容（含对战面板）一起重画」—— 战斗里每次出牌要重画上千次。
     独立成层之后，特效只在它自己的层里变化，下面的面板不再跟着重绘。 */
  transform:translateZ(0);will-change:transform}
.fx-num{position:absolute;font-family:var(--latin);font-weight:900;font-size:30px;letter-spacing:1px;white-space:nowrap;
  transform:translate(-50%,0);text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.6);
  animation:fxNum 1s ease-out both}
.fx-num.dmg{color:#ff8b8b}
.fx-num.npdmg{font-size:40px;color:#ffd98a}
.fx-num.blk{color:#a8d6ff}
.fx-num.heal{color:#8ff0b6}
.fx-num.miss{font-size:22px;color:#ded8c8}
.fx-num.word{font-size:24px;color:#d9b6ff}
@keyframes fxNum{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  22%{opacity:1;transform:translate(-50%,-8px) scale(1.18)}
  60%{opacity:1;transform:translate(-50%,-30px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-64px) scale(1)}}

.fx-slash{position:absolute;height:6px;border-radius:6px;transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 45%,#ffd98a);
  box-shadow:0 0 14px rgba(255,220,150,.9);animation:fxSlash .44s ease-out both}
.fx-slash.gold{height:9px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 40%,#ffc03c);
  box-shadow:0 0 24px rgba(255,196,60,1)}
@keyframes fxSlash{
  0%{opacity:0;transform:rotate(var(--rot,0deg)) scaleX(0)}
  35%{opacity:1;transform:rotate(var(--rot,0deg)) scaleX(1)}
  100%{opacity:0;transform:rotate(var(--rot,0deg)) scaleX(1.06)}}

.fx-spark{position:absolute;width:14px;height:14px;border-radius:50%;margin:-7px 0 0 -7px;
  background:radial-gradient(circle,#fff,#ffd98a 42%,rgba(255,180,80,0) 72%);animation:fxSpark .5s ease-out both}
@keyframes fxSpark{
  0%{opacity:0;transform:scale(.2)}
  30%{opacity:1;transform:scale(1.5)}
  100%{opacity:0;transform:scale(2.6)}}

.fx-hit{animation:fxHit .44s cubic-bezier(.36,.07,.19,.97)}

/* ---------------- 出牌冲刺：卡牌对应的英灵撞向对手 ----------------
   对手从上、我方从下，所以「撞过去」＝我方立绘往上冲、对面立绘往下压。
   只改变换（transform），不影响布局。 */
.cb-me .cb-avatar.fx-lunge{animation:fxLungeUp .62s cubic-bezier(.32,.9,.3,1)}
.cb-opp .cb-avatar.fx-lunge{animation:fxLungeDown .62s cubic-bezier(.32,.9,.3,1)}
.cb-team .cb-t.fx-lunge-sm{animation:fxLungeSmall .58s ease;z-index:5}
@keyframes fxLungeUp{
  0%{transform:translateY(0) scale(1)}
  36%{transform:translateY(-52px) scale(1.05)}
  56%{transform:translateY(-58px) scale(1.07)}
  78%{transform:translateY(-10px) scale(1.02)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes fxLungeDown{
  0%{transform:translateY(0) scale(1)}
  36%{transform:translateY(52px) scale(1.05)}
  56%{transform:translateY(58px) scale(1.07)}
  78%{transform:translateY(10px) scale(1.02)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes fxLungeSmall{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-18px) scale(1.14)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes fxHit{
  0%,100%{transform:translate(0,0)}
  15%{transform:translate(-8px,2px)}
  30%{transform:translate(7px,-3px)}
  45%{transform:translate(-5px,2px)}
  62%{transform:translate(4px,-1px)}
  80%{transform:translate(-2px,0)}}

/* 【性能·2026-10-17】面板发光原来是「动画 box-shadow」：整块面板（约 600×230，还带 26~30px 模糊）
   每一帧都要重新栅格化一遍，手机上一次出牌重绘上千次。
   现在把阴影预先写在伪元素上、只动画它的透明度 —— 阴影只画一次，之后完全在合成层里淡入淡出，
   观感（同色、同大小的呼吸光）不变。 */
.cb-opp,.cb-me{position:relative}
.cb-opp::before,.cb-me::before{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:0;
  z-index:0}
.cb-me.fx-guard::before{box-shadow:0 0 26px 7px rgba(120,180,255,.6),inset 0 0 28px rgba(120,180,255,.3);
  animation:fxGlowFade .75s ease-out}
.cb-me.fx-heal::before{box-shadow:0 0 28px 9px rgba(120,240,170,.5);animation:fxGlowFade .85s ease-out}
.cb-me.fx-buff::before{box-shadow:0 0 30px 9px rgba(190,140,255,.5),inset 0 0 32px rgba(190,140,255,.22);
  animation:fxGlowFade .95s ease-out}
.cb-opp.fx-weaken::before{box-shadow:0 0 28px 8px rgba(170,110,255,.5),inset 0 0 32px rgba(150,90,240,.3);
  animation:fxGlowFade .85s ease-out}
@keyframes fxGlowFade{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
/* 旧的发光 keyframes 保留着（万一以后要用），但元素本身不再挂动画 ——
   现在这几种光效一律由上面的 ::after 用透明度播。 */
@keyframes fxGuard{
  0%{box-shadow:0 0 0 0 rgba(120,180,255,0)}
  35%{box-shadow:0 0 26px 7px rgba(120,180,255,.6),inset 0 0 28px rgba(120,180,255,.3)}
  100%{box-shadow:0 0 0 0 rgba(120,180,255,0)}}
.fx-ring{position:absolute;margin:0;border-radius:50%;border:3px solid rgba(150,200,255,.85);
  transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(150,200,255,.7);animation:fxRing .75s ease-out both}
@keyframes fxRing{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  30%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}

/* 「格挡」专用特效：立在英灵身前的六边形护盾 */
.fx-shield{position:absolute;pointer-events:none;
  transform:translate(-50%,-50%);
  clip-path:polygon(50% 0%,100% 20%,100% 62%,50% 100%,0% 62%,0% 20%);
  background:linear-gradient(180deg,rgba(178,222,255,.62),rgba(120,175,240,.30) 58%,rgba(90,150,230,.10));
  filter:drop-shadow(0 0 14px rgba(150,205,255,.9));
  animation:fxShield .82s cubic-bezier(.2,.7,.3,1) both}
.fx-shield-in{background:linear-gradient(180deg,rgba(214,240,255,.55),rgba(140,195,250,.18) 60%,rgba(120,175,240,.05))}
@keyframes fxShield{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.52)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  38%{transform:translate(-50%,-50%) scale(1)}
  72%{opacity:.95;transform:translate(-50%,-50%) scale(1.03)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
.fx-shield-spark{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:radial-gradient(circle,#ffffff,#9fd4ff 55%,rgba(150,200,255,0) 78%);
  animation:fxShieldSpark .7s ease-out both}
@keyframes fxShieldSpark{
  0%{opacity:0;transform:scale(.4)}
  25%{opacity:1;transform:scale(1.15)}
  100%{opacity:0;transform:scale(.55) translateY(-10px)}}

.fx-heal{animation:none}          /* 光效改由 .cb-me.fx-heal::after 动透明度（见 .fx-guard 那段注释） */
@keyframes fxHealGlow{
  0%{box-shadow:0 0 0 rgba(120,240,170,0)}
  40%{box-shadow:0 0 28px 9px rgba(120,240,170,.5)}
  100%{box-shadow:0 0 0 rgba(120,240,170,0)}}
.fx-orb{position:absolute;width:10px;height:10px;border-radius:50%;margin:-5px 0 0 -5px;
  background:radial-gradient(circle,#eafff2,#7fe0b0 55%,rgba(120,240,170,0) 78%);animation:fxOrb .9s ease-out both}
@keyframes fxOrb{
  0%{opacity:0;transform:scale(.4)}
  25%{opacity:1}
  100%{opacity:0;transform:translateY(-72px) scale(1.1)}}

.fx-buff{animation:none}          /* 同上：由 .cb-me.fx-buff::after 播 */
@keyframes fxBuffGlow{
  0%{box-shadow:0 0 0 rgba(190,140,255,0)}
  40%{box-shadow:0 0 30px 9px rgba(190,140,255,.5),inset 0 0 32px rgba(190,140,255,.22)}
  100%{box-shadow:0 0 0 rgba(190,140,255,0)}}
.fx-rune{position:absolute;width:52px;height:52px;border-radius:50%;margin:-26px 0 0 -26px;
  border:2px dashed rgba(214,180,255,.9);animation:fxRune .95s linear both}
@keyframes fxRune{
  0%{opacity:0;transform:rotate(0) scale(.5)}
  30%{opacity:1}
  100%{opacity:0;transform:rotate(220deg) scale(1.5)}}

.fx-flash{position:absolute;left:50%;top:42%;width:120vmin;height:120vmin;margin:-60vmin 0 0 -60vmin;
  background:radial-gradient(circle at 50% 42%,rgba(255,228,158,.6),rgba(255,180,60,.2) 44%,rgba(0,0,0,0) 72%);
  animation:fxFlash 1s ease-out both}
@keyframes fxFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.fx-ray{position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,228,158,.34) 0deg 3deg,rgba(255,228,158,0) 3deg 12deg);
  animation:fxRay 1.05s ease-out both}
@keyframes fxRay{
  /* 【性能】原来是 150vmax×150vmax 的巨型元素（手机上 1200+ 像素见方，光栅化一次 ~160 万像素）。
     现在把元素本身做小（60vmax），靠 scale 放大到同样铺满 —— 观感一样，栅格化面积少 6 倍。 */
  0%{opacity:0;transform:scale(.5) rotate(0)}
  25%{opacity:.95}
  100%{opacity:0;transform:scale(3.6) rotate(38deg)}}

/* 弱化对手：紫色咒环收缩 + 咒印下坠 + 状态标签（全部落在对面身上） */
.fx-weaken{animation:none}        /* 同上：由 .cb-opp.fx-weaken::after 播 */
@keyframes fxWeaken{
  0%{box-shadow:0 0 0 rgba(170,110,255,0)}
  35%{box-shadow:0 0 28px 8px rgba(170,110,255,.5),inset 0 0 32px rgba(150,90,240,.3)}
  100%{box-shadow:0 0 0 rgba(170,110,255,0)}}
.fx-hex{position:absolute;border-radius:50%;border:2px dashed rgba(200,155,255,.9);
  box-shadow:0 0 18px rgba(170,110,255,.55);animation:fxHex .8s ease-in both}
@keyframes fxHex{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(1.45)}
  30%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-160deg) scale(.42)}}
.fx-curse{position:absolute;width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:12px solid #c79bff;
  filter:drop-shadow(0 0 6px rgba(180,120,255,.9));animation:fxCurse .85s ease-in both}
@keyframes fxCurse{
  0%{opacity:0;transform:translate(-50%,-54px) scale(.7)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(-50%,14px) scale(1.05)}}
.fx-dbtag{position:absolute;padding:2px 10px;border-radius:999px;white-space:nowrap;
  background:rgba(28,10,50,.94);border:1px solid rgba(196,150,255,.8);color:#e6d3ff;
  font-family:var(--sans);font-size:12px;font-weight:900;letter-spacing:.6px;
  box-shadow:0 0 14px rgba(150,90,240,.55);animation:fxDbTag 1.15s ease-out both}
@keyframes fxDbTag{
  0%{opacity:0;transform:translate(-50%,10px) scale(.72)}
  22%{opacity:1;transform:translate(-50%,0) scale(1.08)}
  50%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}

.fx-cast{animation:fxCast .46s ease-out forwards;pointer-events:none}

/* 出牌等待服务器回包的这段时间：手牌区一起「呼吸」，点下去马上有反馈。
   （外网往返有时 0.3~0.5 秒，没有这个提示会像是点击没生效） */
.cb-hand.cb-busy{opacity:.75}
.cb-hand.cb-busy .cb-card{transition:opacity .2s}
.cb-hand.cb-busy .cb-card:not(.fx-cast){opacity:.55}
.cb-hand.cb-busy::after{content:"出牌中…";flex:0 0 auto;align-self:center;margin-left:6px;
  font-size:12px;color:var(--gold-1);font-family:var(--serif);letter-spacing:1px;
  animation:cbBusyBlink 1s ease-in-out infinite}
/* 等得久时把秒数写进提示（「出牌中… 7s」），让玩家知道还在等、不是死机 */
.cb-hand.cb-busy[data-busy]::after{content:attr(data-busy)}
@keyframes cbBusyBlink{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes fxCast{
  0%{transform:none}
  40%{transform:translateY(-16px) scale(1.06);box-shadow:0 0 26px rgba(255,215,140,.55)}
  100%{transform:translateY(-44px) scale(.9);opacity:0}}

/* ---------- 英灵「阵亡」特效 ---------- */
/* 面板：先是血色闪一下，然后褪成灰白（像被打没了） */
.fx-dying{animation:fxDying .9s ease-out}
@keyframes fxDying{
  0%{filter:none;transform:none}
  12%{filter:brightness(1.7) saturate(.4) drop-shadow(0 0 22px rgba(255,60,60,.85));transform:translateX(-5px)}
  26%{filter:brightness(1.3) saturate(.3);transform:translateX(5px)}
  45%{filter:grayscale(.85) brightness(.6);transform:translateY(3px)}
  100%{filter:none;transform:none}}
/* 深色交叉斩痕 */
.fx-slash.dark{height:11px;background:linear-gradient(90deg,rgba(255,255,255,0),#ff5a5a 35%,#7a0b12);
  box-shadow:0 0 22px rgba(255,60,60,.75)}
/* 碎晶：被打碎飞散的冰片 / 光片 */
.fx-shard{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:2px;
  background:linear-gradient(135deg,#fff,#9fd0ff 55%,#4d7fc4);
  box-shadow:0 0 12px rgba(160,210,255,.75);animation:fxShard .95s ease-out forwards}
@keyframes fxShard{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(.5)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(var(--sx,26px),calc(46px + var(--sy,20px))) rotate(220deg) scale(.35)}}
/* 「阵亡」横幅 */
.fx-down-tag{position:absolute;z-index:3;padding:7px 20px;border-radius:999px;white-space:nowrap;
  transform:translate(-50%,-50%);color:#ffe3e6;background:linear-gradient(90deg,rgba(120,8,18,.94),rgba(40,4,10,.94));
  border:1px solid rgba(255,90,90,.6);font-family:var(--serif);font-size:15px;font-weight:800;letter-spacing:2px;
  box-shadow:0 0 26px rgba(255,50,60,.6);animation:fxDownTag 1.5s ease-out both}
@keyframes fxDownTag{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  34%{transform:translate(-50%,-50%) scale(1)}
  78%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-72%) scale(.96)}}

/* ---------- 英灵「登场 / 换人」特效 ---------- */
/* 面板：金光扫过 */
.fx-enter{animation:fxEnter .78s ease-out}
@keyframes fxEnter{
  0%{filter:brightness(2.1) saturate(1.2);transform:translateY(8px) scale(.985)}
  30%{filter:brightness(1.35);transform:translateY(0) scale(1.004)}
  100%{filter:none;transform:none}}
/* 竖直光柱 */
.fx-beam{position:absolute;width:74px;margin-left:-37px;transform:translateY(-50%);
  background:linear-gradient(180deg,rgba(255,236,180,0),rgba(255,225,150,.65) 35%,rgba(255,240,200,.85) 50%,rgba(255,225,150,.65) 65%,rgba(255,236,180,0));
  filter:blur(7px);animation:fxBeam .8s ease-out forwards}
@keyframes fxBeam{
  0%{opacity:0;transform:translateY(-50%) scaleY(.3)}
  25%{opacity:1;transform:translateY(-50%) scaleY(1)}
  100%{opacity:0;transform:translateY(-50%) scaleY(1.15)}}
.fx-ring.gold{border-color:rgba(255,214,130,.95);border-width:4px;box-shadow:0 0 26px rgba(255,200,90,.6)}
/* 「登场」横幅 */
.fx-enter-tag{position:absolute;z-index:3;padding:7px 20px;border-radius:999px;white-space:nowrap;
  transform:translate(-50%,-50%);color:#2a1e08;background:linear-gradient(90deg,#ffe6a8,#fff6dc,#ffe6a8);
  border:1px solid rgba(255,255,255,.85);font-family:var(--serif);font-size:15px;font-weight:800;letter-spacing:2px;
  box-shadow:0 0 26px rgba(255,210,110,.75);animation:fxEnterTag 1.35s ease-out both}
@keyframes fxEnterTag{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  36%{transform:translate(-50%,-50%) scale(1)}
  76%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-26%) scale(.98)}}

/* 御主技能（令咒）发动：全屏红光大闪 + 咒印浮现 + 技能名浮字 */
.fx-command{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,120,120,.5),rgba(190,30,50,.22) 46%,rgba(0,0,0,0) 74%);
  animation:fxCommand .78s ease-out both}
@keyframes fxCommand{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.fx-command-mark{position:absolute;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;
  border:3px solid rgba(255,120,130,.9);
  box-shadow:0 0 30px rgba(229,56,74,.75),inset 0 0 24px rgba(229,56,74,.35);
  background:radial-gradient(circle,rgba(255,200,200,.28),rgba(229,56,74,.06) 70%);
  animation:fxCommandMark .78s cubic-bezier(.2,.7,.3,1) both}
@keyframes fxCommandMark{
  0%{opacity:0;transform:scale(.4) rotate(-18deg)}
  25%{opacity:1;transform:scale(1.12) rotate(0)}
  55%{transform:scale(1) rotate(6deg)}
  100%{opacity:0;transform:scale(1.22) rotate(14deg)}}
.fx-num.master{font-size:24px;color:#ffb3b8;text-shadow:0 0 16px rgba(229,56,74,.75)}

/* 战斗语音文字：登场 / 出牌 / 退场 / 胜利时在英灵面板边弹一句台词（fgo.wiki 语音） */
.vox-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:420}
.fx-voice{position:absolute;max-width:min(320px,74vw);padding:6px 11px 7px;border-radius:12px;
  background:linear-gradient(180deg,rgba(34,24,46,.96),rgba(18,13,26,.96));
  border:1px solid rgba(214,183,116,.65);color:#f6efe0;
  font-size:13px;line-height:1.45;text-align:left;letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(0,0,0,.5),inset 0 0 18px rgba(214,183,116,.08)}
.fx-voice i{display:block;font-style:normal;font-size:11px;letter-spacing:.08em;
  color:var(--gold-1);margin-bottom:2px;font-family:var(--latin)}
.fx-voice::after{content:"";position:absolute;left:50%;margin-left:-7px;border:7px solid transparent}
.fx-voice.me{transform-origin:50% 100%;animation:voxInMe 1.7s ease both}
.fx-voice.me::after{bottom:-7px;border-top-color:rgba(214,183,116,.65)}
.fx-voice.opp{transform-origin:50% 0;animation:voxInOpp 1.7s ease both}
.fx-voice.opp::after{top:-7px;border-bottom-color:rgba(214,183,116,.65)}
/* 说话的那位在队伍条里是小头像：气泡更窄一点，贴着那一格的正上方 */
.fx-voice.unit{max-width:min(260px,64vw)}
/* 被点到名的那一格小头像闪一圈金光，一眼看出是谁在说话 */
/* 【性能】原来这条「谁在说话」的高亮是动画 outline / outline-offset（不能进合成层、每帧重画）。
   改成动画 box-shadow：这一格只有 46×54，重绘范围极小；描边变淡的观感一样。 */
.cb-t.fx-owner{animation:fxOwnerGlow .95s ease both}
@keyframes fxOwnerGlow{
  0%{box-shadow:0 0 0 3px rgba(236,212,155,.9)}
  70%{box-shadow:0 0 0 3px rgba(236,212,155,.32)}
  100%{box-shadow:0 0 0 3px rgba(236,212,155,0)}}
@keyframes fxOwnerFade{0%{opacity:1}70%{opacity:.45}100%{opacity:0}}
@keyframes fxOwner{
  0%{outline:3px solid rgba(236,212,155,.9);outline-offset:0}
  70%{outline:3px solid rgba(236,212,155,.3);outline-offset:3px}
  100%{outline:3px solid rgba(236,212,155,0);outline-offset:3px}}
@keyframes voxInMe{
  0%{opacity:0;transform:translate(-50%,-90%) scale(.94)}
  10%{opacity:1;transform:translate(-50%,-100%) scale(1.02)}
  16%{transform:translate(-50%,-100%) scale(1)}
  84%{opacity:1;transform:translate(-50%,-100%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-112%) scale(.99)}}
@keyframes voxInOpp{
  0%{opacity:0;transform:translate(-50%,10%) scale(.94)}
  10%{opacity:1;transform:translate(-50%,0) scale(1.02)}
  16%{transform:translate(-50%,0) scale(1)}
  84%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,12%) scale(.99)}}
/* 战斗记录里的台词（金色引号，跟普通战报区分开） */
.cb-log .dl .dl-v{color:var(--gold-1);margin-left:4px}

/* 令咒 · 加倍符（应援面板里的勾选行） */
.dbl-box{margin-top:12px}
.dbl-row{display:flex;align-items:flex-start;gap:9px;margin-top:8px;cursor:pointer;font-size:13px;color:var(--text-2);line-height:1.6}
.dbl-row input{width:17px;height:17px;flex:0 0 auto;margin-top:2px;accent-color:var(--crimson-2);cursor:pointer}
.dbl-row b{color:var(--gold-1)}

/* ---------- 灵基燃烧（应援面板里的「押英灵」区块 + 挑英灵弹窗） ---------- */
.burn-box{margin-top:12px;border-color:rgba(255,150,86,.36);background:rgba(255,120,60,.06)}
.burn-box .skill-head{color:#ffb26b}
.burn-tip{margin:0 0 10px;font-size:12.5px;line-height:1.75;color:var(--text-2)}
.burn-tip b{color:var(--gold-1)}
.burn-tip b.num{font-family:var(--latin)}
.burn-tip .burn-warn{color:#ffc2c8}
.burn-sum{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.6;
  background:rgba(0,0,0,.34);border:1px solid var(--line);color:var(--text-2)}
.burn-sum b{color:var(--gold-1)}
.burn-sum b.num{font-family:var(--latin)}
.burn-card{position:relative}
.burn-card.on{border-color:#ff9a5c;box-shadow:0 0 0 1px rgba(255,154,92,.55),0 0 18px rgba(255,120,60,.28)}
.burn-mark{position:absolute;left:6px;top:6px;z-index:3;display:none;padding:2px 7px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;color:#2a1200;background:linear-gradient(160deg,#ffd08a,#ff9a5c)}
.burn-card.on .burn-mark{display:inline-block}
/* 「我的应援」里灵基燃烧那一笔 */
.burn-mini{display:inline-block;margin-top:4px;font-size:11.5px;color:#ffb26b}
.pl-amt.burn{color:#ffb26b;font-family:inherit;font-size:11.5px}
.bm.burn .v{color:#ffb26b}

/* 萌彩积分券（应援面板里的「用几张券」输入行） */
.cp-box{margin-top:12px}
/* 选择器要比 .dbl-row input 更具体，否则会被压成 17×17 的勾选框大小 */
.dbl-row input.cp-num{width:78px;height:auto;flex:0 0 78px;padding:7px 9px;border-radius:8px;text-align:center;margin-top:0;
  background:rgba(0,0,0,.42);border:1px solid var(--line);color:var(--text);font-family:var(--latin);font-size:14px;cursor:text}
.dbl-row input.cp-num:focus{outline:none;border-color:var(--line-2);box-shadow:0 0 0 3px rgba(214,183,116,.12)}
.cp-box .cp-tip{margin-top:9px;font-size:12.5px;line-height:1.7;color:var(--text-2)}
.cp-box .cp-tip b{color:var(--gold-1);font-family:var(--latin)}
/* 签到面板里的积分券说明条 */
.sb-cp{margin:0 0 12px;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.5;
  background:rgba(214,183,116,.08);border:1px solid rgba(214,183,116,.28);color:var(--text-2)}
.sb-cp b{color:var(--gold-1);font-family:var(--latin)}
.sb-day .sb-it-cp{color:var(--gold-1)}

/* 「消耗」角标：宝具这类打完这一局就不会回到牌堆的牌 */
.cb-exh{position:absolute;top:-8px;right:-6px;font-size:9.5px;font-weight:800;letter-spacing:.5px;font-style:normal;
  padding:2px 6px;border-radius:999px;color:#ffdccb;background:linear-gradient(140deg,#a2432c,#6d2114);
  border:1px solid rgba(255,190,150,.45);box-shadow:0 2px 8px rgba(0,0,0,.45);white-space:nowrap}
.skill-item .cb-exh{position:static;margin-left:7px;vertical-align:1px;background:linear-gradient(140deg,#a2432c,#6d2114)}

/* ---------- 卡牌战斗 · 手机端排版（数值挤在一起 / 血条数字被裁的修复） ---------- */
@media (max-width:600px){
  /* 战斗弹窗：整块变成「从上到下」的竖列，方便手机端重新排顺序，
     并把弹窗外边距压到最小，屏幕高度几乎全给内容 */
  #duelMask{padding:6px 8px 14px}
  .modal-card-battle{max-width:640px;padding:12px;display:flex;flex-direction:column}
  /* 顺序：对手 → 我方小队 → 我方 → 手牌 → 控制栏 → 战斗记录
     （记录挪到最后，手机上不用往下滑就能选牌打牌） */
  .modal-card-battle>.cb-opp{order:1}
  .modal-card-battle>.cb-team{order:2}
  .modal-card-battle>.cb-me{order:3}
  .modal-card-battle>.cb-result{order:4}
  .modal-card-battle>.cb-hand{order:5}
  .modal-card-battle>.cb-controls{order:6}
  .modal-card-battle>.cb-log{order:7}
  .modal-card-battle>.acts{order:8}
  .cb-opp,.cb-me{padding:9px 10px}
  .cb-me{margin-top:8px}
  .cb-avatar{width:48px;height:56px}
  .cb-top{gap:9px}
  .cb-name{font-size:13.5px;gap:6px}
  /* 血条高度用 em，浏览器放大字号时血条一起变高，数字不会被裁 */
  .cb-bar{font-size:11.5px;height:1.6em;margin-top:5px}
  .cb-bar em{font-size:1em}
  /* 数值与行动意图各占一整行，不再互相挤压 */
  .cb-bot{gap:6px;margin-top:7px}
  .cb-meta{flex:1 1 0;min-width:0;line-height:1.5}
  .cb-meta,.cb-intent .cb-it{font-size:11px}
  /* 手机端：三条行动意图并排成一行，压缩竖向高度 */
  .cb-intent{flex:1 1 100%;max-width:none;flex-direction:row;align-items:stretch;gap:6px;padding:6px 8px}
  .cb-it-hd{flex:0 0 auto;align-self:center;font-size:10px;letter-spacing:0;padding-right:2px}
  .cb-intent .cb-it{flex:1 1 0;min-width:0;gap:5px;justify-content:center;line-height:1.25;
    white-space:normal;padding:5px 6px;border-radius:8px;background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07)}
  .cb-intent .cb-it i{font-size:14px}
  .cb-intent .cb-it.on{background:rgba(214,183,116,.1);border-color:rgba(214,183,116,.4)}
  .cb-intent .cb-it b{white-space:normal;overflow:visible;text-overflow:clip;max-width:100%;font-weight:700}
  .cb-energy{flex:0 0 auto;min-width:0;flex-direction:row;justify-content:flex-end;font-size:17px;margin-left:auto}
  .cb-team{flex-wrap:wrap;gap:6px;margin-top:8px}
  .cb-t{width:40px;height:46px}
  .cb-t em{font-size:9px}
  /* 战斗记录：默认只留一条两行高的横条（带「下拉查看更多」把柄），
     点一下 / 往下拉就展开看更早的记录 */
  .cb-log{display:flex;flex-direction:column;max-height:66px;overflow:hidden;margin-top:8px;padding:0;font-size:11px;line-height:1.45}
  .cb-log.open{max-height:46vh}
  .cb-log-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;
    padding:6px 9px;color:var(--gold-1);font-size:11px;cursor:pointer;user-select:none;
    background:rgba(255,255,255,.03);border-bottom:1px solid rgba(214,183,116,.12);touch-action:pan-y}
  .cb-log-hd .cb-log-tip{font-style:normal;font-size:10.5px;color:var(--muted)}
  .cb-log-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 9px;overscroll-behavior:contain}
  /* 手牌：更紧凑 + 上移 */
  .cb-hand{gap:7px;margin-top:10px;padding-bottom:6px}
  .cb-card{flex:0 0 110px;gap:4px;padding:9px 10px}
  .cb-card .cb-ic{width:26px;height:26px;font-size:15px}
  .cb-card b{font-size:12.5px}
  .cb-card .cb-srv{font-size:10px}
  /* 牌面说明最多四行：个别长说明不会把整排手牌撑高，给首屏留出余量 */
  .cb-card .cb-desc{font-size:10.5px;line-height:1.35;min-height:0;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .cb-cost{width:25px;height:25px;font-size:14px}
  .cb-controls{flex-wrap:wrap;gap:9px;margin-top:10px}
  /* 手机端按钮重排：第一行「退出战斗（左） —— 结束回合（右）」，第二行「令咒」贴右下 */
  .cb-acts{width:100%;justify-content:flex-start}
  .cb-acts .cb-master-wrap{order:3;flex:1 1 100%;justify-content:flex-end}
  .cb-acts [data-duel="quit"]{order:1}
  .cb-acts [data-duel="endturn"]{order:2;margin-left:auto;min-width:104px}
  /* 手机端：三个查看按钮铺满一行，手指点得到 */
  .cb-pile{display:flex;gap:8px;flex:1 1 100%}
  /* 手机上是「牌堆 / 除外 / 弃牌 / 消耗」四个按钮平分一行，字号压一档免得挤 */
  .cb-pilet{flex:1 1 0;margin-right:0;padding:7px 2px;text-align:center;font-size:11.5px}
  .pile-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px 8px}
}

/* 屏幕矮的手机（≤700px 高，比如 640/667 那一档）：再压一档，
   保证「手牌 + 令咒 + 结束回合」在首屏就看得见，不用往下滑 */
@media (max-width:600px) and (max-height:700px){
  .cb-opp,.cb-me{padding:8px 9px}
  .cb-avatar{width:42px;height:50px}
  .cb-t{width:36px;height:42px}
  .cb-team{margin-top:6px}
  .cb-bot{margin-top:6px}
  .cb-log{max-height:58px;margin-top:6px}
  .cb-log.open{max-height:50vh}
  .cb-log-hd{padding:5px 8px;font-size:10.5px}
  .cb-log-body{padding:5px 8px}
  .cb-hand{margin-top:8px;gap:6px}
  .cb-card{flex:0 0 104px;gap:3px;padding:8px 9px}
  .cb-card .cb-ic{width:22px;height:22px;font-size:13px}
  .cb-card b{font-size:12px}
  /* 矮屏上牌面说明最多显示三行，避免个别长说明把整排手牌撑高 */
  .cb-card .cb-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .cb-controls{margin-top:8px}
  .cb-pilet{padding:6px 4px}
}

/* ---------------- 副本（异闻带） ---------------- */
.dgn-stage{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:14px;background:linear-gradient(170deg,#12162a,#0c0e19)}
.dgn-stage.boss{border-color:rgba(200,16,46,.45);background:linear-gradient(170deg,#1d1220,#0d0b16)}
.dgn-stage.done{border-color:rgba(127,224,189,.28)}
.dgn-stage.lock{opacity:.55}
.dgn-no{flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--latin);
  font-weight:800;font-size:17px;color:#f0e6cf;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.dgn-stage.done .dgn-no{color:#7fe0bd;border-color:rgba(127,224,189,.4)}
.dgn-stage.boss .dgn-no{color:#ff9a9a;border-color:rgba(200,16,46,.4)}
.dgn-main{flex:1 1 auto;min-width:0}
.dgn-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dgn-title b{font-family:var(--serif);font-size:16px;color:#f4eee1}
.dgn-tag{font-size:11px;padding:2px 7px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.dgn-tag.boss{color:#ffc2c8;border-color:rgba(200,16,46,.5);background:rgba(200,16,46,.14)}
.dgn-tag.done{color:#7fe0bd;border-color:rgba(127,224,189,.4)}
.dgn-tag.lock{color:#8b8b9c}
.dgn-lv{font-size:11px;padding:2px 7px;border-radius:6px;border:1px solid rgba(214,183,116,.35);
  color:var(--gold-1);background:rgba(214,183,116,.08)}
/* 自选对手里的「挑战自己」一行 */
.opp-row.opp-self{border-color:rgba(214,183,116,.45);background:rgba(214,183,116,.07)}
.opp-row.opp-self .opp-name{color:var(--gold-1)}
.opp-row.opp-self em{font-style:normal;color:var(--muted);font-size:11.5px}
.dgn-sub{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.dgn-enemies{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.dgn-enemy{display:flex;align-items:center;gap:6px;padding:4px 9px 4px 4px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12px;color:#e6d9b8}
.dgn-enemy img{width:24px;height:24px;border-radius:50%;object-fit:cover;display:block}
.dgn-enemy i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:rgba(255,255,255,.08);font-size:12px}
.dgn-enemy.boss{border-color:rgba(200,16,46,.5);color:#ffd9dd}
.dgn-en-lv{color:var(--muted);font-size:11px}
.dgn-reward{margin-top:10px;font-size:12.5px;color:var(--muted)}
.dgn-reward b{color:var(--gold-1)}
.dgn-go{flex:0 0 auto;display:flex;align-items:center;align-self:center}
.dgn-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.dgn-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.02);cursor:pointer;transition:.15s}
.dgn-card:hover{border-color:var(--line-2)}
.dgn-card.on{border-color:rgba(214,183,116,.5);background:rgba(214,183,116,.06)}
.dgn-card.lock{opacity:.5;cursor:default}
.dgn-card-no{font-family:var(--latin);font-weight:800;color:var(--gold-1);font-size:13px;flex:0 0 46px}
.dgn-card-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.dgn-card-main b{font-family:var(--serif);font-size:14.5px;color:#f2ece0}
.dgn-card-jp{font-size:11px;color:var(--muted)}
.dgn-card-desc{font-size:11.5px;color:var(--muted);line-height:1.5}
.dgn-card-side{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted)}
.dgn-prog{font-family:var(--latin);font-size:16px;color:var(--gold-1)}
.dgn-soon{color:#8b8b9c}

/* 副本页最上面：「灵子转移」入口（默认只露按钮，点开才列副本） */
.dgn-rs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.dgn-rs-txt{flex:1 1 auto;min-width:0}
.dgn-rs-now{margin:8px 0 0;font-size:13px;color:#e6d9b8}
.dgn-rs-now b{color:var(--gold-1);font-family:var(--serif)}
.dgn-rs-desc{margin:6px 0 0}
.dgn-rs-acts{flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

@media (max-width:760px){
  .dgn-stage{flex-wrap:wrap;gap:10px;padding:14px}
  .dgn-go{flex:1 1 100%}
  .dgn-go .btn{width:100%}
  .dgn-card{flex-wrap:wrap}
  .dgn-rs-head{flex-direction:column;gap:12px}
  .dgn-rs-acts{width:100%}
  .dgn-rs-acts .btn{flex:1 1 150px}
}

/* 连战卡片（一口气打完 10 关） */
.dgn-run{margin-bottom:14px;padding:16px 18px;border:1px solid rgba(214,183,116,.34);border-radius:14px;
  background:linear-gradient(160deg,#241a16,#120e18);position:relative;overflow:hidden}
.dgn-run.lock{opacity:.6}
.dgn-run.done{border-color:rgba(127,224,189,.35)}
.dgn-run-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dgn-run-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px}
.dgn-act{color:#ffd98a}
.dgn-done-txt{color:#7fe0bd}
.dgn-chain-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.dgn-chain{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;
  font-family:var(--latin);border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.03)}
.dgn-chain.on{color:#7fe0bd;border-color:rgba(127,224,189,.4)}
.dgn-chain.cur{color:#0c0e16;background:var(--gold-1);border-color:var(--gold-1);font-weight:800}
.dgn-run-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dgn-run-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.07);margin-top:14px;overflow:hidden}
.dgn-run-bar i{display:block;height:100%;background:linear-gradient(90deg,#c8102e,#d6b774)}

/* ---------- 伊凡雷帝的书库（无尽肉鸽） ---------- */
/* 副本页里的入口卡片：金色调，和「连战」区分开 */
.lib-run{border-color:rgba(214,183,116,.5);background:linear-gradient(160deg,#2a2010,#130d18)}
.lib-run.on{border-color:rgba(127,224,189,.45);background:linear-gradient(160deg,#16241c,#111018)}
.lib-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
/* 规则说明：雷帝的口吻 */
.lib-advice{margin:8px 0 10px;padding:10px 12px;border-radius:10px;border-left:3px solid rgba(120,190,255,.5);
  background:linear-gradient(100deg,rgba(90,150,220,.10),rgba(0,0,0,.18))}
.lib-advice b{display:block;font-family:var(--serif);font-size:12.5px;color:#a8d8ff;letter-spacing:.6px;margin-bottom:4px}
.lib-advice p{margin:0;font-size:12.5px;line-height:1.75;color:var(--text-2)}
.lib-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11.5px;
  border:1px solid transparent;white-space:nowrap;font-family:inherit;cursor:pointer}
.lib-chip.buff{color:#ffe6a8;background:rgba(214,183,116,.14);border-color:rgba(214,183,116,.4)}
.lib-chip.rule{color:#ffb4ba;background:rgba(200,16,46,.14);border-color:rgba(229,56,74,.42)}
.lib-chip.is-buff{color:#ffe6a8;background:rgba(214,183,116,.14);border-color:rgba(214,183,116,.4)}
.lib-chip.is-rule{color:#ffb4ba;background:rgba(200,16,46,.14);border-color:rgba(229,56,74,.42)}
.lib-chip.lib-summary{padding:5px 11px;font-weight:700;transition:filter .15s,transform .1s}
.lib-chip.lib-summary:hover{filter:brightness(1.16)}
.lib-chip.lib-summary:active{transform:translateY(1px)}
.lib-chip.lib-summary b{font-family:var(--latin);margin-left:3px;font-size:12.5px}
.lib-sep{width:1px;height:16px;background:rgba(255,255,255,.18);margin:0 2px}
/* 对战面板顶上的书库条 */
.lib-hud{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:-2px 0 10px;padding:8px 12px;border-radius:10px;
  background:linear-gradient(150deg,rgba(214,183,116,.12),rgba(0,0,0,.24));border:1px solid rgba(214,183,116,.34)}
.lib-hud-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.lib-hud-l b{font-family:var(--serif);font-size:14px;color:var(--gold-1)}
.lib-hud-l span{font-size:11.5px;color:var(--muted)}
.lib-hud-r{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
/* 三选一祝福 */
.lib-pick{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.lib-pick>b{font-family:var(--serif);font-size:16px;color:var(--gold-1)}
.lib-pick>span{font-size:12.5px;color:var(--text-2);line-height:1.7}
.lib-pick-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin-top:6px}
.lib-pick-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;cursor:pointer;
  padding:12px 12px 14px;border-radius:12px;border:1px solid rgba(214,183,116,.42);
  background:linear-gradient(165deg,#241b12,#12101a);color:var(--text);font-family:inherit;transition:.18s}
.lib-pick-card:hover{border-color:var(--gold-1);transform:translateY(-2px);box-shadow:0 6px 20px rgba(214,183,116,.15)}
.lib-pick-card b{font-family:var(--serif);font-size:13.5px;color:#ffe6a8}
.lib-pick-card span{font-size:12px;color:var(--text-2);line-height:1.6}
.lib-pick-card em{font-size:11px;color:var(--muted);font-style:normal}
/* 肉鸽专属三人队 / 每三层换人 */
.lib-team-box{margin:0 0 11px;padding:10px 12px;border-radius:11px;border:1px solid rgba(127,224,189,.24);
  background:linear-gradient(145deg,rgba(31,72,56,.30),rgba(11,14,23,.45))}
.lib-team-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.lib-team-head b{font-family:var(--serif);font-size:13px;color:#bdebd3}
.lib-team-locked{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;
  font-size:11.5px;color:#d8c597;background:rgba(214,183,116,.11);border:1px solid rgba(214,183,116,.3)}
.lib-team-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.lib-team-chip{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:7px;align-items:center;padding:6px;border-radius:9px;background:rgba(0,0,0,.22)}
.lib-team-chip img{grid-row:1/3;width:34px;height:46px;object-fit:cover;border-radius:6px}
.lib-team-chip b{font-size:11.5px;color:#e9dfc8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-team-chip em{font-size:10.5px;font-style:normal;color:var(--muted)}
.lib-team-chip.trial{border:1px solid rgba(127,224,189,.35)}
.lib-swap-modal{max-width:760px}
.lib-swap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lib-swap-card-wrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.lib-swap-card{position:relative;display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:left;
  padding:8px;border-radius:12px;border:1px solid rgba(214,183,116,.36);background:linear-gradient(165deg,#241b12,#12101a);
  color:var(--text);font-family:inherit;cursor:pointer;transition:.18s;overflow:hidden;width:100%;flex:1}
.lib-swap-card:hover,.lib-swap-card.on{border-color:#f0c352;transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(214,183,116,.18)}
.lib-swap-card.on{outline:2px solid rgba(240,195,82,.4)}
.lib-swap-card img{width:100%;height:128px;object-fit:cover;object-position:top center;border-radius:8px;
  background:rgba(255,255,255,.04)}
.lib-swap-card b{font-family:var(--serif);font-size:13.5px;color:#ffe6a8}
.lib-swap-card span{font-size:11px;color:var(--muted)}
.lib-swap-card em{font-size:10.5px;font-style:normal;padding:3px 7px;border-radius:999px;align-self:flex-start}
.lib-swap-card em.owned{color:#bdebd3;background:rgba(67,161,116,.18);border:1px solid rgba(127,224,189,.3)}
.lib-swap-card em.unowned{color:#b8d1ff;background:rgba(75,113,180,.18);border:1px solid rgba(120,170,255,.28)}
.lib-swap-deck-btn{padding:7px 9px;border-radius:8px;border:1px solid rgba(214,183,116,.34);cursor:pointer;
  color:#ffe6a8;background:rgba(214,183,116,.10);font-family:inherit;font-size:11.5px;transition:.18s}
.lib-swap-deck-btn:hover{border-color:#f0c352;background:rgba(214,183,116,.18)}
.lib-swap-sep{display:flex;align-items:center;gap:10px;margin:16px 0 9px;color:#d8c597;font-size:12px}
.lib-swap-sep:before,.lib-swap-sep:after{content:'';height:1px;flex:1;background:rgba(214,183,116,.25)}
.lib-swap-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lib-swap-member{display:flex;align-items:center;gap:8px;text-align:left;padding:7px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(127,224,189,.28);background:rgba(30,65,51,.28);color:var(--text);font-family:inherit}
.lib-swap-member:hover{border-color:#7fe0bd;background:rgba(42,96,72,.36)}
.lib-swap-member.disabled{opacity:.5;cursor:default}
.lib-swap-member img{width:38px;height:52px;object-fit:cover;border-radius:6px}
.lib-swap-member span{display:flex;flex-direction:column;gap:3px;min-width:0}
.lib-swap-member b{font-size:12px;color:#e9dfc8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-swap-member em{font-size:10.5px;font-style:normal;color:var(--muted)}
.lib-swap-tip{margin:10px 0 0;text-align:center;font-size:12px;color:var(--text-2)}
.lib-swap-tip b{color:var(--gold-1)}
.lib-swap-actions{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
/* 本轮结束的结算 */
.lib-end{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.lib-end>b{font-family:var(--serif);font-size:17px;color:var(--gold-1)}
.lib-end>span{font-size:12.5px;color:var(--text-2)}
.lib-end-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
@media (max-width:760px){
  .lib-pick-cards{grid-template-columns:1fr}
  .lib-team-line,.lib-swap-team{grid-template-columns:1fr}
  .lib-swap-grid{grid-template-columns:1fr}
  .lib-swap-card img{height:160px}
  .lib-hud{flex-direction:column;gap:6px}
  .lib-hud-r{justify-content:flex-start}
}

@media (max-width:760px){
  .dgn-run-head{flex-direction:column}
  .dgn-run-side{align-items:flex-start}
  .dgn-run-foot .btn{width:100%}
  .dgn-chain{width:24px;height:24px}
}

/* ---------------- 英灵图鉴（魔术工房 · 英灵扭蛋） ---------------- */
.modal-codex{max-width:1040px}
.codex-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 6px}
.codex-bar input{flex:1 1 260px;min-width:180px}
.codex-filter{display:flex;gap:6px}
/* 图鉴排序（实装旧→新 / 新→旧） */
.codex-sort{display:flex;gap:6px}
.codex-sort .codex-fbtn{font-size:11.5px}
.codex-fbtn{
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--text-2);cursor:pointer;transition:.18s;
}
.codex-fbtn:hover{border-color:var(--line-2);color:#f2ece0}
.codex-fbtn.on{border-color:rgba(214,183,116,.6);color:var(--gold-1);background:rgba(214,183,116,.08)}
.codex-count{font-size:12.5px;color:var(--muted);font-family:var(--latin)}
.codex-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;
  max-height:62vh;overflow-y:auto;padding:4px 2px 8px;margin-top:10px;
}
.codex-more,.pick-more{grid-column:1/-1;min-height:44px;margin-top:2px}
.codex-empty,.pick-empty{
  grid-column:1/-1;min-height:120px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;color:var(--muted);text-align:center;padding:22px;
}
.codex-empty b,.pick-empty b{color:var(--text-2);font-family:var(--serif)}
.roster-more{margin-top:14px}
.codex-card{text-align:center}
.codex-card .pick-art{position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;aspect-ratio:3/4}
.codex-card .pick-art img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.codex-card .art-base{position:absolute;inset:0}
.codex-card .art-base svg{width:100%;height:100%}
.codex-card b{display:block;margin-top:8px;font-family:var(--serif);font-size:13.5px;color:#f2ece0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.codex-card>span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.codex-card .btn{width:100%}
/* 「老站 ★3」标记：这些英灵不在抽取池里（抽不到），只在图鉴里露面 */
.codex-legacy{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-style:normal;
  font-size:10px;font-family:var(--sans);color:#e6d9b8;border:1px solid rgba(214,183,116,.45);
  background:rgba(214,183,116,.1);vertical-align:1px}
.codex-stage{
  position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.6);border:1px solid var(--line);
  border-radius:6px;padding:2px 7px;font-size:10.5px;color:var(--gold-1);
}
.codex-detail-art{position:relative;margin:12px auto 0;max-width:300px;aspect-ratio:3/4;
  border-radius:var(--radius);overflow:hidden;cursor:pointer;border:1px solid var(--line)}
.codex-detail-art img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.codex-detail-art .art-base{position:absolute;inset:0}
.codex-detail-art .art-base svg{width:100%;height:100%}
.codex-stats{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:14px 0 4px;
  font-size:12.5px;color:var(--muted)}
.codex-stats b{color:var(--gold-1);font-family:var(--latin)}
.codex-h{font-family:var(--serif);font-size:14.5px;color:#f2ece0;margin:18px 0 8px}
/* 应援技能 / 御主对战牌组：两个按钮，点哪个展开哪个 */
.codex-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 4px}
.codex-tab{
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 10px;font-family:var(--serif);font-size:14px;font-weight:700;color:var(--text-2);
  cursor:pointer;transition:.18s;
}
.codex-tab b{color:var(--gold-1);font-family:var(--latin);margin-left:4px}
.codex-tab:hover{border-color:var(--line-2);color:#f2ece0}
.codex-tab.on{border-color:rgba(214,183,116,.65);color:#f2ece0;background:rgba(214,183,116,.1);
  box-shadow:0 8px 22px rgba(214,183,116,.12)}
.codex-panel{margin-top:12px}
.codex-panel[data-tab=""]{margin-top:10px}
@media(max-width:520px){.codex-tabs{grid-template-columns:1fr}}

/* ---------------- 窄屏（≤430px）：按键文字允许换行、页面不再横向溢出 ----------------
   根因：.btn 是 white-space:nowrap，像「注册领取 200,000 积分 + 2 自选扭蛋」这种长按钮
   最小宽度会超过 320px 手机屏，把整页撑宽 → 手机浏览器缩小显示 → 用户要手动放大。
   允许换行后按钮会跟着屏幕收缩，页面宽度就不会超。 */
@media (max-width:430px){
  .btn{white-space:normal;line-height:1.35}
  .btn-lg{padding:12px 16px;font-size:14.5px}
  .btn-block{padding-left:12px;padding-right:12px}
  .gacha-actions{align-items:stretch;text-align:center;width:100%}
  .gacha-actions .btn{width:100%}
  .wk-head,.gacha-head{flex-direction:column;align-items:stretch;gap:10px}
  /* 竖排之后 flex-basis 会变成「高度」：.gacha-intro 的 360px 会撑出一大段空白，
     把说明文字和下面的扭蛋按钮拉开，所以这里必须收回来。 */
  .gacha-intro{flex:0 0 auto}
  .wk-clock{text-align:left}
  .codex-bar input{min-width:0;flex:1 1 100%}
  .codex-filter{flex:1 1 100%}
  .codex-fbtn{flex:1}
  .shop-grid{gap:10px}
  .balance-card .big{font-size:30px}

  /* 榜单表格：固定布局 + 收窄列宽，避免把整页撑宽（原来 78+158+110 的固定列宽在 320px 屏上会溢出） */
  .rank-table{table-layout:fixed}
  .rank-table th,.rank-table td{padding:9px 4px;font-size:12.5px}
  .rank-table .col-rank{width:36px}
  .rank-table .col-main{width:58px}
  .rank-table .col-rec{width:88px}
  .rank-table .col-perc{width:0}
  .rank-table .u{gap:5px;min-width:0}
  .rank-table .u .medal{width:26px;height:26px;flex:0 0 auto}
  .rank-table .u>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rank-table .hint{font-size:10px;line-height:1.3}
  .rank-table .lvl{display:none}

  /* 榜单标题栏：切换按钮独占一行，不再和标题挤在一起 */
  .sec-title{align-items:center}
  .rank-switch{margin-left:0;flex:1 1 100%;display:flex}
  .rank-switch button{flex:1}
}
@media (max-width:430px){.draw-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 世界 BOSS（宿傩 · 全服共斗，挂在亚种Ⅰ 新宿下面） ---------- */
.wb-run{border-color:rgba(200,16,46,.48);background:linear-gradient(160deg,#2a1119,#120c16)}
.wb-run.done{border-color:rgba(127,224,189,.35)}
.wb-live{color:#ff9aa6;animation:wbPulse 2.2s ease-in-out infinite}
@keyframes wbPulse{0%,100%{opacity:1}50%{opacity:.55}}
.wb-bar{position:relative;height:22px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(200,16,46,.4)}
.wb-bar i{display:block;height:100%;min-width:2px;
  background:linear-gradient(90deg,#8d0b20,#e5384a 62%,#ffb0a0)}
.wb-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.95);letter-spacing:.3px}
.wb-bar b{font-family:var(--latin)}
.wb-bar.thin{height:8px}
.wb-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.wb-step{position:relative;display:flex;flex-direction:column;gap:5px;padding:8px 9px 9px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);opacity:.62}
.wb-step.now{border-color:rgba(229,56,74,.6);background:rgba(200,16,46,.12);opacity:1;
  box-shadow:0 0 0 1px rgba(229,56,74,.18)}
.wb-step.done{border-color:rgba(127,224,189,.4);opacity:.92}
.wb-step b{font-family:var(--serif);font-size:12px;color:#f2e2c8}
.wb-step span{font-size:11px;color:var(--muted);line-height:1.4}
.wb-step-art{display:block;position:relative;width:100%;aspect-ratio:3/4;border-radius:8px;overflow:hidden;
  background:rgba(0,0,0,.35)}
.wb-step-art img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.wb-step.done .wb-step-art img{filter:grayscale(.7) brightness(.72)}
.wb-step-no{position:absolute;right:5px;bottom:5px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:11px;font-family:var(--latin);font-weight:800;
  background:rgba(0,0,0,.66);color:#ffd9b0;border:1px solid rgba(214,183,116,.5)}
.wb-step.done .wb-step-no{color:#7fe0bd;border-color:rgba(127,224,189,.55)}
.wb-now{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px;border-radius:12px;border:1px solid rgba(200,16,46,.34);background:rgba(200,16,46,.07)}
.wb-now.done{border-color:rgba(127,224,189,.3);background:rgba(127,224,189,.06)}
.wb-now-l{display:flex;align-items:center;gap:12px;min-width:0}
.wb-now-art{width:58px;height:78px;border-radius:8px;object-fit:cover;object-position:50% 12%;flex:0 0 auto;
  border:1px solid rgba(200,16,46,.45)}
.wb-now-l b{display:block;font-family:var(--serif);font-size:14.5px;color:#ffd9dd}
.wb-now-l span{display:block;font-size:12px;color:var(--text-2);margin-top:2px}
.wb-quote{margin:6px 0 0;font-size:12px;color:var(--gold-1);font-family:var(--serif)}
.wb-now-r{flex:0 0 auto;min-width:150px;text-align:right;display:flex;flex-direction:column;gap:4px}
.wb-now-r span{font-size:11.5px;color:var(--muted)}
.wb-now-r b{font-family:var(--latin);font-size:18px;color:#ff9aa6}
.wb-final{margin-top:14px;padding:12px;border-radius:12px;border:1px solid rgba(127,224,189,.34);
  background:linear-gradient(150deg,rgba(127,224,189,.08),rgba(0,0,0,.24))}
.wb-final-hd{display:flex;align-items:center;gap:12px}
.wb-final-hd img{width:56px;height:74px;border-radius:8px;object-fit:cover;object-position:50% 12%;
  border:1px solid rgba(127,224,189,.4)}
.wb-final-hd b{display:block;font-family:var(--serif);font-size:14.5px;color:#d8fff0}
.wb-final-hd span{display:block;font-size:11.5px;color:var(--muted)}
/* 对战面板顶上的世界 BOSS 条 */
.wb-hud{border-color:rgba(200,16,46,.5);background:linear-gradient(150deg,rgba(200,16,46,.16),rgba(0,0,0,.28))}
.wb-hud-dmg{font-family:var(--latin);font-size:13px;color:#ffb0b8}
/* 书库卡片上的「积分奖励怎么算」那一行 */
.lib-reward-tip{margin:0 0 10px;font-size:12.5px;line-height:1.75;color:var(--text-2)}
.lib-reward-tip b{color:var(--gold-1)}

/* ---------- 敌方「接下来」的意图：改成可点开看详情 ---------- */
/* 从 <span> 换成 <button> 之后要把浏览器默认的按钮外观抹掉，看起来还跟原来一样 */
.cb-intent .cb-it{background:transparent;border:1px solid transparent;padding:2px 4px;border-radius:8px;
  font-family:inherit;cursor:pointer;text-align:left;transition:background .15s,border-color .15s}
.cb-intent .cb-it:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.cb-intent .cb-it:active{transform:translateY(1px)}
.modal-intent{max-width:430px}
/* 书库的祝福 / 负面规则芯片：从 <span> 改成 <button>，把默认按钮外观抹掉 */
button.lib-chip{font-family:inherit;cursor:pointer;transition:filter .15s,transform .1s}
button.lib-chip:hover{filter:brightness(1.2)}
button.lib-chip:active{transform:translateY(1px)}
.modal-libchip{max-width:390px}
.modal-libchip h3{line-height:1.35}
.modal-libchip p.sub{font-size:14px;color:var(--text-2);line-height:1.7}
.modal-libgroup{max-width:620px}
.lib-group-list{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:8px;max-height:58vh;
  overflow:auto;margin-top:14px;padding-right:4px;text-align:left;box-sizing:border-box}
.lib-group-item{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2)}
.lib-group-item.is-buff{border-color:rgba(214,183,116,.3);background:rgba(214,183,116,.07)}
.lib-group-item.is-rule{border-color:rgba(229,56,74,.3);background:rgba(200,16,46,.07)}
.lib-group-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lib-group-hd b{font-family:var(--serif);font-size:13.5px;color:#f2e6cc}
.lib-group-item.is-rule .lib-group-hd b{color:#ffc3c8}
.lib-group-hd span{font-family:var(--latin);font-size:12px;color:var(--gold-1)}
.lib-group-item p{margin:5px 0 0;font-size:12.5px;line-height:1.65;color:var(--text-2)}
/* 手机端：意图本来就是「三个并排的小块」，上面的重置会把底色/边框抹掉，这里补回来 */
@media (max-width:760px){
  .lib-hud-r{justify-content:flex-start}
  .lib-group-list{max-height:62vh}
  .cb-intent .cb-it{flex:1 1 0;min-width:0;gap:5px;justify-content:center;line-height:1.25;white-space:normal;
    padding:5px 6px;border-radius:8px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
  .cb-intent .cb-it.on{background:rgba(214,183,116,.1);border-color:rgba(214,183,116,.4)}
}

/* ---------- 头像取景器（更换头像：缩放 / 拉伸 / 裁剪） ---------- */
.modal-av{max-width:460px}
.av-body{display:flex;gap:16px;align-items:center;margin-top:18px}
.av-stage{flex:1 1 auto;min-width:0;position:relative;aspect-ratio:1/1;border-radius:50%;
  overflow:hidden;background:#0a0c17;border:1px solid var(--line-2);
  box-shadow:0 0 0 6px rgba(0,0,0,.28), inset 0 0 60px rgba(0,0,0,.55)}
/* 圆形框外那一圈本来就看不见，用内阴影提示一下边界 */
.av-stage::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 26px rgba(0,0,0,.5)}
.av-stage::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0))}
.av-cv{display:block;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none}
.av-cv.grab{cursor:grabbing}
.av-side{flex:0 0 104px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.av-side>span{font-size:11.5px;color:var(--muted);letter-spacing:1px}
.av-pv{width:88px;height:88px;border-radius:50%;overflow:hidden;background:#0a0c17;
  border:1px solid var(--line-2);display:block}
.av-side .hint{font-size:10.5px;line-height:1.4}
.av-rows{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.av-row{display:grid;grid-template-columns:64px 1fr 52px;align-items:center;gap:10px;font-size:12.5px}
.av-row>span{color:var(--text-2)}
.av-row>b{font-family:var(--latin);color:var(--gold-1);font-size:12.5px;text-align:right}
.av-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;
  background:linear-gradient(90deg,rgba(214,183,116,.5),rgba(214,183,116,.16));outline:none}
.av-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold-1);border:2px solid #23283c;box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:pointer}
.av-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--gold-1);border:2px solid #23283c;cursor:pointer}
.av-mini{display:flex;gap:10px}
.av-mini .btn{flex:1 1 0}
.modal-av .acts{flex-direction:column;gap:8px}

@media (max-width:760px){
  .wb-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-now{flex-direction:column;align-items:stretch}
  .wb-now-r{text-align:left}
}