/* ============================================================
   冰封回响 · 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-pale: #e9d5a0;
  --gold-dim: #8a6d2f;
  --gold-faint: #4a3b1a;

  /* 文本 */
  --text: #d9c9a1;
  --text-dim: #a29169;
  --text-faint: #877758; /* WCAG AA: 面包屑/元数据小字在暗底上对比度 3.32→4.60 */

  /* 阵营色 */
  --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; }


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%);
}

::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: #fff3c8; }
.wc3-ico.dim { color: var(--gold-dim); }

/* 艾泽拉斯昼夜钟（页脚 · 太阳/月亮沿天穹滑动，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%, #ffd75e 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, #ffd75e 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-dim); }
@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; }
}

/* 键盘可达性：跳到主内容（首次 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; }

/* 全局键盘焦点可见态（鼠标操作不显示，仅键盘 Tab） */
a:focus-visible, summary:focus-visible, button: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, #4a3b1a); }

/* ---------- 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, #fff3c8 0%, var(--gold-bright) 35%, var(--gold) 60%, #8a6d2f 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; }
.container-wide { max-width: 1380px; }

.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-dim); 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); }

.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: #fff3c8;
  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 #8a6d2f;
  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: #6b4e1e; font-size: 13.5px; }
.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); }

/* 筛选按钮组 */
.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);
  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-item.here > a { border-bottom: 2px solid var(--gold); }
.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 { 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, #16100a, #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; }
}

/* ---------- 页脚 ---------- */
#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-faint); }

/* ---------- 页头横幅 ---------- */
.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: #fff3c8;
  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; }
.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; }
  .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; }
.mb2 { margin-bottom: 20px; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 13px; }
.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); }
.c-hp { color: var(--hp); } .c-mp { color: #7fb0ff; }
.flex { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.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, #fff3c8 0%, var(--gold-bright) 35%, var(--gold) 60%, #8a6d2f 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: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; }
.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); 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-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: #fff3c8; }
  .cmdk-item .ci-ding { color: var(--gold-dim); 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); 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 { top: 52px; 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; }

/* WC3 建筑放置预览：金光沿边框循环流动 */
.frame { position: relative; }
.frame::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: var(--radius); pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,215,94,.5) 50%, transparent 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
  opacity: 0; transition: opacity calc(.3s * var(--speed));
  animation: borderTrace calc(4s * var(--speed)) linear infinite;
}
.frame:hover::after { opacity: .6; }
@keyframes borderTrace { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .frame::after { animation: none; } }

/* WC3 英雄头像金框装饰（六边形外发光，不裁切内容） */
.portrait { position: relative; }
.portrait::after {
  content: ""; position: absolute; inset: -3px; z-index: -1; opacity: .6;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim) 50%, var(--gold-bright));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 0 4px rgba(255,215,94,.3));
}

/* 烛光闪烁：背景微弱亮度脉动 */
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, #fff3c8, 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: gemPulse calc(2.8s * var(--speed)) ease-in-out infinite; }
  .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.png"); }
[data-race="orc"] .container::before { background-image: url("../assets/img/races/orc.png"); }
[data-race="ud"]  .container::before { background-image: url("../assets/img/races/undead.png"); }
[data-race="ne"]  .container::before { background-image: url("../assets/img/races/nightelf.png"); }

/* 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::after { display: none; }
  .frame { animation: none; }
  [data-race] .container::before { display: none; }
  .portrait::after { display: none; }
}