/* 月萌萌彩 · 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-d.skill-battle{margin-top:6px;padding:7px 9px;border-left:2px solid rgba(232,200,119,.65);
  background:rgba(232,200,119,.07);color:#efd997;border-radius:0 7px 7px 0}
.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 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="assist"]{grid-area:1 / 2}
  .cb-acts [data-duel="endturn"]{grid-area:1 / 3}
  .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:4;flex:1 1 100%;justify-content:flex-end}
  .cb-acts [data-duel="quit"]{order:1}
  .cb-acts [data-duel="assist"]{order:2}
  .cb-acts [data-duel="endturn"]{order:3;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}}

/* ---------- 卡美洛剧情：FGO 式章节卡 + 底部对白框 + 跳过 ---------- */
.story-mask{position:fixed;inset:0;z-index:9500;background:#04050a;color:#f7f1e4;overflow:hidden;
  font-family:var(--sans);cursor:pointer;user-select:none;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;outline:none}
.story-mask,.story-mask *{-webkit-tap-highlight-color:transparent}
.story-stage{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(3,6,14,.28),rgba(3,5,12,.5) 48%,rgba(2,3,8,.94)),
  var(--story-bg) center/cover no-repeat;isolation:isolate}
.story-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 0 44%,rgba(242,202,113,.08) 50%,transparent 56% 100%);
  transform:translateX(-65%);animation:storySweep 9s ease-in-out infinite}
.story-halo{position:absolute;z-index:1;left:50%;top:36%;width:min(72vw,880px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.42;
  background:radial-gradient(circle,rgba(255,220,139,.16) 0 9%,transparent 10% 34%,
    rgba(229,195,111,.08) 35% 36%,transparent 37% 100%);
  animation:storyHalo 8s ease-in-out infinite}
.story-halo::before,.story-halo::after{content:"";position:absolute;border-radius:50%;inset:12%;
  border:1px solid rgba(232,201,127,.3);box-shadow:0 0 40px rgba(228,190,103,.08)}
.story-halo::after{inset:22%;border-style:dashed;animation:storyHaloSpin 28s linear infinite}
.story-flash{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,237,185,.45),rgba(231,198,117,.12) 28%,transparent 62%)}
.story-particles{position:absolute;z-index:1;inset:0;pointer-events:none;overflow:hidden}
.story-particles i{position:absolute;left:calc(7% + (var(--i) * 8.6%));top:112%;
  width:calc(2px + (var(--i) % 3) * 1px);height:calc(2px + (var(--i) % 3) * 1px);border-radius:50%;
  background:#f5d889;box-shadow:0 0 10px #e6bd62;opacity:0;
  animation:storyParticle calc(7s + (var(--i) % 5) * 1.2s) linear infinite;
  animation-delay:calc(var(--i) * -.78s)}
.story-portrait-wrap{position:absolute;z-index:1;bottom:max(142px,17vh);width:min(47vw,560px);height:min(76vh,820px);
  pointer-events:none;opacity:0;transform:translateY(16px) scale(.985);isolation:isolate;
  transition:opacity .32s ease,transform .36s ease,filter .32s ease}
.story-portrait-wrap.side-left{left:max(-2vw,calc((100vw - 1500px) / 2))}
.story-portrait-wrap.side-right{right:max(-2vw,calc((100vw - 1500px) / 2))}
.story-portrait-wrap.show{opacity:1;transform:none}
.story-portrait-wrap.is-narration{opacity:.1;filter:grayscale(.8) blur(.35px);transform:scale(.98)}
.story-portrait-wrap.portrait-enter{animation:storyPortraitIn .42s cubic-bezier(.18,.82,.24,1) both}
.story-portrait-wrap.is-player-silhouette{width:min(34vw,420px);height:min(66vh,700px);
  bottom:max(145px,18vh)}
.story-player-shadow{display:none;position:absolute;z-index:1;left:50%;bottom:1%;width:78%;height:91%;
  transform:translateX(-50%);pointer-events:none;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(225,196,133,.16));
  animation:storyPlayerShadow 3.6s ease-in-out infinite}
.story-player-shadow::before{content:"";position:absolute;z-index:2;left:50%;top:2%;width:29%;aspect-ratio:.86;
  transform:translateX(-50%);border-radius:48% 48% 44% 44%;
  background:linear-gradient(180deg,rgba(250,231,187,.46),rgba(160,157,158,.27) 72%,rgba(21,27,43,.34));
  box-shadow:0 0 24px rgba(235,203,128,.18)}
.story-player-shadow::after{content:"";position:absolute;left:50%;bottom:0;width:94%;height:76%;
  transform:translateX(-50%);
  background:linear-gradient(110deg,rgba(18,23,37,.46),rgba(170,170,176,.23) 42%,rgba(35,43,62,.42));
  clip-path:polygon(31% 0,69% 0,82% 14%,92% 49%,100% 100%,0 100%,8% 49%,18% 14%)}
.story-portrait-wrap.is-player-silhouette .story-player-shadow{display:block}
.story-portrait-wrap.is-player-silhouette::after{background:
  linear-gradient(180deg,transparent 0 80%,rgba(3,5,12,.32) 100%)}
.story-portrait-wrap.is-player-silhouette .story-portrait{opacity:0}
.story-portrait-wrap.is-player-silhouette .story-portrait-ring{width:96%;bottom:0;
  background:radial-gradient(ellipse,rgba(231,195,108,.2),rgba(118,139,170,.07) 45%,transparent 70%);
  border-color:rgba(230,194,109,.2)}
.story-portrait{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;
  object-position:center bottom;user-select:none;
  filter:drop-shadow(0 20px 32px rgba(0,0,0,.72)) drop-shadow(0 0 30px rgba(226,184,91,.14));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,#000 0 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,#000 0 88%,transparent 100%);
  mask-composite:intersect}
.story-portrait-wrap::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,5,12,.96),transparent 8% 92%,rgba(3,5,12,.96)),
    linear-gradient(180deg,transparent 0 87%,rgba(3,5,12,.76))}
.story-portrait-ring{position:absolute;z-index:0;left:50%;bottom:3%;width:84%;aspect-ratio:1;border-radius:50%;
  transform:translateX(-50%);background:radial-gradient(ellipse,rgba(231,195,108,.15),transparent 68%);
  border:1px solid rgba(230,194,109,.13);box-shadow:inset 0 0 50px rgba(230,194,109,.05)}
.story-portrait-wrap.side-right .story-portrait-ring{border-color:rgba(184,92,111,.14);
  background:radial-gradient(ellipse,rgba(145,35,69,.16),transparent 68%)}
.story-mask.speaker-switch .story-flash{animation:storySpeakerFlash .46s ease-out both}
.story-mask.story-leaving{animation:storyLeave .26s ease-in both}
.story-vignette{position:absolute;z-index:0;inset:0;background:
  radial-gradient(circle at 50% 32%,transparent 0 28%,rgba(0,0,0,.36) 63%,rgba(0,0,0,.88) 100%),
  linear-gradient(90deg,rgba(0,0,0,.64),transparent 18% 82%,rgba(0,0,0,.64));pointer-events:none}
.story-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#ffe8a6;box-shadow:0 0 12px #ffe8a6;
  animation:storyStar 3.4s ease-in-out infinite}
.story-star.s1{left:16%;top:25%}.story-star.s2{right:18%;top:39%;animation-delay:1.3s}
@keyframes storyStar{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.9;transform:scale(1.8)}}
.story-top{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:18px 22px;background:linear-gradient(180deg,rgba(0,0,0,.64),transparent)}
.story-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.story-chapter-no{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:var(--serif);font-size:12px;letter-spacing:1px;color:#e7ca7e}
.story-skip{font-family:inherit;font-size:12px;color:#d9d3c7;background:rgba(12,14,22,.72);
  border:1px solid rgba(214,183,116,.35);border-radius:999px;padding:7px 13px;cursor:pointer}
.story-skip:hover{color:#fff0b5;border-color:rgba(255,224,135,.7)}
.story-chapter{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 28px;opacity:0;pointer-events:none}
.story-chapter i{font-family:var(--latin);font-style:normal;font-size:12px;letter-spacing:6px;color:#d2ad5e}
.story-chapter b{display:block;margin:16px 0 12px;font-family:var(--serif);font-size:clamp(25px,5vw,48px);
  line-height:1.35;color:#fff6dd;text-shadow:0 3px 18px #000;letter-spacing:2px}
.story-chapter em{font-style:normal;font-size:13px;color:#b9c7dd;letter-spacing:2px}
.story-chapter::after{content:"";width:min(420px,62vw);height:1px;margin-top:24px;
  background:linear-gradient(90deg,transparent,#e3c473,transparent)}
.story-chapter.chapter-enter::before{content:"";position:absolute;left:50%;top:50%;width:min(920px,112vw);height:1px;
  transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#f0cf80 45% 55%,transparent);
  box-shadow:0 0 18px #d8ae55;animation:storyChapterLine 1.15s ease-out both}
.story-mask.is-ending .story-chapter b{font-size:clamp(30px,6vw,58px);text-shadow:0 3px 22px #000,0 0 30px rgba(225,185,93,.3)}
.story-box{position:absolute;z-index:3;left:50%;bottom:30px;transform:translateX(-50%);
  width:min(1100px,calc(100% - 48px));min-height:170px;padding:18px 26px 14px;
  border:1px solid rgba(221,193,125,.38);border-radius:16px;
  background:linear-gradient(180deg,rgba(12,15,27,.94),rgba(5,7,13,.98));
  box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.025);
  opacity:0;pointer-events:none;display:flex;flex-direction:column}
.story-box::before{content:"";position:absolute;left:26px;right:26px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,212,140,.9),transparent)}
.story-box.is-narration{border-color:rgba(143,163,198,.26)}
.story-box.is-narration::before{background:linear-gradient(90deg,transparent,rgba(168,187,216,.6),transparent)}
.story-speaker{font-family:var(--serif);font-size:15px;font-weight:800;color:#efcf7b;letter-spacing:1px;
  margin-bottom:8px;text-shadow:0 0 14px rgba(234,197,101,.25)}
.story-box.is-narration .story-speaker{color:#aebbd1;text-shadow:none;letter-spacing:2px}
.story-text{flex:1 1 auto;font-size:clamp(14px,1.35vw,17px);line-height:1.82;color:#f0ece2;
  text-align:left;letter-spacing:.25px;overflow:auto;padding-right:4px;white-space:pre-wrap}
.story-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;
  color:#858da0;font-size:10.5px}
.story-hold-tip{font-style:normal;font-weight:600;color:#b9a87e;letter-spacing:.5px}
.story-mask.is-accelerating .story-hold-tip{color:#ffe19a;text-shadow:0 0 12px rgba(237,198,108,.5)}
.story-foot span::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-right:1px solid #d6b774;border-bottom:1px solid #d6b774;transform:rotate(45deg);
  animation:storyNext 1.1s ease-in-out infinite}
@keyframes storyNext{0%,100%{transform:translateY(0) rotate(45deg);opacity:.3}50%{transform:translateY(4px) rotate(45deg);opacity:1}}
.story-mask:not(.is-chapter) .story-chapter{opacity:0}
.story-mask:not(.is-chapter) .story-box{opacity:1;pointer-events:auto}
.story-mask.is-chapter .story-chapter{opacity:1;animation:storyChapterIn .55s ease-out both}
.story-mask.is-chapter .story-box{opacity:0}
.story-mask.page-in .story-box{animation:storyBoxIn .25s ease-out both}
.story-history-mask{position:absolute;z-index:8;inset:0;display:flex;align-items:center;justify-content:center;
  padding:54px 22px 24px;background:rgba(2,4,10,.82);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
.story-history-mask.is-open{opacity:1;visibility:visible;pointer-events:auto}
.story-history-card{width:min(720px,100%);height:min(70vh,620px);display:flex;flex-direction:column;
  border:1px solid rgba(224,193,122,.45);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(17,21,36,.98),rgba(6,9,17,.99));
  box-shadow:0 24px 80px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.025)}
.story-history-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid rgba(224,193,122,.2);background:rgba(255,255,255,.025)}
.story-history-head b{font-family:var(--serif);font-size:16px;color:#f1d692;letter-spacing:1px}
.story-history-head button{font:inherit;font-size:12px;color:#ddd8cb;background:transparent;border:0;
  cursor:pointer;padding:4px 2px}
.story-history-list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:12px 18px 18px;scrollbar-color:rgba(214,183,116,.45) transparent}
.story-history-line{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.story-history-line:last-child{border-bottom:0}
.story-history-line b{display:block;margin-bottom:4px;font-family:var(--serif);font-size:12.5px;
  letter-spacing:.6px;color:#ebcd79}
.story-history-line p{margin:0;font-size:13px;line-height:1.7;color:#e7e2d8;white-space:pre-wrap}
.story-history-line.is-narration b{color:#aab7ca}
.story-history-line.is-narration p{color:#bfc5cf}
.story-history-empty{margin:24px 0;text-align:center;color:#858da0;font-size:13px}
.story-mask.is-history .story-box{opacity:.12}
@keyframes storyChapterIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes storyBoxIn{from{opacity:.35;transform:translate(-50%,7px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes storySweep{0%,58%{transform:translateX(-72%);opacity:0}68%{opacity:1}86%,100%{transform:translateX(72%);opacity:0}}
@keyframes storyHalo{0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.48;transform:translate(-50%,-50%) scale(1.02)}}
@keyframes storyHaloSpin{to{transform:rotate(360deg)}}
@keyframes storyParticle{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}
  12%{opacity:.7}75%{opacity:.32}100%{transform:translate3d(28px,-112vh,0) scale(1.2);opacity:0}}
@keyframes storyPortraitIn{from{opacity:0;transform:translateY(18px) scale(.98);filter:brightness(1.18)}
  to{opacity:1;transform:none;filter:none}}
@keyframes storyPlayerShadow{0%,100%{opacity:.78;transform:translateX(-50%) scale(.985)}
  50%{opacity:1;transform:translateX(-50%) scale(1.015)}}
@keyframes storySpeakerFlash{0%{opacity:0}18%{opacity:.62}100%{opacity:0}}
@keyframes storyChapterLine{from{opacity:0;transform:translate(-50%,-50%) scaleX(.2)}to{opacity:.8;transform:translate(-50%,-50%) scaleX(1)}}
@keyframes storyLeave{to{opacity:0;filter:brightness(1.3)}}
@media (max-width:600px){
  .story-mask.speaker-switch .story-flash{animation:none;opacity:0}
  .story-top{padding:12px 12px}
  .story-tools{gap:6px}
  .story-chapter{padding:70px 20px 150px}
  .story-chapter i{font-size:10px;letter-spacing:4px}
  .story-chapter b{font-size:24px;letter-spacing:1px;margin:12px 0 8px}
  .story-chapter em{font-size:11px}
  .story-halo{top:31%;width:138vw}
  .story-portrait-wrap.side-left,.story-portrait-wrap.side-right{bottom:205px;left:50%;right:auto;width:min(96vw,480px);height:47vh;
    transform:translateX(-50%) translateY(14px)}
  .story-portrait-wrap.show{transform:translateX(-50%)}
  .story-portrait-wrap.is-narration{transform:translateX(-50%) scale(.98)}
  .story-portrait-wrap.portrait-enter{animation:storyPortraitInMobile .42s cubic-bezier(.18,.82,.24,1) both}
  .story-portrait-wrap.is-player-silhouette{width:min(76vw,340px);height:38vh;bottom:215px}
  .story-box{width:calc(100% - 20px);bottom:10px;min-height:190px;max-height:47vh;padding:14px 15px 10px;border-radius:13px}
  .story-speaker{font-size:13px;margin-bottom:6px}
  .story-text{font-size:14px;line-height:1.75}
  .story-foot{font-size:10px}
  .story-hold-tip{font-size:10px}
  .story-history-mask{padding:60px 10px 12px}
  .story-history-card{height:66vh;border-radius:13px}
  .story-history-head{padding:12px 14px}
  .story-history-list{padding:9px 14px 14px}
  .story-skip{padding:6px 10px;font-size:10.5px}
}
@keyframes storyPortraitInMobile{from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.98);filter:brightness(1.18)}
  to{opacity:1;transform:translateX(-50%);filter:none}}

.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}
button.wb-step{width:100%;font:inherit;color:inherit;text-align:left}
.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.replayable{cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}
.wb-step.replayable:hover{transform:translateY(-2px);border-color:rgba(214,183,116,.62);
  box-shadow:0 8px 22px rgba(0,0,0,.32)}
.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-step-replay{font-style:normal;font-size:10.5px;color:var(--gold-1);letter-spacing:.2px}
.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}
}

/* ---------- 世界 BOSS · 迪奥·布兰度（下总国） ---------- */
.dio-run{border-color:rgba(211,166,70,.52);
  background:linear-gradient(155deg,#2a2111,#140f12 52%,#220b0e)}
.dio-run.done{border-color:rgba(242,215,144,.46)}
.dio-bar{border-color:rgba(220,178,80,.42)}
.dio-bar i{background:linear-gradient(90deg,#6d1018,#d6ae54 62%,#fff0b0)}
.dio-now{border-color:rgba(220,178,80,.34);background:rgba(220,178,80,.07)}
.dio-now .wb-now-r b{color:#ffe5a0}
.dio-now-art{border-color:rgba(220,178,80,.48)}
.dio-final{border-color:rgba(220,178,80,.4);
  background:linear-gradient(145deg,rgba(220,178,80,.1),rgba(0,0,0,.26))}
.dio-final .wb-final-hd img{border-color:rgba(220,178,80,.46)}
.dio-final .wb-final-hd b{color:#fff0c2}
.dio-foot{align-items:flex-end}
.wb-assist-pick{display:flex;flex-direction:column;gap:5px;min-width:210px;max-width:320px;font-size:11.5px;color:var(--muted)}
.wb-assist-pick select{width:100%;font:inherit;color:var(--text);background:#151525;border:1px solid rgba(220,178,80,.36);
  border-radius:9px;padding:8px 10px}
.assist-btn{white-space:normal;max-width:210px;line-height:1.25;font-weight:800;
  color:#201707!important;text-shadow:0 1px 0 rgba(255,255,255,.48);
  background:linear-gradient(180deg,#ffe59a,#d6ad4f 68%,#b88528);
  border:1px solid #ffe8aa;box-shadow:0 0 0 1px rgba(80,35,8,.45),0 0 18px rgba(238,193,87,.34)}
.assist-btn:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)}
.assist-btn:disabled{opacity:1;color:#f8e8bd!important;text-shadow:0 1px 2px #000;
  background:linear-gradient(180deg,#4d3d27,#2b211a);border-color:#8f7447;
  box-shadow:inset 0 0 0 1px rgba(255,225,162,.12)}
@media (max-width:600px){
  .wb-assist-pick{width:100%;max-width:none}
  .dio-foot{flex-direction:column;align-items:stretch}
  .dio-foot .btn-primary{width:100%}
  /* 手机端总血条只保留“已削 / 总量”，固定单行并随屏宽缩小字号。 */
  .dio-bar{height:36px;min-height:36px;border-radius:14px}
  .dio-bar i{position:absolute;left:0;top:0;bottom:0;height:100%}
  .dio-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    padding:0 8px;text-align:center;white-space:nowrap;line-height:1;
    font-size:clamp(9.5px,2.75vw,12px);letter-spacing:0}
}

/* ---------- 迪奥 WORLD BOSS 专属技能演出 ---------- */
.dio-sig-layer{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden}
.dio-sig-fx{position:absolute;inset:0;overflow:hidden;isolation:isolate;
  animation:dioSigFade .92s ease-out both}
.dio-sig-fx::before,.dio-sig-fx::after{content:"";position:absolute;inset:-18%;pointer-events:none}
.dsg-center{position:absolute;left:50%;top:51%;z-index:8;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:min(86vw,520px);
  animation:dioSigTitle .8s cubic-bezier(.2,.9,.25,1) both}
.dsg-glyph{font-family:var(--serif);font-size:68px;line-height:.9;font-weight:900;color:#fff;
  text-shadow:0 0 8px currentColor,0 0 28px currentColor,0 3px 0 #000}
.dsg-center b{font-family:var(--serif);font-size:clamp(22px,5vw,38px);letter-spacing:2px;color:#fff;
  text-shadow:0 2px 2px #000,0 0 18px currentColor}
.dsg-center em{font-family:var(--latin);font-style:normal;font-size:12px;letter-spacing:4px;color:#fff9dc;
  text-shadow:0 2px 4px #000}
.dsg-line{position:absolute;left:-10%;width:120%;height:2px;background:currentColor;opacity:.8;
  box-shadow:0 0 14px currentColor}
.dsg-line.l1{top:34%;transform:rotate(-9deg);animation:dioSigLine .7s ease-out both}
.dsg-line.l2{top:68%;transform:rotate(7deg);animation:dioSigLine .7s .05s ease-out both}
.dsg-ring{position:absolute;left:50%;top:51%;border:3px solid currentColor;border-radius:50%;
  transform:translate(-50%,-50%);opacity:.75;box-shadow:0 0 24px currentColor,inset 0 0 24px currentColor}
.dsg-ring.r1{width:310px;height:310px;animation:dioSigRing .8s ease-out both}
.dsg-ring.r2{width:470px;height:470px;animation:dioSigRing .8s .08s ease-out both}

.fx-freeze{color:#a9efff;background:radial-gradient(circle at 50% 50%,rgba(80,208,255,.18),rgba(0,18,34,.64) 58%,rgba(0,3,10,.8))}
.fx-freeze::before{inset:-30%;background:repeating-conic-gradient(from 0deg,rgba(185,243,255,.55) 0 2deg,transparent 2deg 31deg);
  mask:radial-gradient(circle,transparent 0 14%,#000 34%,transparent 73%);animation:dioSigSpin 1.15s linear both}
.fx-freeze::after{background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,.7) 36% 37%,transparent 38%),
  linear-gradient(42deg,transparent 47%,rgba(133,229,255,.55) 48% 49%,transparent 50%);
  background-size:130px 130px;opacity:.55;animation:dioSigDrift .9s ease-out both}

.fx-eyebeam{color:#d997ff;background:radial-gradient(circle at 50% 52%,rgba(92,20,124,.15),rgba(9,0,18,.72))}
.fx-eyebeam::before{inset:-24%;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.9) 42%,
  rgba(216,76,255,.85) 47%,rgba(93,12,142,.28) 51%,transparent 57%);filter:blur(2px);
  animation:dioSigBeam .72s ease-out both}
.fx-eyebeam::after{background:radial-gradient(circle at 50% 52%,rgba(255,150,255,.9),transparent 8%),
  repeating-radial-gradient(circle at 50% 52%,rgba(210,123,255,.35) 0 1px,transparent 2px 20px);opacity:.7}

.fx-muda{color:#ffd15a;background:linear-gradient(120deg,rgba(92,25,95,.7),rgba(255,185,63,.16) 44%,rgba(60,0,40,.76))}
.fx-muda::before{inset:-18%;background:repeating-linear-gradient(105deg,transparent 0 28px,rgba(255,224,143,.72) 29px 34px,transparent 36px 68px);
  animation:dioSigPunch .7s ease-in both}
.fx-muda::after{inset:8%;border:2px solid rgba(255,211,82,.7);filter:blur(1px);
  box-shadow:inset 0 0 80px rgba(255,176,44,.35);animation:dioSigPulse .7s ease-out both}

.fx-knives{color:#eaf4ff;background:radial-gradient(circle,rgba(71,102,130,.2),rgba(4,8,15,.82))}
.fx-knives::before{inset:-24%;background:repeating-linear-gradient(130deg,transparent 0 42px,rgba(240,250,255,.86) 44px 47px,transparent 49px 83px);
  filter:drop-shadow(0 0 5px #bfe8ff);animation:dioSigKnife .72s ease-in both}
.fx-knives::after{background:conic-gradient(from 90deg at 50% 50%,transparent,rgba(126,203,255,.34),transparent 32%);animation:dioSigSpin .9s linear both}

.fx-regen{color:#ff8d88;background:radial-gradient(circle,rgba(155,9,26,.34),rgba(16,0,3,.8) 62%)}
.fx-regen::before{background:repeating-radial-gradient(circle at 50% 52%,rgba(255,106,91,.5) 0 2px,transparent 3px 40px);
  animation:dioSigPulse .9s ease-out both}
.fx-regen::after{background:linear-gradient(0deg,rgba(255,189,102,.22),transparent 55%);animation:dioSigRise .9s ease-out both}

.fx-mask{color:#f3e1b2;background:radial-gradient(circle,rgba(142,114,76,.24),rgba(9,7,5,.86))}
.fx-mask::before{inset:18%;border:24px double rgba(211,199,171,.58);border-radius:48% 48% 44% 44%;
  filter:drop-shadow(0 0 20px rgba(231,200,127,.45));animation:dioSigMask .84s ease-out both}
.fx-mask::after{background:conic-gradient(from 30deg,rgba(255,218,133,.55),transparent 10%,rgba(128,89,49,.4) 22%,transparent 32%);
  animation:dioSigSpin 1s linear both}

.fx-timestop{color:#f7f1ff;background:radial-gradient(circle,rgba(43,35,61,.28),rgba(0,0,0,.9))}
.fx-timestop::before{inset:-8%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.38) 0 1deg,transparent 1deg 15deg),
  repeating-radial-gradient(circle at 50% 51%,transparent 0 46px,rgba(216,200,255,.36) 47px 49px,transparent 50px 84px);
  animation:dioSigClock 1s cubic-bezier(.2,.9,.3,1) both}
.fx-timestop::after{background:linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.75) 50%,transparent 50.5%),
  linear-gradient(0deg,transparent 49.5%,rgba(255,255,255,.75) 50%,transparent 50.5%);animation:dioSigFlicker .8s steps(2) both}
.fx-timestop .dsg-glyph{font-size:104px;color:#fff;text-shadow:0 0 16px #bba7ff,0 0 55px #6f42ba}

.fx-roller{color:#ffe271;background:linear-gradient(180deg,rgba(48,32,0,.6),rgba(17,13,7,.82))}
.fx-roller::before{inset:-20%;background:repeating-linear-gradient(135deg,rgba(255,211,62,.65) 0 24px,rgba(38,28,0,.9) 24px 48px);
  opacity:.45;animation:dioSigRoad .8s cubic-bezier(.2,.9,.3,1) both}
.fx-roller::after{left:-15%;right:-15%;top:36%;height:38%;background:linear-gradient(180deg,#b8b3a8,#4b4845 42%,#151412);
  border:5px solid #f1c84b;box-shadow:0 18px 0 rgba(0,0,0,.7),0 0 35px rgba(255,207,61,.3);
  animation:dioSigSlam .72s cubic-bezier(.5,0,.8,1) both}

.fx-heaven{color:#fff0a6;background:radial-gradient(circle,rgba(255,250,199,.42),rgba(48,31,0,.72) 56%,rgba(5,4,0,.9))}
.fx-heaven::before{inset:-35%;background:repeating-conic-gradient(from 0deg,rgba(255,238,154,.56) 0 3deg,transparent 3deg 18deg);
  animation:dioSigSpin .95s linear both}
.fx-heaven::after{background:linear-gradient(90deg,transparent 44%,rgba(255,255,240,.8) 49% 51%,transparent 56%),
  linear-gradient(0deg,transparent 44%,rgba(255,255,240,.8) 49% 51%,transparent 56%);animation:dioSigPulse .8s ease-out both}

.fx-overworld{color:#ffe07a;background:radial-gradient(circle,rgba(255,203,65,.23),rgba(30,12,0,.82) 62%,#000)}
.fx-overworld::before{inset:-10%;background:repeating-radial-gradient(circle at 50% 51%,transparent 0 52px,rgba(255,220,108,.65) 54px 57px,transparent 59px 91px);
  animation:dioSigSeal .92s ease-out both}
.fx-overworld::after{background:conic-gradient(from 180deg,transparent,rgba(255,219,95,.45),transparent 22%,rgba(255,255,255,.26),transparent 48%);
  animation:dioSigSpin 1s linear both}

.fx-young{color:#ffb3a0;background:radial-gradient(circle,rgba(124,9,22,.42),rgba(12,0,2,.83))}
.fx-young::before{background:repeating-linear-gradient(145deg,transparent 0 34px,rgba(255,94,75,.45) 36px 39px,transparent 42px 70px);
  animation:dioSigPunch .75s ease-in both}
.fx-young::after{background:radial-gradient(circle at 50% 51%,rgba(255,199,149,.65),transparent 18%);animation:dioSigPulse .8s ease-out both}

.fx-basic{color:#ffb4d2;background:radial-gradient(circle,rgba(126,30,82,.3),rgba(10,0,7,.7))}
.fx-basic::before{background:conic-gradient(from 40deg,transparent,rgba(255,129,185,.5),transparent 26%);animation:dioSigSpin .7s linear both}
.fx-guard{color:#d8cbb0;background:radial-gradient(circle,rgba(117,95,65,.18),rgba(5,4,3,.74))}
.fx-guard::before{inset:26%;border:12px double rgba(227,214,184,.62);transform:rotate(45deg);animation:dioSigMask .75s ease-out both}

.fx-star{color:#d8a2ff;background:radial-gradient(circle,rgba(102,30,151,.38),rgba(0,0,0,.86))}
.fx-star::before{background:repeating-conic-gradient(from 0deg,rgba(226,191,255,.5) 0 2deg,transparent 2deg 19deg);animation:dioSigClock .85s linear both}
.fx-star::after{background:linear-gradient(112deg,transparent 44%,rgba(255,217,111,.9) 47% 50%,transparent 53%);
  animation:dioSigBeam .68s ease-out both}
.fx-hamon{color:#ffe794;background:radial-gradient(circle,rgba(255,203,64,.3),rgba(28,16,0,.82))}
.fx-hamon::before{inset:5%;border:5px solid rgba(255,225,123,.65);border-radius:50%;
  box-shadow:0 0 0 24px rgba(255,207,75,.08),inset 0 0 45px rgba(255,215,90,.3);animation:dioSigRing .85s ease-out both}
.fx-hamon::after{background:repeating-radial-gradient(circle,transparent 0 35px,rgba(255,238,154,.45) 37px 40px,transparent 42px 72px);animation:dioSigPulse .8s ease-out both}
.fx-emerald{color:#87ffbd;background:radial-gradient(circle,rgba(10,110,63,.3),rgba(0,11,6,.82))}
.fx-emerald::before{background:repeating-conic-gradient(from 20deg,rgba(88,255,166,.72) 0 3deg,transparent 4deg 22deg);
  mask:radial-gradient(circle,transparent 0 20%,#000 48%,transparent 70%);animation:dioSigSpin .8s linear both}
.fx-emerald::after{background:linear-gradient(42deg,transparent 38%,rgba(209,255,229,.8) 43%,rgba(33,200,114,.6) 48%,transparent 53%);
  background-size:130px 130px;animation:dioSigDrift .8s ease-out both}
.fx-silver{color:#ecf4ff;background:linear-gradient(130deg,rgba(20,35,58,.72),rgba(164,194,220,.13),rgba(8,15,28,.82))}
.fx-silver::before{background:linear-gradient(118deg,transparent 44%,rgba(255,255,255,.95) 47% 49%,rgba(170,210,255,.55) 50%,transparent 54%);
  animation:dioSigBeam .68s ease-out both}
.fx-silver::after{background:repeating-linear-gradient(118deg,transparent 0 48px,rgba(214,236,255,.42) 50px 53px,transparent 55px 88px);animation:dioSigKnife .7s ease-in both}
.fx-fool{color:#f7f4e9;background:radial-gradient(circle,rgba(181,166,125,.18),rgba(8,7,5,.86))}
.fx-fool::before{background:repeating-radial-gradient(circle at 48% 54%,rgba(241,228,188,.45) 0 2px,transparent 3px 29px);animation:dioSigSand .85s ease-out both}
.fx-fool::after{inset:18%;border:18px double rgba(237,225,193,.58);border-radius:42%;animation:dioSigMask .82s ease-out both}
.fx-magician{color:#ffad65;background:radial-gradient(circle,rgba(167,42,0,.4),rgba(22,4,0,.84))}
.fx-magician::before{background:conic-gradient(from -20deg,rgba(255,79,20,.35),rgba(255,217,88,.52),transparent 18%,rgba(188,19,0,.38),transparent 47%);
  animation:dioSigFlame .9s ease-out both}
.fx-magician::after{background:radial-gradient(ellipse at 50% 88%,rgba(255,197,74,.75),transparent 40%);animation:dioSigRise .9s ease-out both}

@keyframes dioSigFade{0%{opacity:0}12%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes dioSigTitle{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes dioSigLine{0%{transform:translateX(-110%) rotate(-9deg);opacity:0}30%{opacity:1}100%{transform:translateX(110%) rotate(-9deg);opacity:0}}
@keyframes dioSigRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}35%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
@keyframes dioSigSpin{0%{opacity:0;transform:rotate(-22deg) scale(.75)}25%{opacity:1}100%{opacity:0;transform:rotate(35deg) scale(1.08)}}
@keyframes dioSigDrift{0%{opacity:0;transform:translate(-12%,8%) scale(.8)}30%{opacity:.85}100%{opacity:0;transform:translate(12%,-9%) scale(1.2)}}
@keyframes dioSigBeam{0%{opacity:0;transform:translateX(-35%) scaleX(.25)}28%{opacity:1}100%{opacity:0;transform:translateX(35%) scaleX(1.25)}}
@keyframes dioSigPunch{0%{opacity:0;transform:translateX(-45%) skewX(-13deg)}24%{opacity:1}45%{transform:translateX(18%) skewX(-13deg)}62%{transform:translateX(-8%) skewX(-13deg)}100%{opacity:0;transform:translateX(45%) skewX(-13deg)}}
@keyframes dioSigKnife{0%{opacity:0;transform:translateY(-24%) rotate(3deg)}25%{opacity:1}100%{opacity:0;transform:translateY(20%) rotate(-4deg)}}
@keyframes dioSigPulse{0%{opacity:0;transform:scale(.45)}35%{opacity:.85}100%{opacity:0;transform:scale(1.2)}}
@keyframes dioSigRise{0%{opacity:0;transform:translateY(35%)}30%{opacity:.9}100%{opacity:0;transform:translateY(-25%)}}
@keyframes dioSigMask{0%{opacity:0;transform:scale(.4) rotate(-9deg)}35%{opacity:1;transform:scale(1.04) rotate(0)}100%{opacity:0;transform:scale(1.16) rotate(3deg)}}
@keyframes dioSigClock{0%{opacity:0;transform:rotate(-80deg) scale(.25)}25%{opacity:1}100%{opacity:0;transform:rotate(18deg) scale(1.14)}}
@keyframes dioSigFlicker{0%,100%{opacity:0}20%,35%,58%{opacity:.8}28%,46%{opacity:.2}}
@keyframes dioSigRoad{0%{opacity:0;transform:translateY(-50%)}30%{opacity:1}100%{opacity:0;transform:translateY(25%)}}
@keyframes dioSigSlam{0%{opacity:0;transform:translateY(-120%) scale(1.3)}40%{opacity:1;transform:translateY(0) scale(1)}44%{transform:translate(-5%,3%) scale(1.02)}50%{transform:translate(5%,-2%)}100%{opacity:0;transform:translateY(12%)}}
@keyframes dioSigSeal{0%{opacity:0;transform:scale(1.35)}30%{opacity:1}100%{opacity:0;transform:scale(.72)}}
@keyframes dioSigSand{0%{opacity:0;transform:translate(-12%,10%) scale(.8)}30%{opacity:1}100%{opacity:0;transform:translate(14%,-10%) scale(1.2)}}
@keyframes dioSigFlame{0%{opacity:0;transform:scale(.3) rotate(-18deg)}28%{opacity:1}100%{opacity:0;transform:scale(1.3) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){
  .dio-sig-fx,.dio-sig-fx::before,.dio-sig-fx::after,.dsg-center,.dsg-line,.dsg-ring{animation-duration:.12s!important}
}

/* 最终简化版：每次只显示最后一次技能的单个中央提示。 */
.dio-sig-fx{
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.055),rgba(0,0,0,.48) 72%)!important;
  animation:dioSimpleFade .76s ease-out both!important;
}
.dio-sig-fx::before,.dio-sig-fx::after,.dio-sig-fx .dsg-line,.dio-sig-fx .dsg-ring{display:none!important}
.dio-sig-fx .dsg-center{
  width:auto;min-width:250px;max-width:min(82vw,390px);padding:16px 26px 15px;
  border:1px solid currentColor;border-radius:14px;
  background:rgba(8,9,14,.88);box-shadow:0 0 32px rgba(0,0,0,.65),0 0 24px currentColor;
  animation:dioSimpleTitle .76s ease-out both!important
}
.dio-sig-fx .dsg-glyph{font-size:40px;line-height:1;text-shadow:0 0 16px currentColor}
.dio-sig-fx .dsg-center b{font-size:21px;letter-spacing:1px;margin-top:3px}
.dio-sig-fx .dsg-center em{font-size:9px;letter-spacing:2.5px;opacity:.82;margin-top:1px}
@keyframes dioSimpleFade{0%{opacity:0}16%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes dioSimpleTitle{0%{opacity:0;transform:translate(-50%,-46%) scale(.92)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 每个招式使用不同构图，保留简洁的短演出。 */
.dio-sig-fx > div{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.dio-sig-fx > div b{display:block;font-family:var(--serif);font-size:22px;letter-spacing:1px;color:#fff;
  text-shadow:0 2px 4px #000,0 0 14px currentColor;white-space:nowrap}
.dio-sig-fx > div em{display:block;margin-top:3px;font-family:var(--latin);font-style:normal;
  font-size:9px;letter-spacing:2.5px;color:#fff;opacity:.78;white-space:nowrap}
.fx-freeze{background:radial-gradient(circle,rgba(69,186,230,.2),rgba(0,10,19,.52))!important}
.dio-frost{width:310px;height:170px;display:grid;place-items:center;text-align:center;color:#a9efff}
.dio-frost i{position:absolute;width:7px;height:62px;background:linear-gradient(#e8fdff,rgba(111,217,255,.25));
  clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 0 7px #88eaff)}
.dio-frost i:nth-child(1){left:20px;top:4px;transform:rotate(-31deg)}
.dio-frost i:nth-child(2){right:24px;top:12px;transform:rotate(28deg)}
.dio-frost i:nth-child(3){left:55px;bottom:4px;transform:rotate(21deg) scale(.8)}
.dio-frost i:nth-child(4){right:60px;bottom:0;transform:rotate(-24deg) scale(.75)}
.fx-eyebeam{background:radial-gradient(circle,rgba(135,46,180,.16),rgba(8,0,14,.58))!important}
.dio-eye{width:380px;height:180px;display:grid;place-items:center;text-align:center;color:#dfa4ff}
.dio-eye-core{position:absolute;width:46px;height:46px;border-radius:50%;border:3px solid #e4b7ff;
  box-shadow:0 0 14px #d37cff,inset 0 0 18px #7d289f;background:rgba(95,18,129,.55)}
.dio-eye-ray{position:absolute;width:460px;height:8px;background:linear-gradient(90deg,transparent,#f8e9ff,#b74cff,transparent);
  filter:blur(1px);animation:dioEyeRay .68s ease-out both}
.dio-rush{width:330px;height:150px;text-align:center;color:#ffe08a}
.dio-rush b{position:absolute;left:50%;top:50%;font-size:31px;letter-spacing:3px;transform:translate(-50%,-50%) rotate(-9deg);
  opacity:.18;animation:dioRushWord .65s ease-out both}
.dio-rush b:nth-child(1){translate:-38px -34px}
.dio-rush b:nth-child(2){translate:30px 2px;animation-delay:.08s}
.dio-rush b:nth-child(3){translate:-15px 38px;animation-delay:.16s}
.dio-rush em{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-style:normal;font-family:var(--serif);
  font-size:20px;color:#fff;text-shadow:0 2px 3px #000,0 0 14px #ffd45e}
.fx-knives{background:radial-gradient(circle,rgba(150,195,230,.14),rgba(2,7,13,.6))!important}
.dio-knives{width:330px;height:190px;display:grid;place-items:center;text-align:center;color:#eaf7ff}
.dio-knives i{position:absolute;font-style:normal;font-size:25px;color:#e8f7ff;
  text-shadow:0 0 8px #a8dcff;animation:dioKnifePop .65s ease-out both}
.dio-knives i:nth-child(1){left:22px;top:18px;transform:rotate(-42deg)}
.dio-knives i:nth-child(2){right:25px;top:23px;transform:rotate(39deg)}
.dio-knives i:nth-child(3){left:48px;bottom:16px;transform:rotate(21deg)}
.dio-knives i:nth-child(4){right:48px;bottom:10px;transform:rotate(-24deg)}
.dio-knives i:nth-child(5){left:50%;top:0;transform:translateX(-50%) rotate(180deg)}
.fx-regen{background:radial-gradient(circle,rgba(171,18,30,.2),rgba(14,0,2,.58))!important}
.dio-regen{display:flex;flex-direction:column;align-items:center;color:#ff9890}
.dio-regen i{font-style:normal;font-size:50px;line-height:1;animation:dioHeart 0.72s ease-out both;
  filter:drop-shadow(0 0 12px #ff5548)}
.fx-mask{background:radial-gradient(circle,rgba(156,128,84,.16),rgba(7,5,4,.62))!important}
.dio-mask{display:flex;flex-direction:column;align-items:center;color:#f4e3b8}
.dio-mask-face{position:relative;width:98px;height:122px;border-radius:42% 42% 48% 48%;display:block;
  background:linear-gradient(145deg,#d9d0ba,#746b60);border:3px solid #f0dfad;
  clip-path:polygon(20% 0,80% 0,100% 35%,83% 100%,50% 78%,17% 100%,0 35%);
  box-shadow:0 0 18px rgba(239,210,151,.42)}
.dio-mask-face span::before,.dio-mask-face span::after{content:"";position:absolute;top:44%;width:19px;height:7px;
  background:#251a18;border-radius:50%;transform:rotate(8deg)}
.dio-mask-face span::before{left:15px}
.dio-mask-face span::after{right:15px;transform:rotate(-8deg)}
.fx-timestop{background:radial-gradient(circle,rgba(44,36,70,.34),rgba(0,0,0,.66))!important}
.dio-stop{width:360px;height:210px;display:grid;place-items:center;text-align:center;color:#f1e8ff}
.dio-clock{position:absolute;width:164px;height:164px;border:3px solid #eee3ff;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-family:var(--serif);font-size:42px;
  box-shadow:0 0 0 10px rgba(218,198,255,.06),inset 0 0 25px rgba(203,175,255,.2);
  animation:dioClockHand .8s cubic-bezier(.2,.9,.2,1) both}
.dio-clock::before{content:"";position:absolute;width:2px;height:62px;background:#fff;top:18px;left:80px;
  transform-origin:bottom}
.dio-clock::after{content:"";position:absolute;width:50px;height:2px;background:#fff;top:79px;left:80px;
  transform-origin:left}
.dio-stop b{position:absolute;bottom:-2px;font-size:24px;color:#fff}
.dio-stop em{position:absolute;left:50%;bottom:-29px;transform:translateX(-50%);color:#d9c9ff;white-space:nowrap}
.fx-roller{background:rgba(10,8,3,.5)!important}
.dio-roller{width:420px;height:190px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;color:#ffe783}
.dio-roller-bar{position:absolute;left:50%;top:12px;width:330px;height:86px;transform:translateX(-50%);
  background:linear-gradient(180deg,#c7c2b5,#56534f 55%,#171614);border:5px solid #ffd84d;
  box-shadow:0 12px 0 #080705,0 0 22px rgba(255,216,77,.28);animation:dioRollerDrop .65s cubic-bezier(.5,0,.8,1) both}
.dio-roller-bar::before{content:"";position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(135deg,#ffd84d 0 22px,#302100 22px 44px)}
.dio-roller b{position:relative;z-index:2}
.fx-heaven{background:radial-gradient(circle,rgba(255,245,181,.2),rgba(25,17,0,.55))!important}
.dio-heaven{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff0a3}
.dio-heaven i{font-style:normal;font-size:72px;line-height:1;filter:drop-shadow(0 0 18px #ffe783);
  animation:dioHeavenPulse .75s ease-out both}
.fx-overworld{background:linear-gradient(180deg,rgba(83,50,0,.2),rgba(0,0,0,.66))!important}
.dio-rewrite{width:430px;padding:20px 0 16px;text-align:center;color:#ffe17b;overflow:hidden;
  border-top:2px solid rgba(255,225,123,.7);border-bottom:2px solid rgba(255,225,123,.7);
  animation:dioRewrite .72s ease-out both}
.dio-rewrite i{position:absolute;left:-20%;top:50%;width:140%;height:2px;background:#ffe17b;
  box-shadow:0 0 12px #ffe17b;transform:rotate(-2deg)}
.fx-punch{background:radial-gradient(circle,rgba(173,28,60,.18),rgba(9,0,4,.56))!important}
.dio-punch{width:250px;height:170px;display:grid;place-items:center;text-align:center;color:#ffb09c}
.dio-punch i{position:absolute;width:92px;height:92px;border:5px solid #ff947c;border-radius:50%;
  transform:rotate(-18deg);box-shadow:0 0 18px rgba(255,91,79,.42);animation:dioPunchHit .68s ease-out both}
.fx-kiss{background:radial-gradient(circle,rgba(162,30,89,.18),rgba(10,0,7,.54))!important}
.dio-kiss{display:flex;flex-direction:column;align-items:center;text-align:center;color:#ffabd0}
.dio-kiss i{font-style:normal;font-size:58px;line-height:1;animation:dioKiss .7s ease-out both;
  filter:drop-shadow(0 0 16px #ff4f9b)}
.fx-noble{background:radial-gradient(circle,rgba(121,83,23,.17),rgba(7,5,2,.56))!important}
.dio-noble{display:flex;flex-direction:column;align-items:center;text-align:center;color:#f6df9f}
.dio-noble i{font-style:normal;font-size:58px;line-height:1;filter:drop-shadow(0 0 13px #d6aa4f)}
.fx-star{background:radial-gradient(circle,rgba(103,45,161,.24),rgba(0,0,0,.56))!important}
.dio-star{width:290px;height:190px;display:grid;place-items:center;text-align:center;color:#d9b0ff}
.dio-star i{position:absolute;font-style:normal;font-size:102px;line-height:1;color:#ede2ff;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);
  background:#e5d3ff;filter:drop-shadow(0 0 18px #a55cf4);animation:dioStarBurst .7s ease-out both}
.fx-hamon{background:radial-gradient(circle,rgba(255,202,50,.18),rgba(20,12,0,.52))!important}
.dio-hamon{width:330px;height:200px;display:grid;place-items:center;text-align:center;color:#ffe68c}
.dio-hamon i{position:absolute;border:3px solid #ffe68c;border-radius:50%;opacity:.55;
  animation:dioHamonRing .72s ease-out both}
.dio-hamon i:nth-child(1){width:110px;height:110px}
.dio-hamon i:nth-child(2){width:180px;height:180px;animation-delay:.06s}
.dio-hamon i:nth-child(3){width:255px;height:255px;animation-delay:.12s}
.fx-emerald{background:radial-gradient(circle,rgba(24,151,91,.17),rgba(0,7,4,.54))!important}
.dio-emerald{width:310px;height:180px;display:grid;place-items:center;text-align:center;color:#8dffc0}
.dio-emerald i{position:absolute;font-style:normal;font-size:34px;color:#74f5ad;text-shadow:0 0 12px #27c977;
  animation:dioGemFly .68s ease-out both}
.dio-emerald i:nth-child(1){left:22px;top:24px;transform:rotate(28deg)}
.dio-emerald i:nth-child(2){right:28px;top:42px;transform:rotate(-21deg);animation-delay:.05s}
.dio-emerald i:nth-child(3){left:78px;bottom:12px;transform:rotate(-12deg);animation-delay:.1s}
.fx-silver{background:linear-gradient(120deg,rgba(17,32,54,.35),rgba(0,0,0,.58))!important}
.dio-silver{width:380px;height:190px;display:grid;place-items:center;text-align:center;color:#eaf5ff}
.dio-silver i{position:absolute;width:370px;height:3px;background:linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow:0 0 13px #d7ebff;animation:dioSilverSlash .67s ease-out both}
.dio-silver i:nth-child(1){transform:rotate(-29deg)}
.dio-silver i:nth-child(2){transform:rotate(29deg);animation-delay:.08s}
.fx-fool{background:radial-gradient(circle,rgba(181,164,117,.14),rgba(5,5,4,.56))!important}
.dio-fool{width:260px;height:200px;display:grid;place-items:center;text-align:center;color:#f2ebd2}
.dio-fool-shield{position:absolute;width:132px;height:150px;background:rgba(233,219,180,.14);
  border:3px solid rgba(241,228,191,.7);clip-path:polygon(50% 0,93% 23%,83% 77%,50% 100%,17% 77%,7% 23%);
  box-shadow:0 0 20px rgba(232,217,177,.18);animation:dioFoolShield .72s ease-out both}
.fx-magician{background:radial-gradient(circle,rgba(170,45,0,.2),rgba(14,2,0,.57))!important}
.dio-magician{width:260px;height:210px;display:grid;place-items:center;text-align:center;color:#ffad66}
.dio-magician i{position:absolute;bottom:18px;width:112px;height:150px;
  background:radial-gradient(ellipse at 50% 85%,#ffd35b 0 18%,#ff6c1a 34%,rgba(160,18,0,.35) 55%,transparent 72%);
  clip-path:polygon(50% 0,66% 32%,82% 25%,76% 57%,100% 100%,0 100%,26% 60%,17% 35%,35% 39%);
  filter:drop-shadow(0 0 18px #ff5419);animation:dioFlame .72s ease-out both}
@keyframes dioEyeRay{0%{opacity:0;transform:scaleX(.2)}30%{opacity:1}100%{opacity:0;transform:scaleX(1.2)}}
@keyframes dioRushWord{0%{opacity:0;margin-left:-40px}35%{opacity:.38}100%{opacity:0;margin-left:40px}}
@keyframes dioKnifePop{0%{opacity:0;scale:.5}35%{opacity:1;scale:1.15}100%{opacity:0;scale:1}}
@keyframes dioHeart{0%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes dioClockHand{0%{opacity:0;transform:rotate(-60deg) scale(.85)}35%{opacity:1}100%{opacity:0;transform:rotate(8deg) scale(1)}}
@keyframes dioRollerDrop{0%{opacity:0;transform:translate(-50%,-120%)}40%{opacity:1;transform:translate(-50%,0)}47%{transform:translate(-53%,3%)}100%{opacity:0;transform:translate(-50%,34%)}}
@keyframes dioHeavenPulse{0%{opacity:0;transform:scale(.5)}40%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.25)}}
@keyframes dioRewrite{0%{opacity:0;clip-path:inset(0 50%)}35%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}
@keyframes dioPunchHit{0%{opacity:0;transform:scale(.35) rotate(-18deg)}35%{opacity:1;transform:scale(1.05) rotate(-18deg)}100%{opacity:0;transform:scale(1.25) rotate(-18deg)}}
@keyframes dioKiss{0%{opacity:0;transform:translateY(25px) scale(.6)}40%{opacity:1;transform:translateY(0) scale(1.12)}100%{opacity:0;transform:translateY(-14px) scale(1)}}
@keyframes dioStarBurst{0%{opacity:0;transform:scale(.25) rotate(-28deg)}40%{opacity:1;transform:scale(1.08) rotate(0)}100%{opacity:0;transform:scale(1.28) rotate(12deg)}}
@keyframes dioHamonRing{0%{opacity:0;transform:scale(.25)}35%{opacity:.85}100%{opacity:0;transform:scale(1.08)}}
@keyframes dioGemFly{0%{opacity:0;translate:-25px 25px;scale:.6}40%{opacity:1}100%{opacity:0;translate:28px -22px;scale:1.1}}
@keyframes dioSilverSlash{0%{opacity:0;scale:0 .2}30%{opacity:1;scale:1}100%{opacity:0;scale:1.06}}
@keyframes dioFoolShield{0%{opacity:0;transform:scale(.4) rotate(-10deg)}40%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.15)}}
@keyframes dioFlame{0%{opacity:0;transform:scale(.4) translateY(35px)}38%{opacity:1;transform:scale(1.06) translateY(0)}100%{opacity:0;transform:scale(1.14) translateY(-18px)}}
@media (max-width:600px){
  .dio-sig-fx > div b{font-size:19px}.dio-sig-fx > div em{font-size:8px;letter-spacing:1.6px}
  .dio-roller,.dio-silver{width:88vw}.dio-rewrite{width:88vw}.dio-clock{width:140px;height:140px}
}