/* =========================================================
   茶杯头 CUPHEAD · BOSS 图鉴
   1930s 橡皮管动画风 · 米黄纸张 + 墨黑描边
   ========================================================= */

:root{
  --paper:#f7e9cd;
  --paper-2:#fdf5e2;
  --paper-3:#efdcb8;
  --ink:#221a14;
  --ink-soft:#5c4a38;
  --red:#c8372c;
  --red-d:#a3271e;
  --gold:#c8912f;
  --teal:#2f7d70;
  --pink:#e0699a;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);

  --font-display:'Bangers','Rye','PingFang SC','Microsoft YaHei',sans-serif;
  --font-title:'Abril Fatface',Georgia,'Songti SC','STZhongsong',serif;
  --font-body:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}
b{font-weight:700}

/* 纸张纹理 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.30;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode:multiply;
}

/* ---------- 顶部滚动条 ---------- */
.ticker{
  background:var(--red);color:var(--paper-2);
  border-bottom:3px solid var(--ink);
  overflow:hidden;white-space:nowrap;
  font-family:var(--font-display);letter-spacing:.12em;font-size:14px;
}
.ticker-track{display:flex;gap:40px;padding:7px 0;animation:slide 34s linear infinite;width:max-content}
.ticker-track span{flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 导航 ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--paper-2);
  border-bottom:3px solid var(--ink);
  box-shadow:0 4px 0 rgba(34,26,20,.12);
}
.nav-inner{
  max-width:1200px;margin:0 auto;padding:10px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-cup{display:flex;background:var(--paper);border:3px solid var(--ink);border-radius:50%;padding:2px;box-shadow:3px 3px 0 var(--ink)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text b{font-family:var(--font-display);font-size:26px;letter-spacing:.06em}
.brand-text i{font-style:normal;font-size:11px;letter-spacing:.24em;color:var(--ink-soft)}
.nav-links{display:flex;gap:6px;flex-wrap:wrap}
.nav-links a{
  font-size:14px;text-decoration:none;padding:6px 14px;border:2.5px solid var(--ink);border-radius:20px;
  background:var(--paper);box-shadow:3px 3px 0 var(--ink);transition:.15s;font-weight:600;
}
.nav-links a:hover{background:var(--gold);color:#fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:64px 24px 72px;border-bottom:4px solid var(--ink)}
.sunburst{
  position:absolute;top:-40%;left:50%;width:1600px;height:1600px;transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg,rgba(200,145,47,.16) 0deg 8deg,transparent 8deg 16deg);
  animation:spin 90s linear infinite;pointer-events:none;
}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.hero-inner{
  position:relative;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.eyebrow{
  font-family:var(--font-display);letter-spacing:.28em;font-size:13px;color:var(--red);
  margin:0 0 10px;
}
.title{margin:0;line-height:.9}
.title-cn{
  display:block;font-family:var(--font-title);font-size:clamp(52px,8vw,96px);
  text-shadow:5px 5px 0 var(--gold),9px 9px 0 var(--ink);
}
.title-en{
  display:block;font-family:var(--font-display);font-size:clamp(30px,5.4vw,64px);
  letter-spacing:.06em;color:var(--red);margin-top:10px;
  -webkit-text-stroke:2px var(--ink);
  text-shadow:4px 4px 0 rgba(34,26,20,.18);
}
.subtitle{font-family:var(--font-display);font-size:clamp(16px,2vw,22px);letter-spacing:.1em;margin:14px 0 6px}
.lede{max-width:52ch;font-size:15.5px;color:var(--ink-soft);margin:0 0 26px}
.lede b{color:var(--ink)}

.hero-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.stat{
  border:3px solid var(--ink);border-radius:6px;background:var(--paper-2);
  box-shadow:var(--shadow-sm);padding:8px 16px;min-width:96px;text-align:center;
}
.stat b{display:block;font-family:var(--font-display);font-size:30px;line-height:1}
.stat span{font-size:11.5px;letter-spacing:.14em;color:var(--ink-soft)}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:12px 26px;border:3px solid var(--ink);border-radius:30px;
  text-decoration:none;font-weight:700;box-shadow:var(--shadow-sm);transition:.15s;font-size:15px;
}
.btn-red{background:var(--red);color:var(--paper-2)}
.btn-ghost{background:var(--paper-2)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-red:hover{background:var(--red-d)}

.hero-art{position:relative}
.hero-art .scene{width:100%;height:auto;border:4px solid var(--ink);border-radius:10px;box-shadow:10px 10px 0 var(--ink);display:block;background:var(--paper-2)}
.hero-art .scene-photo{aspect-ratio:16/9;object-fit:cover;transform:rotate(1.2deg)}
.art-frame{
  position:absolute;inset:-10px;border:3px dashed rgba(34,26,20,.35);border-radius:16px;pointer-events:none;
}
.grain{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(34,26,20,.05) 0 2px,transparent 2px 5px);mix-blend-mode:multiply}

/* ---------- 图鉴 ---------- */
.roster{max-width:1200px;margin:0 auto;padding:64px 24px 40px}
.roster-head{text-align:center;margin-bottom:30px}
.section-title{margin:0;font-family:var(--font-title);font-size:clamp(30px,4.4vw,48px)}
.section-title span{
  display:inline-block;padding:0 18px;border-bottom:6px solid var(--red);
}
.section-sub{color:var(--ink-soft);font-size:14.5px;margin:12px auto 0;max-width:60ch}

.toolbar{
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin:34px 0 18px;
}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-family:var(--font-body);font-size:13.5px;font-weight:600;cursor:pointer;
  padding:8px 14px;border:2.5px solid var(--ink);border-radius:22px;background:var(--paper-2);
  box-shadow:3px 3px 0 var(--ink);transition:.15s;
}
.chip i{font-style:normal;font-size:11px;opacity:.6;margin-left:4px}
.chip:hover{background:var(--paper-3);transform:translate(-1px,-1px)}
.chip.is-on{background:var(--red);color:var(--paper-2)}
.chip.is-on i{opacity:.85}
.searchbox{display:flex;align-items:center;gap:8px;border:3px solid var(--ink);border-radius:24px;background:var(--paper-2);padding:6px 16px;box-shadow:var(--shadow-sm);min-width:280px}
.searchbox input{border:0;background:transparent;outline:none;font-family:var(--font-body);font-size:14px;color:var(--ink);width:100%}
.result-line{font-size:12.5px;letter-spacing:.1em;color:var(--ink-soft);margin:0 0 18px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px}
.card{
  position:relative;cursor:pointer;text-align:left;border:3px solid var(--ink);border-radius:8px;
  background:var(--paper-2);box-shadow:var(--shadow);padding:18px 18px 16px;
  transition:transform .15s,box-shadow .15s;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
}
.card::after{
  content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;
  background:var(--accent);opacity:.16;
}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.card:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* 卡片头图（游戏原图） */
.card-shot{
  position:relative;height:148px;border:2.5px solid var(--ink);border-radius:6px;overflow:hidden;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 42%, var(--accent) 0%, transparent 78%),
    repeating-radial-gradient(circle at 30% 20%, rgba(34,26,20,.05) 0 2px, transparent 2px 6px),
    var(--paper-2);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.35);
}
.card-shot img{
  max-width:96%;max-height:96%;object-fit:contain;display:block;
  filter:drop-shadow(3px 4px 0 rgba(34,26,20,.22));
}
.card-shot img.wide{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.card-shot .fallback{display:none}
.card-shot img.is-broken{display:none}
.card-shot img.is-broken + .fallback{display:grid}
.card-top{display:flex;gap:14px;align-items:center}
.emblem{
  flex:none;width:74px;height:74px;border-radius:50%;border:3px solid var(--ink);
  background:var(--accent);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);
}
.emblem svg{width:46px;height:46px;color:var(--ink)}
.card-names{display:flex;flex-direction:column;min-width:0}
.card-body{display:flex;flex-direction:column;gap:10px;flex:1}
.card-idx{display:block;font-family:var(--font-display);font-size:12px;letter-spacing:.14em;color:var(--ink-soft)}
.card-cn{display:block;font-family:var(--font-title);font-size:21px;line-height:1.2;margin:2px 0 0}
.card-en{display:block;font-family:var(--font-display);font-size:13px;letter-spacing:.08em;color:var(--ink-soft)}
.card-level{
  font-size:12.5px;border-top:2px dashed rgba(34,26,20,.3);padding-top:9px;color:var(--ink-soft);
}
.card-level b{color:var(--ink)}
.card-tagline{font-size:13px;color:var(--ink-soft);margin:0}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.pips{display:flex;gap:4px;align-items:center}
.pip{width:11px;height:11px;border:2px solid var(--ink);border-radius:2px;background:transparent}
.pip.on{background:var(--red)}
.pips-label{font-size:11px;letter-spacing:.08em;color:var(--ink-soft);margin-right:2px}
.stars{font-size:12px;letter-spacing:1px;color:var(--gold)}
.stars .off{color:rgba(34,26,20,.25)}
.badge{
  position:absolute;left:0;top:0;background:var(--ink);color:var(--paper-2);
  font-size:11px;letter-spacing:.1em;padding:3px 10px;border-bottom-right-radius:8px;
}
.card-more{font-size:12.5px;font-weight:700;color:var(--red)}

.empty{text-align:center;color:var(--ink-soft);padding:40px 0}

/* ---------- 关于 ---------- */
.about{border-top:4px solid var(--ink);background:var(--paper-3);padding:60px 24px}
.about-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.about-card{background:var(--paper-2);border:3px solid var(--ink);border-radius:8px;box-shadow:var(--shadow);padding:26px 28px}
.about-card h3{font-family:var(--font-title);font-size:26px;margin:0 0 14px}
.about-card p{font-size:14.5px;color:var(--ink-soft);margin:0 0 12px}
.about-list{padding-left:20px;margin:0;font-size:14px;color:var(--ink-soft)}
.about-list li{margin-bottom:8px}
.credit{font-size:12px;opacity:.7;margin-top:14px !important}

/* ---------- 页脚 ---------- */
.foot{background:var(--ink);color:var(--paper);padding:24px;border-top:4px solid var(--ink)}
.foot-inner{max-width:1100px;margin:0 auto;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:12.5px;letter-spacing:.08em}
.foot .dot{color:var(--gold)}

/* ---------- 弹层 ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
/* 关键：作者样式会覆盖浏览器默认的 [hidden]{display:none}，必须显式写回，否则弹层一进页面就常驻 */
.modal[hidden],.empty[hidden]{display:none !important}
.modal-backdrop{position:absolute;inset:0;background:rgba(34,26,20,.62);backdrop-filter:blur(2px)}
.modal-panel{
  position:relative;z-index:1;width:min(880px,100%);max-height:88vh;overflow:auto;
  background:var(--paper);border:4px solid var(--ink);border-radius:10px;box-shadow:12px 12px 0 var(--ink);
  padding:0 0 26px;animation:pop .18s ease-out;
}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.modal-close{
  position:absolute;right:14px;top:14px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:3px solid var(--ink);background:var(--red);color:var(--paper-2);font-size:16px;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
}
.modal-close:hover{background:var(--red-d)}
.modal-nav{
  position:sticky;top:0;background:var(--paper-3);border-bottom:3px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 70px 12px 22px;
}
.nav-btn{
  font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;padding:6px 12px;
  border:2.5px solid var(--ink);border-radius:18px;background:var(--paper-2);box-shadow:3px 3px 0 var(--ink);
}
.nav-btn:hover{background:var(--gold);color:#fff}
.nav-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.modal-index{font-family:var(--font-display);font-size:12.5px;letter-spacing:.14em;color:var(--ink-soft)}

.m-head{display:flex;gap:20px;align-items:flex-start;padding:26px 26px 18px}
.m-shot{
  position:relative;flex:none;width:170px;height:170px;border-radius:50%;border:4px solid var(--ink);
  display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%, var(--accent) 0%, transparent 80%),
    repeating-radial-gradient(circle at 30% 25%, rgba(34,26,20,.05) 0 2px, transparent 2px 6px),
    var(--paper-2);
  box-shadow:4px 4px 0 var(--ink);
}
.m-shot img{max-width:92%;max-height:92%;object-fit:contain;filter:drop-shadow(2px 3px 0 rgba(34,26,20,.2))}
.m-shot img.wide{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.m-shot .fallback{display:none}
.m-shot img.is-broken{display:none}
.m-shot img.is-broken + .fallback{display:grid}
.m-shot .fallback{width:96px;height:96px;border-radius:50%;border:3px solid var(--ink);background:var(--accent);display:none;place-items:center;box-shadow:none}
.m-shot img.is-broken + .fallback{display:grid}
.m-emblem{flex:none;width:104px;height:104px;border-radius:50%;border:4px solid var(--ink);background:var(--accent);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink)}
.m-emblem svg{width:64px;height:64px;color:var(--ink)}
.m-title h3{margin:0;font-family:var(--font-title);font-size:32px;line-height:1.15}
.m-title .en{font-family:var(--font-display);font-size:15px;letter-spacing:.09em;color:var(--ink-soft)}
.m-title .tag{font-size:13.5px;color:var(--red);font-weight:700;margin-top:4px}
.m-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.fact{border:2.5px solid var(--ink);border-radius:6px;background:var(--paper-2);padding:5px 12px;font-size:12.5px;font-weight:600}
.fact i{font-style:normal;opacity:.6;margin-right:5px;font-size:11px}

.m-body{padding:0 26px}
.m-intro{font-size:15px;background:var(--paper-2);border-left:6px solid var(--gold);padding:14px 18px;border-radius:0 8px 8px 0;margin:0 0 22px}
.m-sec{margin-bottom:22px}
.m-sec h4{
  margin:0 0 10px;font-family:var(--font-display);font-size:17px;letter-spacing:.1em;
  display:inline-block;border-bottom:3px solid var(--red);padding-bottom:3px;
}
.m-list{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink-soft)}
.m-list li{margin-bottom:7px}
.m-list li b{color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip-pink{
  font-size:13px;border:2.5px solid var(--ink);border-radius:20px;padding:6px 13px;
  background:var(--pink);color:#fff;font-weight:600;box-shadow:3px 3px 0 var(--ink);
}
.m-loadout{
  display:flex;gap:10px;align-items:center;font-size:14px;font-weight:700;
  border:3px solid var(--ink);border-radius:8px;background:var(--paper-2);padding:12px 16px;box-shadow:var(--shadow-sm);
}
.m-loadout span.badge-l{background:var(--ink);color:var(--paper-2);font-size:11px;padding:3px 9px;border-radius:12px;letter-spacing:.1em}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:32px}
  .hero-art{order:-1;max-width:520px}
  .about-inner{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav-links{display:none}
  .roster{padding:44px 16px 30px}
  .hero{padding:40px 16px 52px}
  .m-head{flex-direction:column}
  .modal-panel{max-height:92vh}
  .modal-nav{padding:10px 60px 10px 16px}
  .toolbar{flex-direction:column;align-items:stretch}
  .searchbox{min-width:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* =========================================================
   军械库页（arsenal.html）
   ========================================================= */

/* 紧凑版 HERO */
.hero-sm{padding:46px 24px 52px}
.hero-inner-solo{max-width:1200px;margin:0 auto;display:block}
.hero-inner-solo .hero-copy{max-width:760px;text-align:left}
.hero-inner-solo .subtitle{font-family:var(--font-display);letter-spacing:.16em;font-size:clamp(16px,2.4vw,24px);color:var(--red);margin:6px 0 14px}

/* 交替底色分区 */
.roster.alt{
  max-width:none;background:var(--paper-3);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
}
.roster.alt > .roster-head,.roster.alt > .grid,.roster.alt > .super-grid,.roster.alt > .info-card,.roster.alt > .sub-head{
  max-width:1200px;margin-left:auto;margin-right:auto;
}
.sub-head{
  font-family:var(--font-title);font-size:22px;margin:44px 0 18px;padding-left:14px;
  border-left:6px solid var(--red);
}

/* 说明卡 */
.info-card{
  border:3px solid var(--ink);border-radius:8px;background:var(--paper-2);
  box-shadow:var(--shadow-sm);padding:20px 22px;margin:0 0 30px;
}
.info-lead{font-size:14.5px;line-height:1.8;margin:0 0 16px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.info-item{
  border:2.5px solid var(--ink);border-radius:6px;background:var(--paper);
  padding:10px 14px;font-size:13px;line-height:1.6;
}
.info-item b{display:block;font-family:var(--font-display);letter-spacing:.1em;font-size:13px;color:var(--red);margin-bottom:2px}
.info-item span{color:var(--ink-soft)}

/* ---------- 跑酷关卡卡片 ---------- */
.grid-rg{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.rg-img{width:100%;height:100%;object-fit:cover}
.rg-card .card-more{margin-top:auto}

/* ---------- 武器卡片 ---------- */
.grid-weapon{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.weapon-card{cursor:default;gap:12px}
.weapon-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.w-top{display:flex;gap:14px;align-items:center}
.w-img,.c-img{
  flex:none;width:66px;height:66px;object-fit:contain;
  filter:drop-shadow(2px 3px 0 rgba(34,26,20,.2));
}
.w-img.is-fallback,.c-img.is-fallback,.s-img.is-fallback{
  display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;
  background:var(--accent);color:var(--ink);
}
.is-fallback svg{width:40px;height:40px}
.w-names{display:flex;flex-direction:column;min-width:0;gap:2px}
.w-tag{
  display:inline-block;align-self:flex-start;margin-top:4px;font-size:11.5px;font-weight:700;
  background:var(--accent);color:var(--paper-2);border:2px solid var(--ink);border-radius:12px;padding:1px 9px;
}
.w-stats{display:flex;gap:10px}
.w-stat{
  flex:1;border:2px solid var(--ink);border-radius:5px;background:var(--paper);
  padding:6px 9px;font-size:12px;line-height:1.35;
}
.w-stat i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.08em;color:var(--ink-soft)}
.w-stat b{font-size:13px}
.dps-row{display:flex;align-items:center;gap:9px}
.dps-label{font-family:var(--font-display);font-size:12px;letter-spacing:.14em;color:var(--ink-soft)}
.dps-bar{
  flex:1;height:14px;border:2.5px solid var(--ink);border-radius:8px;background:var(--paper);overflow:hidden;
}
.dps-bar span{display:block;height:100%}
.dps-num{font-family:var(--font-display);font-size:15px;min-width:44px;text-align:right}
.w-desc{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.65}
.w-ex{
  font-size:12.5px;border:2px dashed rgba(34,26,20,.35);border-radius:6px;padding:8px 10px;background:var(--paper);
}
.badge-l{
  font-family:var(--font-display);font-size:10.5px;letter-spacing:.12em;background:var(--ink);color:var(--paper-2);
  padding:2px 7px;border-radius:4px;margin-right:6px;
}
.w-pros,.c-pros{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.w-pros li{font-size:12.5px;line-height:1.55;padding-left:20px;position:relative}
.w-pros li::before{position:absolute;left:0;font-weight:700}
.w-pros .good::before{content:"＋";color:var(--teal)}
.w-pros .bad::before{content:"－";color:var(--red)}

/* ---------- 护符卡片 ---------- */
.grid-charm{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.charm-card{cursor:default}
.charm-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.c-top{display:flex;gap:14px;align-items:center}
.c-effect{font-size:13.5px;margin:0;font-weight:600;line-height:1.65}
.c-note{font-size:12.5px;color:var(--ink-soft);margin:0;line-height:1.6}
.good-tag,.bad-tag{
  font-size:11.5px;padding:3px 9px;border:2px solid var(--ink);border-radius:14px;
}
.good-tag{background:rgba(47,125,112,.16)}
.bad-tag{background:rgba(200,55,44,.14)}

/* ---------- 必杀技 ---------- */
.super-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px}
.super-card{
  position:relative;border:3px solid var(--ink);border-radius:8px;background:var(--paper-2);
  box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:14px;
}
.super-card::after{
  content:"";position:absolute;right:-28px;top:-28px;width:84px;height:84px;border-radius:50%;
  background:var(--accent);opacity:.16;
}
.super-card.extra::after{opacity:.12}
.s-head{display:flex;gap:16px;align-items:center}
.s-img{
  flex:none;width:84px;height:84px;object-fit:contain;border-radius:50%;
  border:3px solid var(--ink);background:
    radial-gradient(circle at 50% 45%, var(--accent) 0%, transparent 80%),var(--paper);
  padding:6px;filter:drop-shadow(2px 3px 0 rgba(34,26,20,.18));
}
.s-no{font-family:var(--font-display);font-size:12px;letter-spacing:.16em;color:var(--red)}
.s-head h4{font-family:var(--font-title);font-size:23px;margin:0;line-height:1.2}
.s-en{font-family:var(--font-display);font-size:12.5px;letter-spacing:.08em;color:var(--ink-soft)}
.s-facts{display:flex;flex-wrap:wrap;gap:8px}
.s-facts .fact{font-size:12px}
.s-desc{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.7}
.s-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.s-two h5{
  margin:0 0 6px;font-family:var(--font-display);font-size:13px;letter-spacing:.1em;
  color:var(--ink);border-bottom:2px solid var(--accent);display:inline-block;
}
.s-two .m-list{margin:0}
.s-tip{
  font-size:12.5px;background:var(--paper);border-left:5px solid var(--red);
  border-radius:0 6px 6px 0;padding:9px 12px;line-height:1.6;
}
.s-tip b{font-family:var(--font-display);letter-spacing:.1em;color:var(--red);margin-right:6px}

/* 导航里的外链（军械库） */
.nav-extra{color:var(--red);font-weight:700}

/* DLC 角标 */
.badge-dlc{
  left:auto;right:0;border-bottom-right-radius:0;border-bottom-left-radius:8px;
  background:var(--gold);color:var(--ink);font-weight:700;
}

/* 敌人表 */
.enemy-table{display:flex;flex-direction:column;gap:7px}
.enemy-row{
  display:flex;flex-direction:column;gap:2px;border-left:4px solid var(--accent);
  background:var(--paper);border-radius:0 6px 6px 0;padding:7px 12px;
}
.enemy-row b{font-size:13.5px}
.enemy-row span{font-size:12.5px;color:var(--ink-soft);line-height:1.55}

@media (max-width:900px){
  .s-two{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero-sm{padding:34px 16px 40px}
  .info-card{padding:16px}
  .super-card{padding:18px}
}