/* ============================================
   《大荒百兽志》· 设计系统 v2 —— 东方玄幻
   墨色为底，鎏金为骨，朱砂为印，荒息四色为魂
   ============================================ */
:root {
  --shen-purple: #9B7EBD;      /* 蜃气紫 */
  --lin-gold:    #D4AF6A;      /* 鳞粉金 */
  --gold-bright: #F0D49A;      /* 鎏金亮 */
  --yu-teal:     #5FA8A0;      /* 羽焰青 */
  --gui-white:   #F2EFE6;      /* 归墟白 */
  --cinnabar:    #B5453C;      /* 朱砂 */
  --ink-deep:    #0B1214;      /* 玄墨（最深） */
  --ink:         #101A1D;      /* 玄墨 */
  --ink-mid:     #16232A;      /* 墨青 */
  --bg-card:     rgba(28,42,46,.55);
  --bg-card-2:   rgba(38,54,57,.75);
  --line:        rgba(212,175,106,.16);
  --line-strong: rgba(212,175,106,.4);
  --text:        #D8D4C8;
  --text-dim:    #8fa0a0;
  --d-center: #c9c4b4;
  --d-east:   #D4AF6A;
  --d-south:  #5FA8A0;
  --d-west:   #c99a6a;
  --d-north:  #9B7EBD;
  --radius: 14px;
  --font-serif: "Noto Serif SC","Source Han Serif SC","STZhongsong","SimSun",serif;
  --font-kai: "STKaiti","KaiTi","楷体","Noto Serif SC",serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:
    radial-gradient(ellipse 90% 60% at 80% -10%, rgba(155,126,189,.06), transparent 60%),
    radial-gradient(ellipse 80% 50% at 10% 110%, rgba(95,168,160,.05), transparent 60%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 40%, #0e181b 100%);
  background-attachment: fixed;
  color:var(--text);
  font-family:var(--font-serif); font-size:17px; line-height:1.95;
  letter-spacing:.05em; min-height:100vh;
}
::selection { background:rgba(212,175,106,.35); color:var(--gui-white); }
::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-track { background:var(--ink-deep); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg, rgba(212,175,106,.35), rgba(212,175,106,.15)); border-radius:9px; }
::-webkit-scrollbar-thumb:hover { background:rgba(212,175,106,.5); }

/* 荒息呼吸底光（涨潮—平潮—退潮） */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(95,168,160,.06), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 30%, rgba(155,126,189,.05), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 95%, rgba(212,175,106,.05), transparent 60%);
  animation:huangxi 14s ease-in-out infinite;
}
@keyframes huangxi { 0%,100%{opacity:.45} 50%{opacity:1} }
main { position:relative; z-index:1; }

/* ---------- 顶部导航 ---------- */
nav.topnav {
  position:sticky; top:0; z-index:50;
  background:rgba(11,18,20,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:12px 26px;
}
nav.topnav .brand {
  font-size:19px; font-weight:700; color:var(--gui-white); margin-right:20px;
  text-decoration:none; letter-spacing:.14em; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px;
}
nav.topnav .brand::before {
  content:"荒"; font-family:var(--font-kai); font-size:15px; line-height:1;
  color:var(--gui-white); background:var(--cinnabar);
  padding:4px 5px; border-radius:4px;
  box-shadow:0 0 12px rgba(181,69,60,.4), inset 0 0 4px rgba(0,0,0,.3);
}
nav.topnav .brand span { color:var(--lin-gold); }
nav.topnav a.navlink {
  color:var(--text-dim); text-decoration:none; padding:5px 13px;
  font-size:14.5px; transition:all .3s; white-space:nowrap;
  border-bottom:1px solid transparent; letter-spacing:.08em;
}
nav.topnav a.navlink:hover { color:var(--gold-bright); }
nav.topnav a.navlink.active {
  color:var(--gold-bright);
  border-bottom-color:var(--lin-gold);
  text-shadow:0 0 14px rgba(212,175,106,.5);
}

/* ---------- 版式 ---------- */
.wrap { max-width:1080px; margin:0 auto; padding:52px 24px 100px; }
.wrap-wide { max-width:1240px; margin:0 auto; padding:52px 24px 100px; }

h1.page-title {
  font-size:40px; text-align:center; margin:34px 0 6px; font-weight:700;
  letter-spacing:.22em; font-family:var(--font-kai);
  background:linear-gradient(180deg, var(--gold-bright) 20%, var(--lin-gold) 60%, #a8854c 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px rgba(212,175,106,.25));
}
h1.page-title::after {
  content:""; display:block; width:180px; height:1px; margin:16px auto 0;
  background:linear-gradient(90deg, transparent, var(--lin-gold), transparent);
}
p.page-sub { text-align:center; color:var(--text-dim); margin:14px 0 46px; font-size:15.5px; letter-spacing:.1em; }

section.block { margin:64px 0; }
h2.block-title {
  font-size:25px; color:var(--gui-white); margin-bottom:8px;
  letter-spacing:.14em; font-weight:600; display:flex; align-items:center; gap:14px;
}
h2.block-title::before {
  content:"❖"; font-size:15px; color:var(--lin-gold);
  filter:drop-shadow(0 0 8px rgba(212,175,106,.6));
}
h2.block-title::after {
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line-strong), transparent 80%);
}
h2.block-title.teal::before   { color:var(--yu-teal); filter:drop-shadow(0 0 8px rgba(95,168,160,.6)); }
h2.block-title.purple::before { color:var(--shen-purple); filter:drop-shadow(0 0 8px rgba(155,126,189,.6)); }
h2.block-title.white::before  { color:var(--gui-white); filter:drop-shadow(0 0 8px rgba(242,239,230,.6)); }
p.block-sub { color:var(--text-dim); margin:4px 0 24px 30px; font-size:15px; }
h3 { color:var(--gui-white); font-size:20px; margin:28px 0 10px; letter-spacing:.08em; }
h4 { color:var(--lin-gold); font-size:17px; margin:18px 0 8px; letter-spacing:.06em; }
p { margin:12px 0; }
strong { color:var(--gui-white); }
em { color:var(--lin-gold); font-style:normal; }
ul.plain { margin:10px 0 10px 24px; }
ul.plain li { margin:8px 0; }

/* ---------- 卡片：墨匣 + 鎏金角饰 ---------- */
.card {
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 32px; margin:20px 0;
  backdrop-filter:blur(3px);
}
.card::before, .card::after {
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
}
.card::before { top:-1px; left:-1px; border-top:1.5px solid var(--line-strong); border-left:1.5px solid var(--line-strong); border-top-left-radius:var(--radius); }
.card::after { bottom:-1px; right:-1px; border-bottom:1.5px solid var(--line-strong); border-right:1.5px solid var(--line-strong); border-bottom-right-radius:var(--radius); }

/* 展签：朱砂印 */
.plaque {
  position:relative;
  background:linear-gradient(135deg, rgba(212,175,106,.07), rgba(155,126,189,.05));
  border:1px solid var(--line);
  border-left:3px solid var(--lin-gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 24px; margin:22px 0; font-size:15.5px;
}
.plaque .tag {
  display:inline-block; font-size:12.5px; color:var(--gui-white);
  background:var(--cinnabar); border-radius:4px;
  padding:2px 12px; margin-bottom:8px; letter-spacing:.16em;
  font-family:var(--font-kai);
  box-shadow:0 0 10px rgba(181,69,60,.35);
}

/* 大引文：碑刻 */
blockquote.grand {
  position:relative; text-align:center; font-size:20px; color:var(--gui-white);
  padding:40px 28px; margin:38px 0; letter-spacing:.14em; line-height:2.3;
  font-family:var(--font-kai);
  background:radial-gradient(ellipse at center, rgba(242,239,230,.045), transparent 70%);
}
blockquote.grand::before, blockquote.grand::after {
  content:"❖ ❖ ❖"; display:block; font-size:10px; color:rgba(212,175,106,.55);
  letter-spacing:1.6em; text-indent:1.6em;
}
blockquote.grand::before { margin-bottom:22px; }
blockquote.grand::after { margin-top:22px; }
blockquote.grand small { display:block; color:var(--text-dim); font-size:14px; margin-top:12px; letter-spacing:.08em; font-family:var(--font-serif); }

/* ---------- 表格 ---------- */
table { width:100%; border-collapse:collapse; margin:18px 0; font-size:15.5px; }
th {
  text-align:left; color:var(--lin-gold); font-weight:600;
  padding:11px 14px; letter-spacing:.1em; white-space:nowrap;
  border-bottom:1px solid var(--line-strong);
}
td { padding:11px 14px; border-bottom:1px solid rgba(212,175,106,.08); vertical-align:top; }
tr:hover td { background:rgba(212,175,106,.03); }

/* ---------- 首页 Hero ---------- */
.hero {
  position:relative; min-height:92vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; overflow:hidden; padding:60px 20px;
}
.hero-eye {
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 46% 18% at 50% 64%, rgba(212,175,106,.14), transparent 70%),
    radial-gradient(ellipse 7% 5% at 50% 64%, rgba(242,239,230,.32), rgba(212,175,106,.1) 55%, transparent 75%),
    radial-gradient(ellipse 90% 42% at 50% 110%, #1d2b2f 30%, transparent 75%),
    radial-gradient(ellipse 120% 56% at 50% 120%, #162226 40%, transparent 80%),
    linear-gradient(180deg, #090f11 0%, #101c21 55%, #0e181b 100%);
  animation:eyebreath 11s ease-in-out infinite;
}
@keyframes eyebreath { 0%,100%{filter:brightness(.88)} 50%{filter:brightness(1.15)} }
.hero-mist {
  position:absolute; left:-10%; right:-10%; height:140px; bottom:16%; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(242,239,230,.05) 30%,rgba(242,239,230,.09) 50%,rgba(242,239,230,.05) 70%,transparent);
  filter:blur(20px); animation:mistdrift 26s linear infinite alternate;
}
@keyframes mistdrift { from{transform:translateX(-4%)} to{transform:translateX(4%)} }
.hero-side {
  position:absolute; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-family:var(--font-kai);
  font-size:15px; color:rgba(216,212,200,.32); letter-spacing:.6em;
  user-select:none; pointer-events:none;
}
.hero-side.l { left:5%; }
.hero-side.r { right:5%; }
.hero-seal {
  writing-mode:vertical-rl; font-family:var(--font-kai);
  font-size:14px; color:var(--gui-white); background:var(--cinnabar);
  padding:12px 6px; border-radius:4px; letter-spacing:.3em;
  box-shadow:0 0 20px rgba(181,69,60,.45), inset 0 0 6px rgba(0,0,0,.25);
  margin-bottom:30px; opacity:.92;
}
.hero h1 {
  font-size:clamp(42px,7vw,78px); font-weight:700; font-family:var(--font-kai);
  letter-spacing:.24em; text-indent:.24em;
  background:linear-gradient(180deg, #FFF6E0 10%, var(--gold-bright) 45%, var(--lin-gold) 75%, #9c7a45 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 40px rgba(212,175,106,.35));
}
.hero p.slogan { font-size:clamp(15px,2.2vw,20px); color:var(--text-dim); margin-top:24px; letter-spacing:.14em; line-height:2.2; }
.hero .down { margin-top:64px; color:rgba(212,175,106,.6); font-size:13px; letter-spacing:.4em; animation:bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(9px);opacity:1} }

/* ---------- 栅格与入口卡 ---------- */
.grid { display:grid; gap:18px; margin:26px 0; }
.grid.c2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid.c3 { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.grid.c4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
a.gate {
  position:relative; display:block; text-decoration:none; color:var(--text);
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; overflow:hidden;
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
a.gate::before {
  content:""; position:absolute; top:0; left:-80%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(212,175,106,.06), transparent);
  transition:left .6s ease; pointer-events:none;
}
a.gate:hover { transform:translateY(-5px); border-color:var(--line-strong); box-shadow:0 14px 44px rgba(0,0,0,.45), 0 0 24px rgba(212,175,106,.08); }
a.gate:hover::before { left:120%; }
a.gate .g-title { font-size:19px; color:var(--gui-white); margin-bottom:9px; letter-spacing:.1em; font-family:var(--font-kai); }
a.gate .g-desc { font-size:14px; color:var(--text-dim); line-height:1.9; }
a.gate .g-more { display:inline-block; margin-top:12px; font-size:13px; color:var(--lin-gold); letter-spacing:.12em; }

/* 五域配色 */
.domain-band { height:3px; border-radius:99px; margin-bottom:16px; opacity:.85;
  background:linear-gradient(90deg, currentColor, transparent); }
.dc-center .domain-band{color:var(--d-center)} .dc-east .domain-band{color:var(--d-east)}
.dc-south .domain-band{color:var(--d-south)} .dc-west .domain-band{color:var(--d-west)} .dc-north .domain-band{color:var(--d-north)}
.dc-center .g-title,.t-center{color:var(--d-center)!important} .dc-east .g-title,.t-east{color:var(--d-east)!important}
.dc-south .g-title,.t-south{color:var(--d-south)!important} .dc-west .g-title,.t-west{color:var(--d-west)!important}
.dc-north .g-title,.t-north{color:var(--d-north)!important}

/* ---------- 选项卡 ---------- */
.tabs { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0; justify-content:center; }
.tabs button {
  font-family:var(--font-kai); font-size:15.5px; letter-spacing:.14em;
  color:var(--text-dim); background:transparent;
  border:1px solid var(--line); border-radius:999px;
  padding:9px 26px; cursor:pointer; transition:all .3s;
}
.tabs button:hover { color:var(--gold-bright); border-color:var(--line-strong); }
.tabs button.on {
  color:var(--ink-deep); font-weight:700;
  background:linear-gradient(180deg, var(--gold-bright), var(--lin-gold));
  border-color:var(--lin-gold);
  box-shadow:0 0 20px rgba(212,175,106,.35);
}

/* ---------- 荒主卡与弹层 ---------- */
.lord-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); margin:26px 0; }
.lord-card {
  position:relative; background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; cursor:pointer; overflow:hidden;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.lord-card::after {
  content:""; position:absolute; bottom:-1px; right:-1px; width:20px; height:20px;
  border-bottom:1.5px solid var(--line-strong); border-right:1.5px solid var(--line-strong);
  border-bottom-right-radius:var(--radius); pointer-events:none; opacity:0; transition:opacity .3s;
}
.lord-card:hover { border-color:var(--line-strong); transform:translateY(-4px); box-shadow:0 10px 34px rgba(0,0,0,.4), 0 0 18px rgba(212,175,106,.07); }
.lord-card:hover::after { opacity:1; }
.lord-card .ln { font-size:18.5px; color:var(--gui-white); letter-spacing:.05em; font-family:var(--font-kai); }
.lord-card .ln .star { color:var(--lin-gold); margin-right:4px; filter:drop-shadow(0 0 6px rgba(212,175,106,.7)); }
.lord-card .lx { font-size:13px; color:var(--text-dim); margin:7px 0 9px; }
.lord-card .lnote { font-size:14px; color:var(--text); line-height:1.85; }
.modal-mask {
  position:fixed; inset:0; z-index:90; background:rgba(6,10,12,.85); backdrop-filter:blur(8px);
  display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:6vh 18px;
}
.modal-mask.show { display:flex; }
.modal {
  position:relative; max-width:700px; width:100%;
  background:linear-gradient(180deg, #142025, #101a1e);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:38px 42px 32px; margin-bottom:6vh; animation:pop .35s ease;
  box-shadow:0 20px 80px rgba(0,0,0,.6), 0 0 40px rgba(212,175,106,.06);
}
.modal::before {
  content:""; position:absolute; inset:6px; pointer-events:none;
  border:1px solid rgba(212,175,106,.1); border-radius:10px;
}
@keyframes pop { from{transform:translateY(18px);opacity:0} to{transform:none;opacity:1} }
.modal .close {
  position:absolute; top:14px; right:18px; cursor:pointer; z-index:2;
  color:var(--text-dim); font-size:24px; background:none; border:none; font-family:inherit; line-height:1;
  transition:color .25s, transform .25s;
}
.modal .close:hover { color:var(--gold-bright); transform:rotate(90deg); }
.modal h3 { font-size:26px; margin-top:0; font-family:var(--font-kai); letter-spacing:.08em;
  background:linear-gradient(180deg, var(--gold-bright), var(--lin-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.modal .sub { color:var(--text-dim); font-size:14px; margin-bottom:18px; letter-spacing:.06em; }
.modal dl { display:grid; grid-template-columns:118px 1fr; gap:10px 16px; font-size:15.5px; margin-top:16px; }
.modal dt { color:var(--lin-gold); white-space:nowrap; letter-spacing:.1em; }
.modal dd { color:var(--text); }

/* ---------- 图鉴卡 ---------- */
.beast-card {
  position:relative; background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 28px; margin:16px 0;
  transition:border-color .3s;
}
.beast-card:hover { border-color:var(--line-strong); }
.beast-card h4 { margin-top:0; font-size:19px; color:var(--gui-white); font-family:var(--font-kai); letter-spacing:.08em; }
.beast-card h4 .star { color:var(--lin-gold); filter:drop-shadow(0 0 6px rgba(212,175,106,.7)); }
.beast-card .b-meta { font-size:13px; color:var(--text-dim); margin-bottom:12px; letter-spacing:.05em; }
.beast-card dl { display:grid; grid-template-columns:96px 1fr; gap:7px 14px; font-size:15px; }
.beast-card dt { color:var(--lin-gold); white-space:nowrap; letter-spacing:.08em; }
.beast-card dd { color:var(--text); }

/* ---------- 术语 ---------- */
.glossary-search {
  display:block; width:100%; max-width:520px; margin:0 auto 34px;
  font-family:var(--font-serif); font-size:17px; color:var(--gui-white);
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:999px; padding:13px 28px; outline:none; transition:all .3s;
  letter-spacing:.05em;
}
.glossary-search:focus { border-color:var(--lin-gold); box-shadow:0 0 24px rgba(212,175,106,.12); }
.glossary-search::placeholder { color:rgba(143,160,160,.6); }
.term-row td:first-child { color:var(--gui-white); white-space:nowrap; font-weight:600; }

/* ---------- 童谣：折页笺 ---------- */
.rhyme {
  position:relative; background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px 34px; margin:22px 0; text-align:center;
}
.rhyme::before { content:"❁"; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-size:12px; color:rgba(212,175,106,.5); }
.rhyme h4 { margin-top:8px; font-family:var(--font-kai); font-size:19px; }
.rhyme .verse { font-size:18px; color:var(--gui-white); line-height:2.5; letter-spacing:.14em; margin:14px 0; font-family:var(--font-kai); }
.rhyme .use { font-size:13.5px; color:var(--text-dim); border-top:1px dashed rgba(212,175,106,.2); padding-top:14px; margin-top:16px; text-align:left; }

/* ---------- 纪事 / 放映厅 ---------- */
.src-tag {
  font-size:12.5px; color:var(--ink-deep); background:var(--yu-teal);
  display:inline-block; border-radius:4px; padding:3px 14px; margin-bottom:12px;
  letter-spacing:.1em; font-family:var(--font-kai);
}
.src-tag.gold { background:var(--lin-gold); }
.badge-live {
  display:inline-block; font-size:12px; color:var(--gui-white); background:var(--cinnabar);
  border-radius:4px; padding:2px 12px; margin-left:10px; letter-spacing:.14em;
  font-family:var(--font-kai); vertical-align:middle;
  animation:livepulse 2.2s ease-in-out infinite;
}
@keyframes livepulse { 0%,100%{box-shadow:0 0 0 0 rgba(181,69,60,.5)} 50%{box-shadow:0 0 16px 3px rgba(181,69,60,.4)} }
.video-slot {
  position:relative; border-radius:var(--radius); margin:26px 0;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(212,175,106,.04), rgba(155,126,189,.03));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--text-dim); padding:34px 20px;
}
.video-slot .vs-title { font-size:16px; color:rgba(212,175,106,.75); letter-spacing:.5em; text-indent:.5em; font-family:var(--font-kai); }
.video-slot .vs-note { font-size:13px; letter-spacing:.12em; color:var(--text-dim); }
.story { font-size:17px; line-height:2.15; }
.story p { margin:20px 0; }
.chron-nav { display:flex; justify-content:space-between; gap:14px; margin-top:48px; flex-wrap:wrap; }
.chron-nav a {
  color:var(--text-dim); text-decoration:none; border:1px solid var(--line);
  border-radius:999px; padding:9px 24px; font-size:14.5px; transition:all .3s; letter-spacing:.06em;
}
.chron-nav a:hover { color:var(--gold-bright); border-color:var(--line-strong); box-shadow:0 0 16px rgba(212,175,106,.1); }

/* ---------- 时间轴 ---------- */
.timeline { position:relative; margin:36px 0; padding-left:36px; }
.timeline::before {
  content:""; position:absolute; left:9px; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, rgba(155,126,189,.5), rgba(212,175,106,.5), rgba(95,168,160,.5));
}
.tl-item { position:relative; margin:32px 0; }
.tl-item::before {
  content:""; position:absolute; left:-32px; top:12px; width:9px; height:9px;
  background:var(--lin-gold); transform:rotate(45deg);
  box-shadow:0 0 14px rgba(212,175,106,.6);
}
.tl-item.dim::before { background:var(--text-dim); box-shadow:none; }
.tl-item .tl-time { font-size:13.5px; color:var(--lin-gold); letter-spacing:.14em; margin-bottom:4px; font-family:var(--font-kai); }
.tl-item h4 { margin:2px 0 6px; font-size:18px; color:var(--gui-white); }
.tl-item p { margin:6px 0; font-size:15.5px; }
.tl-era { margin:58px 0 12px; }
.tl-era h3 { font-size:23px; color:var(--gui-white); font-family:var(--font-kai); letter-spacing:.12em; }
.tl-era .era-sub { color:var(--text-dim); font-size:14px; letter-spacing:.05em; }
.tl-item.lost { opacity:.7; }
.tl-item.lost .tl-time { color:var(--text-dim); }

/* ---------- 结构示意 ---------- */
.layer-stack { max-width:560px; margin:24px auto; }
.layer {
  border-radius:999px; text-align:center; padding:14px 18px; margin:11px auto;
  border:1px solid var(--line); font-size:15px; color:var(--gui-white); letter-spacing:.05em;
}
.layer small { display:block; color:var(--text-dim); font-size:12.5px; letter-spacing:.03em; }
.layer.l1{width:55%;background:rgba(212,175,106,.1)} .layer.l2{width:72%;background:rgba(95,168,160,.1)}
.layer.l3{width:88%;background:rgba(155,126,189,.1)} .layer.l4{width:100%;background:rgba(242,239,230,.06)}
.cycle { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:24px 0; }
.cycle .step {
  position:relative; background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 14px; text-align:center; transition:border-color .3s;
}
.cycle .step:hover { border-color:var(--line-strong); }
.cycle .step .num { color:var(--lin-gold); font-size:13px; letter-spacing:.2em; font-family:var(--font-kai); }
.cycle .step .tt { color:var(--gui-white); font-size:16.5px; margin:7px 0; font-family:var(--font-kai); }
.cycle .step .dd { color:var(--text-dim); font-size:13.5px; line-height:1.75; }

/* ---------- 滚动渐显 ---------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .9s ease, transform .9s ease; }
.reveal.vis { opacity:1; transform:none; }

/* ---------- 页脚 / 页内导航 ---------- */
footer {
  position:relative; z-index:1; border-top:1px solid var(--line);
  text-align:center; color:var(--text-dim); font-size:14px;
  padding:48px 20px 62px; letter-spacing:.12em;
}
footer .motto { color:var(--gui-white); font-size:16.5px; margin-bottom:12px; font-family:var(--font-kai); letter-spacing:.18em; }
.toc { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 36px; }
.toc a {
  color:var(--text-dim); text-decoration:none; font-size:14px;
  border:1px solid var(--line); border-radius:999px; padding:6px 18px;
  transition:all .3s; letter-spacing:.08em;
}
.toc a:hover { color:var(--gold-bright); border-color:var(--line-strong); }

@media (max-width:720px){
  body{font-size:16px}
  .wrap,.wrap-wide{padding:32px 16px 76px}
  h1.page-title{font-size:30px}
  .modal{padding:28px 22px}
  .beast-card dl{grid-template-columns:78px 1fr}
  .modal dl{grid-template-columns:92px 1fr}
  .hero-side{display:none}
}

/* ============================================
   背景层次 —— 墨山 · 云雾 · 绢纹 · 巨字水印 · 暗角
   （参考全球暗色奇幻站通用做法：多层剪影+纹理+水印填充负空间）
   ============================================ */

/* 层次容器（common.js 注入），全部 fixed 且指针穿透 */
.backdrop { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* 1. 远山 · 近山：墨色剪影两层，极缓漂移（山即兽的暗示） */
.bd-mtn { position:absolute; left:-12%; right:-12%; bottom:0; height:34vh; background-repeat:repeat-x; background-position:bottom; }
.bd-mtn.far {
  height:42vh; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'%3E%3Cpath d='M0 320 L0 210 Q60 170 130 195 Q200 220 260 160 Q330 90 400 150 Q450 195 520 180 Q600 160 660 110 Q730 55 800 120 Q860 175 930 165 Q1010 150 1070 190 Q1130 225 1200 200 L1200 320 Z' fill='%23131f24'/%3E%3C/svg%3E");
  background-size:1200px 100%;
  animation:mtndrift 90s linear infinite alternate;
}
.bd-mtn.near {
  height:26vh; opacity:.75;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 240' preserveAspectRatio='none'%3E%3Cpath d='M0 240 L0 170 Q90 130 170 160 Q260 195 340 140 Q420 85 500 135 Q570 180 650 165 Q740 145 810 100 Q890 55 960 115 Q1030 170 1120 155 Q1210 140 1280 175 Q1340 200 1400 185 L1400 240 Z' fill='%230d171b'/%3E%3C/svg%3E");
  background-size:1400px 100%;
  animation:mtndrift 60s linear infinite alternate-reverse;
  filter:drop-shadow(0 -1px 12px rgba(212,175,106,.06));
}
@keyframes mtndrift { from{transform:translateX(0)} to{transform:translateX(6%)} }

/* 2. 云雾带：两条长云极缓横移 */
.bd-cloud { position:absolute; height:120px; left:-30%; width:160%; filter:blur(26px); }
.bd-cloud.a {
  top:22%;
  background:linear-gradient(90deg, transparent, rgba(242,239,230,.045) 25%, rgba(155,126,189,.035) 50%, rgba(242,239,230,.045) 72%, transparent);
  animation:clouddrift 70s linear infinite alternate;
}
.bd-cloud.b {
  top:52%; height:90px;
  background:linear-gradient(90deg, transparent, rgba(95,168,160,.035) 30%, rgba(242,239,230,.04) 55%, transparent 85%);
  animation:clouddrift 95s linear infinite alternate-reverse;
}
@keyframes clouddrift { from{transform:translateX(-6%)} to{transform:translateX(8%)} }

/* 3. 绢纸颗粒：细噪点纹理，暗色站消除"平"感的关键 */
.bd-grain {
  position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* 4. 巨字水印：每页一枚淡金楷字印在右侧（碑帖感），呼吸极缓 */
.bd-glyph {
  position:absolute; right:2vw; top:50%; transform:translateY(-52%);
  font-family:var(--font-kai); font-weight:700;
  font-size:clamp(280px, 38vw, 620px); line-height:1;
  color:transparent;
  background:linear-gradient(200deg, rgba(212,175,106,.055), rgba(212,175,106,.012) 70%);
  -webkit-background-clip:text; background-clip:text;
  user-select:none;
  animation:glyphbreath 18s ease-in-out infinite;
}
@keyframes glyphbreath { 0%,100%{opacity:.75} 50%{opacity:1} }

/* 5. 暗角收边 + 上缘天光 */
.bd-vignette {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 130% 100% at 50% 45%, transparent 55%, rgba(5,9,10,.5) 100%),
    linear-gradient(180deg, rgba(240,212,154,.03), transparent 18%);
}

/* 6. 卷轴边饰：左右两条金丝竖线 + 菱形珰（宽屏可见） */
.bd-rail { position:absolute; top:8vh; bottom:8vh; width:1px;
  background:linear-gradient(180deg, transparent, rgba(212,175,106,.22) 20%, rgba(212,175,106,.22) 80%, transparent); }
.bd-rail::before, .bd-rail::after {
  content:""; position:absolute; left:50%; width:7px; height:7px;
  background:rgba(212,175,106,.4); transform:translateX(-50%) rotate(45deg);
}
.bd-rail::before { top:16%; } .bd-rail::after { bottom:16%; }
.bd-rail.l { left:2vw; } .bd-rail.r { right:2vw; }
@media (max-width:1100px){ .bd-rail{display:none} .bd-glyph{font-size:280px;opacity:.6} }



/* 页面标题：鎏金流光扫过 */
h1.page-title {
  background-size:200% 100%;
  animation:goldflow 7s ease-in-out infinite;
}
@keyframes goldflow {
  0%,100% { background-position:0% 50%; filter:drop-shadow(0 0 24px rgba(212,175,106,.25)); }
  50%     { background-position:100% 50%; filter:drop-shadow(0 0 38px rgba(240,212,154,.4)); }
}
h1.page-title::after { animation:linebreath 5s ease-in-out infinite; }
@keyframes linebreath { 0%,100%{opacity:.5;width:180px} 50%{opacity:1;width:240px} }

/* Hero 主标题同样流光 */
.hero h1 { background-size:200% 100%; animation:goldflow 8s ease-in-out infinite; }

/* 章节题饰 ❖：缓转呼吸 */
h2.block-title::before { display:inline-block; animation:gemspin 9s linear infinite; }
@keyframes gemspin {
  0%   { transform:rotate(0deg);   opacity:.75; }
  50%  { transform:rotate(180deg); opacity:1; }
  100% { transform:rotate(360deg); opacity:.75; }
}

/* 入场：渐显带轻微升起+微光扫过（分层错峰由 JS 设置 delay） */
.reveal { opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); }
.reveal.vis { opacity:1; transform:none; }

/* 卡片鎏金角饰：呼吸微光 */
.card::before, .card::after { animation:cornerbreath 6s ease-in-out infinite; }
@keyframes cornerbreath { 0%,100%{opacity:.5} 50%{opacity:1} }

/* 入口卡：悬停时标题染金 */
a.gate:hover .g-title { color:var(--gold-bright); text-shadow:0 0 18px rgba(240,212,154,.45); transition:all .35s; }
a.gate .g-title { transition:all .35s; }

/* 荒主卡入场：交错浮现 */
.lord-card { animation:cardup .7s cubic-bezier(.22,.61,.36,1) both; }
.lord-grid .lord-card:nth-child(3n+1) { animation-delay:.02s; }
.lord-grid .lord-card:nth-child(3n+2) { animation-delay:.1s; }
.lord-grid .lord-card:nth-child(3n)   { animation-delay:.18s; }
@keyframes cardup { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }

/* 图鉴卡同样入场 */
.beast-card { animation:cardup .7s cubic-bezier(.22,.61,.36,1) both; }

/* 弹层：金边渐亮 */
.modal { animation:pop .4s cubic-bezier(.22,.61,.36,1), modalglow 3.5s ease-in-out .4s infinite; }
@keyframes modalglow {
  0%,100% { box-shadow:0 20px 80px rgba(0,0,0,.6), 0 0 30px rgba(212,175,106,.05); }
  50%     { box-shadow:0 20px 80px rgba(0,0,0,.6), 0 0 54px rgba(212,175,106,.14); }
}

/* 选项卡选中：流金微澜 */
.tabs button.on { background-size:200% 100%; animation:tabflow 3.5s ease-in-out infinite; }
@keyframes tabflow {
  0%,100% { box-shadow:0 0 16px rgba(212,175,106,.3); }
  50%     { box-shadow:0 0 30px rgba(240,212,154,.5); }
}

/* 时间轴金珰：脉动 */
.tl-item::before { animation:nodpulse 3.2s ease-in-out infinite; }
.tl-item:nth-child(2n)::before { animation-delay:1.1s; }
@keyframes nodpulse {
  0%,100% { box-shadow:0 0 10px rgba(212,175,106,.4); }
  50%     { box-shadow:0 0 22px rgba(240,212,154,.8); }
}
.tl-item.dim::before, .tl-item.lost::before { animation:none; }

/* 时间轴主线：流光下行 */
.timeline::before {
  background:linear-gradient(180deg, rgba(155,126,189,.5), rgba(212,175,106,.6), rgba(95,168,160,.5));
  background-size:100% 300%;
  animation:lineflow 9s linear infinite;
}
@keyframes lineflow { 0%{background-position:0 0} 100%{background-position:0 300%} }

/* 碑刻引文纹饰：呼吸 */
blockquote.grand::before, blockquote.grand::after { animation:cornerbreath 7s ease-in-out infinite; }

/* 放映位：鎏金描边缓缓游走 */
.video-slot {
  background:
    linear-gradient(135deg, rgba(212,175,106,.05), rgba(155,126,189,.04)) padding-box,
    linear-gradient(120deg, rgba(212,175,106,.35), rgba(155,126,189,.2), rgba(95,168,160,.25), rgba(212,175,106,.35)) border-box;
  border:1px solid transparent;
  background-size:100% 100%, 300% 300%;
  animation:slotflow 8s linear infinite;
}
@keyframes slotflow { 0%{background-position:0 0, 0% 50%} 100%{background-position:0 0, 300% 50%} }
.video-slot .vs-title { animation:cornerbreath 4s ease-in-out infinite; }

/* 童谣笺头饰：轻转 */
.rhyme::before { animation:gemspin 12s linear infinite; }

/* 归墟循环步卡：依次微光 */
.cycle .step { animation:cardup .7s cubic-bezier(.22,.61,.36,1) both; }
.cycle .step:nth-child(1){animation-delay:.05s} .cycle .step:nth-child(2){animation-delay:.13s}
.cycle .step:nth-child(3){animation-delay:.21s} .cycle .step:nth-child(4){animation-delay:.29s}
.cycle .step:nth-child(5){animation-delay:.37s} .cycle .step:nth-child(6){animation-delay:.45s}
.cycle .step .num { animation:cornerbreath 4.5s ease-in-out infinite; }

/* 层叠结构图：缓浮 */
.layer { animation:layerdrift 7s ease-in-out infinite; }
.layer.l1{animation-delay:0s} .layer.l2{animation-delay:.9s} .layer.l3{animation-delay:1.8s} .layer.l4{animation-delay:2.7s}
@keyframes layerdrift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* 朱砂印：微微起伏的光 */
nav.topnav .brand::before, .hero-seal { animation:sealbreath 5s ease-in-out infinite; }
@keyframes sealbreath {
  0%,100% { box-shadow:0 0 12px rgba(181,69,60,.35), inset 0 0 4px rgba(0,0,0,.3); }
  50%     { box-shadow:0 0 22px rgba(181,69,60,.6), inset 0 0 4px rgba(0,0,0,.3); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* ============================================
   馆藏图卷 —— 让现有插图真正进入阅读流
   图片不作贴纸式装饰：保留完整构图，以窄金框、暗角和题签融入馆藏语境
   ============================================ */
.hero-eye {
  background:
    linear-gradient(180deg, rgba(7,13,15,.3) 0%, rgba(9,16,19,.08) 44%, rgba(8,14,16,.72) 100%),
    radial-gradient(ellipse 72% 68% at 52% 54%, transparent 20%, rgba(6,10,12,.48) 100%),
    url("../img/hero/hero-eye.png") center / cover no-repeat;
}

figure.artifact-plate {
  position:relative; overflow:hidden;
  margin:28px 0 34px;
  border:1px solid rgba(212,175,106,.34);
  border-radius:var(--radius);
  background:#091113;
  box-shadow:0 22px 60px rgba(0,0,0,.42), 0 0 28px rgba(212,175,106,.06);
}
figure.artifact-plate::before {
  content:""; position:absolute; inset:7px; z-index:2; pointer-events:none;
  border:1px solid rgba(240,212,154,.16); border-radius:9px;
  box-shadow:inset 0 0 42px rgba(3,8,9,.5);
}
figure.artifact-plate img {
  display:block; width:100%; height:auto;
  filter:saturate(.88) contrast(1.03);
  transition:filter .55s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
}
figure.artifact-plate:hover img { filter:saturate(1) contrast(1.05); transform:scale(1.012); }
figure.artifact-plate figcaption {
  position:relative; z-index:3;
  padding:11px 18px 12px;
  border-top:1px solid rgba(212,175,106,.18);
  color:var(--text-dim); background:linear-gradient(90deg, rgba(18,29,33,.98), rgba(12,21,24,.95));
  font-size:13px; line-height:1.7; letter-spacing:.09em;
}
figure.artifact-plate figcaption strong { color:var(--gold-bright); font-family:var(--font-kai); font-weight:500; }
figure.artifact-plate.panorama img { aspect-ratio:3 / 1; object-fit:cover; }
figure.artifact-plate.inset { max-width:820px; margin-left:auto; margin-right:auto; }

/* 首页地图与入口图签 */
.world-map-plate { max-width:920px; margin-left:auto !important; margin-right:auto !important; }
.gate-media {
  overflow:hidden; margin:-26px -24px 20px;
  border-bottom:1px solid rgba(212,175,106,.18);
  background:#081012;
}
.gate-media img {
  display:block; width:100%; aspect-ratio:16 / 8; object-fit:cover;
  filter:saturate(.82) brightness(.86); transition:filter .45s ease, transform .7s ease;
}
a.gate:hover .gate-media img { filter:saturate(1) brightness(1); transform:scale(1.035); }
.gate-media.domain-media img { aspect-ratio:3 / 1; }
.chronicle-gate .gate-media img { aspect-ratio:16 / 9; }

/* 百荒主：每尊词条都有对应图卷，详条内保留大图 */
.domain-plate { margin:18px 0 28px !important; }
.lord-card { padding:22px 24px 24px; }
.lord-thumb {
  overflow:hidden; margin:-22px -24px 18px;
  border-bottom:1px solid rgba(212,175,106,.18); background:#081012;
}
.lord-thumb img {
  display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover;
  filter:saturate(.78) brightness(.82); transition:filter .45s ease, transform .75s ease;
}
.lord-card:hover .lord-thumb img { filter:saturate(1) brightness(1); transform:scale(1.045); }
.modal-plate {
  overflow:hidden; margin:18px 0 22px; border:1px solid rgba(212,175,106,.24); border-radius:10px;
}
.modal-plate img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; }

/* 万灵：图与文字并列；补绘稿作为第二张并置，不丢弃任一现有资产 */
.beast-card {
  display:grid; grid-template-columns:minmax(220px, .82fr) minmax(0, 1.65fr);
  gap:26px; align-items:start;
}
.beast-visual {
  overflow:hidden; border:1px solid rgba(212,175,106,.2); border-radius:10px;
  background:radial-gradient(circle at 50% 45%, #18272a, #081012 75%);
}
.beast-visual img {
  display:block; width:100%; aspect-ratio:4 / 3; object-fit:contain;
  filter:saturate(.86) brightness(.92); transition:filter .4s ease, transform .7s ease;
}
.beast-card:hover .beast-visual img { filter:saturate(1) brightness(1); transform:scale(1.018); }
.beast-visual.dual { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(212,175,106,.18); }
.beast-visual.dual img { aspect-ratio:2 / 3; background:#081012; }
.beast-copy { min-width:0; }

/* 职业、仪式、童谣与纪事 */
.chapter-plate { margin-top:18px !important; }
.rhyme .rhyme-plate {
  overflow:hidden; max-width:760px; margin:18px auto 22px;
  border:1px solid rgba(212,175,106,.22); border-radius:10px; background:#081012;
}
.rhyme .rhyme-plate img { display:block; width:100%; height:auto; filter:saturate(.9); }
.video-slot.illustrated { display:block; overflow:hidden; padding:0; }
.video-slot.illustrated img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; }
.video-slot.illustrated .video-caption {
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:14px 18px; background:rgba(11,18,20,.96); border-top:1px solid rgba(212,175,106,.18);
}
.video-slot.illustrated .vs-note { text-align:right; }
.plate-ribbon {
  display:grid; grid-template-columns:repeat(7, minmax(120px,1fr)); gap:8px;
  overflow-x:auto; padding:8px 2px 14px; margin:28px 0 46px;
  scrollbar-width:thin;
}
.plate-ribbon a { display:block; min-width:120px; text-decoration:none; }
.plate-ribbon img {
  display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover;
  border:1px solid rgba(212,175,106,.22); border-radius:8px;
  filter:saturate(.76) brightness(.82); transition:filter .35s ease, transform .35s ease;
}
.plate-ribbon a:hover img { filter:saturate(1) brightness(1); transform:translateY(-3px); }
.plate-ribbon span { display:block; margin-top:7px; text-align:center; color:var(--text-dim); font-size:12px; }

@media (max-width:820px){
  .beast-card { grid-template-columns:1fr; }
  .beast-visual { max-width:560px; width:100%; margin:0 auto; }
  .video-slot.illustrated .video-caption { align-items:flex-start; flex-direction:column; }
  .video-slot.illustrated .vs-note { text-align:left; }
}

@media (max-width:720px){
  figure.artifact-plate { margin:22px 0 28px; border-radius:10px; }
  figure.artifact-plate.panorama img { aspect-ratio:16 / 7; }
  .gate-media { margin:-26px -24px 18px; }
  .lord-grid { grid-template-columns:1fr; }
  .lord-thumb img { aspect-ratio:16 / 8.5; }
  .rhyme { padding:28px 18px; }
  .plate-ribbon { grid-template-columns:repeat(7, 72vw); }
}