/* Cinzel 显示字体本地托管(80KB woff2, 4 字重)——原走 Google Fonts, 在中国大陆被墙导致标题降级为系统衬线。本地化后全镜像可靠加载。 */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/cinzel-400.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/cinzel-600.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/cinzel-700.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fonts/cinzel-900.woff2") format("woff2"); }

/* ============================================================
   冰封回响 · War3 怀旧攻略站 — 全站设计系统
   Warcraft III 风格：暗色石木底 + 金色浮雕框 + 阵营配色
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  color-scheme: dark;
  /* 底色：温暖的近黑石木色 */
  --bg-0: #080502;
  --bg-1: #100b06;
  --bg-2: #191209;
  --panel: #16100a;
  --panel-hi: #211809;
  --edge-dark: #050302;

  /* 金色系（WC3 UI 金属框） */
  --gold: #c9a227;
  --gold-bright: #ffd75e;
  --gold-glow: #fff3c8;
  --gold-pale: #e9d5a0;
  --gold-dim: #957633; /* 装饰用(边框/渐变/悬停), 对比度无要求; 小字见 --gold-kicker */
  --gold-kicker: #a98a44; /* WCAG AA: ≤14px 金色小字(fc-label/card-kicker/ci-ding), 面板上 5.3+ 达标 */
  --gold-faint: #4a3b1a;

  /* 文本 */
  --text: #d9c9a1;
  --text-dim: #a29169;
  --text-faint: #9a8a68; /* WCAG AA: 面包屑/元数据小字, 面板背景上 4.0→5.2 达标(原 #877758 仅在最暗 bg-0 通过) */

  /* 阵营色 */
  --hum: #3f83e0;   --hum-hi: #9cc5ff;
  --orc: #c43c2e;   --orc-hi: #ff9a86;
  --ud:  #9a4fd0;   --ud-hi:  #d3a6ff;
  --ne:  #23a878;   --ne-hi:  #8df0c6;
  --neu: #c9862b;   --neu-hi: #ffcf87;

  /* 功能色（游戏内提示配色） */
  --hp: #47c94b;
  --mp: #3f7de0;
  --xp: #b96cf0;
  --active-skill: #8fd7ff;   /* 主动技能 淡蓝 */
  --passive-skill: #a6f0a6;  /* 被动技能 淡绿 */
  --warn: #ff6a5e;

  --font-head: "Cinzel", "Noto Serif SC", "STZhongsong", serif;
  --font-body: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-mono: "Consolas", "Courier New", "Noto Sans Mono", monospace;

  --radius: 3px;
  --shadow-panel: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,215,94,.06);
  --speed: 1;
}

/* warpten 秘籍：全站动画加速 */
body.warpten { --speed: .25; }

/* ---------- Reset & Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
/* War3 风格金色指针：致敬游戏内 gauntlet 金手。默认光标用之；
   链接/按钮等已有 cursor:pointer 的元素保持手型(可点击反馈)，输入框用文本光标 */
html { cursor: url("../assets/img/cursor-pointer.png") 5 3, auto; }
input, textarea, select { cursor: text; }

/* 屏幕阅读器专用：视觉隐藏但读屏可达。供小游戏 aria-live 状态区(每关题目播报)等，
   视觉零影响——对键盘/鼠标用户完全不可见，仅助视障用户获取动态游戏状态。 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* 暗色羊皮纸底：温暖陈年羊皮纸 + 烛光感 + 纤维纹理 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1400px 700px at 50% -5%, rgba(201,162,39,.08), transparent 65%),
    radial-gradient(800px 500px at 15% 80%, rgba(139,90,43,.05), transparent 60%),
    radial-gradient(700px 400px at 85% 25%, rgba(160,110,50,.03), transparent 60%),
    linear-gradient(165deg, #0f0a06 0%, #0c0805 35%, #0a0704 65%, #0d0906 100%);
}
/* body::after 基座: content/position/inset/z-index —— 缺这些伪元素根本不生成,
   致地图网格底纹(L1435)、godmode 金光脉动(L769)、wc3-night 夜间层(L217) 全部失效。
   z-index:-1 位于 body::before(-2) 之上、内容(0+)之下; 与 body::before 同为全屏 fixed 层。 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}

::selection { background: rgba(201,162,39,.35); color: #fff3d0; }

/* 金质 SVG 图标：内联 <svg> 经 data-ico 填充或 wc3Icon() 注入；
   尺寸跟随 font-size（em），颜色随 color（默认金色），任意缩放不糊 */
.wc3-ico {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -.14em; line-height: 0; color: var(--gold-bright);
}
.wc3-ico svg { width: 1em; height: 1em; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.wc3-ico.lg svg { filter: drop-shadow(0 0 10px rgba(201,162,39,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
a:hover > .wc3-ico, button:hover > .wc3-ico, .wc3-ico.glow { color: var(--gold-glow); }
.wc3-ico.dim { color: var(--gold-kicker); }

/* 艾泽拉斯昼夜钟（页脚 · 太阳/月亮沿天穹滑动，24 游戏时≈12 真实分钟一圈） */
.foot-clock-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 14px; }
.foot-clock {
  position: relative; width: 156px; height: 22px; border-radius: 11px;
  border: 1px solid var(--gold-faint); cursor: pointer; overflow: hidden;
  box-shadow: inset 0 0 7px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
  transition: border-color calc(.25s * var(--speed)) ease;
}
.foot-clock:hover { border-color: var(--gold-bright); }
.fc-sky {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    #0a1030 0%, #15235a 13%, #5a3f78 22%, #b87838 30%,
    #d9a93a 42%, var(--gold-bright) 50%, #d9a93a 58%, #b87838 70%,
    #5a3f78 78%, #15235a 87%, #0a1030 100%);
}
.fc-orb {
  position: absolute; top: 50%; left: 0;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 35%, #fff7da, var(--gold-bright) 70%, #c98a3a);
  box-shadow: 0 0 9px 2px rgba(255,215,94,.75);
  transition: left 1s linear, background .6s ease, box-shadow .6s ease;
  z-index: 2;
}
.fc-orb.night {
  background: radial-gradient(circle at 35% 35%, #f2f6ff, #aec4e6 70%, #6f86b0);
  box-shadow: 0 0 8px 2px rgba(174,196,230,.6);
}
.fc-orb .wc3-ico { color: #6a4a10; font-size: 11px; }
.fc-orb.night .wc3-ico { color: #2a3a5a; }
.fc-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--gold-kicker); }
@media (prefers-reduced-motion: reduce) { .fc-orb { transition: none; } }

/* 首页『今日推荐』banner：悬停金色描边 + 微抬 */
#daily-pick { transition: border-color calc(.2s * var(--speed)), box-shadow calc(.2s * var(--speed)), transform calc(.2s * var(--speed)); }
#daily-pick:hover { border-color: var(--gold-bright) !important; box-shadow: 0 0 22px rgba(255,215,94,.25); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { #daily-pick:hover { transform: none; } }

/* 音乐页四族卡片：种族色左边框，呼应站内种族色彩体系 */
.music-race { border-left: 3px solid var(--rc, var(--gold)); }
.music-race[data-race="hum"] { --rc: var(--hum-hi); }
.music-race[data-race="orc"] { --rc: var(--orc-hi); }
.music-race[data-race="ud"]  { --rc: var(--ud-hi); }
.music-race[data-race="ne"]  { --rc: var(--ne-hi); }

/* 金色卷草分隔花饰 —— 章节之间的纹章式分隔线（中心宝石 + 左右卷草 + 渐隐金线） */
.filigree {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 30px auto; max-width: 560px; height: 22px; opacity: .85;
}
.filigree::before, .filigree::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold) 50%, var(--gold-dim) 70%, transparent);
  transform: scaleX(0);
  transition: transform calc(.9s * var(--speed)) cubic-bezier(.2,.8,.2,1);
}
.filigree.in::before { transform: scaleX(1); }
.filigree.in::after { transform: scaleX(1); transition-delay: calc(.12s * var(--speed)); }
.filigree .fl-gem {
  width: 11px; height: 11px; transform: rotate(45deg); flex: none;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  box-shadow: 0 0 9px rgba(255,215,94,.6);
  animation: gemPulse calc(3.2s * var(--speed)) ease-in-out infinite;
}
.filigree .fl-fern {
  width: 30px; height: 18px; flex: none; color: var(--gold);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.filigree .fl-fern svg { width: 100%; height: 100%; display: block; }
.filigree .fl-fern.l { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .filigree::before, .filigree::after { transform: scaleX(1); transition: none; }
  /* 全局降级: 所有动画/过渡近瞬时(含游戏内 timer/fadeUp/pop/rise 等 var(--speed) 未覆盖的) */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 键盘可达性：跳到主内容（首次 Tab 浮现） */
.skip-link {
  position: fixed; top: -64px; left: 18px; z-index: 9999;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1a1206; padding: 10px 20px; border-radius: 0 0 4px 4px;
  font-family: var(--font-head); font-size: 14px; letter-spacing: .12em;
  text-decoration: none; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.6);
  transition: top calc(.2s * var(--speed)) cubic-bezier(.2,.8,.2,1);
}
.skip-link:focus { top: 0; outline: none; }

/* 深链高亮：直达 units.html#footman / glossary.html#glos-dota 等时，目标条目或章节
   金色高亮 2.8s 吸引注意（原生锚点滚动已由 html{scroll-padding-top:80px} 避开顶栏）。
   排除 <main>——skip-link 锚 #wc3-main 不该整页闪。纯 CSS、有 hash 才生效、视觉克制。 */
:target:not(main) { animation: wc3-target 2.8s ease-out; }
@keyframes wc3-target {
  0% { background-color: rgba(255,215,94,.25); box-shadow: 0 0 0 2px var(--gold-bright), 0 0 16px rgba(255,215,94,.35); }
  100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
}
/* 表格行：display:table-row 不渲染 box-shadow，且 td 自带背景(L437 偶数行/hover)会遮盖
   tr 的 background，故 units 大全等表格行改对其 td 高亮才可见。 */
tr:target td { animation: wc3-target-cell 2.8s ease-out; }
@keyframes wc3-target-cell {
  0% { background-color: rgba(255,215,94,.3); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  :target:not(main) { animation: none; background-color: rgba(255,215,94,.12); }
  tr:target td { animation: none; background-color: rgba(255,215,94,.15); }
}

/* 深链锚点「#」: 单位/物品名后, 悬停或键盘聚焦该行/卡才显出。
   点击即滚动并以 :target 高亮该条(见上); 右键可复制直达链接分享。密集列表默认隐以减噪。 */
.entry-anchor {
  display: inline-block;
  margin-left: .35em;
  padding: 0 .28em;
  font-size: .82em;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-kicker);
  text-decoration: none;
  vertical-align: baseline;
  opacity: 0;
  transition: opacity calc(.15s * var(--speed)), color calc(.15s * var(--speed));
}
.entry-anchor:hover, .entry-anchor:focus-visible { color: var(--gold-bright); opacity: 1; }
tr:hover .entry-anchor, .card:hover .entry-anchor,
tr:focus-within .entry-anchor, .card:focus-within .entry-anchor { opacity: .8; }
/* 触屏无 hover: 锚点常驻淡显, 否则移动端既看不到也点不到(无法分享/直达) */
@media (hover: none) {
  .entry-anchor { opacity: .5; }
}

/* 全局键盘焦点可见态（鼠标操作不显示，仅键盘 Tab） */
a:focus-visible, summary:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 2px;
  border-radius: 2px; box-shadow: 0 0 12px rgba(255,215,94,.4);
}

/* daylightsavings 秘籍：夜间主题（冷暖反转——金色 UI 如火把，背景沉入寒夜） */
body::before { transition: background .9s ease; }
body.wc3-night::before {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(63,125,224,.14), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(35,168,120,.07), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(120,80,200,.06), transparent 60%),
    linear-gradient(180deg, #060a16, #02050c 42%, #01030a 100%);
}
body.wc3-night::after { opacity: .42; }

/* 金字标题彩蛋：连点 5 次触发金属乐 */
@keyframes titleWiggle {
  0% { transform: none; }
  25% { transform: scale(1.05) rotate(-1.2deg); }
  55% { transform: scale(1.06) rotate(1.2deg); }
  100% { transform: none; }
}
.page-hero h1.title-egg, .home-hero h1.title-egg { animation: titleWiggle calc(.42s * var(--speed)) ease; }

/* 滚动条 */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0c0805; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5a4720, #33270f);
  border: 2px solid #0c0805;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7d6226, var(--gold-faint)); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.35; }

a { color: var(--gold-pale); text-decoration: none; transition: color calc(.18s * var(--speed)); }
a:hover { color: var(--gold-bright); text-shadow: 0 0 8px rgba(255,215,94,.45); }

p { margin: .6em 0; }
strong { color: var(--gold-pale); }
em { color: var(--text); font-style: normal; border-bottom: 1px dotted var(--gold-dim); }

/* 金色渐变大标题 */
.gold-text {
  background: linear-gradient(180deg, var(--gold-glow) 0%, var(--gold-bright) 35%, var(--gold) 60%, var(--gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.9));
}

/* 章节标题：两侧饰线 */
.section-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 48px 0 22px;
  font-size: 26px;
  letter-spacing: .12em;
  color: var(--gold-pale);
}
.section-title::before, .section-title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.section-title::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.section-title .st-gem {
  width: 10px; height: 10px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  box-shadow: 0 0 8px rgba(255,215,94,.5);
  flex: none;
}
.section-sub { text-align: center; color: var(--text-dim); margin: -12px 0 26px; letter-spacing: .2em; font-size: 13px; }

/* ---------- Layout ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 22px 80px; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- 饰角浮雕面板 .frame ---------- */
.frame {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,215,94,.045), transparent 120px),
    linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--gold-faint);
  outline: 1px solid rgba(0,0,0,.9);
  box-shadow: var(--shadow-panel);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.frame::before, .frame::after,
.frame > .fc::before, .frame > .fc::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M1 25 V6 Q1 1 6 1 H25' fill='none' stroke='%23c9a227' stroke-width='2'/%3E%3Cpath d='M4 25 V8 Q4 4 8 4 H25' fill='none' stroke='%235d4a1e' stroke-width='1.2'/%3E%3Crect x='0' y='0' width='7' height='7' transform='rotate(45 3.5 3.5) translate(3 -4)' fill='%23e9c85e'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
.frame::before { top: -4px; left: -4px; }
.frame::after  { top: -4px; right: -4px; transform: scaleX(-1); }
.frame > .fc::before { bottom: -4px; left: -4px; transform: scaleY(-1); }
.frame > .fc::after  { bottom: -4px; right: -4px; transform: scale(-1); }
.frame > .fc { position: static; }

/* 面板标题条 */
.frame-head {
  margin: -26px -28px 20px;
  padding: 13px 24px;
  background: linear-gradient(180deg, #2c2110, #1a1206);
  border-bottom: 1px solid var(--gold-faint);
  font-family: var(--font-head);
  font-size: 19px;
  letter-spacing: .1em;
  color: var(--gold-pale);
  text-shadow: 0 1px 0 #000;
  display: flex; align-items: center; gap: 10px;
}
.frame-head .fh-icon { filter: drop-shadow(0 0 6px rgba(255,215,94,.35)); }

/* ---------- 卡片 ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--gold-faint);
  outline: 1px solid rgba(0,0,0,.85);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: transform calc(.22s * var(--speed)) ease, border-color calc(.22s * var(--speed)), box-shadow calc(.22s * var(--speed));
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-dim);
  box-shadow: 0 14px 34px rgba(0,0,0,.7), 0 0 18px rgba(201,162,39,.12);
}
a.card { display: block; color: var(--text); }
.card h3 { color: var(--gold-pale); font-size: 18px; margin-bottom: 8px; letter-spacing: .06em; }
.card .card-desc { color: var(--text-dim); font-size: 14px; line-height: 1.8; }
.card .card-kicker { font-size: 12px; letter-spacing: .25em; color: var(--gold-kicker); margin-bottom: 6px; }

/* ---------- 阵营主题 ---------- */
[data-race="hum"] { --rc: var(--hum); --rc-hi: var(--hum-hi); }
[data-race="orc"] { --rc: var(--orc); --rc-hi: var(--orc-hi); }
[data-race="ud"]  { --rc: var(--ud);  --rc-hi: var(--ud-hi); }
[data-race="ne"]  { --rc: var(--ne);  --rc-hi: var(--ne-hi); }
[data-race="neu"] { --rc: var(--neu); --rc-hi: var(--neu-hi); }
[data-race="all"] { --rc: var(--gold-dim); --rc-hi: var(--gold-bright); } /* 四族商店通用(药水等): 中性金, 区别于单族色 */

.race-card { border-top: 3px solid var(--rc); }
.race-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.7), 0 0 22px color-mix(in srgb, var(--rc) 35%, transparent); }
.race-tag {
  display: inline-block;
  padding: 1px 10px 2px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--rc-hi);
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  background: color-mix(in srgb, var(--rc) 14%, transparent);
  border-radius: 2px;
  vertical-align: 2px;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--gold-pale);
  background: linear-gradient(180deg, #38290f, #201607 55%, #17100a);
  border: 1px solid var(--gold-dim);
  outline: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,215,94,.25), 0 4px 10px rgba(0,0,0,.6);
  padding: 10px 26px;
  border-radius: 2px;
  text-shadow: 0 1px 0 #000;
  transition: all calc(.18s * var(--speed));
  user-select: none;
}
.btn:hover {
  color: var(--gold-glow);
  border-color: var(--gold-bright);
  box-shadow: inset 0 1px 0 rgba(255,215,94,.35), 0 0 16px rgba(255,215,94,.35);
  text-shadow: 0 0 8px rgba(255,215,94,.8);
}
.btn:active { transform: translateY(1px); }
.btn-race { border-color: color-mix(in srgb, var(--rc) 70%, #000); color: var(--rc-hi); }
.btn-race:hover { border-color: var(--rc-hi); box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 45%, transparent); }
.btn-big { font-size: 18px; padding: 14px 40px; }

/* ---------- 表格 ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 14px 0; }
.tbl th {
  font-family: var(--font-head);
  background: linear-gradient(180deg, #2c2110, #1c1409);
  color: var(--gold-pale);
  border: 1px solid var(--gold-faint);
  padding: 9px 12px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.tbl td { border: 1px solid #241b0e; padding: 8px 12px; vertical-align: top; }
.tbl tr:nth-child(even) td { background: rgba(255,215,94,.025); }
.tbl tr:hover td { background: rgba(255,215,94,.06); }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0; }
.tbl-scroll table { margin: 0; }
/* 小屏表格横向滚动条更醒目，提示可滑动 */
@media (max-width: 620px) {
  .tbl-scroll { padding-bottom: 4px; }
  .tbl-scroll::-webkit-scrollbar { height: 8px; }
  .tbl-scroll::-webkit-scrollbar-thumb { background: rgba(255,215,94,.35); border-radius: 4px; }
}

/* ---------- 快捷键 kbd ---------- */
kbd, .kbd {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 0 7px;
  font: 600 12.5px/22px var(--font-head);
  color: var(--gold-bright);
  background: linear-gradient(180deg, #2e2410, #191106);
  border: 1px solid var(--gold-dim);
  border-bottom-width: 3px;
  border-radius: 3px;
  box-shadow: 0 1px 0 #000;
  margin: 0 2px;
}

/* ---------- 游戏内风格 Tooltip ---------- */
#wc3-tooltip {
  position: fixed;
  z-index: 9000;
  max-width: 340px;
  padding: 12px 15px;
  background: rgba(8,5,2,.96);
  border: 1px solid var(--gold-dim);
  outline: 1px solid #000;
  box-shadow: 0 8px 24px rgba(0,0,0,.8), inset 0 0 40px rgba(201,162,39,.05);
  border-radius: 3px;
  font-size: 13.5px;
  line-height: 1.7;
  pointer-events: none;
  opacity: 0;
  transition: opacity calc(.12s * var(--speed));
}
#wc3-tooltip.show { opacity: 1; }
#wc3-tooltip .tt-name { color: var(--gold-bright); font-weight: 700; font-size: 15px; }
#wc3-tooltip .tt-type { color: var(--text-dim); font-size: 12px; margin-bottom: 4px; }
#wc3-tooltip .tt-active { color: var(--active-skill); }
#wc3-tooltip .tt-passive { color: var(--passive-skill); }
.has-tip { cursor: help; border-bottom: 1px dotted var(--gold-dim); }

/* ---------- HP/MP 条 ---------- */
.bar { height: 14px; background: #0a0704; border: 1px solid #000; outline: 1px solid var(--gold-faint); border-radius: 2px; overflow: hidden; }
.bar > i {
  display: block; height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bar-c, var(--hp)) 100%, #fff 25%), var(--bar-c, var(--hp)));
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.4);
  transition: width calc(.5s * var(--speed)) ease;
}
.bar-hp > i { --bar-c: var(--hp); }
.bar-mp > i { --bar-c: var(--mp); }
.bar-xp > i { --bar-c: var(--xp); }
.bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 3px; }

/* ---------- 星级 ---------- */
.stars { color: var(--gold-bright); letter-spacing: 3px; text-shadow: 0 0 6px rgba(255,215,94,.5); font-size: 14px; }
.stars .off { color: #3a2f18; text-shadow: none; }
.stars .wc3-ico { font-size: .96em; margin-right: 1px; }
.stars .st-off { color: #3a2f18; }
.stars .st-off svg { filter: none; }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-block; padding: 1px 9px 2px; font-size: 12px; border-radius: 2px;
  border: 1px solid var(--gold-dim); color: var(--gold-pale); background: rgba(201,162,39,.1);
  letter-spacing: .08em; margin: 0 3px 3px 0;
}
.badge-danger { border-color: #7a2a20; color: var(--orc-hi); background: rgba(196,60,46,.12); }
.badge-info   { border-color: #22456e; color: var(--hum-hi); background: rgba(63,131,224,.12); }
.badge-ok     { border-color: #1c5a41; color: var(--ne-hi);  background: rgba(35,168,120,.12); }

/* ---------- 羊皮纸引用块 ---------- */
.parchment {
  position: relative;
  margin: 26px 0;
  padding: 22px 28px;
  color: #3b2b12;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.25), transparent 70%),
    linear-gradient(180deg, #e8d5a9, #d9c08a 80%, #c8ad74);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6), inset 0 0 40px rgba(120,80,20,.25);
  font-size: 15.5px;
}
.parchment::before, .parchment::after {
  content: "❦";
  position: absolute; color: rgba(90,60,15,.5); font-size: 15px;
}
.parchment::before { top: 6px; left: 12px; }
.parchment::after { bottom: 6px; right: 12px; }
.parchment .pc-by { display: block; text-align: right; margin-top: 8px; color: #5e441a; font-size: 13.5px; } /* WCAG AA: 羊皮纸署名 4.34→5.11 */
.parchment strong { color: #241804; }
.parchment a { color: #5a3c0e; text-decoration: underline; }

/* ---------- 时间线（版本史） ---------- */
.timeline { position: relative; margin: 30px 0; padding-left: 40px; }
.timeline::before {
  content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-dim) 6%, var(--gold-dim) 94%, transparent);
}
.tl-item { position: relative; margin-bottom: 34px; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 8px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  box-shadow: 0 0 10px rgba(255,215,94,.55);
}
.tl-item.tl-major::before { width: 14px; height: 14px; left: -36px; }
.tl-date { font-family: var(--font-head); color: var(--gold-bright); font-size: 14px; letter-spacing: .15em; }
.tl-title { font-size: 20px; color: var(--gold-pale); margin: 2px 0 8px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; }
.tab {
  cursor: pointer; padding: 8px 22px; font-family: var(--font-head); font-size: 14.5px; letter-spacing: .1em;
  color: var(--text-dim); background: linear-gradient(180deg, #1e1609, #140e06);
  border: 1px solid var(--gold-faint); border-bottom: none; border-radius: 3px 3px 0 0;
  transition: all calc(.15s * var(--speed));
}
.tab:hover { color: var(--gold-pale); }
.tab.on { color: var(--gold-bright); background: linear-gradient(180deg, #33270f, #1c1409); border-color: var(--gold-dim); text-shadow: 0 0 8px rgba(255,215,94,.5); }
.tab-panel { display: none; }
.tab-panel.on { display: block; animation: fadeUp calc(.35s * var(--speed)) ease; }

/* ---------- 搜索/输入 ---------- */
.input, .search-input {
  width: 100%; padding: 10px 16px;
  font-family: var(--font-body); font-size: 15px; color: var(--gold-pale);
  background: rgba(5,3,1,.8);
  border: 1px solid var(--gold-faint); outline: 1px solid #000; border-radius: 2px;
  transition: border-color calc(.15s * var(--speed)), box-shadow calc(.15s * var(--speed));
}
.input:focus, .search-input:focus { border-color: var(--gold-dim); box-shadow: 0 0 12px rgba(201,162,39,.25); outline: none; }
.input::placeholder, .search-input::placeholder { color: var(--text-faint); }

/* 数据页排序下拉(units/items 共用) */
.sort-select { font: 600 13px/1 var(--font-head); color: var(--text); background: rgba(5,3,1,.6); border: 1px solid var(--gold-faint); border-radius: 3px; padding: 8px 10px; cursor: pointer; }
.sort-select:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
.sort-select option { background: #0e0904; color: var(--text); }

/* 筛选按钮组 */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.chip {
  cursor: pointer; padding: 5px 16px; font-size: 13.5px; letter-spacing: .08em;
  color: var(--text-dim); border: 1px solid var(--gold-faint); border-radius: 20px;
  background: rgba(255,215,94,.03); transition: all calc(.15s * var(--speed)); user-select: none;
}
.chip:hover { color: var(--gold-pale); border-color: var(--gold-dim); }
.chip.on { color: #120c04; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); font-weight: 700; }

/* ---------- 顶部导航 ---------- */
#topnav {
  position: sticky; top: 0; z-index: 800;
  background: linear-gradient(180deg, rgba(14,9,4,.98), rgba(10,6,3,.96));
  border-bottom: 1px solid var(--gold-faint);
  box-shadow: 0 2px 0 #000, 0 8px 30px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#topnav .nav-inner {
  max-width: 1380px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 6px; height: 62px;
}
#topnav .nav-logo { display: flex; align-items: center; gap: 10px; margin-right: 14px; flex: none; }
#topnav .nav-logo svg { filter: drop-shadow(0 0 6px rgba(255,215,94,.4)); }
#topnav .nav-logo .logo-txt { font-family: var(--font-head); font-size: 17px; letter-spacing: .12em; }
#topnav .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > span {
  display: block; padding: 20px 13px; cursor: pointer;
  font-family: var(--font-head); font-size: 14.5px; letter-spacing: .08em;
  color: var(--text-dim); white-space: nowrap;
  transition: color calc(.15s * var(--speed));
}
.nav-item:hover > a, .nav-item:hover > span, .nav-item.here > a {
  color: var(--gold-bright); text-shadow: 0 0 10px rgba(255,215,94,.55);
}
.nav-drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 168px; padding: 8px 0;
  background: linear-gradient(180deg, #1d1509, #120c05);
  border: 1px solid var(--gold-dim); outline: 1px solid #000;
  box-shadow: 0 14px 40px rgba(0,0,0,.85);
  border-radius: 3px;
  opacity: 0; visibility: hidden; transition: all calc(.18s * var(--speed));
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-item.open .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop a { display: block; padding: 9px 20px; font-size: 14px; color: var(--text-dim); }
.nav-drop a:hover { color: var(--gold-bright); background: rgba(255,215,94,.07); text-shadow: none; }
.nav-drop .nd-race-hum:hover { color: var(--hum-hi); }
.nav-drop .nd-race-orc:hover { color: var(--orc-hi); }
.nav-drop .nd-race-ud:hover  { color: var(--ud-hi); }
.nav-drop .nd-race-ne:hover  { color: var(--ne-hi); }

#nav-burger { display: none; margin-left: auto; cursor: pointer; padding: 10px; color: var(--gold-pale); font-size: 22px; }
@media (max-width: 1080px) {
  #nav-burger { display: block; }
  #topnav .nav-links {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, var(--panel), #0c0804);
    border-bottom: 1px solid var(--gold-dim);
    max-height: calc(100vh - 62px); overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,.8);
  }
  #topnav .nav-links.open { display: flex; }
  .nav-item > a, .nav-item > span { padding: 13px 26px; }
  .nav-drop {
    position: static; transform: none; opacity: 1; visibility: visible;
    border: none; outline: none; box-shadow: none; background: rgba(0,0,0,.35);
    display: none;
  }
  .nav-item:hover .nav-drop, .nav-item.open .nav-drop { display: block; transform: none; }
  .nav-drop a { padding-left: 46px; }
}
/* 手机端筛选片/标签页触控目标放大(原 .chip ~26px / .tab ~32px 偏小, 难点中) */
@media (max-width: 760px) {
  .chip { padding: 10px 18px; }
  .tab { padding: 12px 22px; }
}

/* ---------- 页脚 ---------- */
#site-footer {
  margin-top: 90px;
  border-top: 1px solid var(--gold-faint);
  background: linear-gradient(180deg, #0d0804, #070402);
  padding: 40px 22px 30px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13.5px;
}
#site-footer .foot-quote {
  font-family: var(--font-head);
  color: var(--text-dim); font-size: 15px; letter-spacing: .1em; margin-bottom: 14px;
  min-height: 1.6em;
}
#site-footer .foot-links { margin: 10px 0 16px; }
#site-footer .foot-links a { color: var(--text-dim); margin: 0 10px; font-size: 13.5px; }
#site-footer .foot-links a:hover { color: var(--gold-bright); }
#site-footer .sheep { cursor: pointer; display: inline-block; font-size: 18px; transition: transform .1s; user-select: none; }
#site-footer .sheep:active { transform: scale(1.25); }
#secret-link { display: none; }
body.dead-people #secret-link { display: inline; color: var(--ud-hi); animation: ghostIn 1.2s ease; }

/* ---------- 面包屑 ---------- */
.crumbs { padding: 18px 0 0; font-size: 13.5px; color: var(--text-faint); letter-spacing: .06em; }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs .cur { color: var(--gold-pale); }
.crumbs .sep { margin: 0 8px; color: var(--gold-dim); }

/* ---------- 页头横幅 ---------- */
.page-hero { text-align: center; padding: 54px 20px 30px; }
.page-hero h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: .14em; }
/* 首页「冰封回响」标题：金色字叠冷冽冰雾光晕，呼应冰封王座主题
   只改 filter（不碰 animation 属性，以免压制 titleWiggle 彩蛋与 goldShine 扫光） */
.home-hero h1.gold-text {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.92)), drop-shadow(0 0 26px rgba(150,205,255,.25));
}
.page-hero .hero-sub { color: var(--text-dim); letter-spacing: .3em; margin-top: 10px; font-size: 14px; }
.hero-divider {
  width: min(520px, 80%); height: 26px; margin: 18px auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 26'%3E%3Cpath d='M0 13 H210 M310 13 H520' stroke='%237d6226' stroke-width='1.5'/%3E%3Cpath d='M260 2 L272 13 L260 24 L248 13 Z' fill='none' stroke='%23c9a227' stroke-width='2'/%3E%3Cpath d='M260 7 L266 13 L260 19 L254 13 Z' fill='%23ffd75e'/%3E%3Ccircle cx='222' cy='13' r='3' fill='%237d6226'/%3E%3Ccircle cx='298' cy='13' r='3' fill='%237d6226'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

/* ---------- 提示/警示块 ---------- */
.note {
  margin: 18px 0; padding: 14px 18px 14px 46px; position: relative;
  border-left: 3px solid var(--gold); background: rgba(201,162,39,.06);
  border-radius: 0 3px 3px 0; font-size: 14.5px;
}
.note::before { content: "◈"; position: absolute; left: 16px; top: 12px; color: var(--gold-bright); }
.note-danger { border-color: var(--orc); background: rgba(196,60,46,.07); }
.note-danger::before { content: "⚔"; color: var(--orc-hi); }
.note-info { border-color: var(--hum); background: rgba(63,131,224,.07); }
.note-info::before { content: "❄"; color: var(--hum-hi); }
.note-ok { border-color: var(--ne); background: rgba(35,168,120,.07); }
.note-ok::before { content: "☘"; color: var(--ne-hi); }

/* ---------- BO 建造顺序列表 ---------- */
.bo-list { counter-reset: bo; list-style: none; margin: 14px 0; }
.bo-list li {
  counter-increment: bo; position: relative;
  padding: 9px 14px 9px 56px; margin-bottom: 6px;
  background: rgba(255,215,94,.03); border: 1px solid #241b0e; border-radius: 3px;
  font-size: 14.5px;
}
.bo-list li::before {
  content: counter(bo, decimal-leading-zero);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-head); font-size: 15px; color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(255,215,94,.4);
}
.bo-list li .bo-time { float: right; color: var(--text-faint); font-size: 12.5px; }
/* 建造顺序一键复制按钮（main.js 自动注入到每个 .bo-list 前） */
.bo-copy {
  float: right; cursor: pointer; font-family: var(--font-head); font-size: 12px; letter-spacing: .06em;
  color: var(--text-dim); background: rgba(255,215,94,.05); border: 1px solid var(--gold-faint);
  border-radius: 3px; padding: 3px 12px; margin-bottom: 6px;
  transition: color calc(.15s * var(--speed)), border-color calc(.15s * var(--speed)), background calc(.15s * var(--speed));
}
.bo-copy:hover { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(255,215,94,.1); }

/* ---------- 秘籍聊天框 ---------- */
#cheat-chat {
  position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 9500;
  width: min(420px, calc(100vw - 40px));
  display: none;
}
#cheat-chat.open { display: block; animation: fadeUp calc(.18s * var(--speed)) ease; }
#cheat-chat .cc-label { font-size: 12.5px; color: var(--gold-bright); text-shadow: 0 1px 0 #000; margin-bottom: 4px; font-family: var(--font-head); letter-spacing: .1em; }
#cheat-chat input {
  width: 100%; padding: 9px 14px; font-size: 15px; color: var(--gold-glow);
  background: rgba(5,3,1,.92); border: 1px solid var(--gold-dim); outline: 1px solid #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.8); border-radius: 2px; font-family: var(--font-body);
}
#cheat-chat input::placeholder { color: var(--text-faint); }

/* Toast 提示（左上角，模拟游戏系统消息） */
#toast-zone { position: fixed; left: 24px; top: 84px; z-index: 9600; pointer-events: none; }
.toast {
  margin-bottom: 8px; padding: 8px 18px;
  font-size: 15px; color: #ffe9a8; text-shadow: 0 1px 2px #000, 0 0 12px rgba(255,215,94,.35);
  font-family: var(--font-head); letter-spacing: .06em;
  animation: toastIn calc(.3s * var(--speed)) ease, toastOut calc(.6s * var(--speed)) ease 3.4s forwards;
}
.toast.t-cheat { color: #9cff9c; text-shadow: 0 1px 2px #000, 0 0 12px rgba(80,255,80,.45); }

/* ---------- 动画 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; } }
@keyframes ghostIn { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes coinFall {
  from { transform: translateY(-40px) rotate(0deg); opacity: 1; }
  to   { transform: translateY(110vh) rotate(720deg); opacity: .8; }
}
@keyframes godPulse {
  0%, 100% { box-shadow: inset 0 0 80px rgba(255,215,94,.12); }
  50%      { box-shadow: inset 0 0 160px rgba(255,215,94,.3); }
}
body.godmode::after { animation: godPulse 2.2s ease-in-out infinite; }
/* .js 前缀: 仅在 JS 可用时隐藏 reveal 待入场; 无 JS 时内容默认可见(渐进增强) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity calc(.6s * var(--speed)) ease, transform calc(.6s * var(--speed)) ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01s !important; }
}

/* ---------- 通用工具类 ---------- */
.tc { text-align: center; }
.mt0 { margin-top: 0; } .mt1 { margin-top: 10px; } .mt2 { margin-top: 20px; } .mt3 { margin-top: 34px; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 13px; }
.grid-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--text-faint); font-size: 15px; line-height: 1.8; }
.gold { color: var(--gold-bright); }
.c-hum { color: var(--hum-hi); } .c-orc { color: var(--orc-hi); } .c-ud { color: var(--ud-hi); } .c-ne { color: var(--ne-hi); } .c-neu { color: var(--neu-hi); }
.flex { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.nowrap { white-space: nowrap; }
img { max-width: 100%; }

/* 数字统计块 */
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
.stat {
  flex: 1; min-width: 130px; text-align: center; padding: 16px 10px;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--gold-faint); border-radius: 3px;
}
.stat .stat-num { font-family: var(--font-head); font-size: 30px; color: var(--gold-bright); text-shadow: 0 0 14px rgba(255,215,94,.35); }
.stat .stat-label { font-size: 12.5px; color: var(--text-dim); letter-spacing: .18em; margin-top: 4px; }

/* 英雄/单位头像框（自绘 SVG 或图片均可放入） */
.portrait {
  width: 64px; height: 64px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2a2010, #0c0803);
  border: 2px solid var(--gold-dim); outline: 2px solid #000;
  box-shadow: inset 0 0 14px rgba(0,0,0,.9), 0 0 10px rgba(201,162,39,.15);
  border-radius: 3px; overflow: hidden;
  font-size: 34px;
}
.portrait.p-lg { width: 84px; height: 84px; font-size: 46px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
[data-race] .portrait { border-color: color-mix(in srgb, var(--rc) 60%, #6b571f); }

/* 打印 */
@media print {
  body::before, body::after, #topnav, #site-footer, #cheat-chat,
  #back-top, #cmdk-scrim, #xp-progress, #fx-embers, #nav-search, .sec-tabs,
  .click-rune, .skip-link, .toast, #toast-zone,
  #cmp-tray, #cmp-modal, .game-links, .bo-copy { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  main, .container { max-width: 100% !important; padding: 0 !important; }
  a { color: #111 !important; text-decoration: underline; }
  /* 还原为白底深字，去掉暗色面板背景 */
  .frame, .card, .stat, .note, .tab.on, .tbl th, .parchment {
    background: #fff !important; color: #111 !important; border-color: #999 !important;
    box-shadow: none !important; outline: none !important; text-shadow: none !important;
  }
  .gold-text, .gold, h1, h2, h3, .section-title { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .tbl td, .tbl th { border-color: #888 !important; }
  .dim, .faint { color: #444 !important; }
  /* 避免卡片/表格行内分页断裂 */
  .card, .frame, .stat, tr, blockquote, .bo-list li, .note { break-inside: avoid; page-break-inside: avoid; }
  .section-title, h1, h2 { break-after: avoid; }
  /* BO/技能图标在打印里仍可见 */
  img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ============================================================
   V2 视效升级层 —— 比原版更好的魔兽质感
   （追加层：利用级联覆盖 v1 基础样式；全部 transform/opacity
   动画，respect prefers-reduced-motion）
   ============================================================ */

/* ---------- 跨页面过渡：WC3 读盘风格(模糊+亮光+微缩放) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: wc3PageOut calc(.3s * var(--speed)) ease-in; }
::view-transition-new(root) { animation: wc3PageIn calc(.4s * var(--speed)) cubic-bezier(.2,.8,.2,1); }
@keyframes wc3PageOut { to { opacity: 0; filter: blur(6px); transform: scale(.98); } }
@keyframes wc3PageIn { from { opacity: 0; filter: blur(8px) brightness(1.4); transform: scale(1.02); } to { opacity: 1; filter: none; transform: none; } }

/* ---------- 层级基座：粒子画布垫底，内容浮于其上 ---------- */
#fx-embers { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
main, #site-footer { position: relative; z-index: 1; }

/* ---------- 金色文字流光 ---------- */
.gold-text {
  background-image:
    linear-gradient(115deg, transparent 42%, rgba(255,248,222,.95) 50%, transparent 58%),
    linear-gradient(180deg, var(--gold-glow) 0%, var(--gold-bright) 35%, var(--gold) 60%, var(--gold-dim) 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 220% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  animation: goldShine 6.5s ease-in-out infinite;
}
@keyframes goldShine {
  0%, 55%  { background-position: 220% 0, 0 0; }
  85%, 100% { background-position: -140% 0, 0 0; }
}

/* ---------- 页头入场动画（所有页面自动生效） ---------- */
.page-hero h1, .home-hero h1 { animation: titleIn .95s cubic-bezier(.16,.84,.3,1) both, goldShine 6.5s ease-in-out 1.2s infinite; }
@keyframes titleIn {
  from { opacity: 0; filter: blur(12px); transform: translateY(20px) scale(1.05); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
.page-hero .hero-sub, .home-hero .hh-kicker, .home-hero .hh-en { animation: fadeUp .7s ease .28s both; }
.hero-divider { animation: dividerIn .9s cubic-bezier(.2,.8,.2,1) .4s both; }
@keyframes dividerIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.page-hero p, .home-hero .hh-desc { animation: fadeUp .75s ease .5s both; }
.home-hero .hh-cta, .page-hero .hh-cta { animation: fadeUp .75s ease .68s both; }

/* ---------- 按钮 V2：金属浮雕 + 铆钉 + 扫光 + 按压 ---------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 7px 7px,               rgba(255,224,130,.55) 1.1px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 7px) 7px,  rgba(255,224,130,.55) 1.1px, transparent 2.4px),
    radial-gradient(circle at 7px calc(100% - 7px),  rgba(255,224,130,.4) 1.1px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), rgba(255,224,130,.4) 1.1px, transparent 2.4px),
    linear-gradient(180deg, #453310 0%, #291d0a 46%, #170f06 54%, #231808 100%);
  border: 1px solid #060401;
  box-shadow:
    inset 0 0 0 1px var(--gold-dim),
    inset 0 0 0 2px rgba(0,0,0,.5),
    inset 0 2px 1px rgba(255,228,140,.22),
    inset 0 -3px 6px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.55);
  transition: transform calc(.16s * var(--speed)) ease, box-shadow calc(.2s * var(--speed)), color calc(.2s * var(--speed)), text-shadow calc(.2s * var(--speed));
}
.btn::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: -70%; width: 46%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,238,170,.28) 50%, transparent 100%);
  transform: skewX(-22deg);
  transition: left calc(.55s * var(--speed)) ease;
  pointer-events: none;
}
.btn:hover {
  transform: translateY(-1px);
  color: #fff6d8;
  text-shadow: 0 0 10px rgba(255,215,94,.85);
  box-shadow:
    inset 0 0 0 1px var(--gold-bright),
    inset 0 0 0 2px rgba(0,0,0,.5),
    inset 0 2px 1px rgba(255,228,140,.3),
    inset 0 -3px 6px rgba(0,0,0,.5),
    0 6px 16px rgba(0,0,0,.6),
    0 0 20px rgba(255,215,94,.28);
}
.btn:hover::after { left: 130%; }
.btn:active {
  transform: translateY(1px) scale(.985);
  box-shadow:
    inset 0 0 0 1px var(--gold-dim),
    inset 0 3px 8px rgba(0,0,0,.7),
    0 2px 6px rgba(0,0,0,.5);
}
.btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.btn-big { animation: btnBreath 3.6s ease-in-out infinite; }
@keyframes btnBreath {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 11px rgba(255,215,94,.4)); }
}
.btn-race:hover { text-shadow: 0 0 10px color-mix(in srgb, var(--rc-hi) 90%, transparent); }

/* ---------- 卡片 V2：鼠标聚光 + 更饱满的悬浮 ---------- */
/* .card will-change 已移除: 全站 50+ 卡片时预创建 GPU 层浪费显存; 现代
   浏览器对 translateY hover 不需要 will-change 提示 */
.card.spot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity calc(.3s * var(--speed));
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,219,120,.11), transparent 62%);
}
.card.spot:hover::after { opacity: 1; }
.card:hover { transform: translateY(-4px); }
a.card:active { transform: translateY(-1px) scale(.995); }

/* ---------- 面板饰角悬停点亮 ---------- */
.frame::before, .frame::after, .frame > .fc::before, .frame > .fc::after {
  transition: filter calc(.3s * var(--speed));
}
.frame:hover::before, .frame:hover::after,
.frame:hover > .fc::before, .frame:hover > .fc::after {
  filter: drop-shadow(0 0 5px rgba(255,215,94,.65));
}

/* ---------- 章节标题宝石呼吸 ---------- */
.section-title .st-gem { animation: gemPulse 2.8s ease-in-out infinite; }
@keyframes gemPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,94,.5); transform: rotate(45deg) scale(1); }
  50%      { box-shadow: 0 0 16px rgba(255,215,94,.95); transform: rotate(45deg) scale(1.18); }
}

/* 徽章/图标的轻柔悬浮 (原 index.html 局部定义, 提为全局通用) */
@keyframes emblemFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .wc3-ico[data-ico="music"] { animation: none !important; } }

/* ---------- 导航 V2：滑动下划线 + 收缩 + 下拉弹性层叠 ---------- */
#topnav { transition: box-shadow calc(.3s * var(--speed)); }
#topnav .nav-inner { transition: height calc(.3s * var(--speed)) ease; }
#topnav.scrolled .nav-inner { height: 52px; }
#topnav.scrolled {
  box-shadow: 0 2px 0 #000, 0 10px 34px rgba(0,0,0,.8), 0 1px 14px rgba(201,162,39,.12);
}
.nav-item > a, .nav-item > span { position: relative; }
.nav-item > a::after, .nav-item > span::after {
  content: "";
  position: absolute; left: 50%; bottom: 12px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 8px rgba(255,215,94,.7);
  transform: translateX(-50%);
  transition: width calc(.28s * var(--speed)) cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.nav-item:hover > a::after, .nav-item:hover > span::after { width: 62%; }
.nav-item.here > a { border-bottom: none; }
.nav-item.here > a::after { width: 62%; }
.nav-drop {
  transform: translateX(-50%) translateY(10px) scale(.97);
  transform-origin: top center;
  transition: opacity calc(.22s * var(--speed)) ease, transform calc(.26s * var(--speed)) cubic-bezier(.2,.9,.3,1.15), visibility calc(.22s * var(--speed));
}
.nav-item:hover .nav-drop { transform: translateX(-50%) translateY(0) scale(1); }
.nav-drop a {
  opacity: 0;
  transform: translateY(-7px);
  transition: opacity calc(.24s * var(--speed)) ease, transform calc(.24s * var(--speed)) ease, color calc(.15s * var(--speed)), background calc(.15s * var(--speed));
}
.nav-item:hover .nav-drop a { opacity: 1; transform: none; }
.nav-item:focus-within .nav-drop a { opacity: 1; transform: none; }
.nav-item:hover .nav-drop a:nth-child(1) { transition-delay: .02s; }
.nav-item:hover .nav-drop a:nth-child(2) { transition-delay: .06s; }
.nav-item:hover .nav-drop a:nth-child(3) { transition-delay: .10s; }
.nav-item:hover .nav-drop a:nth-child(4) { transition-delay: .14s; }
@media (min-width: 1081px) { .nav-drop a:hover { padding-left: 26px; } }
@media (max-width: 1080px) {
  .nav-drop { transform: none; }
  .nav-item:hover .nav-drop { transform: none; }
  .nav-drop a, .nav-item:hover .nav-drop a { opacity: 1; transform: none; transition-delay: 0s; }
  .nav-item > a::after, .nav-item > span::after { display: none; }
  .nav-item.here > a { border-bottom: 2px solid var(--gold); }
}

/* ---------- 顶部经验条（滚动进度） ---------- */
#xp-progress {
  position: fixed; top: 0; left: 0; z-index: 950;
  height: 4px; width: 0;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  box-shadow: 0 0 12px rgba(255,215,94,.7), 0 1px 2px rgba(0,0,0,.5);
  transition: width .12s linear;
  pointer-events: none;
}
#xp-progress::after {
  content: ""; position: absolute; right: 0; top: -2px; bottom: -2px; width: 12px;
  background: radial-gradient(circle, var(--gold-bright), transparent 70%);
  opacity: .8;
}

/* ---------- 点击符文波纹 ---------- */
.click-rune {
  position: fixed; z-index: 9990;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid rgba(255,215,94,.9);
  box-shadow: 0 0 14px rgba(255,215,94,.55), inset 0 0 7px rgba(255,215,94,.45);
  pointer-events: none;
  animation: runeOut calc(.55s * var(--speed)) ease-out forwards;
}
.click-rune.r2 {
  border-color: rgba(255,215,94,.45);
  border-style: dashed;
  animation-duration: calc(.85s * var(--speed));
}
@keyframes runeOut { to { transform: scale(4.4) rotate(40deg); opacity: 0; } }

/* ---------- 血条/蓝条流光 ---------- */
.bar > i { position: relative; overflow: hidden; }
.bar > i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.34) 50%, transparent 68%);
  background-size: 240% 100%;
  animation: barSheen 2.6s linear infinite;
}
@keyframes barSheen { from { background-position: 130% 0; } to { background-position: -140% 0; } }

/* ---------- 头像框悬停辉光 ---------- */
.portrait { transition: box-shadow calc(.25s * var(--speed)), border-color calc(.25s * var(--speed)), transform calc(.25s * var(--speed)); }
.portrait:hover {
  border-color: var(--gold-bright);
  box-shadow: inset 0 0 14px rgba(0,0,0,.9), 0 0 18px rgba(201,162,39,.45);
  transform: scale(1.04);
}

/* ---------- tooltip 弹出动效 ---------- */
#wc3-tooltip {
  transform: translateY(7px) scale(.97);
  transition: opacity calc(.14s * var(--speed)), transform calc(.18s * var(--speed)) cubic-bezier(.2,.9,.3,1.2);
}
#wc3-tooltip.show { transform: none; }

/* ---------- chip / tab 手感 ---------- */
.chip:active, .tab:active { transform: scale(.95); }
.chip { transition: all calc(.15s * var(--speed)), transform calc(.1s * var(--speed)); }
.chip.on { box-shadow: 0 0 12px rgba(255,215,94,.35); }
.tab.on { position: relative; }
.tab.on::after {
  content: "";
  position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 8px rgba(255,215,94,.8);
  animation: fadeUp calc(.3s * var(--speed)) ease;
}

/* ---------- 徽章微光 ---------- */
.badge { transition: box-shadow calc(.2s * var(--speed)), color calc(.2s * var(--speed)); }
.badge:hover { box-shadow: 0 0 10px rgba(201,162,39,.35); color: var(--gold-bright); }

/* ---------- 统计块 ---------- */
.stat { transition: transform calc(.22s * var(--speed)), border-color calc(.22s * var(--speed)), box-shadow calc(.22s * var(--speed)); }
.stat:hover { transform: translateY(-3px); border-color: var(--gold-dim); box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 14px rgba(201,162,39,.14); }

/* ---------- 页脚羊过渡 ---------- */
#site-footer .sheep { transition: transform .12s cubic-bezier(.3,1.6,.5,1); }
#site-footer .sheep:hover { transform: scale(1.3) rotate(-8deg); }

/* ---------- 降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .gold-text, .page-hero h1, .home-hero h1 { animation: none; }
  .btn-big, .section-title .st-gem, .bar > i::after { animation: none; }
  #fx-embers, .click-rune { display: none; }
}

/* ---------- V2 细节补丁 ---------- */
/* V2 细节补丁 */
/* 背景篝火呼吸 + 烛光闪烁（声明在 1236 行更完整版，此处仅保留 keyframe 定义） */
@keyframes ambientBreath { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }

/* 下拉菜单：顶部尖角 + 金线 */
.nav-drop::before {
  content: "";
  position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: #1d1509;
  border-left: 1px solid var(--gold-dim);
  border-top: 1px solid var(--gold-dim);
}
.nav-drop::after {
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,94,.4), transparent);
}
@media (max-width: 1080px) { .nav-drop::before, .nav-drop::after { display: none; } }

/* 面板标题图标轻微摇曳 */
.frame-head .fh-icon { display: inline-block; animation: iconSway 5s ease-in-out infinite; }
@keyframes iconSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg) scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  body::before, .frame-head .fh-icon { animation: none; }
}

/* ============================================================
   回城卷轴 · 回到顶部按钮（全局自动注入）
   ============================================================ */
#back-top {
  position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 8500;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; color: var(--gold-bright);
  background:
    radial-gradient(circle at 50% 32%, rgba(255,224,130,.18), transparent 60%),
    linear-gradient(180deg, #38290f, #1a1206);
  border: 1px solid var(--gold-dim); outline: 1px solid #000;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,215,94,.25), inset 0 -3px 6px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.6);
  text-shadow: 0 0 10px rgba(255,215,94,.55);
  text-decoration: none; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.8);
  transition: opacity calc(.28s * var(--speed)), transform calc(.28s * var(--speed)),
              box-shadow calc(.2s * var(--speed)), border-color calc(.2s * var(--speed));
}
#back-top.show { opacity: 1; visibility: visible; transform: none; }
#back-top:hover {
  color: #fff6d8; border-color: var(--gold-bright);
  box-shadow: inset 0 1px 0 rgba(255,215,94,.35), 0 0 24px rgba(255,215,94,.42), 0 6px 18px rgba(0,0,0,.6);
}
#back-top:active { transform: scale(.92); }
#back-top .bt-label {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--font-head); font-size: 12.5px; letter-spacing: .14em;
  color: var(--gold-pale); text-shadow: 0 1px 4px #000, 0 0 8px rgba(255,215,94,.4);
  opacity: 0; transition: opacity calc(.2s * var(--speed)); pointer-events: none;
}
#back-top:hover .bt-label { opacity: 1; }
@media (max-width: 560px) {
  #back-top { width: 46px; height: 46px; font-size: 20px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  #back-top .bt-label { display: none; }
}

/* ============================================================
   命令面板 · 全站快速跳转（Ctrl+K 或 /）
   ============================================================ */
  #cmdk-scrim {
    position: fixed; inset: 0; z-index: 9700;
    background: rgba(5,3,1,.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 11vh;
  }
  #cmdk-scrim.open { display: flex; animation: cmdkIn calc(.18s * var(--speed)) ease; }
  @keyframes cmdkIn { from { opacity: 0; } to { opacity: 1; } }
  #cmdk-box {
    width: min(620px, calc(100vw - 32px));
    background: linear-gradient(180deg, #1d1509, #0e0904);
    border: 1px solid var(--gold-dim); outline: 1px solid #000;
    box-shadow: 0 30px 80px rgba(0,0,0,.85), 0 0 50px rgba(201,162,39,.12);
    border-radius: 4px; overflow: hidden;
    animation: cmdkBox calc(.22s * var(--speed)) cubic-bezier(.2,.9,.3,1.1);
  }
  @keyframes cmdkBox { from { transform: translateY(-16px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
  #cmdk-input {
    width: 100%; padding: 16px 20px; font-size: 17px; color: var(--gold-pale);
    background: rgba(5,3,1,.6); border: none; border-bottom: 1px solid var(--gold-faint);
    font-family: var(--font-body); outline: none;
  }
  #cmdk-input::placeholder { color: var(--text-faint); }
  #cmdk-input:focus { box-shadow: inset 0 -1px 0 var(--gold-dim); }
  #cmdk-input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 2px; }
  #cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
  .cmdk-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 3px; cursor: pointer;
    color: var(--text-dim); transition: background calc(.12s * var(--speed)), color calc(.12s * var(--speed));
  }
  .cmdk-item .ci-icon { font-size: 18px; width: 24px; text-align: center; flex: none; display: flex; align-items: center; justify-content: center; }
  .cmdk-item .ci-icon .wc3-ico { color: var(--gold-bright); font-size: 17px; }
  .cmdk-item.active .ci-icon .wc3-ico { color: var(--gold-glow); }
  .cmdk-item .ci-ding { color: var(--gold-kicker); font-size: 15px; }
  .cmdk-item .ci-t { color: var(--gold-pale); font-size: 15px; }
  .cmdk-item .ci-g { margin-left: auto; font-size: 11px; letter-spacing: .12em; color: var(--text-faint); font-family: var(--font-head); flex: none; }
  .cmdk-item.active, .cmdk-item:hover {
    background: linear-gradient(90deg, rgba(255,215,94,.13), rgba(255,215,94,.02));
  }
  .cmdk-item.active .ci-t, .cmdk-item:hover .ci-t { color: var(--gold-bright); text-shadow: 0 0 8px rgba(255,215,94,.4); }
  #cmdk-empty { padding: 26px; text-align: center; color: var(--text-faint); font-size: 14px; }
  #cmdk-foot {
    display: flex; gap: 18px; padding: 9px 16px; font-size: 12px; color: var(--text-faint);
    border-top: 1px solid var(--gold-faint); background: rgba(0,0,0,.32);
  }
  #cmdk-foot .kbd { font-size: 11px; min-width: 0; padding: 0 5px; }

  /* 导航栏搜索按钮 */
  #nav-search {
    background: none; border: 1px solid var(--gold-faint); border-radius: 3px;
    color: var(--gold-pale); font-size: 14px; cursor: pointer;
    padding: 4px 9px; margin-left: 6px; flex: none; line-height: 1;
    transition: color calc(.15s * var(--speed)), border-color calc(.15s * var(--speed)), box-shadow calc(.15s * var(--speed));
  }
  #nav-search:hover { color: var(--gold-bright); border-color: var(--gold-dim); box-shadow: 0 0 12px rgba(255,215,94,.22); }
  #nav-random { background: none; border: 1px solid var(--gold-faint); border-radius: 3px; color: var(--gold-pale); font-size: 15px; cursor: pointer; padding: 4px 9px; flex: none; line-height: 1; transition: color calc(.15s * var(--speed)), border-color calc(.15s * var(--speed)), transform calc(.3s * var(--speed)); }
  #nav-random:hover { color: var(--gold-bright); border-color: var(--gold-dim); transform: rotate(180deg); }

/* 游戏页底部「其他游戏」交叉导航（main.js 自动注入到 games/ 页） */
.game-links { margin-top: 30px; }
.game-links .gl-title { font-family: var(--font-head); color: var(--gold); font-size: 14px; letter-spacing: .14em; text-align: center; margin-bottom: 12px; }
.game-links .gl-glyph { font-size: 16px; margin-right: 6px; vertical-align: -.18em; }
#back-top .wc3-ico { font-size: 23px; }
.game-links .gl-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.game-links .gl-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--gold-faint); border-radius: 20px;
  background: rgba(5,3,1,.4); color: var(--text-dim); font-size: 13.5px;
  transition: color calc(.15s * var(--speed)), border-color calc(.15s * var(--speed)), transform calc(.15s * var(--speed));
}
.game-links .gl-link:hover { color: var(--gold-bright); border-color: var(--gold-dim); transform: translateY(-2px); }
.game-links .gl-ico { font-size: 18px; }

/* 命令面板跳转章节的高亮闪烁 */
.section-title.cmdk-flash { animation: cmdkFlash calc(1.3s * var(--speed)) ease; border-radius: 3px; }
/* Ctrl+K 命中词典词条/冷知识卡时的高亮闪烁 */
.g-item.cmdk-flash, .card.reveal.cmdk-flash { animation: cmdkFlash calc(1.3s * var(--speed)) ease; border-radius: 3px; }
@keyframes cmdkFlash {
  0% { background: rgba(255,215,94,.14); box-shadow: 0 0 0 6px rgba(255,215,94,.10); }
  60% { background: rgba(255,215,94,.06); box-shadow: none; }
  100% { background: transparent; box-shadow: none; }
}

/* ============================================================
   吸顶章节标签条 .sec-tabs（长页快速跳转，main.js 自动接线）
   页面只需放 <nav class="sec-tabs"><a class="stab" data-target="锚点id">..</a></nav>
   ============================================================ */
.sec-tabs {
  position: sticky; top: 62px; z-index: 50;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 0 0 26px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(14,9,4,.96), rgba(10,6,3,.92));
  border-bottom: 1px solid var(--gold-faint); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sec-tabs .stab {
  cursor: pointer; padding: 5px 16px; font-family: var(--font-head); font-size: 13.5px; letter-spacing: .08em;
  color: var(--text-dim); border: 1px solid var(--gold-faint); border-radius: 18px; background: rgba(255,215,94,.03);
  transition: all calc(.15s * var(--speed)); text-decoration: none;
}
.sec-tabs .stab:hover { color: var(--gold-bright); border-color: var(--gold-dim); transform: translateY(-1px); }
.sec-tabs .stab.on { color: #120c04; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); font-weight: 700; }
@media (max-width: 560px) { .sec-tabs { position: static; background: none; border: none; padding: 0; } }
h2.section-title, .tl-era { scroll-margin-top: 100px; }


/* frame-head 图标图片化（替代 emoji） */
.frame-head .fh-icon .fh-img {
  width: 22px; height: 22px; object-fit: contain; vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(255,215,94,.3));
}

/* 卡片图标头像（替代 h3 里的 emoji 前缀） */
.card-portrait {
  width: 52px; height: 52px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2a2010, #0e0904);
  border: 1px solid var(--gold-dim); outline: 1px solid #000;
  border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,.8);
}
.card-portrait img { width: 80%; height: 80%; object-fit: contain; }

/* WC3 选择圈：卡片悬停时地面出现经典选择圈 */
.card { position: relative; }
.card .sel-ring {
  position: absolute; bottom: -4px; left: 50%;
  width: 78%; height: 14px; margin-left: -39%;
  border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity calc(.25s * var(--speed));
  background: conic-gradient(from 0deg,
    rgba(120,240,100,.5) 0deg, transparent 12deg,
    rgba(120,240,100,.5) 30deg, transparent 42deg,
    rgba(255,215,94,.6) 60deg, transparent 72deg,
    rgba(120,240,100,.5) 90deg, transparent 102deg,
    rgba(255,215,94,.6) 120deg, transparent 132deg,
    rgba(120,240,100,.5) 150deg, transparent 162deg,
    rgba(255,215,94,.6) 180deg, transparent 192deg,
    rgba(120,240,100,.5) 210deg, transparent 222deg,
    rgba(255,215,94,.6) 240deg, transparent 252deg,
    rgba(120,240,100,.5) 270deg, transparent 282deg,
    rgba(255,215,94,.6) 300deg, transparent 312deg,
    rgba(120,240,100,.5) 330deg, transparent 342deg
  );
  filter: blur(1px);
}
.card:hover .sel-ring { opacity: .7; }

/* .frame::after 此前被「金光沿边框」流光复用, 但它与右上饰角伪元素(L306-317)
   冲突——同一伪元素被覆盖且 width/height/transform 未重置, 致右上饰角不可见、
   流光也被拘在 26×26 角落。移除以还原四角浮雕饰角(主装饰); 流光效果如需保留,
   须改用独立子元素(现有 .frame>.fc 或新增), 不得再占用 .frame::after。 */

/* 历史的 .portrait::after（六边形金边外发光）已移除：它同时被 .portrait 的
   overflow:hidden 裁切、又因无 isolation 被 z-index:-1 推到不透明背景之后，
   实际从不显示（属死代码）；且六边形 clip-path 与头像的圆角方形(border-radius:3px)
   形状不匹配，强行复活只会产生错位光晕。头像金框改由 .portrait 本身的
   border + box-shadow(line 815) 承担，保持简洁。 */

/* 烛光闪烁：背景微弱亮度脉动 */
body::before { animation: ambientBreath calc(7s * var(--speed)) ease-in-out infinite, candleFlicker calc(3.7s * var(--speed)) ease-in-out infinite; }
@keyframes candleFlicker {
  0%,100% { filter: none; } 20% { filter: brightness(1.03); }
  35% { filter: brightness(.98); } 50% { filter: brightness(1.04); }
  65% { filter: brightness(.99); } 80% { filter: brightness(1.02); }
}

/* 点击金色火花飞溅 */
.click-spark {
  position: fixed; z-index: 9991; pointer-events: none;
  width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow), var(--gold-bright) 40%, transparent 70%);
  box-shadow: 0 0 6px rgba(255,215,94,.8);
  animation: sparkFly calc(.6s * var(--speed)) ease-out forwards;
}
@keyframes sparkFly {
  0% { transform: translate(0, 0) scale(var(--sz, 1)); opacity: 1; }
  100% { transform: translate(var(--sx, 0), var(--sy, -30px)) scale(0); opacity: 0; }
}

/* 章节标题宝石入场爆发 */
.section-title .st-gem {
  animation: gemPulse calc(2.8s * var(--speed)) ease-in-out infinite, gemBurst calc(.6s * var(--speed)) ease;
}
@keyframes gemBurst {
  0% { transform: rotate(45deg) scale(0); filter: brightness(2) drop-shadow(0 0 12px var(--gold-bright)); }
  60% { transform: rotate(45deg) scale(1.6); filter: brightness(1.5) drop-shadow(0 0 8px var(--gold-bright)); }
  100% { transform: rotate(45deg) scale(1); filter: none; }
}
.reveal.in .section-title .st-gem { animation: gemBurst calc(.6s * var(--speed)) ease, gemPulse calc(2.8s * var(--speed)) ease-in-out infinite calc(.6s); }

/* frame 面板烛光微脉动(极微妙) */
.frame {
  animation: frameBreath calc(8s * var(--speed)) ease-in-out infinite;
}
@keyframes frameBreath {
  0%,100% { box-shadow: var(--shadow-panel); }
  50% { box-shadow: var(--shadow-panel), 0 0 14px rgba(255,215,94,.06); }
}
@media (prefers-reduced-motion: reduce) {
  .section-title .st-gem { animation: none; }
  .frame { animation: none; }
}

/* section-title 入场：饰线金光扫过 */
.reveal.in .section-title::before, .reveal.in .section-title::after {
  animation: lineShine calc(.8s * var(--speed)) ease-out;
}
@keyframes lineShine {
  from { background-size: 200% 100%; background-position: 200% 0; }
  to { background-size: 200% 100%; background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.in .section-title::before, .reveal.in .section-title::after { animation: none; }
}

/* 种族页阵营徽章水印（4 种族页各有对应巨幅淡化徽章） */
[data-race="hum"] .container::before,
[data-race="orc"] .container::before,
[data-race="ud"] .container::before,
[data-race="ne"] .container::before {
  content: ""; position: fixed; bottom: -5%; right: -3%;
  width: 45vw; height: 45vw; max-width: 500px; max-height: 500px;
  z-index: -1; opacity: .04; pointer-events: none;
  background-size: contain; background-repeat: no-repeat; background-position: bottom right;
}
[data-race="hum"] .container::before { background-image: url("../assets/img/races/human.webp"); }
[data-race="orc"] .container::before { background-image: url("../assets/img/races/orc.webp"); }
[data-race="ud"]  .container::before { background-image: url("../assets/img/races/undead.webp"); }
[data-race="ne"]  .container::before { background-image: url("../assets/img/races/nightelf.webp"); }

/* WC3 地图网格底纹（极淡的方格，致敬游戏内地图网格） */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0 0.03 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(0deg, transparent 49.5%, rgba(201,162,39,.015) 49.5%, rgba(201,162,39,.015) 50.5%, transparent 50.5%),
    linear-gradient(90deg, transparent 49.5%, rgba(201,162,39,.015) 49.5%, rgba(201,162,39,.015) 50.5%, transparent 50.5%),
    repeating-linear-gradient(2deg, transparent 0px, transparent 3px, rgba(201,162,39,.01) 3px, rgba(201,162,39,.01) 4px);
  background-size: 240px 240px, 64px 64px, 64px 64px, 200px 200px;
  box-shadow: inset 0 0 280px rgba(0,0,0,.82), inset 0 0 60px rgba(60,40,15,.15);
}

/* 移动端降级：禁用 GPU 密集视效(3D倾斜靠 JS 控制, CSS 禁用选择圈+金边+脉动) */
@media (max-width: 768px) {
  .card .sel-ring { display: none; }
  .frame { animation: none; }
  [data-race] .container::before { display: none; }
}