/* ══════════════════════════════════════════════════════════════
   泉根 v5.3 · 文字设计系统 + 三三三横向分布
   世界层（滚动=行走） + 界面层（HUD 常驻）
   字体：标题用衬线（宋体系，卷轴感），正文用无衬线（屏幕可读），
        数字用等宽（跳动时不抖）。
   色：墨色三级 + 随宫切换的强调色 --accent。
   ══════════════════════════════════════════════════════════════ */

/* 匾额书法体：马善政毛笔楷书（SIL OFL 1.1，可免费商用），已按站内用字子集化自托管 */
@font-face{
  font-family:"MaShanZheng";
  src:url("../fonts/mashanzheng-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* ── 字体 ── */
  --font-brush:"MaShanZheng","Songti SC","STKaiti","KaiTi","Noto Serif SC",serif;
  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --font-serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",serif;
  --font-num:"SF Mono","JetBrains Mono","Menlo","Consolas",ui-monospace,monospace;

  /* ── 字号阶梯（移动端由 clamp 收敛，桌面封顶） ── */
  --t-hero:clamp(44px,8.6vw,92px);
  --t-h1:clamp(26px,4.6vw,42px);
  --t-h2:clamp(22px,3.4vw,30px);
  --t-quote:clamp(15px,1.7vw,17.5px);
  --t-lede:clamp(14px,1.15vw,15.5px);
  --t-body:13.5px;
  --t-small:12.5px;
  --t-label:11px;
  --t-micro:10px;
  --t-num:12px;
  --t-tablet:clamp(26px,3.1vw,48px);   /* 匾额书法大字 */

  /* ── 行高 / 字距 ── */
  --lh-tight:1.28;
  --lh-body:1.9;
  --ls-wide:.24em;   /* 标签、英文小字 */
  --ls-title:.16em;  /* 大标题 */

  /* ── 墨色三级 ── */
  --paper:#F7F8F2;
  --ink:#26343F;
  --ink-dim:#5C6E7A;
  --ink-faint:#93A5AF;
  --line:rgba(38,52,63,.13);

  /* ── 品牌色 ── */
  --leaf:#3E9D6E;
  --leaf-2:#7BC496;
  --water:#3D9BD8;
  --water-2:#8AC8EC;
  --gold:#D9A63A;
  --amber:#C17F2A;
  --accent:#B98B2C;          /* 随宫切换，由 JS 写入；此处为中宫默认值 */

  --glass:rgba(253,254,250,.78);
  --sky:#EAF2F6;
  --sky2:#F4F7EC;
  --shadow:0 24px 60px -32px rgba(38,52,63,.35);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background 1.4s ease;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:rgba(61,155,216,.25)}
:focus-visible{outline:2px solid var(--water);outline-offset:3px;border-radius:6px}

/* 所有衬线标题的公共底子 */
.serif,.gate-in__title,.core__title,.gate-out__title,.realm__name,
.quest__name,.portal b,.ground__col b,.node__plate b{
  font-family:var(--font-serif);
  line-height:var(--lh-tight);
}

/* ────────── 氛围层：云气 + 暗角 ────────── */
.atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmosphere::before,.atmosphere::after{
  content:"";position:absolute;width:130vw;height:46vh;left:-15vw;
  background:
    radial-gradient(38% 60% at 20% 50%,rgba(255,255,255,.85),transparent 70%),
    radial-gradient(30% 55% at 55% 45%,rgba(255,255,255,.62),transparent 70%),
    radial-gradient(36% 58% at 85% 55%,rgba(255,255,255,.75),transparent 70%);
  filter:blur(6px);
}
.atmosphere::before{top:4vh;animation:clouddrift 90s ease-in-out infinite alternate}
.atmosphere::after{top:48vh;opacity:.65;animation:clouddrift 120s ease-in-out infinite alternate-reverse}
@keyframes clouddrift{from{transform:translateX(-4vw)}to{transform:translateX(4vw)}}
.vignette{position:fixed;inset:0;z-index:8;pointer-events:none;box-shadow:inset 0 0 150px rgba(255,255,255,.5)}

/* ────────── HUD 顶栏 ────────── */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  padding:10px clamp(14px,3vw,34px);
  background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hud__brand{display:flex;align-items:center;gap:10px}
.hud__seal{width:34px;height:34px;border-radius:50%;object-fit:cover;
  box-shadow:0 4px 12px -4px rgba(178,34,34,.45)}
.hud__mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:#fff;font-size:16px;font-weight:600;
  background:linear-gradient(135deg,var(--water),var(--leaf));
  box-shadow:0 6px 16px -6px rgba(61,155,216,.7);
}
.hud__name{font-size:14.5px;font-weight:600;letter-spacing:.04em;line-height:1.25}
.hud__name em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.3em;color:var(--ink-faint)}
.hud__nav{display:flex;gap:clamp(10px,1.8vw,22px);margin-left:8px}
.hud__nav a{
  position:relative;font-size:var(--t-small);color:var(--ink-dim);
  letter-spacing:.06em;transition:color .25s;
}
.hud__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.hud__nav a:hover{color:var(--ink)}
.hud__nav a:hover::after{transform:scaleX(1)}
.hud__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.res{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--t-num);
  font-family:var(--font-num);color:var(--ink-dim);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  background:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color .5s ease;
}
.res.is-bump{animation:bump .6s ease}
@keyframes bump{0%{color:var(--ink)}28%{color:var(--accent)}100%{color:var(--ink-dim)}}
.hud__cta{
  font-size:var(--t-small);padding:7px 16px;border-radius:999px;color:#fff;white-space:nowrap;
  letter-spacing:.06em;
  background:linear-gradient(120deg,var(--gold),var(--amber));
  box-shadow:0 8px 20px -10px rgba(193,127,42,.8);
  transition:transform .3s,box-shadow .3s;
}
.hud__cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(193,127,42,.9)}

/* ────────── 左侧曲径轨 ────────── */
.rail{
  position:fixed;left:18px;top:50%;transform:translateY(-50%);
  z-index:55;width:16px;height:min(58vh,520px);
}
.rail__line{position:absolute;left:7px;top:0;bottom:0;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(61,155,216,.35),rgba(217,166,58,.45),rgba(62,157,110,.35))}
.rail__ticks{position:absolute;inset:0}
.rail__ticks i{
  position:absolute;left:4px;width:8px;height:8px;border-radius:50%;
  margin-top:-4px;background:#fff;border:1.5px solid rgba(38,52,63,.25);transition:all .4s;
}
.rail__ticks i.is-on{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 4px rgba(217,166,58,.18)}
.rail__ticks i.is-visit{border-color:var(--water);background:rgba(61,155,216,.5)}
.rail__me{
  position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;margin-top:-8px;
  background:radial-gradient(circle at 35% 35%,#fff,var(--gold) 70%);
  box-shadow:0 0 0 4px rgba(217,166,58,.2),0 4px 12px -4px rgba(193,127,42,.8);
}
.rail__drop{
  position:absolute;left:5px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,var(--water) 70%);opacity:.9;
}
.rail__drop--up{animation:dropUp 9s linear infinite}
.rail__drop--down{animation:dropDown 9s linear infinite}
@keyframes dropUp{0%{top:50%;opacity:0}12%{opacity:.95}88%{opacity:.95}100%{top:0;opacity:0}}
@keyframes dropDown{0%{top:50%;opacity:0}12%{opacity:.95}88%{opacity:.95}100%{top:100%;opacity:0}}

/* ────────── 左下 任务追踪 ────────── */
.quest{
  position:fixed;left:clamp(14px,3vw,34px);bottom:clamp(52px,7vh,74px);z-index:56;
  width:min(230px,42vw);padding:12px 14px;border-radius:14px;
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow);
  transition:opacity .4s;
}
.quest__hd{font-size:var(--t-micro);letter-spacing:var(--ls-wide);color:var(--ink-faint)}
.quest__name{
  margin-top:3px;font-size:17px;font-weight:600;letter-spacing:.06em;
}
.quest__four{
  display:block;margin-top:2px;font-size:var(--t-label);letter-spacing:.2em;
  color:var(--accent);transition:color .8s ease;
}
.quest__name.is-swap{animation:swap .5s cubic-bezier(.22,.61,.36,1)}
.quest__four.is-swap{animation:swap .5s .06s cubic-bezier(.22,.61,.36,1)}
@keyframes swap{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}}
.quest__tip{margin-top:6px;font-size:var(--t-small);line-height:1.6;color:var(--ink-dim)}
.quest__bar{margin-top:9px;height:4px;border-radius:4px;background:rgba(38,52,63,.1);overflow:hidden}
.quest__bar i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--water),var(--accent));transition:width .5s}

/* ────────── 右下 dock ────────── */
.dock{
  position:fixed;right:clamp(14px,3vw,34px);bottom:clamp(52px,7vh,74px);z-index:56;
  display:flex;gap:8px;padding:7px;border-radius:16px;
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.dock__k{
  width:40px;height:40px;border-radius:11px;font-size:14px;font-weight:600;color:var(--ink-dim);
  background:rgba(255,255,255,.6);border:1px solid var(--line);transition:all .25s;
}
.dock__k:hover{color:#fff;background:linear-gradient(135deg,var(--water),var(--leaf));transform:translateY(-2px)}

/* ────────── 底部 XP 条 ────────── */
.xbar{position:fixed;left:0;right:0;bottom:0;z-index:57;height:5px;background:rgba(38,52,63,.08)}
.xbar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--leaf),var(--water) 45%,var(--gold));transition:width .25s}

/* ══════════ 世界层 ══════════ */
.track{position:relative;z-index:2;width:100%;overflow:hidden}
.veins{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1}

.node{position:absolute;z-index:3;transform:translate(-50%,-50%);text-align:center}
.node__hit{
  display:block;position:relative;width:100%;cursor:pointer;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .5s;
}
.node__img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 18px 26px rgba(38,52,63,.16));
  opacity:0;transform:translateY(26px) scale(.965);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1);
}
.node.is-in .node__img{opacity:1;transform:none}
.node__hit:hover{transform:translateY(-6px)}
.node__hit:hover .node__img{filter:drop-shadow(0 24px 34px rgba(38,52,63,.22))}
.node.is-visit .node__img{filter:drop-shadow(0 18px 26px rgba(38,52,63,.14))}

.node__aura{
  position:absolute;left:50%;top:52%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:-1;opacity:.5;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 70%);
}

/* ── 名牌：宫名（衬线大字）+ 四字功能（小字宽距） ── */
.node__plate{
  position:absolute;left:50%;bottom:-6px;
  transform:translate(-50%,100%) translateY(6px);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 15px;border-radius:12px;white-space:nowrap;overflow:hidden;
  color:#6A4A12;
  background:linear-gradient(120deg,rgba(245,215,130,.96),rgba(226,178,74,.96));
  box-shadow:0 10px 22px -12px rgba(193,127,42,.9);
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
}
.node__plate b{
  font-size:14.5px;font-weight:600;letter-spacing:.14em;
}
.node__plate i{
  font-style:normal;font-size:var(--t-micro);letter-spacing:.24em;
  opacity:.72;transform:translateY(-1px);
}
/* 流光扫过 */
.node__plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.85) 50%,transparent 68%);
  transform:translateX(-130%);opacity:0;
}
.node__hit:hover + .node__plate,.node.is-near .node__plate{
  opacity:1;transform:translate(-50%,100%) translateY(0);
}
.node.is-near .node__plate::after{animation:shine 2.8s .5s ease-in-out infinite}
@keyframes shine{
  0%{transform:translateX(-130%);opacity:0}
  18%{opacity:.85}
  100%{transform:translateX(130%);opacity:0}
}
.node__hit:hover + .node__plate b{letter-spacing:.2em;transition:letter-spacing .35s}

/* ══════════ 匾额：功能模块四字，书法体竖排，悬于各宫之侧 ══════════
   轴右三宫（石阙·竹廊·钟楼）匾挂左侧；轴左三宫（观星台·双口亭·禾晾）匾挂右侧；
   轴上三宫各挂一块：池阁挂右、琉璃堂挂左、水亭挂右。 */
.node__tablet{
  position:absolute;top:13%;z-index:6;pointer-events:none;
  opacity:0;transform:translateY(-16px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1);
}
.node.is-in .node__tablet{opacity:1;transform:none}
.node__tablet--l{right:calc(100% - 18px)}
.node__tablet--r{left:calc(100% - 18px)}

/* 悬绳：两条微斜金线，顶上一点挂钉 */
.tab__hang{
  position:absolute;left:0;right:0;bottom:100%;height:42px;
  background:radial-gradient(circle at 50% 1.5px,rgba(217,166,58,.85) 0 1.7px,rgba(217,166,58,0) 2.4px);
}
.tab__hang::before,.tab__hang::after{
  content:"";position:absolute;bottom:0;width:1px;height:100%;
  background:linear-gradient(180deg,rgba(217,166,58,.06),rgba(217,166,58,.5));
}
.tab__hang::before{left:16%;transform-origin:bottom;transform:rotate(8deg)}
.tab__hang::after{right:16%;transform-origin:bottom;transform:rotate(-8deg)}

/* 匾身：朱红底 + 内嵌双金线 + 四角钉（金书朱匾制） */
.tab__board{
  position:relative;display:block;
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--font-brush);font-weight:400;
  font-size:var(--t-tablet);line-height:1.14;letter-spacing:.14em;
  color:#FFE6A8;padding:15px 9px 17px;border-radius:2px;
  background:
    radial-gradient(120% 60% at 30% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 62%),
    linear-gradient(155deg,#C6332A 0%,#8E1F1A 44%,#A8291F 100%);
  box-shadow:
    inset 0 0 0 1px rgba(245,195,67,.72),
    inset 0 0 0 6px rgba(74,12,9,.55),
    inset 0 0 0 7px rgba(245,195,67,.34),
    0 18px 34px -20px rgba(38,52,63,.72);
  text-shadow:0 1px 0 rgba(255,248,220,.30),0 -1px 1px rgba(84,10,8,.62);
  transform-origin:top center;
}
/* 四角小钉 */
.tab__board::before,.tab__board::after{
  content:"";position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(245,195,67,.78);box-shadow:0 2px 3px rgba(0,0,0,.35);
}
.tab__board::before{left:7px;top:7px}
.tab__board::after{right:7px;bottom:7px}

/* 逐字落匾 */
.tab__board span{
  display:inline-block;opacity:0;transform:translateY(-.42em);
  transition:opacity .5s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.node.is-in .tab__board span{opacity:1;transform:none}

/* 近景时极轻微摆动，像被风带动 */
.node.is-near .tab__board{animation:tabsway 6.4s ease-in-out infinite}
@keyframes tabsway{
  0%,100%{transform:rotate(-.55deg)}
  50%{transform:rotate(.55deg)}
}
/* 匾额与宫色呼应：近景时描边透出该宫强调色 */
.node.is-near .tab__board{
  box-shadow:
    inset 0 0 0 1px var(--accent),
    inset 0 0 0 6px rgba(74,12,9,.55),
    inset 0 0 0 7px rgba(245,195,67,.42),
    0 18px 34px -18px rgba(38,52,63,.7);
}

/* ────────── 双股水脉 ────────── */
/* ────────── 双股水脉：溪流 ────────── */
/* 水岸扩散：水体在两岸洇开的一层淡色 */
.veins__bank{
  fill:none;stroke:#79C2EA;stroke-width:14;opacity:.15;stroke-linecap:round;
}
/* 溪流本体：宽窄起伏的填充带（潭与滩） */
.veins__body{stroke:none}
/* 水体边缘加深一点，溪流更成形 */
.veins__lens + .veins__bank{opacity:.19}
/* 浮沫：随水漂动的细密白点 */
.veins__foam{
  fill:none;stroke:#EAF7FF;stroke-width:4.4;stroke-linecap:round;opacity:.32;
  stroke-dasharray:2.2 15.2;animation:driftFoam 3.4s linear infinite;
}
/* 水光：水面上一道快速掠过的亮线 */
.veins__glint{
  fill:none;stroke:#FFFDF3;stroke-width:1.8;stroke-linecap:round;opacity:.46;
  stroke-dasharray:8 29;animation:driftGlint 2.2s linear infinite;
}
@keyframes driftFoam{to{stroke-dashoffset:-87}}    /* 17.4 × 5 */
@keyframes driftGlint{to{stroke-dashoffset:-111}}  /* 37 × 3 */

/* 浪花：水流转弯处溅起的小水冠，一涌一散 */
.veins__spray{
  transform-box:fill-box;transform-origin:0% 50%;
  animation:spray 3.2s ease-out infinite;
}
@keyframes spray{
  0%{opacity:0;transform:scale(.22,.4) }
  18%{opacity:.95;transform:scale(1,1) }
  52%{opacity:.62;transform:scale(1.22,1.12) }
  100%{opacity:0;transform:scale(1.5,1.24) }
}
/* 水蓝衬底：让白浪花在浅色背景上显形 */
.veins__spray .halo{
  fill:none;stroke:#4FA3D8;stroke-width:3.6;stroke-linecap:round;opacity:.55;
}
.veins__spray .halo2{stroke-width:3;opacity:.45}
.veins__spray .crest{
  fill:none;stroke:#F7FDFF;stroke-width:1.8;stroke-linecap:round;opacity:.96;
}
.veins__spray .crest2{stroke:#DFF4FD;stroke-width:1.4;opacity:.8}
/* 溅出去的水珠：白芯蓝沿，比水冠飞得更远、消失更晚 */
.veins__spray .drop{
  fill:#F4FCFF;stroke:#6FB8E4;stroke-width:.8;animation:bead 3.2s ease-out infinite;
}
@keyframes bead{
  0%{opacity:0}
  20%{opacity:.95}
  66%{opacity:.35}
  100%{opacity:0}
}
/* 涟漪：水脉经过每座宫，在其基座旁一圈圈荡开 */
.veins__ring{
  fill:none;stroke:#BFE4F7;stroke-width:1.2;opacity:.4;
  transform-box:fill-box;transform-origin:50% 50%;
  animation:ripple 4.4s ease-out infinite;
}
@keyframes ripple{
  0%{opacity:.55;transform:scale(.28)}
  70%{opacity:.12}
  100%{opacity:0;transform:scale(1.55)}
}

.veins__flow{stroke-dasharray:10 34;animation:veinflow 3.4s linear infinite}
.veins__flow--rev{animation-direction:reverse}
@keyframes veinflow{to{stroke-dashoffset:-44}}

/* ────────── 章节文字 ────────── */
.gate-in,.core,.gate-out{
  position:absolute;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:min(760px,88vw);text-align:center;
}
.gate-in__seal{width:clamp(72px,10vw,110px);height:auto;margin-bottom:6px;
  filter:drop-shadow(0 8px 20px rgba(178,34,34,.28))}
.gate-in__kicker{
  font-size:var(--t-label);letter-spacing:.34em;color:var(--ink-faint);text-transform:uppercase;
}
.gate-in__title{
  margin-top:14px;font-size:var(--t-hero);font-weight:600;letter-spacing:var(--ls-title);
  background:linear-gradient(120deg,var(--water),var(--leaf) 45%,var(--gold) 75%,var(--water));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* 注意：渐变字（背景裁剪）内部不再逐字切分——子 span 的 transform 会让渐变换算失效。
     整块入场：先遮罩揭示，再进入流光循环。 */
  animation:heroIn 1.15s .15s both, titleflow 11s 1.3s ease-in-out infinite;
}
@keyframes heroIn{
  from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(.18em)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
@keyframes titleflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.gate-in__sub{
  margin-top:12px;font-size:clamp(14px,2.4vw,19px);letter-spacing:.22em;color:var(--ink-dim);
}
.gate-in__hint{
  margin-top:44px;font-size:var(--t-small);letter-spacing:.2em;color:var(--ink-faint);
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(7px);opacity:1}}

.core__kicker{font-size:var(--t-label);letter-spacing:.3em;color:var(--ink-faint)}
.core__title{margin-top:12px;font-size:var(--t-h1);font-weight:600;letter-spacing:.06em}
.core__lede{
  margin:14px auto 0;max-width:34em;font-size:var(--t-lede);line-height:var(--lh-body);color:var(--ink-dim);
}
.core__three{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.portal{
  display:block;padding:20px 16px;border-radius:18px;text-align:left;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  box-shadow:0 18px 40px -30px rgba(38,52,63,.5);
  transition:transform .35s,box-shadow .35s,background .35s;
}
.portal:hover{transform:translateY(-6px);background:#fff;box-shadow:0 26px 50px -28px rgba(38,52,63,.55)}
.portal__tag{font-size:10.5px;letter-spacing:.2em;color:var(--ink-faint)}
.portal b{display:block;margin-top:6px;font-size:18px;letter-spacing:.08em}
.portal__txt{display:block;margin-top:8px;font-size:var(--t-small);line-height:1.75;color:var(--ink-dim)}

.gate-out__title{font-size:clamp(28px,5.4vw,52px);font-weight:600;letter-spacing:.14em}
.gate-out__sub{margin-top:12px;font-size:var(--t-lede);line-height:var(--lh-body);color:var(--ink-dim)}
.gate-out__acts{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  padding:11px 22px;border-radius:999px;font-size:var(--t-small);letter-spacing:.06em;
  border:1px solid var(--line);background:rgba(255,255,255,.75);
  transition:transform .3s,box-shadow .3s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(38,52,63,.7)}
.btn--gold{color:#fff;border-color:transparent;background:linear-gradient(120deg,var(--gold),var(--amber))}

/* ── 逐字浮现（章节标题） ── */
.reveal span{
  display:inline-block;opacity:0;transform:translateY(.44em);
  transition:opacity .72s ease,transform .72s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-on span{opacity:1;transform:none}

.ground{
  position:absolute;left:0;right:0;z-index:4;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px clamp(20px,5vw,60px) 84px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.5);
}
.ground__col{display:flex;flex-direction:column;gap:4px;font-size:var(--t-small);color:var(--ink-faint)}
.ground__col b{font-size:13px;color:var(--ink-dim);font-weight:600}
.ground__col--right{text-align:right;align-items:flex-end}
.ground__col--right a{color:var(--ink-dim);text-decoration:none;transition:color .25s}
.ground__col--right a:hover{color:var(--ink)}
.ground__brand{display:flex;align-items:center;gap:14px}
.ground__seal{width:44px;height:44px;object-fit:cover;border-radius:50%}

/* ────────── 内景弹层 ────────── */
.realm{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:4vh 4vw;
  background:rgba(38,52,63,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.realm[hidden]{display:none}
.realm__panel{
  position:relative;display:flex;gap:clamp(16px,3vw,34px);align-items:center;
  width:min(880px,92vw);max-height:86vh;overflow:auto;
  padding:clamp(20px,3vw,34px);border-radius:22px;background:#FDFDF8;box-shadow:var(--shadow);
  animation:pop .38s cubic-bezier(.22,.61,.36,1);
}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.realm__x{position:absolute;top:12px;right:16px;font-size:26px;line-height:1;color:var(--ink-faint)}
.realm__x:hover{color:var(--ink)}
.realm__img{width:min(300px,38vw);flex:0 0 auto;object-fit:contain}
.realm__tag{font-size:var(--t-label);letter-spacing:.2em;color:var(--accent);transition:color .8s ease}
.realm__name{margin-top:6px;font-size:var(--t-h2);font-weight:600;letter-spacing:.1em}
.realm__four{
  display:inline-block;margin-top:8px;padding:3px 12px;border-radius:999px;
  font-size:var(--t-label);letter-spacing:.24em;color:#6A4A12;
  background:linear-gradient(120deg,rgba(245,215,130,.9),rgba(226,178,74,.9));
}
/* 弹层里的功能模块匾额（书法体） */
.realm__mod{
  display:inline-block;margin-top:9px;padding:5px 14px 6px;border-radius:3px;
  font-family:var(--font-brush);font-size:clamp(16px,1.9vw,20px);
  letter-spacing:.18em;color:#FFE6A8;
  background:linear-gradient(155deg,#C6332A 0%,#8E1F1A 44%,#A8291F 100%);
  box-shadow:inset 0 0 0 1px rgba(245,195,67,.7),inset 0 0 0 4px rgba(74,12,9,.52),
             0 8px 16px -10px rgba(38,52,63,.6);
  text-shadow:0 1px 0 rgba(255,248,220,.26),0 -1px 1px rgba(84,10,8,.55);
}
.realm__line{
  margin-top:12px;font-size:var(--t-quote);letter-spacing:.08em;
  color:var(--accent);font-weight:600;transition:color .8s ease;
}
.realm__txt{margin-top:12px;font-size:var(--t-body);line-height:1.95;color:var(--ink-dim)}
.realm__acts{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}

/* 弹层文字分层入场 */
.realm.is-open .realm__tag{animation:fadeUp .45s .04s both}
.realm.is-open .realm__name{animation:fadeUp .5s .10s both}
.realm.is-open .realm__four{animation:fadeUp .5s .16s both}
.realm.is-open .realm__mod{animation:fadeUp .5s .19s both}
.realm.is-open .realm__line{animation:wipeIn .75s .22s both}
.realm.is-open .realm__txt{animation:fadeUp .55s .38s both}
.realm.is-open .realm__acts{animation:fadeUp .55s .48s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes wipeIn{from{clip-path:inset(0 100% 0 0);opacity:.25}to{clip-path:inset(0 0 0 0);opacity:1}}

/* ────────── 降级 ────────── */
@media (max-width:860px){
  .hud__nav{display:none}
  .rail{display:none}
  .quest{width:min(190px,52vw);padding:10px 12px}
  .core__three{grid-template-columns:1fr}
  .realm__panel{flex-direction:column;text-align:center}
  .realm__img{width:min(200px,54vw)}
  .node__plate i{display:none}
  /* 匾额：侧挂会溢出，改为横排悬于建筑上檐，且只留一块 */
  .node__tablet{
    top:auto;bottom:calc(100% - 8px);left:50%;right:auto;
    transform:translate(-50%,8px);
  }
  /* 只留一块：轴上宫的独匾不能被隐藏，故仅隐藏成对的右匾 */
  .node__tablet--r:not(.node__tablet--solo){display:none}
  .node.is-in .node__tablet{transform:translate(-50%,0)}
  .tab__hang{display:none}
  .tab__board{
    writing-mode:horizontal-tb;letter-spacing:.2em;
    font-size:clamp(17px,4.6vw,24px);padding:5px 13px 6px;
  }
  .node.is-near .tab__board{animation:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .node__img{opacity:1!important;transform:none!important}
  .reveal span{opacity:1!important;transform:none!important}
  .node__plate::after{display:none}
  .node__tablet,.tab__board span{opacity:1!important;transform:none!important}
  .veins__spray,.veins__ring,.veins__spray .drop{opacity:.8!important;transform:none!important}
}