/* ============ 潮汐守望者 WIKI · 全站基础样式（暗夜圣战 · 西幻版） ============
   深夜蓝的天幕 + 地狱的赤焰 + 天堂的圣金。整块的暗色色带，金色描线和华丽边角把它们框起来。
   色带用 <section class="band band-sky|band-ember|band-meadow|band-cobalt"> + 里面一个 .wrap。
   色带里放 <div class="sky">，site-nav.js 会自动填进光束、圣光、余烬、雾和哥特尖塔剪影。 */
/* 标题字体：思源宋体（Noto Serif CJK SC）Black 的子集，只含网站标题会用到的字（授权见 assets/fonts/） */
@font-face {
  font-family: "WoR Serif"; font-weight: 600 900; font-style: normal; font-display: swap;
  src: url(fonts/wor-serif-black.woff2) format("woff2");
}
:root {
  --abyss: #060914;
  --night: #0a1028;
  --night-2: #0f1838;
  --navy: #16224d;
  --blood: #4a0a14;
  --crimson: #8c1424;
  --ember: #ff6a2a;
  --paper: #0a1028;          /* 页面底色（旧名沿用） */
  --card: #111a3a;           /* 面板底 */
  /* 面板和背景拉开层次：背景是冷的深蓝，面板是暖的暗铜色（像游戏里的金属框），亮一档 */
  --panel-1: #3d2f21; --panel-2: #1d150e; --panel-line: rgba(236, 196, 116, .72); --panel-hi: rgba(255, 222, 170, .2);
  --card-2: #0c1330;
  --ink: #f1e6c8;            /* 正文：羊皮纸色 */
  --ink-2: #c2b593;
  --ink-3: #8d8670;
  --gold: #d4a64a;
  --gold-hi: #f6d27a;
  --gold-lo: #8a5c17;
  --line: rgba(212, 166, 74, .45);
  --line-soft: rgba(212, 166, 74, .2);
  --azure: #7fb2ff;
  --azure-deep: #f6d27a;     /* 旧的「强调蓝」在暗色下改成金 */
  --azure-soft: rgba(246, 210, 122, .1);
  --outline: #050816;
  --gold-text: linear-gradient(180deg, #fffbee 0%, #fde7a6 28%, #f1c766 54%, #d49f40 76%, #f8dc8e 100%);
  --gold-bright: linear-gradient(180deg, #fffdf4 0%, #fff0c2 32%, #fad57e 62%, #eab44f 100%);
  --halo: linear-gradient(90deg, #f6d27a, #d99a2b 60%, #b2421c);
  --shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
  --serif: "WoR Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "Microsoft YaHei", serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --num: "WoR Serif", "Bahnschrift", "DIN Alternate", "Roboto Condensed", var(--sans);
  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--abyss); -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--night); color: var(--ink); font: 15px/1.75 var(--sans); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
img.broken { visibility: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: #1a0f00; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
egan-nav { min-height: 59px; }
egan-foot[flush] { margin-top: 0; }
main { position: relative; z-index: 1; flex: 1; width: 100%; overflow-x: clip; }
.wrap { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ---------------- 色带：整块的暗色 ---------------- */
.band { position: relative; isolation: isolate; color: var(--ink); }
/* 夜空：左边地狱火，右边天堂光 */
.band-sky {
  background:
    radial-gradient(60% 70% at 0% 100%, rgba(200, 50, 20, .55), transparent 70%),
    radial-gradient(50% 60% at 100% 0%, rgba(255, 220, 150, .28), transparent 70%),
    linear-gradient(180deg, #070b1e 0%, #111c48 55%, #1b1840 100%);
}
/* 赤焰：大块血红 */
.band-ember {
  background:
    radial-gradient(70% 90% at 20% 100%, rgba(255, 110, 40, .45), transparent 65%),
    radial-gradient(50% 70% at 90% 10%, rgba(0, 0, 0, .45), transparent 70%),
    linear-gradient(180deg, #4a0912 0%, #7d1220 35%, #8c1424 60%, #5a0b17 100%);
}
/* 深海蓝（工具） */
.band-meadow {
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(80, 120, 230, .28), transparent 70%),
    linear-gradient(180deg, #0f1a45 0%, #0b1333 100%);
}
/* 星夜（图鉴） */
.band-cobalt {
  background:
    radial-gradient(1.4px 1.4px at 20px 30px, rgba(255, 240, 200, .55), transparent 70%) 0 0 / 140px 120px,
    radial-gradient(1px 1px at 90px 80px, rgba(255, 255, 255, .4), transparent 70%) 0 0 / 160px 150px,
    radial-gradient(50% 30% at 50% 0%, rgba(212, 166, 74, .14), transparent 70%),
    linear-gradient(180deg, #080d22 0%, #0a1028 100%);
}
/* 两条色带之间的金线（可选） */
.band.seam::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hi) 50%, var(--gold) 80%, transparent);
}
.edge { position: absolute; left: 0; width: 100%; pointer-events: none; display: block; }
.edge.top { bottom: calc(100% - 1px); }
.edge.bottom { top: calc(100% - 1px); transform: scaleY(-1); }

/* ---------------- 天空层 ---------------- */
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky-rays { /* 从天而降的圣光 */
  position: absolute; left: 72%; top: -10%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 160, .16) 0deg 1.6deg, rgba(255, 228, 160, 0) 1.6deg 7deg);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 16%, transparent 38%);
  mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 16%, transparent 38%);
  animation: rays 30s ease-in-out infinite alternate;
}
@keyframes rays { from { transform: rotate(-4deg); opacity: .6; } to { transform: rotate(4deg); opacity: 1; } }
.sky-sun { /* 圣光源 */
  position: absolute; left: 72%; top: -10%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 214, .75) 0%, rgba(255, 214, 130, .3) 30%, rgba(255, 200, 110, 0) 100%);
  animation: sun 7s ease-in-out infinite alternate;
}
.sky-fire { /* 地狱火：左下角翻涌 */
  position: absolute; left: -15%; bottom: -30%; width: 70%; height: 90%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 120, 40, .55), rgba(190, 30, 20, .3) 45%, rgba(120, 10, 10, 0) 100%);
  filter: blur(10px); animation: fire 5s ease-in-out infinite alternate;
}
@keyframes sun { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.06); opacity: 1; } }
@keyframes fire { from { transform: scale(1) translateY(0); opacity: .75; } to { transform: scale(1.08) translateY(-3%); opacity: 1; } }
.fog { /* 地面的雾 */
  position: absolute; left: 0; bottom: 0; width: calc(100% + 1600px); height: 220px;
  background: radial-gradient(40% 60% at 25% 100%, rgba(120, 140, 200, .16), transparent 70%) 0 0 / 1600px 100% repeat-x,
              radial-gradient(35% 50% at 75% 100%, rgba(255, 150, 90, .1), transparent 70%) 0 0 / 1600px 100% repeat-x;
  animation: drift 90s linear infinite;
}
@keyframes drift { to { transform: translateX(-1600px); } }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 金色线描的哥特城堡天际线（深蓝填充 + 金边 + 尖顶 + 玫瑰窗），压在色块底部 */
.castles { position: absolute; left: 0; right: 0; bottom: -1px; height: 260px; background: url(art/castle-gold.svg) 50% 100% / 1600px 260px repeat-x; filter: drop-shadow(0 -8px 22px rgba(255, 150, 60, .16)); }
.castles::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(0deg, var(--night), transparent); }
/* 左下红焰、右下祥云（.sky[data-orn] 自动加；首页主视觉直接写在 HTML 里） */
.orn { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.orn-flame { left: -60px; bottom: -14px; width: min(620px, 46vw); filter: drop-shadow(0 0 24px rgba(255, 90, 30, .35)); animation: flame-sway 5s ease-in-out infinite alternate; transform-origin: 30% 100%; }
.orn-cloud { right: -70px; bottom: -18px; width: min(640px, 46vw); filter: drop-shadow(0 -6px 20px rgba(0, 0, 0, .5)); animation: cloud-drift 9s ease-in-out infinite alternate; }
.sky .orn-flame { width: min(440px, 36vw); bottom: -6px; opacity: .9; }
.sky .orn-cloud { width: min(460px, 36vw); bottom: -10px; opacity: .95; }
@keyframes flame-sway { from { transform: skewX(-2deg) scaleY(.97); } to { transform: skewX(2deg) scaleY(1.03); } }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(-18px); } }

/* ---------------- 文字：鎏金标题 ---------------- */
.title-pop {
  margin: 0; position: relative; display: inline-block; max-width: 100%; font: 900 clamp(34px, 5.6vw, 58px)/1.14 var(--serif); letter-spacing: .06em;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a2200) drop-shadow(0 0 18px rgba(255, 190, 90, .35)) drop-shadow(0 10px 18px rgba(0, 0, 0, .7));
}
.title-pop::after { /* 一道白光扫过 */
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 56%);
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 8s ease-in-out 1.2s infinite;
}
@keyframes shimmer { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
.lead-pop { color: var(--ink-2); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.emblem { width: 150px; height: auto; margin-bottom: 10px; filter: drop-shadow(0 0 8px rgba(255, 200, 100, .4)); }
/* 金线 + 四芒星分隔 */
.divider { display: block; width: min(320px, 80%); height: 30px; margin: 14px 0; background: url(art/divider.svg) center / 100% 100% no-repeat; }
.center .divider { margin-left: auto; margin-right: auto; }

/* 区块标题：鎏金字 + 两侧花饰 */
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 24px; }
.ribbon {
  position: relative; display: inline-flex; align-items: center; gap: 14px; margin: 0; white-space: nowrap;
  font: 900 30px/1.2 var(--serif); letter-spacing: .16em;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2a1800) drop-shadow(0 0 12px rgba(255, 190, 90, .3));
}
/* 两侧是游戏里那对发光的金色尖括号 */
.ribbon::before, .ribbon::after { content: ""; flex: none; width: .56em; height: 1.5em; background: url(game/bracket-l.webp) center / contain no-repeat; }
.ribbon::after { background-image: url(game/bracket-r.webp); }
.sec-head .hint { color: var(--ink-2); font-size: 13.5px; }
.sec-head .hint b { color: var(--gold-hi); font: 700 17px var(--num); margin: 0 2px; }
.hint { color: var(--ink-3); font-size: 13px; }
.hint b { color: var(--gold-hi); font: 600 15px var(--num); margin: 0 2px; }

/* 子页的页头（放在 band-sky 里） */
.page-head { padding: clamp(40px, 6vw, 80px) 0 clamp(130px, 13vw, 180px); }
.page-head h1 { font-size: clamp(38px, 6vw, 64px); }
.page-head .kicker { margin-bottom: 6px; color: #f6e2a6; font: 700 13px/1 var(--serif); letter-spacing: .45em; text-transform: uppercase; text-shadow: 0 0 8px #000, 0 2px 4px #000; }
.lead-pop .hl { color: var(--gold-hi); font-weight: 700; }
.page-head p { margin: 14px 0 0; max-width: 34em; font-size: 16px; }
/* 子页面正文：往上压一点，盖在页头的城堡上 */
.page-body { position: relative; z-index: 2; margin-top: -70px; padding-bottom: 20px; }
.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; }
.center .emblem { margin-left: auto; margin-right: auto; }

/* ---------------- 面板：暗金描边 + 双线 + 华丽边角 ---------------- */
.panel { /* 游戏 UI 的面板：近黑底 + 淡淡的涡纹 + 金色双线 + 左右两颗菱形钉 */
  position: relative; color: var(--ink); border-radius: 2px;
  background:
    url(art/tip.svg) 0 50% / 12px 12px no-repeat,
    url(art/tip.svg) 100% 50% / 12px 12px no-repeat,
    url(art/swirl-gold.svg) 0 0 / 120px,
    linear-gradient(180deg, var(--panel-1), var(--panel-2));
  border: 1px solid var(--panel-line);
  box-shadow: inset 0 1px 0 var(--panel-hi), inset 0 0 0 4px rgba(0, 0, 0, .28), inset 0 0 0 5px var(--line-soft), 0 0 0 1px rgba(0, 0, 0, .55), 0 18px 34px -16px rgba(0, 0, 0, .95);
}
/* 给任何块加四个金色边角：class="frame"（自带 position:relative） */
.frame { position: relative; }
.frame::before {
  content: ""; position: absolute; inset: -6px; z-index: 3; pointer-events: none;
  background:
    url(art/corner-tl.svg) 0 0 / var(--cs, 46px) no-repeat,
    url(art/corner-tr.svg) 100% 0 / var(--cs, 46px) no-repeat,
    url(art/corner-bl.svg) 0 100% / var(--cs, 46px) no-repeat,
    url(art/corner-br.svg) 100% 100% / var(--cs, 46px) no-repeat;
}
.shine { overflow: hidden; isolation: isolate; }
.shine::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 230, 170, 0), rgba(255, 230, 170, .28), rgba(255, 230, 170, 0));
  transform: skewX(-18deg); opacity: 0;
}
.shine:hover::after { animation: sweep .8s ease-out; }
@keyframes sweep { from { transform: skewX(-18deg) translateX(0); opacity: 1; } to { transform: skewX(-18deg) translateX(480%); opacity: 1; } }

/* ---------------- 按钮 ---------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 3px; background: rgba(12, 18, 44, .85); color: var(--ink);
  font-size: 14px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s, transform .15s, filter .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--gold-hi); color: var(--gold-hi); box-shadow: 0 0 16px rgba(246, 210, 122, .2); }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 鎏金按钮：像一块铸金铭牌 */
/* 金色按钮：照游戏里「前往」按钮——金色底 + 一圈深色金属框（九宫格 SVG） */
.btn-gold {
  border: 10px solid transparent; border-radius: 0; border-image: url(art/btn-frame.svg) 10 / 10px / 0 stretch;
  padding: 0 24px; min-height: 52px; color: #2a1600; font-weight: 800; letter-spacing: .12em; text-shadow: 0 1px 0 rgba(255, 244, 210, .7);
  background: linear-gradient(180deg, #fbe7a8 0%, #e6bb62 46%, #cf9a3d 54%, #e0b04f 100%) padding-box;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55));
}
.btn-gold:hover { color: #1a0d00; border-color: transparent; box-shadow: none; filter: brightness(1.1) drop-shadow(0 0 14px rgba(255, 196, 96, .55)); }
.btn-gold:active { transform: translateY(1px); }
.btn.is-ok { background: linear-gradient(180deg, #8fe0ae, #2f8a58) padding-box; color: #06210f; text-shadow: none; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-glass { background: rgba(6, 9, 20, .45); border-color: rgba(246, 210, 122, .5); color: var(--ink); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(6, 9, 20, .7); color: var(--gold-hi); border-color: var(--gold-hi); }

/* 纹章：暗底金圈，图标用职业/主题色微光 */
/* 纹章：游戏弹窗两边那种菱形宝石框（深红 / 深蓝 + 金双线），图标立在里面 */
.medal {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center; color: #ffe3a3;
  background: url(art/diamond-red.svg) center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1.4), filter .3s;
}
.medal.blue, li:nth-child(even) > * > .medal { background-image: url(art/diamond-blue.svg); color: #d8e6ff; }
.medal svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255, 200, 100, .5)); }
.chip-tag { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 2px; font-size: 12px; color: var(--gold-hi); background: rgba(212, 166, 74, .12); border: 1px solid var(--line-soft); }

/* 进场 */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

/* 提示条 */
.toast {
  position: fixed; left: 50%; top: 76px; z-index: 1200; transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 10px 24px; border-radius: 3px; text-align: center;
  background: linear-gradient(180deg, #1c2650, #0a1028); color: var(--ink); font-size: 14px;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 3px #050816, 0 0 0 4px var(--line-soft), 0 14px 34px -12px rgba(0, 0, 0, .9);
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .sky-sun { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
  .castles { height: 163px; background-size: 1000px 163px; }
  .ribbon { font-size: 24px; gap: 10px; }
  .ribbon::before, .ribbon::after { width: 44px; }
  .emblem { width: 130px; }
  @keyframes drift { to { transform: translateX(-1600px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}