/* 数据页：英雄胜率榜 / 英雄详情 / 海克斯胜率榜 / 实力分介绍。沿用 site.css 的变量，亮暗色自动跟随。 */
.dp{padding:clamp(20px,3.5vw,40px) 0 72px;position:relative}
.dp::before{content:"";position:absolute;inset:0 0 auto;height:420px;pointer-events:none;z-index:-1;
  background:radial-gradient(55% 100% at 50% 0,var(--glow),transparent 72%)}
.crumbs{font-size:13px;color:var(--tx-2);margin-bottom:18px}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.dp-head{margin-bottom:22px}
.dp-head h1,.dp-hero h1{font-size:clamp(28px,4.2vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.dp-sub{margin-top:10px;color:var(--tx-1);font-size:16px;max-width:760px}
.dp-sub a{color:var(--accent)}
.stamp{margin-top:8px;font-size:13px;color:var(--tx-2)}

.dp-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0 14px}
.dp-search{flex:1 1 260px;max-width:420px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-1);color:var(--tx-0);font:inherit;font-size:15px}
.dp-search:focus{outline:2px solid var(--accent);outline-offset:1px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg-1);color:var(--tx-1);
  font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.chips button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.dp-table-wrap{border:1px solid var(--line);border-radius:16px;overflow:auto;background:var(--bg-1);box-shadow:var(--shadow)}
.dp-table{width:100%;border-collapse:collapse;font-size:15px}
.dp-table th{position:sticky;top:0;background:var(--bg-1);text-align:left;font-size:13px;font-weight:700;color:var(--tx-1);
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.dp-table th[data-sort]{cursor:pointer;user-select:none}
.dp-table th[data-sort]::after{content:" ↕";opacity:.35}
.dp-table th.on.desc::after{content:" ↓";opacity:1;color:var(--accent)}
.dp-table th.on.asc::after{content:" ↑";opacity:1;color:var(--accent)}
.dp-table td{padding:9px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.dp-table tr:last-child td{border-bottom:0}
.dp-table tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.dp-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.dp-table .strong{font-weight:800;color:var(--tx-0)}
.dp-table .desc{color:var(--tx-1);font-size:13px;max-width:420px}
.dp-table tr[hidden]{display:none}
.who{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:150px}
a.who:hover b{color:var(--accent)}
.who b{display:block;font-weight:750}
.who small{display:block;font-size:12px;color:var(--tx-2);margin-top:1px}
.ic{border-radius:10px;flex:none;background:var(--bg-2,var(--line-soft))}
.ic-empty{display:inline-block}

.tier{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;font-weight:900;font-size:15px;color:#fff}
.t-s{background:var(--g-s)}.t-a{background:var(--g-a)}.t-b{background:var(--g-b)}.t-c{background:var(--g-c)}
.tier-lg{width:64px;height:64px;font-size:34px;border-radius:16px;margin-left:auto}
.rar{font-weight:700}
.r-prism{color:#9B59D0}.r-gold{color:#B07D12}.r-silver{color:#6B7380}
:root[data-theme="dark"] .r-prism{color:#D49BFF}:root[data-theme="dark"] .r-gold{color:#E3B65E}:root[data-theme="dark"] .r-silver{color:#AEB6C2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .r-prism{color:#D49BFF}:root:not([data-theme="light"]) .r-gold{color:#E3B65E}:root:not([data-theme="light"]) .r-silver{color:#AEB6C2}}

.dp-note{margin:12px 2px 0;font-size:13px;color:var(--tx-2)}
.dp-hero{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.dp-avatar{border-radius:22px;box-shadow:var(--shadow)}
.dp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:30px}
.dp-stats>div{padding:16px 18px;border-radius:16px;background:var(--bg-1);border:1px solid var(--line);box-shadow:var(--shadow)}
.dp-stats span{display:block;font-size:13px;color:var(--tx-1)}
.dp-stats b{display:block;font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.dp-stats small{font-size:12px;color:var(--tx-2)}
.dp-block{margin-top:30px}
.dp-block h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;margin-bottom:6px}
.dp-block .dp-note{margin:0 0 12px}
.dp-more{margin-top:14px}
.dp-more summary{cursor:pointer;font-weight:700;color:var(--accent);padding:6px 2px}
.dp-more .dp-table-wrap{margin-top:10px}
.dp-pending{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin-top:10px}
.dp-pending li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:12px;border:1px solid var(--line);background:var(--bg-1);font-size:14px}
.dp-pending small{margin-left:6px;font-size:12px}
.dp-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:34px;padding:20px 24px;border-radius:18px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 14%,var(--bg-1)),var(--bg-1) 60%);
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line))}
.dp-cta b{display:block;font-size:18px;font-weight:800}
.dp-cta span{display:block;margin-top:4px;color:var(--tx-1);font-size:14px}
.dp-nb{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;font-size:14px}
.dp-nb a{color:var(--tx-1);text-decoration:none}
.dp-nb a:hover{color:var(--accent)}

.dp-show{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center;margin:26px 0 34px}
.dp-show.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.dp-show.rev .dp-shot{order:2}
.dp-shot{margin:0}
.dp-shot img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.dp-shot figcaption{margin-top:8px;font-size:13px;color:var(--tx-2)}
.dp-points{display:grid;gap:14px}
.dp-points b{display:block;font-size:18px;font-weight:800}
.dp-points span{display:block;margin-top:3px;color:var(--tx-1);font-size:15px}
.faq details{border-bottom:1px solid var(--line);padding:12px 2px}
.faq summary{cursor:pointer;font-weight:700}
.faq .ans{margin-top:8px;color:var(--tx-1)}

/* 首页「海斗数据榜」 */
.home-data{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hd-card{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:18px;background:var(--bg-1);border:1px solid var(--line);
  box-shadow:var(--shadow);color:inherit;text-decoration:none;transition:transform .3s var(--ease),border-color .3s}
.hd-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.hd-card h3{font-size:19px;font-weight:800}
.hd-card h3 a{color:inherit;text-decoration:none}
.hd-card h3 a:hover{color:var(--accent)}
.hd-card ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hd-card li a,.hd-card li{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.hd-card li span{flex:1;font-weight:650}
.hd-card li b{font-variant-numeric:tabular-nums}
.hd-card img:not(.ic){width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.hd-more{margin-top:auto;font-size:14px;font-weight:700;color:var(--accent);text-decoration:none}

@media(max-width:900px){
  .dp-stats{grid-template-columns:repeat(2,1fr)}
  .dp-show,.dp-show.rev{grid-template-columns:1fr}
  .dp-show.rev .dp-shot{order:0}
  .home-data{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hide-s{display:none}
  .dp-table{font-size:14px}
  .dp-table td,.dp-table th{padding:8px 10px}
  .dp-hero{flex-wrap:wrap;gap:14px}
  .tier-lg{width:52px;height:52px;font-size:28px}
  .dp-cta{flex-direction:column;align-items:flex-start}
  .dp{padding-bottom:110px}
}
/* 海克斯图标是浅色线稿：统一垫游戏卡面那种深色底 */
.ic-aug{background:#1B202B;padding:5px;box-sizing:border-box;border:1px solid #2E3546}