/* ============ 首页：潮汐守望者 WIKI（英雄图鉴 + 工具） ============
   四块暗色大色带：主视觉（地狱 × 天堂海报）→ 赤焰（最新降临）→ 深海蓝（工具）→ 星夜（英雄图鉴）。依赖 site.css。 */

/* ================= 第一块：主视觉（游戏活动弹窗版式） ================= */
.hero-band { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: min(860px, 100vh); padding: 0 0 70px; background: #07080f; }
/* 底：同一张插画放大糊开，压暗，像游戏里弹窗背后被虚化的主界面 */
.kv-bg { position: absolute; inset: -40px; z-index: -3; background: url(game/kv-throne-s.webp) center 30% / cover; filter: blur(28px) brightness(.32) saturate(1.2); }
/* 中间清晰的插画：四边渐隐 */
.kv-art { position: absolute; left: 50%; top: 0; z-index: -2; width: min(1640px, 128vw); translate: -50% 0; animation: kv-in 2s cubic-bezier(.2, .7, .2, 1) both;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); }
.kv-art img { width: 100%; height: auto; -webkit-mask: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 96%); mask: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 96%); }
@keyframes kv-in { from { opacity: 0; transform: scale(1.05); } }
/* 标题压在插画下半部分：底下一层暗色托住文字 */
.hero-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 62% at 50% 78%, rgba(7, 8, 15, .9), rgba(7, 8, 15, .62) 52%, transparent 82%), linear-gradient(0deg, #07080f 0%, rgba(7, 8, 15, .75) 34%, rgba(7, 8, 15, .2) 70%, transparent 100%); }
.hero-band .sky-sun { left: 50%; top: 4%; opacity: .5; }
.hero-band .sky-rays { left: 50%; top: 4%; opacity: .55; }
.hero-band .sky-fire { left: -10%; bottom: -30%; width: 55%; }
/* 金色小凤鸟：从画面一边飞到另一边，翅膀上下扇 */
.birds { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.birds i { position: absolute; left: 0; top: var(--y); width: var(--s); aspect-ratio: 4 / 3; background: url(art/bird-gold.svg) center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 190, 80, .7)); animation: fly var(--t) linear var(--dl) infinite, flap .9s ease-in-out infinite alternate; }
.birds i[style*="--dir:-1"] { animation-name: fly-back, flap; }
@keyframes fly { from { translate: -10vw 0; } 50% { translate: 50vw -40px; } to { translate: 110vw 10px; } }
@keyframes fly-back { from { translate: 110vw 0; scale: -1 1; } 50% { translate: 50vw -30px; scale: -1 1; } to { translate: -10vw 20px; scale: -1 1; } }
/* 飘落的羽毛 */
.birds .fea { position: absolute; top: -8%; left: var(--x); width: var(--s); aspect-ratio: 52 / 146; background: url(art/feather.svg) center / contain no-repeat; opacity: .85;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); animation: fall var(--t) linear var(--dl) infinite; }
@keyframes fall { 0% { translate: 0 0; rotate: -20deg; opacity: 0; } 8% { opacity: .9; } 25% { translate: 40px 25vh; rotate: 25deg; } 50% { translate: -20px 50vh; rotate: -15deg; } 75% { translate: 30px 75vh; rotate: 30deg; } 92% { opacity: .8; } 100% { translate: 0 100vh; rotate: -10deg; opacity: 0; } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.55) translateY(4px); } }
.kv-frame { position: absolute; inset: 14px; z-index: 1; pointer-events: none; border: 1px solid rgba(226, 185, 104, .5); box-shadow: inset 0 0 0 5px rgba(5, 6, 12, .35), inset 0 0 0 6px rgba(226, 185, 104, .2); --cs: 84px; }
.kv-frame::before { inset: -8px; }
.hero { position: relative; z-index: 2; width: 100%; }
.hero-text { max-width: 1120px; margin: 0 auto; }
.hero-text > .subline, .hero-text > .finder { max-width: 860px; }
.kv-compass { display: block; width: 64px; height: auto; margin: 0 auto 4px; filter: drop-shadow(0 0 10px rgba(255, 200, 100, .5)); animation: spin 60s linear infinite; }
.hero-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 6px; color: #f6e2a6; font: 700 13px/1 var(--serif); letter-spacing: .5em; text-transform: uppercase; text-shadow: 0 0 6px #000, 0 0 12px #000, 0 2px 4px #000; }
.hero-kicker::before, .hero-kicker::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-kicker::after { transform: scaleX(-1); }
.hero-title-row { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px); }
.hero-title { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.08; white-space: nowrap; letter-spacing: .04em; }
.hero-title .q { font-weight: 900; letter-spacing: 0; }
/* 标题两侧的菱形宝石框（游戏弹窗两边那种） */
.gem { flex: none; position: relative; width: clamp(56px, 7vw, 96px); aspect-ratio: 1; display: grid; place-items: center; background: url(art/diamond-red.svg) center / 100% 100% no-repeat; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .7)); animation: gem-float 4s ease-in-out infinite; }
.gem-blue { background-image: url(art/diamond-blue.svg); animation-delay: -2s; }
.gem img { width: 46%; height: auto; filter: drop-shadow(0 0 8px rgba(255, 180, 80, .8)); }
.gem-blue img { filter: drop-shadow(0 0 8px rgba(140, 190, 255, .9)); }
@keyframes gem-float { 50% { transform: translateY(-6px); } }
/* 副标题：两边细金线 + 菱形（游戏弹窗标题下那一行） */
.subline { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: none; white-space: nowrap; margin: 10px auto 0; color: #f3e6c6; font-size: 16px; line-height: 1.7; text-shadow: 0 2px 6px #000; text-wrap: balance; }
.subline::before, .subline::after { content: ""; flex: 1 1 60px; max-width: 150px; min-width: 30px; height: 16px; background: url(art/subline.svg) right center / 100% 16px no-repeat; }
.subline::after { transform: scaleX(-1); }
.hero-sub { font-size: 16px; }
.finder { max-width: 600px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--gold-hi); font: 700 13px/1 var(--serif); letter-spacing: .4em; text-transform: uppercase; }
.hero-kicker::before, .hero-kicker::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-kicker::after { transform: scaleX(-1); }
.hero-title { font-size: clamp(44px, 5.6vw, 78px); line-height: 1.08; white-space: nowrap; max-width: none; padding-right: .1em; }
.hero-title small { display: block; margin-top: 6px; font-size: .42em; letter-spacing: .5em; }
.hero-sub { margin: 0; max-width: 32em; font-size: 16.5px; line-height: 1.9; }

.finder { position: relative; margin: 24px auto 0; max-width: 620px; text-align: left; }
.search {
  display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px;
  background: linear-gradient(180deg, rgba(10, 15, 36, .92), rgba(5, 8, 22, .92)); border: 1px solid var(--gold); border-radius: 3px; color: var(--ink);
  box-shadow: inset 0 0 0 3px rgba(5, 8, 22, .9), inset 0 0 0 4px rgba(212, 166, 74, .28), 0 20px 40px -14px rgba(0, 0, 0, .9);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--gold-hi); box-shadow: inset 0 0 0 3px rgba(5, 8, 22, .9), inset 0 0 0 4px rgba(246, 210, 122, .5), 0 0 30px rgba(246, 190, 90, .3), 0 20px 40px -14px rgba(0, 0, 0, .9); }
.search svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold-hi); stroke-width: 2.2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: 17px var(--sans); }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { filter: invert(.8) sepia(1) saturate(3); }
.search kbd { font: 12px/1 var(--sans); color: var(--gold); border: 1px solid var(--line); border-radius: 2px; padding: 4px 7px; }

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30;
  list-style: none; margin: 0; padding: 6px; max-height: min(420px, 60vh); overflow: auto;
  background: linear-gradient(180deg, #121b3e, #0a1028); border: 1px solid var(--gold); border-radius: 3px; color: var(--ink);
  box-shadow: inset 0 0 0 3px rgba(5, 8, 22, .8), inset 0 0 0 4px var(--line-soft), 0 24px 50px -16px rgba(0, 0, 0, .95);
}
.suggest a { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 6px 10px; border-radius: 2px; }
.suggest a[aria-selected="true"], .suggest a:hover { background: rgba(246, 210, 122, .1); }
.suggest img { width: 34px; height: 50px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.suggest b { font-weight: 700; }
.suggest small { color: var(--ink-3); font-size: 12px; }
.suggest .all { display: block; padding: 10px; color: var(--gold-hi); font-size: 13px; font-weight: 700; text-align: center; border-top: 1px solid var(--line-soft); margin-top: 4px; }
.suggest .none { padding: 14px 10px; color: var(--ink-2); font-size: 14px; }

.quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.quick span { display: none; }
.quick button {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 10px; border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(212, 166, 74, .35); background: rgba(6, 9, 20, .55); color: var(--ink-2); font-size: 13px;
  backdrop-filter: blur(4px); transition: background-color .15s, color .15s, border-color .15s;
}
.quick button::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--c, var(--gold)); box-shadow: 0 0 8px var(--c, var(--gold)); }
.quick button:hover { color: var(--gold-hi); border-color: var(--gold-hi); background: rgba(6, 9, 20, .8); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 26px; }
.hero-cta .btn { min-height: 50px; padding: 0 34px; font-size: 15.5px; }

/* 圣坛：圣环慢转 + 召唤法阵 + 最新英雄轮换 */
.stage { position: relative; }
.stage-art { position: relative; display: block; aspect-ratio: 1 / 1.04; isolation: isolate; }
.stage-art::before { /* 背后一团火光 */
  content: ""; position: absolute; left: 50%; top: 50%; width: 90%; height: 80%; translate: -50% -50%; z-index: -3; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 60, .5), rgba(255, 80, 30, .18) 55%, transparent 100%);
  animation: fire 4s ease-in-out infinite alternate;
}
.stage-art .halo-o, .stage-art .halo-i { position: absolute; left: 50%; top: 47%; width: 104%; max-width: none; translate: -50% -50%; pointer-events: none; z-index: -2; }
.stage-art .halo-o { animation: spin 140s linear infinite, unfold 1.6s cubic-bezier(.2, .7, .2, 1) both; filter: drop-shadow(0 0 8px rgba(255, 190, 90, .9)); }
.stage-art .halo-i { width: 76%; animation: spin 90s linear infinite reverse, unfold 1.6s .15s cubic-bezier(.2, .7, .2, 1) both; filter: drop-shadow(0 0 4px rgba(255, 160, 60, .8)); }
@keyframes spin { to { rotate: 360deg; } }
@keyframes unfold { from { opacity: 0; scale: .7; } }
.stage-art .plat { position: absolute; left: 50%; bottom: 1%; width: 82%; aspect-ratio: 1; translate: -50% 0; transform: scaleY(.28); transform-origin: 50% 100%; z-index: -1; pointer-events: none; }
.stage-art .plat img { width: 100%; height: 100%; animation: spin 60s linear infinite; filter: drop-shadow(0 0 16px rgba(255, 150, 60, 1)); }
.stage-art .heroes { position: absolute; inset: 1% 3% 7%; animation: bob 6s ease-in-out 1.2s infinite, ascend 1.1s .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes ascend { from { opacity: 0; translate: 0 30px; } }
.stage-art .heroes img {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; height: 100%; width: 100%; object-fit: contain; object-position: bottom;
  opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .7));
}
.stage-art .heroes img.on { opacity: 1; transform: none; }
.spk { position: absolute; left: var(--x); top: var(--y); width: var(--s, 18px); height: var(--s, 18px); background: url(art/sparkle.svg) center / contain no-repeat; animation: twinkle var(--t, 3s) ease-in-out var(--dl, 0s) infinite; pointer-events: none; filter: drop-shadow(0 0 4px #ffb347); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.stage-pick { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.stage-pick button { position: relative; width: 56px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 2px; }
.stage-pick img { width: 56px; aspect-ratio: 192 / 280; object-fit: cover; border-radius: 2px; opacity: .55; transition: opacity .2s, transform .2s; box-shadow: 0 0 0 1px rgba(212, 166, 74, .4), 0 6px 12px -6px #000; }
.stage-pick button[aria-current="true"] img { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 1px #050816, 0 0 0 2.5px var(--gold-hi), 0 0 18px rgba(255, 190, 90, .6); }
.stage-pick button i { position: absolute; left: 6px; right: 6px; bottom: -8px; height: 2px; background: rgba(255, 220, 180, .25); overflow: hidden; }
.stage-pick button[aria-current="true"] i::after { content: ""; position: absolute; inset: 0; background: var(--gold-hi); transform-origin: left; animation: fill var(--dur, 6s) linear both; }
.stage.paused .stage-pick button[aria-current="true"] i::after { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } }

/* 主视觉底部：三大入口（抽卡模拟器 / 鹅肝带你与国际接轨 / 兑换码），像游戏里的活动入口条 */
.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px auto 0; text-align: left; }
.entry {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 100px; padding: 16px 16px 16px 18px; border: 1px solid var(--line); background: #0a0b16;
  box-shadow: inset 0 0 0 4px rgba(5, 6, 12, .55), inset 0 0 0 5px var(--line-soft), 0 16px 30px -14px #000;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.entry::before, .entry::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; z-index: 2; background: url(art/tip.svg) center / contain no-repeat; }
.entry::before { left: -1px; } .entry::after { right: -1px; }
.entry-art { position: absolute; inset: 0 0 0 28%; z-index: -1; background-size: cover; background-position: center; opacity: .9; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 30%, #000 70%); mask: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 30%, #000 70%); }
.entry .medal { width: 56px; height: 56px; }
.entry-txt { min-width: 0; }
.entry-txt small { text-shadow: 0 2px 6px #000; }
.entry-txt b { display: block; font: 900 18px/1.3 var(--serif); letter-spacing: .01em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 190, 90, .3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-txt small { display: block; margin-top: 2px; color: #eadfc4; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-go { padding: 6px 14px; color: #2a1600; font-size: 13px; font-weight: 800; letter-spacing: .1em; background: linear-gradient(180deg, #fbe7a8, #d9a94e 55%, #c18a35);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); filter: drop-shadow(0 2px 4px #000); }
.entry:hover { transform: translateY(-4px); border-color: var(--gold-hi); box-shadow: inset 0 0 0 4px rgba(5, 6, 12, .55), inset 0 0 0 5px rgba(246, 210, 122, .45), 0 0 28px -6px rgba(255, 180, 80, .55), 0 18px 32px -14px #000; }
.entry:hover .entry-art { transform: scale(1.07); }
.entry:hover .medal { transform: rotate(-8deg) scale(1.06); }

/* ================= 最底下：更多工具 ================= */
.tools { padding: 96px 0 90px; }
.tools .author { margin-top: 40px; }
.tools .orn-sm.orn-flame { width: min(360px, 28vw); opacity: .85; }
.tools .orn-sm.orn-cloud { width: min(380px, 30vw); opacity: .9; }
.tools .wrap { position: relative; z-index: 2; }
/* 更多工具：五个一排，纹章在上、字在下 */
.tools .tool { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; text-align: center; gap: 6px; padding: 22px 14px 18px; }
.tools .tool .medal { grid-row: auto; margin-bottom: 4px; }
.tools .tool span:not(.medal) { white-space: normal; }
/* 达芬奇手稿底纹（游戏三周年 loading 图），淡淡地印在色块上 */
.codex { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-position: center; background-size: cover; opacity: .1; mix-blend-mode: screen; filter: sepia(1) contrast(1.2);
  -webkit-mask: radial-gradient(70% 90% at 50% 50%, #000 30%, transparent 85%); mask: radial-gradient(70% 90% at 50% 50%, #000 30%, transparent 85%); }
.codex-city { background-image: url(game/codex-city.webp); }
.codex-angel { background-image: url(game/codex-angel.webp); }
.tool-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tool {
  display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto auto; gap: 2px 14px; align-items: center;
  height: 100%; padding: 18px 18px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tool .medal { grid-row: span 2; width: 50px; height: 50px; }
.tool:hover { transform: translateY(-4px); border-color: var(--gold-hi); box-shadow: inset 0 0 0 4px rgba(6, 9, 20, .6), inset 0 0 0 5px rgba(246, 210, 122, .4), 0 0 26px -4px color-mix(in srgb, var(--c2, #ff6a2a) 60%, transparent), var(--shadow); }
.tool:hover .medal { transform: rotate(-8deg) scale(1.08); }
.tool b { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: .03em; }
.tool span:not(.medal) { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minor { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; }
.minor a { color: var(--ink-2); }
.minor a:hover { color: var(--gold-hi); }
.minor em { font-style: normal; color: var(--gold-hi); border: 1px solid var(--line); padding: 0 7px; border-radius: 2px; margin-right: 8px; font-size: 12px; }

/* ================= 第四块：星夜（英雄图鉴） ================= */
.dex { padding: 84px 0 110px; }
/* 色块交界处的交叉双剑 */
.swords-divider { position: absolute; left: 50%; top: 0; z-index: 4; width: 120px; translate: -50% -50%; pointer-events: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(255, 190, 90, .25)); }
.swords-divider img { width: 100%; height: auto; }
/* 图鉴标题：居中，两边一对天使翅膀 */
.dex-head { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 22px); margin-bottom: 26px; }
.dex-title { text-align: center; }
.dex-title .ribbon { font-size: 36px; }
.dex-title .hint { display: block; margin-top: 4px; }
.wing { flex: none; width: clamp(110px, 13vw, 190px); height: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6)); animation: wing-l 4s ease-in-out infinite; transform-origin: 85% 75%; }
.wing-r { transform: scaleX(-1); animation-name: wing-r; transform-origin: 50% 75%; }
@keyframes wing-l { 50% { transform: rotate(5deg); } }
@keyframes wing-r { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) rotate(5deg); } }
.codex-top { bottom: auto; height: 640px; opacity: .09; -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); }
.filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 18px; }
.frow { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.frow-k { flex: none; width: 2.6em; padding-top: 6px; color: var(--gold); font: 700 13px var(--serif); letter-spacing: .1em; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 9px; flex: none;
  border: 1px solid rgba(212, 166, 74, .28); background: rgba(6, 9, 20, .5); border-radius: 2px;
  color: var(--ink-2); font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.chip.plain { padding: 0 14px; }
.chip img { width: 22px; height: 22px; object-fit: contain; }
.chip[data-k="cls"]::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--c, transparent); box-shadow: 0 0 8px var(--c, transparent); }
.chip[data-k="cls"].plain::before { display: none; }
.chip:hover { color: var(--ink); border-color: rgba(246, 210, 122, .6); }
.chip[aria-pressed="true"] { color: #2a1600; border-color: #fff0b8; background: linear-gradient(180deg, #fbe39a 0%, #e1ad48 50%, #c48a2c 100%); font-weight: 700; box-shadow: 0 0 14px rgba(255, 190, 90, .35); }
.chip[data-k="cls"][aria-pressed="true"] img { filter: brightness(0) opacity(.7); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 8px 0 0; margin-top: 4px; border-top: 1px solid var(--line-soft); }
.bar .spacer { margin-right: auto; }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-2); font-size: 13.5px; user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .sw { width: 38px; height: 20px; border-radius: 2px; border: 1px solid var(--line); background: rgba(6, 9, 20, .6); position: relative; transition: background-color .15s; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--ink-3); transform: rotate(45deg); transition: transform .15s, background-color .15s; }
.toggle input:checked + .sw { background: rgba(212, 166, 74, .25); border-color: var(--gold-hi); }
.toggle input:checked + .sw::after { transform: translateX(18px) rotate(45deg); background: var(--gold-hi); box-shadow: 0 0 8px var(--gold-hi); }
.toggle input:focus-visible + .sw { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 2px; background: rgba(6, 9, 20, .55); }
.seg button { border: 0; background: none; padding: 4px 14px; border-radius: 1px; cursor: pointer; color: var(--ink-2); font-size: 13px; }
.seg button[aria-pressed="true"] { color: #2a1600; font-weight: 700; background: linear-gradient(180deg, #fbe39a, #d9a440); }
.qtag { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-hi); font-size: 14px; font-weight: 700; }
.qtag button { border: 1px solid var(--line); background: rgba(6, 9, 20, .5); color: var(--ink); border-radius: 2px; padding: 1px 10px; cursor: pointer; font-size: 12px; }

.grid {
  position: relative; z-index: 1; list-style: none; margin: 0; padding: 26px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 22px 14px;
}
.grid > li { animation: card-in .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.hcard { display: block; }
.hcard-art {
  position: relative; aspect-ratio: 192 / 280; border-radius: 2px; overflow: hidden; background: #0c1330;
  box-shadow: 0 0 0 1px rgba(212, 166, 74, .45), 0 0 0 3px #050816, 0 12px 22px -10px #000; transition: transform .25s, box-shadow .25s;
}
.hcard-art img { width: 100%; height: 100%; object-fit: cover; }
.hcard-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(5, 8, 22, .55), transparent 35%); }
.hcard-art::after { content: ""; position: absolute; inset: -20% auto -20% -70%; width: 45%; z-index: 2; background: linear-gradient(100deg, rgba(255, 230, 170, 0), rgba(255, 230, 170, .45), rgba(255, 230, 170, 0)); transform: skewX(-16deg); opacity: 0; pointer-events: none; }
.hcard:hover .hcard-art::after { animation: sweep .75s ease-out; }
.hcard:hover .hcard-art { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 0 3px #050816, 0 0 0 4px rgba(246, 210, 122, .5), 0 0 28px rgba(255, 170, 70, .45), 0 16px 26px -10px #000; }
.hcard-name { display: flex; align-items: center; gap: 5px; margin-top: 9px; color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.hcard:hover .hcard-name { color: var(--gold-hi); }
.hcard-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcard-meta { display: flex; align-items: center; gap: 4px; min-height: 18px; color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.hcard-meta img { width: 15px; height: 15px; object-fit: contain; opacity: .75; }
.mini { flex: none; font: 800 11px/1 var(--sans); font-style: normal; padding: 3px 6px; border-radius: 2px; }
.mini.lord { background: #2a1058; color: #e2cfff; box-shadow: 0 0 0 1px #9b6bff; }
.mini.new { background: linear-gradient(180deg, #ff8a4a, #c2261a); color: #fff; box-shadow: 0 0 10px rgba(255, 100, 40, .6); }
.empty { grid-column: 1 / -1; padding: 56px 0; text-align: center; color: var(--ink-2); }
.empty h3 { margin: 0 0 6px; font: 800 20px var(--serif); color: var(--gold-hi); }
.empty p { margin: 0 auto; max-width: 30em; }
.empty .btn { margin-top: 16px; }

/* 作者 */
.author { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 24px; margin-top: 56px; }
.author img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #050816, 0 0 0 2.5px var(--gold), 0 0 16px rgba(246, 210, 122, .3); }
.author b { display: block; font: 800 17px var(--serif); color: var(--gold-hi); letter-spacing: .06em; }
.author span { color: var(--ink-2); font-size: 13px; }
.visits { display: flex; gap: 26px; margin: 0 0 0 auto; }
.visits div { text-align: right; }
.visits dt { color: var(--ink-3); font-size: 12px; }
.visits dd { margin: 0; font: 700 22px var(--num); color: var(--gold-hi); text-shadow: 0 0 12px rgba(246, 210, 122, .35); }
.data-note { position: relative; z-index: 1; margin: 14px 0 0; color: var(--ink-3); font-size: 12.5px; }
.data-note a { color: var(--ink-2); border-bottom: 1px solid var(--line); }

/* ================= 英雄详情 ================= */
/* 顶部大色块：职业颜色压暗，人物背后一团职业色的光 */
.band-hero {
  background:
    radial-gradient(42% 60% at 24% 52%, color-mix(in srgb, var(--b1) 55%, transparent), transparent 70%),
    radial-gradient(60% 50% at 100% 0%, rgba(255, 220, 150, .12), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--b2) 75%, #000) 0%, color-mix(in srgb, var(--b2) 40%, #0a1028) 60%, #0a1028 100%);
}
.band-hero .sky-fire { background: radial-gradient(closest-side, color-mix(in srgb, var(--b1) 50%, transparent), transparent); }
.band-hero .dhead { padding-bottom: 170px; }
.dnav { display: flex; align-items: center; gap: 8px; padding: 20px 0 4px; }
.dnav .back { margin-right: auto; }
.dhead { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding-top: 6px; }
.dhead .stage-art { aspect-ratio: 1 / 1.02; }
.dhead .stage-art::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--b1) 65%, transparent), transparent); }
.dhead .stage-art .heroes { animation-duration: 7s, 1.1s; }
.dname { font-size: clamp(42px, 5.6vw, 68px); }
.dline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px 0 7px; border-radius: 2px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: rgba(5, 8, 22, .5); border: 1px solid rgba(212, 166, 74, .4); backdrop-filter: blur(6px);
}
.pill img { width: 22px; height: 22px; object-fit: contain; }
.pill.cls { color: #2a1600; background: linear-gradient(180deg, #fbe39a, #d9a440); border-color: #fff0b8; font-weight: 800; }
.pill.cls img { filter: brightness(0) opacity(.7); }
.pill.lord { color: #e2cfff; background: #2a1058; border-color: #9b6bff; padding-left: 13px; }
.pill.date { padding-left: 13px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tag { padding: 3px 12px; border-radius: 2px; font-size: 13px; color: var(--ink-2); background: rgba(5, 8, 22, .35); border: 1px solid rgba(241, 230, 200, .2); cursor: pointer; }
.tag:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.special { margin: 20px 0 0; padding-left: 16px; max-width: 40em; font-size: 15.5px; line-height: 1.9; color: var(--ink); border-left: 2px solid var(--gold); text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

.sec { padding: 30px 0 6px; }
.sec + .sec { margin-top: 18px; }
.sec .sec-head .seg { margin-left: auto; }
.sub-h { margin: 30px 0 12px; font: 800 18px var(--serif); }
.sub-h.ribbon { display: flex; margin: 44px 0 20px; font-size: 30px; }

.meter { position: relative; height: 6px; border-radius: 1px; background: rgba(241, 230, 200, .1); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--halo); transform-origin: left; animation: grow .6s cubic-bezier(.2, .7, .2, 1) both; box-shadow: 0 0 8px rgba(255, 160, 60, .6); }
.meter.dim i { background: rgba(241, 230, 200, .3); box-shadow: none; }
@keyframes grow { from { transform: scaleX(0); } }
.pct { font: 700 15px/1 var(--num); color: var(--ink); white-space: nowrap; }
.pct small { font-size: 11px; color: var(--ink-3); margin-left: 1px; }
.eq { display: grid; gap: 12px; }
.eq-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 236px; gap: 18px; align-items: center; padding: 16px 20px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--gold); font-size: 13px; font-weight: 700; }
.slot img { width: 38px; height: 38px; object-fit: contain; opacity: .85; filter: sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(.95); }
.opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.opt { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.opt-icon { width: 50px; height: 50px; object-fit: contain; grid-row: span 2; border-radius: 2px; background: radial-gradient(circle, #1f2a58, #0a1028); box-shadow: 0 0 0 1px rgba(212, 166, 74, .3); }
.opt.is-top .opt-icon { box-shadow: 0 0 0 1px var(--gold-hi), 0 0 12px rgba(246, 210, 122, .4); }
.opt-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-rate { display: flex; align-items: center; gap: 8px; }
.opt-rate .meter { flex: 1; }
.attrs { display: grid; gap: 8px; font-size: 12px; color: var(--ink-3); }
.attrs-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.attrs-k { width: 3.2em; flex: none; }
.attr { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; border-radius: 2px; background: rgba(5, 8, 22, .5); border: 1px solid var(--line-soft); color: var(--ink); font-size: 12px; }
.attr img { width: 18px; height: 18px; object-fit: contain; opacity: .8; }
.attr.main { color: var(--gold-hi); border-color: var(--line); background: rgba(212, 166, 74, .12); font-weight: 700; }
.sets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.set { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 2px; background: rgba(5, 8, 22, .4); }
.set img { width: 40px; height: 40px; object-fit: contain; grid-row: span 2; }
.set b { font-size: 13.5px; color: var(--gold-hi); }
.set span { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.arts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.artf { display: grid; grid-template-columns: 60px minmax(0, 1fr) 210px; gap: 16px; align-items: center; padding: 14px 20px; }
.artf img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 190, 90, .25)); }
.artf-name { font: 800 16px var(--serif); color: var(--gold-hi); }
.artf-desc { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin-top: 2px; }
.artf .pct { min-width: 4.2em; text-align: right; }
.artf:first-child { border-color: var(--gold-hi); }
.teams { display: grid; gap: 12px; }
.team { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 16px 20px; }
.team-no { color: var(--ink-3); font-size: 13px; }
.team-no b { display: block; font: 700 28px/1 var(--num); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 92px)); gap: 12px; }
.mem { display: block; position: relative; text-align: center; font-size: 12.5px; color: var(--ink-2); }
.mem span { display: block; margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem .mini { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; }
a.mem:hover .hcard-art { box-shadow: 0 0 0 1px var(--gold-hi), 0 0 0 3px #050816, 0 0 18px rgba(255, 170, 70, .4); }
a.mem:hover span { color: var(--gold-hi); }
.mem.self .hcard-art { box-shadow: 0 0 0 1.5px var(--gold-hi), 0 0 0 3px #050816, 0 0 0 4px var(--gold); }
.mem.self span { color: var(--gold-hi); font-weight: 800; }
.scenes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.scene { display: grid; grid-template-columns: 120px minmax(0, 1fr) 4.6em; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.scene img { width: 120px; height: 38px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(212, 166, 74, .3); }
.scene-name { font-size: 13.5px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene .pct { text-align: right; }
.scene.hot .pct { color: var(--gold-hi); }
.scene:not(.hot) .pct { color: var(--ink-3); }
.nodata { padding: 22px 18px; border: 1px dashed var(--line); border-radius: 2px; color: var(--ink-2); background: rgba(5, 8, 22, .4); }
.loading { padding: 120px 0; text-align: center; color: var(--ink-3); }

/* ================= 窄屏 ================= */
@media (max-width: 1020px) {
  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entries { grid-template-columns: 1fr; max-width: 560px; gap: 10px; }
  .entry { min-height: 84px; }
  .eq-row { grid-template-columns: 64px minmax(0, 1fr); }
  .attrs { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; padding-top: 10px; border-top: 1px solid var(--line-soft); }
  .scenes { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .hero-band { min-height: 0; padding: 300px 0 56px; }
  .kv-art { width: 210vw; }
  .hero-band .orn-flame { width: 70vw; left: -40px; }
  .hero-band .orn-cloud { width: 70vw; right: -50px; }
  .kv-frame { inset: 8px; --cs: 56px; }
  .kv-compass { width: 54px; }
  .gem { display: none; }
  .hero-title { font-size: 36px; }
  .subline { font-size: 14px; gap: 8px; white-space: normal; }
  .subline::before, .subline::after { display: none; }
  .hero-kicker { letter-spacing: .25em; font-size: 12px; }
  .hero-sub { font-size: 15px; }
  .finder { margin-top: 20px; }
  .search { height: 54px; padding: 0 16px; }
  .search input { font-size: 16px; }
  .search kbd { display: none; }
  .entry { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 12px 12px 12px 14px; min-height: 74px; }
  .entry .medal { width: 46px; height: 46px; }
  .entry-txt b { font-size: 17px; }
  .tools { padding: 50px 0 70px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wing { width: 64px; }
  .swords-divider { width: 84px; }
  .birds .fea:nth-of-type(n+4) { display: none; }
  .dex-head { gap: 6px; }
  .dex-title .ribbon { font-size: 26px; }
  .birds i:nth-child(n+3) { display: none; }
  .tools .tool { padding: 14px 10px; }
  .tool .medal { width: 44px; height: 44px; }
  .tool .medal svg { width: 20px; height: 20px; }
  .tool b { font-size: 14.5px; }
  .tool span:not(.medal) { display: none; }
  .dex { padding-top: 50px; }
  .filters { padding: 12px; }
  .frow { flex-direction: column; gap: 6px; }
  .frow-k { padding-top: 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 6px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 10px; }
  .band-hero .dhead { padding-bottom: 140px; }
  .dhead { grid-template-columns: 1fr; gap: 6px; }
  .dhead .stage-art { max-width: 320px; width: 100%; margin: 0 auto; }
  .sec .sec-head .seg { margin-left: 0; }
  .sub-h.ribbon { font-size: 24px; }
  .eq-row { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px; }
  .slot { flex-direction: row; }
  .slot img { width: 28px; height: 28px; }
  .opts { grid-template-columns: 1fr; gap: 10px; }
  .attrs { grid-template-columns: 1fr; }
  .artf { grid-template-columns: 52px minmax(0, 1fr); padding: 12px 14px; }
  .artf img { width: 52px; height: 52px; }
  .artf .opt-rate { grid-column: 1 / -1; }
  .team { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .team-no b { display: inline; font-size: 16px; margin-left: 4px; }
  .members { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .scene { grid-template-columns: 88px minmax(0, 1fr) 4.4em; gap: 10px; }
  .scene img { width: 88px; height: 28px; }
  .visits { margin-left: 0; }
}
/* 图鉴标题下的「英雄数值榜」入口 + 详情页「去数值榜对比」 */
.dex-stats { margin-top: 14px; min-height: 44px; padding: 0 24px; font-size: 15px; }
.sec .sec-head .hs-more { margin-left: auto; min-height: 36px; padding: 0 16px; font-size: 13.5px; }
@media (max-width: 760px) { .sec .sec-head .hs-more { margin-left: 0; } }