:root{
  --mast-h:132px;
  /* 顶栏 min-height 用这个「基准值」，运行时量出来的真实高度写进 --mast-h。
     两者分开是为了避免自反馈：量高度 → 改 --mast-h → 又影响 min-height → 高度又变。 */
  --mast-h-base:132px;
  --c-teal:#5F9AA6; --c-teal-link:#3E6E78; --c-teal-ink:#2F5A62;
  --c-teal-soft:#EFF5F3; --c-teal-soft2:#E3EEEA; --c-teal-line:#D2E0DC; --c-teal-btn:#B7C7C3;
  --c-gold:#C2A24E; --c-gold-ink:#8A7330; --c-gold-soft:#E0CB86; --c-gold-pale:#EBDBA6; --c-gold-mut:#B79A54;
  --c-crimson:#8C1C12; --c-crimson-bg:#F4E4DF;
  --c-bg:#F5F1E7; --c-band:#EFE8D7; --c-cream:#FBF6EC; --c-cream-box:#FBF7EE; --c-white:#FFFFFF;
  --c-surface:#FCFAF3; --c-line:#E0D7C2; --c-ink:#2B2620; --c-ink-2:#524E47; --c-ink-3:#9A8F7D; --c-hl:#F6E4A8;
  --font-serif:"Noto Serif SC","Source Han Serif SC","Source Han Serif CN","Songti SC",STSong,"SimSun","宋体",serif;
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  /* 淬铁灵剑手持光标：图由 tools/make_sword_cursor.py 生成，热点 4 4 落在剑尖。
     CSS 在 site/ 下，所以路径要往上一级找 images/。图挂了就退回系统光标。 */
  --cursor-sword:url("../images/cursor_sword.png") 4 4, auto;
  --cursor-sword-btn:url("../images/cursor_sword.png") 4 4, pointer;
}

*{box-sizing:border-box}
/* 「饥荒」字体：DST 自己用的其中一款是 Bellefair（游戏包里 fonts/bellefair50，
   但那是位图字体 .fnt+.tex，网页用不了），所以用同款字体的开源版自托管在 site/fonts/。
   OFL 授权，许可证随字体一起放在同目录 OFL.txt。 */
@font-face{font-family:"DST Bellefair";src:url("fonts/bellefair.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap}
/* 站名「灵界」用的标题字体：**字魂探月手书**（作者提供）。
   原文件 12.1MB，标题只用得到「灵界」两个字，所以做了**子集化** → 现在 18KB。
   子集里保留：灵界 + 拉丁字母 + 数字 + 常用标点（万一改站名/加英文也能显示）。
   ⚠️ 换站名（data.json 的「网站标题」）时要重新子集化，命令见 注释.md。
   权重写 400 900 区间：手书字体只有一档，这样别处写 700 也不会被浏览器合成加粗。
   之前用过的两套（思源宋体 Heavy / Regular）也留在同目录，想换回去改 src 即可。 */
@font-face{font-family:"Lingjie Title";src:url("fonts/zihun-tanyue-shoushu.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
/* 卡片标题 / 卷目标题用的「思源宋体 Heavy」子集：按**所有标题用字**（条目名 + 卷目名，267 字）
   重新子集化，83KB。跟站名那份（只有「灵界」）是两个文件，各自按需加载。 */
@font-face{font-family:"Lingjie Titles";src:url("fonts/lingjie-titles-heavy.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
html{scroll-padding-top:156px;cursor:var(--cursor-sword)}
/* 输入框还是留 I 形光标，不然打字时找不到插入点 */
input,textarea{cursor:text}
body{margin:0;padding-top:var(--mast-h);font-family:var(--font-sans);color:var(--c-ink);background:#FEFFF1;font-size:15px;line-height:1.7;min-width:320px}
button,input{font:inherit}
button{cursor:var(--cursor-sword-btn)}
a{cursor:var(--cursor-sword-btn)}
a{color:var(--c-teal-link)}
a:hover{color:var(--c-teal-ink)}
mark{background:var(--c-hl);color:var(--c-ink);padding:0 .12em;border-radius:4px}
[hidden]{display:none!important}
.serif{font-family:var(--font-serif);font-weight:700}
:focus-visible{outline:3px solid #2F86C9;outline-offset:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:12px;z-index:100;transform:translateY(-160%);background:var(--c-surface);border:1px solid var(--c-gold);border-radius:8px;padding:8px 12px}
.skip-link:focus{transform:none}

/* 顶栏底部那条金线：跟侧栏分割线用同一套「两端淡出」的渐变。
   ⚠️ CSS 多层背景是**第一层画在最上面**：金线必须写在第一层，
   青底写在第二层；反过来（青底在前）金线会被整块盖住，看起来就像「条条没了」。
   去掉 border-bottom 后顶栏矮了 3px，app.js 的 syncMastHeight() 会自动更正 --mast-h。 */
.masthead{position:fixed;top:0;left:0;right:0;z-index:30;
  background-image:linear-gradient(90deg,rgba(194,162,78,0) 0%,var(--c-gold-pale) 16%,var(--c-gold) 50%,var(--c-gold-pale) 84%,rgba(194,162,78,0) 100%),linear-gradient(180deg,rgb(217,241,227) 0%,rgb(154,211,220) 100%);
  background-size:100% 3px,100% 100%;background-position:0 100%,0 0;background-repeat:no-repeat;
  min-height:var(--mast-h-base);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 28px 28px}
.mast-center{text-align:center;padding-top:18px}
/* 站名「灵界」用**思源宋体 SC Heavy**（作者提供的字体，已子集化到 10KB）：
   · 黑体太硬没仙气（被否掉）；宋体笔画太干太细，44px 还是发虚；楷体用过一版
   · 现在用思源宋体的 Heavy 字重，笔锋厚实又有宋体的骨架
   字体缺失时依次退回楷体 → 衬线栈。 */
.site-name{font-size:48px;color:#28565E;line-height:1.1;font-weight:500;
  font-family:"Lingjie Title","KaiTi","楷体",STKaiti,"Kaiti SC",var(--font-serif);
  letter-spacing:.12em;text-indent:.12em;
  text-shadow:0 1px 0 rgba(255,255,255,.75),0 0 14px rgba(194,162,78,.35),0 2px 10px rgba(47,90,98,.16)}
/* 站名后面的英文名：小一号、字距放开、颜色淡一些，中间一条金色竖线隔开。
   竖线用渐变做（上下淡出），比直接写一个「|」字符更贴合中式的细气。 */
/* 站名后面的英文名：用「饥荒」那款 Bellefair。text-transform:capitalize 保证首字母大写
   （就算 data.json 里手写成小写，显示出来也是 Spirit Realm）。
   陛下反馈「看不清」：原来用的是 78% 透明度的青，压在浅青底上必然发虚 ——
   现在改成**实色深青 #24535C**、字号放大一档、字距收紧，再加白色高光托起字形。
   现在它在站名下方独立一行，字号不再用 em（父元素不是 48px 了），直接给 px。 */
.site-name-en{font-family:"DST Bellefair",var(--font-sans);font-size:23px;font-weight:400;letter-spacing:.1em;
  text-transform:capitalize;color:#24535C;line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.7),0 1px 4px rgba(255,255,255,.45)}
/* 站名下面那一行：英文名 + 版本徽章。
   英文名要跟「灵界」居中对齐，所以徽章**脱离文档流**（absolute 挂在英文名右边），
   这样整行的居中只由英文名决定，徽章不会把英文名挤偏。 */
.site-sub-row{display:flex;justify-content:center;margin-top:6px}
.site-name-wrap{position:relative;display:inline-block}
.site-ver-badge{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:.5em;
  font-family:"DST Bellefair",var(--font-sans);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#F6F1E2;
  background:linear-gradient(180deg,#33626B,#274F57);border-radius:4px;padding:1px 6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(43,38,32,.2);
  white-space:nowrap;line-height:1.5}
/* 作者名原样显示（不加 text-transform:uppercase）：
   作者写的是「犹如黑夜星光JinYan」，大写化会变成 JINYAN，跟本人写法不符 */
.site-ver{font-size:11px;letter-spacing:.2em;color:rgb(97,173,189);margin-top:9px}
.ornament{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:9px}
.ornament i{display:block;width:56px;height:2px;background:var(--c-gold-soft)}
.ornament b{display:block;width:9px;height:9px;background:var(--c-cream);transform:rotate(45deg)}
.mast-tools{position:absolute;right:24px;bottom:14px;display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;gap:8px;background:var(--c-cream-box);border:.5px solid #BFD3D0;border-radius:8px;padding:8px 12px;width:200px}
/* 搜索 + 清空搬到左侧菜单栏顶部（原来在顶栏右侧） */
.rail-search{display:flex;align-items:center;gap:6px;margin:0 0 12px;padding:0}
.rail-search .search{flex:1 1 auto;width:auto;min-width:0}
.rail-search .btn-clear{padding:7px 10px;font-size:12px}
.search input{border:0;background:none;outline:none;width:100%;font-size:13px;color:var(--c-ink);min-width:0}
.search input::placeholder{color:var(--c-ink-3)}
.search i{width:16px;height:16px;color:var(--c-gold-ink);font-size:16px;line-height:16px;font-style:normal;flex:0 0 auto}
.search i::before{content:"⌕"}
.btn-clear{background:linear-gradient(180deg,#F5E6AF 0%,var(--c-gold-soft) 42%,var(--c-gold) 100%);border:.5px solid #A88636;border-radius:6px;padding:8px 14px;color:#5D4616;font-size:13px;cursor:var(--cursor-sword-btn);white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 1px 2px rgba(43,38,32,.12)}
.btn-clear:hover{background:linear-gradient(180deg,#FFF0BC 0%,#E8D18A 42%,#C9AA54 100%);border-color:#8A7330;color:#44320F}

/* 右下角「回到顶部」：滚动一段距离才出现，直角金印风格；层级压在弹窗之下 */
.to-top{position:fixed;right:26px;bottom:26px;z-index:40;padding:9px 14px;font-size:13px;font-weight:600;cursor:var(--cursor-sword-btn);
  color:#4E3A10;border:.5px solid #A88636;border-radius:0;
  background:linear-gradient(180deg,#F8EFCC 0%,#E9D69A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.66),0 2px 6px rgba(43,38,32,.16);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:linear-gradient(180deg,#FFF6D8 0%,#E0C880 100%);border-color:#8A7330;color:#3B2C0C}

.shell{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:stretch;min-height:calc(100vh - var(--mast-h))}
.rail{background:var(--c-teal-soft2);border-right:1px solid var(--c-gold)}
.rail-inner{position:sticky;top:var(--mast-h);max-height:calc(100vh - var(--mast-h));overflow:auto;padding:18px 12px 24px}
/* 「卷目」两个字换成一条分割线：搜索行和卷目列表之间有个过渡就够，
   文字标签反而占地方（导航区本身已经有 aria-label="卷目"）。两端淡出，不抢视线。 */
.rail-divider{height:2px;margin:2px 12px 12px;border-radius:1px;
  background:linear-gradient(90deg,rgba(194,162,78,0) 0%,var(--c-gold-pale) 22%,var(--c-gold) 50%,var(--c-gold-pale) 78%,rgba(194,162,78,0) 100%)}
.content{min-width:0;padding:24px 48px 64px}
/* 内容区在可用宽度里居中：窗口变宽时卡片跟着往中间走，而不是贴在左边。
   卡片本身宽度不变（还是 min(760px,100%)），改的只是位置。 */
.content-inner{max-width:1080px;margin:0 auto}
.nav{list-style:none;margin:0;padding:0}
/* 一级卷目：做成直角按钮；展开且选中时整块金色填充，一眼看出在哪一卷 */
.nav-row{display:flex;align-items:center;padding:9px 11px;margin:0 0 5px;cursor:var(--cursor-sword-btn);
  color:var(--c-ink-2);font-weight:600;letter-spacing:.02em;
  background:linear-gradient(180deg,var(--c-cream) 0%,var(--c-cream-box) 100%);
  border:.5px solid var(--c-line);border-left:3px solid var(--c-gold-pale);border-radius:0;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.nav-row:hover{color:var(--c-ink);border-left-color:var(--c-gold);
  background:linear-gradient(180deg,#FFFDF3 0%,#F7EFDC 100%)}
.nav-row.on{color:#4E3A10;border-color:#A88636;border-left-color:#8A7330;
  background:linear-gradient(180deg,#F8EFCC 0%,#E9D69A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 1px 2px rgba(43,38,32,.08)}
.nav-lbl{flex:1;min-width:0;font-size:15px;overflow-wrap:anywhere}
/* 窄屏用短名（data 里的「短名」字段）：整排卷目按钮放不下时省一半宽度。
   宽屏显示全名、隐藏短名；窄屏反过来。 */
.nav-lbl-short{display:none}
.nav-chev{font-size:16px;color:var(--c-gold-mut);transition:transform .18s;font-style:normal;line-height:1;margin-left:8px;flex:0 0 auto}
.nav-chev::before{content:"›"}
.nav-row.on .nav-chev{color:#7A6427}
.nav-group.open .nav-chev{transform:rotate(90deg)}
.nav-sub{list-style:none;margin:0 0 10px;padding:0;overflow:hidden;max-height:0;transition:max-height .22s ease}
/* 二级条目：选中时白底 + 3px 金边 + 加粗 + 菱形标记，比原来只有变蓝明显得多 */
.nav-sub a{position:relative;display:block;padding:6px 12px 6px 24px;margin:0 0 2px;font-size:13px;
  color:var(--c-ink-2);cursor:var(--cursor-sword-btn);text-decoration:none;overflow-wrap:anywhere;
  border-left:3px solid transparent;border-radius:0;
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.nav-sub a:hover{color:var(--c-teal-link);background:rgba(255,255,255,.66)}
.nav-sub a.on{color:var(--c-teal-ink);font-weight:700;background:var(--c-white);
  border-left-color:var(--c-gold);box-shadow:0 1px 2px rgba(43,38,32,.07)}
.nav-sub a.on::before{content:"";position:absolute;left:9px;top:50%;width:5px;height:5px;margin-top:-3px;
  transform:rotate(45deg);background:linear-gradient(135deg,var(--c-gold-soft),var(--c-gold))}
/* 侧边栏底部 + 顶部菜单栏：加入 mod 讨论群（直角，不用圆角） */
.rail-foot{margin-top:16px;padding:14px 12px 0;border-top:1px dashed var(--c-gold-pale);display:grid;gap:8px}
.btn-qq{padding:9px 12px;font-size:14px;font-weight:600;color:#5D4616;cursor:var(--cursor-sword-btn);
  border:.5px solid #A88636;border-radius:0;
  background:linear-gradient(180deg,#F5E6AF 0%,var(--c-gold-soft) 42%,var(--c-gold) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 1px 2px rgba(43,38,32,.12)}
.rail-foot .btn-qq{width:100%}
/* 顶部菜单栏里的那个：跟旁边「清空」同高同宽度的横排按钮 */
.btn-qq-flat{width:auto;padding:8px 14px;font-size:13px;white-space:nowrap}
.btn-qq:hover{filter:brightness(1.04)}
.btn-qq:active{transform:translateY(1px)}
.qq-hint{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--c-ink-2)}
.qq-hint b{color:var(--c-teal-ink);letter-spacing:.4px;font-variant-numeric:tabular-nums}
.btn-copy{padding:3px 10px;font-size:12px;color:var(--c-teal-ink);cursor:var(--cursor-sword-btn);
  background:var(--c-white);border:.5px solid var(--c-line);border-radius:999px}
.btn-copy:hover{border-color:var(--c-teal);color:var(--c-teal-link)}

.section{margin:0 0 56px;scroll-margin-top:156px}
/* 卷目标题与卡片同一条中轴（卡片在 .cards 里居中，两边都以 .content-inner 的中心为准） */
/* 卷目标题（境界 / 生物入魔…）：陛下要求**加大**并在**左右加装饰**。
   装饰用两侧的金色渐变横线（跟顶栏那条金线一个调子） */
.sec-head{margin:0 0 18px;text-align:center}
.sec-title{margin:0;display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:27px;color:var(--c-ink);line-height:1.3;letter-spacing:.08em;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.sec-title::before,.sec-title::after{content:"";flex:0 0 auto;width:64px;height:2px;border-radius:1px}
.sec-title::before{background:linear-gradient(270deg,var(--c-gold) 0%,var(--c-gold-pale) 55%,rgba(194,162,78,0) 100%)}
.sec-title::after{background:linear-gradient(90deg,var(--c-gold) 0%,var(--c-gold-pale) 55%,rgba(194,162,78,0) 100%)}
.cards{display:flex;flex-direction:column;align-items:center;gap:18px}
.sec-empty{color:var(--c-ink-3);font-size:14px;padding:4px 2px 0;text-align:center}

/* 卡片内边距：上下都是 22px、左右 26px。
   这样卡图的上、左、下三面留白一致（宽屏卡图还有 -4px 左移，见 .card-media）。 */
.card{position:relative;overflow:hidden;width:min(760px,100%);border:2px solid rgba(183,154,84,.78);border-radius:18px;padding:22px 26px;background:linear-gradient(135deg,rgba(255,252,245,.98) 0%,rgba(250,255,248,.96) 54%,rgba(239,248,243,.94) 100%);min-width:0;color:var(--c-ink-2);box-shadow:0 10px 22px rgba(47,90,98,.14),inset 0 0 0 1px rgba(255,255,255,.72)}
.card::before{content:"";position:absolute;inset:7px;border:2px solid rgba(95,154,166,.48);border-radius:13px;pointer-events:none}
.card::after{content:"";position:absolute;inset:14px;border:.5px solid rgba(224,203,134,.45);border-radius:9px;pointer-events:none}
.card>*{position:relative;z-index:1}
.card:hover{border-color:rgba(183,154,84,.95);box-shadow:0 12px 26px rgba(47,90,98,.18),inset 0 0 0 1px rgba(255,255,255,.78)}
/* 左边卡图列 34%（作者要求窄一点、把宽度让给右侧文字）；
   栏间距 24 → 14px：右侧文字整体左移、也更宽一点。
   margin 归零：原来有 16px 下外边距，叠上卡片 22px 下内边距会让下方留白 38px、比上方 22px 宽（作者反馈过）。 */
.card-top{display:grid;grid-template-columns:minmax(190px,34%) minmax(0,1fr);gap:14px;align-items:start;margin:0}
.card-media{position:relative;height:172px;background:linear-gradient(135deg,rgba(191,227,232,.72),rgba(255,252,245,.74));border:.5px solid rgba(95,154,166,.34);border-radius:9px;overflow:hidden;margin:0;box-shadow:inset 0 0 18px rgba(95,154,166,.08)}
.card.no-media .card-media{display:none}
.card.no-media .card-top{grid-template-columns:1fr}
.card-media img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}
/* 境界 / 灵力 两个徽章的原始素材只有约 135×115（mod 的 UI 图集就这么大，
   dst-app 的 max_dimension 是上限、不会放大），拉到图区 172px 会放大 1.5 倍而发虚。
   这两张按接近原始尺寸显示，并在图区里居中（absolute + inset:0 + margin:auto）。 */
.card-media img[src*="badge"]{position:absolute;inset:0;width:auto;height:auto;max-width:100%;max-height:118px;margin:auto}
/* 宽屏双栏时卡图左右各收一点，并往左挪 4px：
   卡片左内边距是 26px、上内边距是 22px，-4px 让**左边距与上边距齐平（都 22px）**，
   右边留 14px —— 卡图整体更窄一点，宽度继续让给右侧文字。窄屏单栏不加。 */
@media (min-width:1024px){
  .card-media{margin:0 14px 0 -4px}
}
/* 文字栏：简介与材料行**跟金色菱形对齐**（也就是文字栏左缘），不做缩进 ——
   试过缩进 18px 跟标题首字对齐，作者觉得左边空一条很奇怪，已改回。 */
.card-summary{padding:0 4px 0}
.card-head{display:flex;align-items:flex-start;gap:12px;margin:0 0 8px;position:relative}
.card-main{min-width:0}
.card-title{margin:0 0 6px;font-size:19px;line-height:1.3;color:var(--c-teal-ink);font-weight:700;letter-spacing:.2px;overflow-wrap:anywhere}
/* 卡片列表里的标题：原来是 68% 透明度的青灰 + font-weight:500，
   在中文衬线回退字体（宋体没有粗体）上会发虚。
   现在改成：黑体栈 + 实字重 800（这台机器上有 NotoSansSC-VF 可变字体，是真加粗）
   + 实色 + 金色菱形点缀，一眼能抓住。 */
/* 卡片标题（境界体系 / 灵力值…）：陛下要求换成**思源宋体加粗**。
   用 "Lingjie Titles"（思源宋体 Heavy 子集，覆盖所有标题用字）；
   @font-face 声明的是 400 900 区间，所以这里的 800 不会被再合成加粗。
   字体没加载出来时退回黑体栈并靠 800 字重撑住。 */
/* 卡片文字栏：标题与标签同一行（标签**与标题底对齐**，author 要求），
   标题不再自己留右侧让位（改由这一行统一留）。 */
/* 卡片文字栏的垂直节奏：标题 / 标签 / 简介 / 材料行之间的间距**统一 6px**。
   原来简介有一条 margin-top:22px（历史遗留），比其它间距大得多，
   标签换行到下一行时看着忽大忽小（作者要求缩小并统一）。 */
.card-head-row{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;padding-right:80px}
.card-title-preview{font-family:"Lingjie Titles",var(--font-sans);font-size:24px;color:var(--c-teal-ink);
  font-weight:800;letter-spacing:.06em;margin:0;
  text-shadow:0 1px 0 rgba(255,255,255,.55)}
/* 卡片标题不再挂「·丹劫」这类补充说明（标签里已有，详情标题里也改了「·」写法），
   所以 .card-title-sub 这条样式已废弃、不再使用。 */
.card-title-preview::before{content:"";display:inline-block;width:.34em;height:.34em;margin-right:.42em;
  transform:rotate(45deg);vertical-align:.1em;
  background:linear-gradient(135deg,var(--c-gold-pale),var(--c-gold));box-shadow:0 0 0 .5px rgba(138,115,48,.45)}
/* 卡片的标签（丹药 / 中阶 / 保命…）：原来每个词下面有一条金色下划线，
   作者要求去掉下划线，改成**词与词之间一个金色竖线「|」**。 */
.card-tags{display:flex;flex-wrap:wrap;gap:0}
.card-tags .tag+.tag::before{content:"|";color:var(--c-gold);margin:0 9px;font-weight:400}
.tag{font-size:12px;letter-spacing:.08em;color:rgba(138,115,48,.68);border-bottom:0;margin-right:0;overflow-wrap:anywhere}
.card-desc{font-size:14px;line-height:1.6;color:var(--c-teal-ink);margin:6px 0 6px;overflow-wrap:anywhere}
/* 更新日志：一条一行（原来所有条目用「；」接成一大段，十几条挤一起没法看） */
/* 更新日志卡片：整张都能点开（作者反馈只点「完整更新」按钮不方便） */
/* 日志卡片末尾那行「共 N 条，点卡片查看完整更新」：弱化处理，别抢正文 */
.card-desc.log-list .log-more{color:var(--c-ink-2);opacity:.75;font-size:13px}
.log-card{cursor:var(--cursor-sword-btn)}
.log-card:hover{border-color:var(--c-gold)}
.log-card:active{transform:translateY(1px)}
.card-desc.log-list{line-height:1.85}
.card-desc.log-list br{content:"";display:block;margin-top:4px}
/* 简介：上面那条金色分割线（把「标题+标签」与正文分开）。
   margin-top 22px：把「简介 + 配方」这一整块往下压一点（原来 12px），
   这样没有配方的卡片不会上紧下空（作者反馈）；分割线用 top:-16px 留在原位、
   仍然贴着标签下方约 6px。 */
.card-preview-desc{position:relative;font-weight:600;color:rgba(47,90,98,.9);margin-top:22px}
.card-preview-desc::before{content:"";position:absolute;left:0;right:0;top:-16px;height:1px;
  background:linear-gradient(90deg,rgba(194,162,78,0) 0%,var(--c-gold-pale) 14%,var(--c-gold) 50%,var(--c-gold-pale) 86%,rgba(194,162,78,0) 100%)}
/* 配方材料行：原来占**整张卡片的宽度**（在卡图下方），作者要求挪进右侧文字栏、
   跟在简介文字下面；材料多的时候靠 flex-wrap 自动换行（放不下一排就两排）。 */
/* 材料行：不再输出顿号（换行时行尾会挂着没意义的「、」），
   改由 .card-recipe 的 gap 分隔各份材料，所以 gap 从 6px 放大到 12px。 */
/* 材料行的外框往左挪 9px（= 它自己的左内边距）：这样**框内第一份材料**（图标+名字）
   与上方的简介文字左对齐，边框则"悬挂"在文字左边一点点（author 要求）。 */
.card-recipe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:6px 0 0 -9px;padding:7px 9px;background:rgba(255,255,255,.42);border:.5px solid var(--c-teal-line);border-radius:8px;font-size:13px;overflow-wrap:anywhere}
/* 一份材料（图标 + 名字 + 数量）是一个整体：放不下就整份挪到下一行，绝不拆开。 */
.recipe-entry{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.recipe-icon{height:20px;max-width:28px;object-fit:contain;vertical-align:-4px;background:var(--c-surface);border:.5px solid var(--c-line);border-radius:4px}
/* ⚠️ 弹窗里要靠这两条把尺寸掰回来：`.modal-body img{max-width:100%;height:auto}` 比单类
   选择器更具体，不写就会被顶掉、按原图 63/64px 渲染。两类位置要求的尺寸不一样：
   ① 弹窗顶部的**配方行** → 保持原图大小（材料看得清，陛下要的「跟原来一样大」）
   ② 详情**正文**里的行内图标 → 跟正文文字差不多大，别把行撑高
   两条权重相同（0,2,1），靠先后顺序分胜负，正文那条必须在后面。 */
.modal-body img.recipe-icon{height:64px;max-width:64px}
.modal-body .detail-content img.recipe-icon{height:20px;max-width:28px}
/* 「查看详情」小按钮：作者要求**再小一点、跟正文字号差不多、精致一点**。
   所以字号 13→12px、内边距 8/22 → 4/12、改成全圆角小药丸、边框和阴影都调淡。 */
/* 「需祭坛」界面标注：挂在标签行最前面 / 详情弹窗标题前。
   用金色小药丸区分于普通标签，鼠标悬停给出说明。 */
.chip-altar{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;
  background:linear-gradient(180deg,rgba(255,250,228,.98),rgba(238,222,168,.9));
  border:.5px solid rgba(138,115,48,.5);border-radius:9px;
  padding:1px 7px;margin-right:6px;color:#6B5520;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;line-height:1.6;white-space:nowrap}
.chip-altar::before{content:"";width:5px;height:5px;border-radius:1px;
  transform:rotate(45deg);background:linear-gradient(135deg,var(--c-gold-pale),var(--c-gold))}
.modal-card h3 .chip-altar{font-size:12px;padding:2px 8px;margin-right:8px;vertical-align:.15em}
.btn-detail{background:linear-gradient(180deg,rgba(255,250,228,.96),rgba(238,222,168,.82));border:.5px solid rgba(138,115,48,.42);border-radius:14px;padding:4px 12px;color:#6B5520;font-size:12px;letter-spacing:.06em;line-height:1.5;cursor:var(--cursor-sword-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 3px rgba(47,90,98,.08)}
.btn-detail:hover{border-color:rgba(138,115,48,.66);background:linear-gradient(180deg,rgba(255,252,238,.99),rgba(238,222,168,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(47,90,98,.12)}
/* 「查看详情」按钮：原来钉在卡片**右下角**，作者要求挪到**右上角**（跟标题同一行）。
   因为是绝对定位，改 top/bottom 即可；标题另加 padding-right 让位，长标题不会被压住。 */
.card-foot{display:flex;justify-content:flex-end;position:absolute;right:28px;top:26px;z-index:2}
.sections-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.section-tab{border:.5px solid rgba(95,154,166,.35);border-radius:8px;background:rgba(255,255,255,.64);padding:7px 12px;color:var(--c-teal-ink)}
.section-tab.active{background:rgba(194,162,78,.18);border-color:rgba(194,162,78,.58);color:var(--c-gold-ink)}
.item-card{position:relative}
.item-card__image{max-width:100%;height:auto;object-fit:contain;border-radius:9px}
.item-card__tags{display:flex;flex-wrap:wrap;gap:0 14px}
.item-card__summary{color:var(--c-teal-ink);line-height:1.8}
.item-card__detail{margin-top:12px}
.yun-band{position:absolute;left:0;bottom:0;width:100%;height:34px;display:block;z-index:0}
.yun-head{position:absolute;bottom:2px;z-index:0}

.carNav{position:absolute;left:0;right:0;top:50%;display:flex;justify-content:space-between;padding:0 8px;transform:translateY(-50%);pointer-events:none}
.carBtn{pointer-events:auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--c-ink);background:rgba(255,255,255,.78);border:.5px solid var(--c-line);border-radius:50%;font-size:18px;line-height:1}
.dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px}
.dot{width:9px;height:9px;padding:0;background:var(--c-surface);border:.5px solid var(--c-line);border-radius:50%}
.dot.active{background:var(--c-gold)}

.xref{color:var(--c-teal-link);font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:var(--cursor-sword-btn)}
/* 详情正文里提到别的条目时，名字前面挂一张小图标（配方用的那种 64×64 图标）。
   ⚠️ 必须写成 .modal-body img.xref-icon：`.modal-body img{height:auto}` 比单类选择器
   更具体，只写 .xref-icon 的话 height 会被它顶掉，图标会以原图 64px 撑大整行。 */
.xref-icon{height:1.15em;width:auto;max-width:1.8em;object-fit:contain;vertical-align:-.22em;margin:0 .34em 0 .06em;
  background:var(--c-surface);border:.5px solid var(--c-line);border-radius:3px}
.modal-body img.xref-icon{height:1.15em;width:auto;max-width:1.8em}

.empty-state{margin:12px 0 24px;padding:18px;color:var(--c-ink-2);background:var(--c-surface);border:.5px dashed var(--c-line);border-radius:10px}
.empty-state span{display:block;margin:6px 0 12px}
.editor-panel{margin:0 0 18px;padding:14px;background:var(--c-surface);border:.5px solid var(--c-line);border-left:2px solid var(--c-gold);border-radius:10px}
.editor-panel h2{margin:0 0 8px;color:var(--c-teal-ink);font-size:18px}

/* 遮罩层本身可滚（兜底）：万一卡片仍然比可视区高，整层可以滚动把它带出来，
   不至于像以前那样卡在屏幕外、滚轮也没反应。 */
.modal-mask{position:fixed;inset:0;background:rgba(43,38,32,.45);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;overflow:auto}
.modal-backdrop{position:absolute;inset:0}
.modal-card{position:relative;background:var(--c-surface);border:.5px solid var(--c-line);border-top:2px solid var(--c-gold);border-radius:12px;max-width:640px;width:100%;max-height:80vh;overflow:auto;padding:24px 26px;box-shadow:0 12px 40px rgba(43,38,32,.22)}
/* 详情弹窗跟着点击的那张卡片走（横向对齐卡片中轴、纵向对齐卡片上沿）。
   坐标由 app.js 的 positionModalCard() 算好写进这两个变量；
   没有来源卡片（深链直接打开）时不加 .anchored，退回上面那套窗口居中。 */
.modal-mask.anchored{align-items:flex-start;justify-content:flex-start}
/* 锚定时高度钉死在可视区内（--modal-max-h 由 app.js 按可视高度算好），
   卡片内部滚动 —— 保证点页面下方的卡片时，弹窗底部也能看到。
   宽度同样用 app.js 算好的 --modal-w 写死：定位改成 absolute 之后，
   `.modal-card{width:100%}` 是按遮罩（含内边距）算的，会比视口宽、
   右边缘被挤出屏幕（作者反馈「弹出的卡片没做自适应」）。 */
.modal-mask.anchored .modal-card{position:absolute;left:var(--modal-left,24px);top:var(--modal-top,24px);margin:0;
  width:var(--modal-w,auto);max-width:none;
  max-height:var(--modal-max-h,calc(100vh - 32px))}
.modal-card h3{margin:0 44px 14px 0;color:var(--c-teal-ink);font-family:var(--font-serif);font-weight:700;letter-spacing:.3px}
.modal-card h3::before{content:"";display:inline-block;width:.3em;height:.3em;margin-right:.45em;
  transform:rotate(45deg);vertical-align:.12em;
  background:linear-gradient(135deg,var(--c-gold-pale),var(--c-gold))}
.modal-close{position:absolute;top:10px;right:12px;width:34px;height:34px;color:var(--c-ink-2);background:transparent;border:.5px solid var(--c-line);border-radius:50%;font-size:24px;line-height:1}
.modal-body{overflow:auto}
.modal-body img{max-width:100%;height:auto}
.detail-content{display:grid;gap:14px;color:var(--c-ink-2)}
.detail-content p{margin:0;white-space:pre-line;line-height:1.9}
/* ===========================================================================
   英文版视觉微调
   ---------------------------------------------------------------------------
   中文那套行距（正文 1.9）、字距（标题 .12em / .06em）是给方块字调的，
   直接套到英文上会显得松、散、断词难看。这里用 <html lang="en"> 挂一套英文规则
   （lang 由 app.js 的 setLang() 同步：中文 zh-CN、英文 en，切换时自动生效）。
   =========================================================================== */
html[lang="en"]{
  /* 英文正文用更干净的拉丁无衬线栈，不再走中文字体（雅黑等的拉丁字形偏窄挤） */
  --font-sans:"Segoe UI","Inter","Helvetica Neue",Arial,"Noto Sans",sans-serif;
  /* 英文标题（卷目标题、详情弹窗标题等 .serif）改用站里已自托管的 Bellefair ——
     它本来就是「饥荒」在用的那款，拉丁字形完整（中文子集只有「灵界」两字，
     但英文模式下这块只出现英文，不会缺字） */
  --font-serif:"DST Bellefair",Georgia,"Times New Roman",serif;
}
/* 正文行距收紧：英文没有方块字那种行距需求，1.9 会显得松散 */
html[lang="en"] .detail-content p{line-height:1.72}
html[lang="en"] .detail-sub{line-height:1.66}
html[lang="en"] .detail-content .detail-h{letter-spacing:.01em}
html[lang="en"] .detail-table .detail-row-val{line-height:1.65}
/* 卡片简介 */
html[lang="en"] .card-desc{line-height:1.6}
/* 标题字距收小：.06em 是给中文的，英文拉这么开会显散 */
html[lang="en"] .card-title-preview{letter-spacing:.005em;overflow-wrap:break-word;word-break:normal}
html[lang="en"] .sec-title{letter-spacing:.02em}
html[lang="en"] .modal-card h3{letter-spacing:.01em}
html[lang="en"] .site-ver{letter-spacing:.12em}
/* 侧栏与按钮：英文单行更宽，字距归零、允许按词换行 */
html[lang="en"] .nav-lbl{letter-spacing:0;overflow-wrap:break-word}
html[lang="en"] .nav-row{letter-spacing:0}
html[lang="en"] .card-recipe{letter-spacing:.005em}
html[lang="en"] .tag{letter-spacing:.03em}
/* 标签行：分隔符「|」跟在词后面，不要孤零零跑到下一行开头 */
html[lang="en"] .card-tags .tag+.tag{white-space:nowrap}
/* 中英切换小按钮（顶栏右侧、加群按钮左边）：跟「查看详情」同一套小药丸样式，
   按钮上写的是**目标语言**（中文界面显示 EN，英文界面显示「中文」）。 */
.btn-lang{background:linear-gradient(180deg,rgba(255,250,228,.96),rgba(238,222,168,.82));border:.5px solid rgba(138,115,48,.42);border-radius:14px;padding:4px 12px;color:#6B5520;font-size:12px;letter-spacing:.06em;line-height:1.5;cursor:var(--cursor-sword-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 3px rgba(47,90,98,.08)}
.btn-lang:hover{border-color:rgba(138,115,48,.66);background:linear-gradient(180deg,rgba(255,252,238,.99),rgba(238,222,168,.95))}
/* 正文里「短标签：内容」的短标签（技能名、字段名）加粗上色：整段一个粗细时眼睛抓不住重点 */
.detail-lead{color:var(--c-teal-ink);font-weight:700;letter-spacing:.02em}
/* 小标题：详情正文里的层级，让眼睛有落脚点 */
.detail-content .detail-h{margin:6px 0 -2px;padding-left:9px;border-left:3px solid var(--c-gold);
  color:var(--c-teal-ink);font-family:var(--font-serif);font-size:15.5px;font-weight:600;line-height:1.5}
/* 缩进条目：全角空格缩进的行，用竖线标出层级 */
.detail-sub-group{display:grid;gap:6px;margin:-6px 0 0;padding-left:2px}
.detail-sub{position:relative;padding-left:14px;line-height:1.8}
.detail-sub::before{content:"";position:absolute;left:4px;top:.72em;width:4px;height:4px;border-radius:50%;background:var(--c-gold-mut)}
.detail-sub-2{padding-left:28px}
.detail-sub-2::before{left:18px;background:var(--c-line)}
.detail-sub-3{padding-left:42px}
.detail-sub-3::before{left:32px;background:var(--c-line)}
/* 数据表：境界名 + 数值两栏对齐，隔行浅底 */
.detail-table{margin:-4px 0 0;border:.5px solid var(--c-line);border-radius:8px;overflow:hidden;background:var(--c-white)}
.detail-table .detail-row{display:grid;grid-template-columns:5.2em 1fr;gap:10px;align-items:baseline;
  padding:5px 12px;border-top:.5px solid rgba(224,215,194,.7)}
.detail-table .detail-row:first-child{border-top:0}
.detail-table .detail-row:nth-child(even){background:var(--c-cream)}
/* 表格左侧标签列：字重/颜色跟正文里的「短标签」（.detail-lead）保持一致，
   不然同一份详情里有的粗有的不粗，看着很乱（用户反馈过） */
.detail-table .detail-row-key{color:var(--c-teal-ink);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.detail-table .detail-row-val{font-variant-numeric:tabular-nums;letter-spacing:.2px;line-height:1.7}
.detail-table .detail-note{padding:6px 12px;border-top:.5px solid rgba(224,215,194,.7);
  background:var(--c-teal-soft);color:var(--c-ink-3);font-size:13px;line-height:1.7}
.detail-table .detail-row-val .recipe-icon{margin:0 1px}
.detail-image-block{margin:4px 0 2px;padding:10px;background:rgba(255,255,255,.58);border:.5px solid rgba(95,154,166,.28);border-radius:10px}
.detail-image-block img{display:block;max-width:100%;height:auto;object-fit:contain;border-radius:8px;margin:0 auto}
.detail-image-block figcaption{margin-top:8px;text-align:center;color:var(--c-ink-3);font-size:13px;line-height:1.5}
.detail-image-error{padding:12px 14px;border:1px solid rgba(140,28,18,.28);border-radius:8px;background:#F8E9E4;color:#7A261C;font-size:13px;line-height:1.6}
.log-detail{margin:0 0 18px}
.log-detail h3{margin:0 0 6px;color:var(--c-teal-ink)}

@media (max-width:1023px){
  .masthead{min-height:var(--mast-h-base);padding:20px 14px 16px;gap:10px}
  /* 顶栏只剩加群按钮：走正常流（不用绝对定位），右对齐，绝不会被挤出屏幕。
     顶栏真实高度由 app.js 的 syncMastHeight() 量出来写回 --mast-h。 */
  .mast-tools{position:static;width:100%;justify-content:flex-end;padding:0}
  /* 单列时必须是 minmax(0,1fr)：写成 1fr 等于 minmax(auto,1fr)，
     grid 项的最小尺寸会把整行撑到内容宽度（横向卷目条 12 个按钮 → 1148px 溢出） */
  .shell{grid-template-columns:minmax(0,1fr);min-height:0}
  .rail{min-width:0;border-right:0;border-bottom:1px solid var(--c-gold);position:sticky;top:var(--mast-h);z-index:15}
  /* 窄屏：侧栏变两行 —— 第一行搜索 + 清空，第二行横向卷目条（自己横向滚） */
  .rail-inner{position:static;top:auto;max-height:none;min-width:0;overflow:visible;display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px}
  .rail-inner .nav-sub,.rail-divider,.nav-chev{display:none}
  .rail-search{flex:1 1 100%;min-width:0;margin:0}
  .rail-search .search{flex:1 1 auto;width:auto}
  /* 窄屏菜单：原来是一整排横向滚动（滚动条还隐藏了），窗口一窄后面的卷目就被切掉。
     改成 flex-wrap 换行 —— 放不下自动往下一行，所有卷目都能看到。 */
  .nav{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;gap:6px;overflow:visible}
  /* 加群按钮交给顶栏那一枚，侧栏底部的收起来 */
  .rail-foot{display:none}
  .qq-hint{display:none}
  /* 卷目按钮：保持直角按钮样子，选中依然是金色填充；li 不压缩，标签才不会被挤掉 */
  .nav-group{flex:0 0 auto}
  .nav-row{white-space:nowrap;margin:0;padding:6px 10px;font-size:13px}
  /* 窄屏换短名，并把内边距收紧一点 —— 原来是 3 行，现在两三行内排下 */
  .nav-lbl-full{display:none}
  .nav-lbl-short{display:inline}
  .nav-row.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
  .content{padding:16px 16px 48px}
  .content-inner{max-width:none}
  .card{width:100%}
  .card-top{grid-template-columns:1fr;gap:14px}
  .card-summary{padding-top:0}
  .section{scroll-margin-top:190px}
}

@media (max-width:420px){
  .site-name{font-size:36px}
  .site-name-en{font-size:20px}
  .ornament i{width:42px}
  /* 顶栏只剩加群按钮一枚，右对齐；搜索已经在侧栏里了，不再挤 */
  .mast-tools{gap:8px;justify-content:flex-end}
  .to-top{right:14px;bottom:14px;padding:8px 12px}
  .card{padding:16px;border-radius:14px}
  .card::before{inset:5px;border-radius:10px}
  .card::after{inset:10px;border-radius:7px}
  .card-media{height:160px}
  .card-title-preview{font-size:20px}
  .card-head-row{padding-right:72px}
  .card-head{gap:10px}
  .card-foot{right:18px;top:20px}
  .modal-mask{padding:10px}
}

/* 手机端：顶栏随页面滚走，但「搜索 + 卷目」划到屏幕顶就吸住。
   作者要求：从搜索栏到卷目栏划到屏幕顶的时候固定住，前面的顶栏正常滚走。
   另外侧栏那个加群按钮在手机上收起来（顶栏已经有一个同样的），
   不然吸顶块会高出一截；点顶栏那个按钮时群号提示仍会出现在这里。 */
@media (max-width:640px){
  .masthead{position:static}
  body{padding-top:0}
  .rail{position:sticky;top:0;z-index:15}
  .rail-inner{position:static;max-height:none;overflow:visible;padding-top:10px}
  .rail-foot .btn-qq{display:none}
  .shell{min-height:0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}