/* ============================================================================
 * 修为殿堂 · web/cultivation/cultivation.css
 * 2026-10-08
 * ----------------------------------------------------------------------------
 * 视觉母题：暖纸底 + 朱红唯一落点（当前境 / 已达之印）+ 苔绿与暖赭为辅。
 * 八境「第几境」的色标**由 UI 层显式给出**（--lv 变量），不依赖插画本身色调
 *   —— 专家交付的插画里 02/05/06/08 的实际色调与规格有偏差，若靠画面传色序
 *   会让孩子分不清走到第几境（详见 验收记录_境界梯素材_20261008.md §三）。
 * 顶栏配方照抄 web/student-hub/index.html 的 header.hub-top（含对 desktop.css
 *   泄漏的 !important 重置），保证与主站观感一致，不自造第二套。
 * ========================================================================== */

/* ---------------------------------------------------- 自托管毛笔字 --- */
/* Ma Shan Zheng（马善政）· SIL Open Font License 1.1 · 商用免费。
   ⚠ 与 page.css 的 "MaShanZheng"（语文 hero 子集）**必须分开命名** ——
     那份子集是按语文 hero 用字裁的，真机实测八境名一个都不在里面；
     同名会让浏览器优先用那一份，八境名全部回退成系统字（font_diag.js 实测）。
   许可文本随字体落仓：assets/fonts/MaShanZheng-OFL.txt（OFL 1.1 的要求）。
   ⛔ 不写 unicode-range：本子集只含本页用字，缺字时按字符回退到系统字体更安全。 */
@font-face{
  font-family:"MaShanZhengCult";
  src:url("../assets/fonts/MaShanZheng-Cultivation.subset.woff2?v=20261008b") format("woff2");
  font-display:swap;font-weight:400;font-style:normal;
}

.cult-page{
  --cult-bg:#FFF8F2; --cult-card:#FFFFFF; --cult-ink:#2A2230; --cult-muted:#6B6470;
  --cult-line:#F1E6EC; --cult-line2:#EADCE4;
  --cult-red:#C8452F;            /* 唯一朱红：当前境 / 已达印 */
  --cult-ochre:#B07A45; --cult-moss:#6E8B5A;
  --cult-paper:#FFFCF8;          /* 暖纸底：留给「纸面」类元素；榜文罩已改为半透明柔光，不再引用它 */
  --cult-shadow:0 6px 22px rgba(40,30,38,.08);
  --cult-shadow-lift:0 14px 34px -18px rgba(60,40,30,.45);
  /* 毛笔字链：自托管优先，后面是各平台行楷/楷体的兜底（缺字即回退，不会豆腐块） */
  --brush:"MaShanZhengCult","STXingkai","Xingkai SC","STXinwei","STHupo","STKaiti",
          "KaiTi","KaiTi SC","Songti SC","SimSun",cursive,serif;
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px; background:var(--cult-bg); color:var(--cult-ink);
  -webkit-font-smoothing:antialiased;
}
/* ---------- 深色档：夜色墨底（不是把浅色反过来） ----------
   🔴 用户 2026-10-08 实测诉求：「背景色用深色是不是比较有感觉？」—— 有，而且这页尤其适合：
   这页是**看画**的（一轴 2:3 长卷 + 八幅暖亮插画），暖纸底会把画"抢"掉；深墨底让画自己亮出来。
   所以深色档不是简单反色，而是一层**夜色**：
     ① 画布三层渐变（顶上一道紫气接顶栏的品牌渐变 → 山间一层暖雾 → 落进墨底）；
     ② `.pano-frame` 与八境卡外围一圈暖光晕（见下），像"挂在夜色里发光"。
   ⛔ 别把卡片也压成纯黑：卡片要比画布**亮一档**才成其为"牌"，全靠 --cult-card 与
     --cult-bg 的明度差撑住（浅色档同理，只是方向相反）。
   ⚠ background-attachment:fixed 是刻意的：长卷要滚 1400px+，底色若跟着滚会在中途
     露出一条一条的接缝；挂到视口上，整页就是一块不动的夜色。 */
html[data-theme="dark"] .cult-page{
  --cult-bg:#100C1A; --cult-card:#221C2F; --cult-ink:#F1EEF9; --cult-muted:#A9A1BB;
  --cult-line:#2C2538; --cult-line2:#392F49;
  --cult-red:#F0705A; --cult-ochre:#D9A96F; --cult-moss:#93B67B;
  --cult-paper:#171226;
  --cult-shadow:0 6px 22px rgba(0,0,0,.50);
  --cult-shadow-lift:0 18px 44px -18px rgba(0,0,0,.85);
  /* ⚠ 紫气那层刻意压在**视口顶边之上**（at 50% -22%，半径只有 34% 高）：
     紫气若爬到内容区，身份牌那张卡（--cult-card）就会比它自己的底**更暗**，
     看起来像画布上被挖了个洞（首版实测就是这么翻的卫）。内容区只留极淡一层。
     ⚠ 卡片必须比画布亮一档：本仓的"牌感"全靠这层明度差，
       单测 test_dark_branch_deepens_the_canvas_not_just_inverts_it 会算亮度守住它。 */
  background:
    radial-gradient(140% 34% at 50% -22%, rgba(109,94,252,.28), rgba(109,94,252,0) 70%),
    radial-gradient(78% 30% at 50% 30%, rgba(214,145,74,.08), rgba(214,145,74,0) 72%),
    linear-gradient(180deg,#181322 0%,#100C1A 46%,#0A0812 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  /* ⚠ 上面那条 background 简写会把 background-color 重置成 transparent（实测
     getComputedStyle(body).backgroundColor = rgba(0,0,0,0)）—— 渐变盖不到的地方
     就会露出白底。所以显式补回一个不透明的兜底色（长写属性写在简写之后才生效）。 */
  background-color:#100C1A}
.cult-page *{box-sizing:border-box}

/* ---------------------------------------------------------------- 顶栏 --- */
/* 顶栏底色＝**深紫黑实色 #1B1230 + 白字**（2026-10-08 晚用户拍板「换」：
   「紫色还是黑色哪个好看」→ 选深紫黑）。配方沿革：
   ① 曾用品牌紫实色 #8B6FE8（desktop.css:2612 同源；用户否过毛玻璃渐变、要「不要渐变」）；
   ② 2026-10-08 晚：满页金光殿堂主视觉下，亮紫横幅＝全页唯一高饱和亮色、与金光抢戏
      （实测：顶栏 #8B6FE8 / 页底 #151120 / 主视觉暖金）⇒ 底色退到品牌紫暗档 #1B1230
      （非纯黑——纯黑会与页底 #151120 产生色相差，#1B1230 同宗融合），
      品牌紫退居点缀（描边/胶囊/状态色）。⛔ 仍不用渐变。 */
header.cult-top{padding:0;display:flex;flex-direction:column;color:#fff;
  /* 收窄到 .cult-top：裸 header 会命中 AI 面板头，实色 sticky 会泄漏过去 */
  background:#1B1230;
  box-shadow:0 2px 10px rgba(80,65,160,.20);position:sticky;top:0;z-index:60}
header.cult-top .top-nav-row{position:relative;max-width:1180px;margin:0 auto;width:100%;
  display:flex;align-items:center;gap:16px;padding:0 24px !important;height:64px;min-height:0;flex-wrap:nowrap}
/* 品牌**居中**（用户 2026-10-08：「小伴 创归思伴学·修为殿堂 居中显示」）。
   用绝对定位居中，而不是给两侧 flex:1 配平 —— 右侧现在是「主页 + 连接胶囊」两个不等宽的
   块，靠配平的话居中点会跟着漂。
   ⚠ ≤640px 时把品牌放回常规流（见文末响应式），否则 250px 宽的品牌会压在右侧那组上。 */
header.cult-top .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;min-height:0;flex:none;padding:0;margin:0}
  /* 🔴 desktop.css 的 .brand 有 padding:8/14 + margin:6，不重置会把 brand 撑高挤出顶栏 */
/* 🔴 胶囊的左 auto 外距撤掉：右推只留 .cult-nav 一个 margin-left:auto，把【主页 + 胶囊】整组顶到右边。
   若两处都留 auto，flex 会把空档平分 ⇒ 导航被留在中间、正好压在居中品牌上
   （2026-10-08 真机实测 nav.x=643，与 brand 的 616..824 重叠，「主页」压根看不见）。 */
header.cult-top .status-row{margin:0;display:flex;align-items:center;gap:8px;min-height:0;flex:none}
  /* 🔴 同上：desktop.css .status-row 有 margin-bottom:14 */
header.cult-top .brand-mark{width:40px;height:40px;flex-shrink:0;min-height:40px}
header.cult-top .brand-mark img{display:block;width:40px;height:40px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(109,94,252,.35))}
header.cult-top .brand-txt{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0}
header.cult-top .brand-txt b{font-size:17px;color:#fff;font-weight:700;line-height:1.25;
  text-shadow:0 1px 2px rgba(30,15,80,.28);white-space:nowrap;display:flex;align-items:center}
header.cult-top .brand-txt b .lt-dot{display:inline;font-size:inherit;color:rgba(255,255,255,.72);
  font-weight:600;padding:0 1px}
/* 连接胶囊：底是品牌紫，所以走"白字 + 半透明白底"（原来是给浅底写的深字，压在紫上会糊） */
header.cult-top .conn-pill{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  font-size:10px;padding:3px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;
  flex-shrink:0;height:auto;max-height:26px}
header.cult-top .conn-pill .dot{width:4px;height:4px;border-radius:50%;background:#fff}
header.cult-top .conn-pill.on{background:rgba(74,222,128,.25);border-color:rgba(74,222,128,.4)}
header.cult-top .conn-pill.on .dot{background:#4ADE80}
header.cult-top .conn-pill.off{background:rgba(248,113,113,.25);border-color:rgba(248,113,113,.4)}
header.cult-top .conn-pill.off .dot{background:#F2839F}

/* 导航**靠右**（用户 2026-10-08：「学情中枢不要显示，回到主页改为主页并移动到右边」）。
   ⛔ 不再 flex:1 居中 —— 居中的位置让给品牌。margin-left:auto 把它推到右端，
   与连接胶囊连成「主页 | 已连上学情」一组。 */
.cult-nav{display:flex;align-items:center;gap:3px;margin-left:auto;min-width:0}
.cult-nav a{display:inline-flex;align-items:center;color:rgba(255,255,255,.90);padding:8px 16px !important;
  border-radius:999px;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;
  transition:background .18s,color .18s,transform .18s}
.cult-nav a:hover{background:rgba(255,255,255,.18);color:#fff;transform:translateY(-1px)}

/* 深色档不再另写一份顶栏颜色：本页固定夜色，顶栏就是上面那块品牌紫实色（同一份规则）。
   ⛔ 这里原来是一条 紫→青 渐变（照抄 student-hub 的 hub-top）；用户本次明确否掉：
      「用我们的品牌色，不要渐变」—— 所以整块删掉，防止深色档又把它加回来。 */

/* ---------------------------------------------------------------- 容器 --- */
.cult-wrap{max-width:1180px;margin:0 auto;padding:22px 24px 56px}

/* ------------------------------------------------------- ① 身份牌 --- */
.cult-id{background:var(--cult-card);border:1px solid var(--cult-line);border-radius:18px;
  padding:22px 24px;box-shadow:var(--cult-shadow)}
.ci-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.ci-rank{display:flex;align-items:center;gap:16px;min-width:0}
.ci-seal{width:84px;height:84px;flex:none;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:30px;font-weight:700;letter-spacing:1px;
  background:rgba(200,69,47,.07);border:2px solid var(--cult-red);color:var(--cult-red);
  font-family:"Songti SC","STSong","SimSun",serif}
.ci-seal.is-unknown{background:rgba(107,100,112,.08);border-color:var(--cult-line2);color:var(--cult-muted);
  font-size:34px;font-weight:600}
.ci-rank-txt{min-width:0}
.ci-kicker{font-size:12px;color:var(--cult-muted);letter-spacing:.6px;margin-bottom:4px}
.ci-rank-name{font-size:24px;font-weight:700;line-height:1.2}
.ci-rank-word{font-size:13px;color:var(--cult-muted);margin-top:5px;line-height:1.5}
.ci-cell{min-width:0;border-left:1px solid var(--cult-line);padding-left:20px}
.ci-num{font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.ci-num small{font-size:14px;font-weight:600;color:var(--cult-muted);margin-left:3px}
.ci-label{font-size:12px;color:var(--cult-muted);margin-top:6px;letter-spacing:.5px}
.ci-keys{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:18px;
  border-top:1px dashed var(--cult-line2)}
.ci-key{flex:1 1 200px;min-width:0;border:1px solid var(--cult-line);border-radius:12px;padding:11px 13px;
  background:linear-gradient(180deg,rgba(110,139,90,.05),rgba(176,122,69,.03))}
html[data-theme="dark"] .ci-key{background:rgba(255,255,255,.03)}
.ci-key .ck-t{font-size:12px;color:var(--cult-muted);display:flex;align-items:center;gap:6px}
.ci-key .ck-n{font-size:20px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}
.ci-key .ck-n em{font-style:normal;font-size:12px;color:var(--cult-muted);font-weight:600;margin-left:4px}
.ci-key[data-measurable="0"]{border-style:dashed}
.ci-key .ck-why{font-size:11.5px;color:var(--cult-muted);margin-top:5px;line-height:1.5}
.ci-empty{font-size:14px;color:var(--cult-muted);line-height:1.7}
.ci-loading{font-size:14px;color:var(--cult-muted)}

/* ------------------------------------------------------- ② 灵山全景 --- */
/* ⚠ display:flex 只是为了用 order 把**题记**提到画上方（见 .pano-cap）。
   一旦在这里声明了 display，UA 的 `[hidden]{display:none}` 就压不住了
   （UA 规则的特异性低于任何 class 里的 display，本仓 desktop.css:2179 有同款事故记录）
   ⇒ 必须自己补一条 `.cult-pano[hidden]{display:none}`，否则数据没到（或取不到）时，
   页面上会先露出一条空画框 + 一条空题记。（`.cult-viewer[hidden]` 是同一个坑的另一处。） */
.cult-pano{margin-top:24px;display:flex;flex-direction:column}
.cult-pano[hidden]{display:none}
.pano-frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--cult-line);
  box-shadow:var(--cult-shadow-lift);background:#0d0b14;line-height:0}
/* 深色档：给画一圈暖光晕 —— 画是暖亮的、底是墨的，中间那圈"发光"就是两者的桥。
   ⛔ 这是往**外**散光，不是把画盖住（本仓 4dc189f1 已有"半透明罩盖画"的事故记录）；
     所以只能动 box-shadow，⛔ 不许加 backdrop-filter、也不许在 .pano-frame 里再叠一层底。 */
html[data-theme="dark"] .pano-frame{
  box-shadow:0 0 0 1px rgba(255,255,255,.06),
             0 34px 90px -32px rgba(233,152,72,.42),
             0 20px 44px -22px rgba(0,0,0,.88)}
.pano-frame img{display:block;width:1024px;max-width:100%;height:auto;margin:0 auto}
.pano-tags{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:5px}
.pano-tag{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#fff;
  background:rgba(20,16,28,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.pano-tag i{width:8px;height:8px;border-radius:50%;background:var(--lv);flex:none}
.pano-tag[data-state="now"]{background:rgba(200,69,47,.92)}
.pano-tag[data-state="todo"]{opacity:.52}
.pano-tag .pt-cur{font-size:10px;opacity:.9}
/* 题记：放在**画上方**（DOM 里仍在画之后，靠 .cult-pano 的 flex order 提到前面）。
   两个理由，都是用户实测出来的：
     ① 长卷是 2:3（桌面阅读宽下 1400px+ 高），题注放在画下面，要滚过整幅画才看得到
        —— 用户 2026-10-08 报「这句话没看到」，就是它被压在长卷底下；
     ② 先读「修行一共有八段，从脚下一路通向云顶天宫」，再看画，本来就是题跋的先读序。
   ⛔ 别把 order 删掉/改成正数：那等于这次修复没做（题目会退回画下方）。 */
.pano-cap{order:-1;margin:0 2px 12px;font-size:13.5px;color:var(--cult-muted);line-height:1.7}
.pano-cap b{color:var(--cult-ink)}

/* ------------------------------------------------------- ③ 八境殿堂 --- */
.cult-hall{margin-top:30px}
.hall-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hall-hd h2{font-size:19px;margin:0;font-weight:700;letter-spacing:.5px}
.hall-sub{margin:0;font-size:13px;color:var(--cult-muted)}
.hall-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hall-card{position:relative;border:1px solid var(--cult-line);border-radius:16px;overflow:hidden;
  background:var(--cult-card);box-shadow:var(--cult-shadow);cursor:pointer;padding:0;text-align:left;
  font:inherit;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;display:block;width:100%}
/* 🔴 悬停必须**显式接管 background**：全站 page.css:58 有一条无作用域的
   `button:hover{background:var(--accent-d)}`（特异性 0,1,1 > 本卡基础规则 .hall-card 的 0,1,0）
   ⇒ 光标停到卡片上，整张卡会被刷成 --accent-d（暗色＝#B3A6FF 淡紫）。
   用户 2026-10-08 实测「光标点到这里，字看不清楚」：卡底 .hc-need 的文字取 --cult-muted
   (#A9A1BB)、数字取 --cult-ink(#F1EEF9)，压在 #B3A6FF 上对比度都只有 ≈1.2:1，等于看不见。
   同款事故本仓已记过两处（desktop.css:4895 / page.css:983），修法一致：
   显式 :hover 覆盖，**只抬升 + 浅边框、不染底色**（底色留 --cult-card，让 --cult-muted /
   --cult-ink 全部按原设计成立）。 */
.hall-card:hover{transform:translateY(-3px);box-shadow:var(--cult-shadow-lift)}
.hall-card:hover,.hall-card:focus,.hall-card:focus-visible{
  background:var(--cult-card);border-color:var(--cult-line2)}
.hall-card:focus-visible{outline:3px solid var(--cult-red);outline-offset:3px}
/* ⚠ 这些节点在 JS 里是 <span>（button 内只能用 phrasing content，不能放 div）
   ⇒ 每一条都必须显式声明**非 inline** 的 display，否则 inline 元素上
   aspect-ratio / padding / grid 全部失效、卡面高度塌成 0
   （首版实测：八格只剩色标签，图全不见）。 */
.hc-shot{position:relative;display:block;aspect-ratio:2/3;background:#100e18;overflow:hidden}
.hc-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.hall-card:hover .hc-shot img{transform:scale(1.03)}
/* 只保留**底部**一条极淡压暗把画「收」进卡里。⛔ 顶部那条压暗已删 ——
   面板改成半透明柔光罩后，顶部再叠一层深色 = 罩子与压暗互相打架，画会发浑。
   ⛔ 也不要把整幅画压黑 ——「还没走到」要读作"就在前面、只是还没到"；
   首版从顶部 30% 就压到 .86 再叠 brightness(.62)，八幅画有七幅被自己的样式藏了。 */
.hc-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,16,0) 0%,rgba(10,8,16,0) 72%,
    rgba(10,8,16,.30) 100%)}

/* ---------- 榜文罩（顶部）：序号 / 状态 / 境名 / 短句 ----------
   ⚠ 面板是**半透明罩**，不是纸面：用户实测「不透明面板把插画顶部整块盖住了」。
   这里只留一条自上而下迅速渐隐的柔光（顶部给文字当可读底，40% 处已降到 .56、
   74% 处 .20、底缘归 0），画面中下部**完全露出**—— 人像落在中段，不再被压。
   ⛔ 不要在这个罩上加 backdrop-filter:blur —— 那等于把画糊掉，还是"盖住"。
   ⛔ 不要再挂「不透明渐隐带 ::after」—— 罩子自己就渐隐了，多一条实色带又会挡住画。
   ⚠ 三格 + 印章已**拆到底部**单独一块 `.hc-plate-bottom`（见下），本罩只管标题区。 */
.hc-plate{position:absolute;left:0;right:0;top:0;z-index:3;display:block;
  padding:9px 11px 10px;
  background:linear-gradient(180deg,rgba(255,252,248,.80) 0%,rgba(255,252,248,.56) 40%,
    rgba(255,252,248,.20) 74%,rgba(255,252,248,0) 100%)}
html[data-theme="dark"] .hc-plate{
  background:linear-gradient(180deg,rgba(18,15,26,.80) 0%,rgba(18,15,26,.54) 40%,
    rgba(18,15,26,.18) 74%,rgba(18,15,26,0) 100%)}

/* ---------- 榜文罩（底部）：三格 + 印章 ----------
   ⚠ 用户实测：三格原先叠在画的上半部，好几张卡把人像挡住了。
   所以把三格移到卡底，顶部只留标题；中段的画（人像）整段露出来。
   这块罩从下往上渐隐（0deg：底 .88 → 顶 0），只给三格当可读底，**不往画面中段爬**，
   画的中上部照样透出。⛔ 同样不加 backdrop-filter:blur（会糊画）。 */
.hc-plate-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;display:block;
  padding:0 11px 13px;
  background:linear-gradient(0deg,rgba(255,252,248,.88) 0%,rgba(255,252,248,.66) 32%,
    rgba(255,252,248,.24) 62%,rgba(255,252,248,0) 100%)}
html[data-theme="dark"] .hc-plate-bottom{
  background:linear-gradient(0deg,rgba(18,15,26,.88) 0%,rgba(18,15,26,.64) 32%,
    rgba(18,15,26,.20) 62%,rgba(18,15,26,0) 100%)}
.hc-plate-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
/* 序号徽章：环里是汉字数字（一…八），与段位色同源 */
.hc-no{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;flex:none;
  border-radius:50%;border:1.5px solid var(--lv);color:var(--lv);background:rgba(255,255,255,.92);
  font-family:var(--brush);font-size:13px;line-height:1;padding-bottom:1px}
html[data-theme="dark"] .hc-no{background:rgba(255,255,255,.10)}
.hc-state{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.5px;flex:none;
  box-shadow:0 1px 3px rgba(28,18,40,.14)}
.hc-state[data-s="now"]{background:var(--cult-red);color:#fff}
.hc-state[data-s="done"]{background:rgba(255,255,255,.74);color:var(--cult-moss);
  border:1px solid rgba(110,139,90,.34)}
.hc-state[data-s="todo"]{background:rgba(255,255,255,.76);color:#6B6273;
  border:1px solid rgba(107,100,112,.26)}
html[data-theme="dark"] .hc-state[data-s="done"]{background:rgba(30,40,26,.74);
  border-color:rgba(143,178,119,.40)}
html[data-theme="dark"] .hc-state[data-s="todo"]{background:rgba(26,20,38,.72);
  border-color:rgba(255,255,255,.22)}
/* 境名：霸气居中 —— 自托管毛笔字 + 段位色渐变填充 + 双层落影（白描边 + 同色晕）。
   ⚠ 渐变填字靠 background-clip:text，所以 color 必须留一份兜底：
     万一 background 被上层规则清掉（本仓有过 `.page-h1` 扫光把字填成 transparent 的事故），
     还能退回段位纯色，⛔ 不会变成一片空白字。 */
.hc-title{display:block;text-align:center;font-family:var(--brush);
  font-size:42px;line-height:1.1;letter-spacing:3px;padding:3px 0 0;
  color:var(--lv);
  background-image:linear-gradient(178deg,color-mix(in srgb,var(--lv) 46%,#fff) 4%,var(--lv) 88%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,252,248,.95))
         drop-shadow(0 1px 0 rgba(255,255,255,.95))
         drop-shadow(0 5px 10px color-mix(in srgb,var(--lv) 30%,transparent))}
html[data-theme="dark"] .hc-title{
  filter:drop-shadow(0 0 12px rgba(15,12,22,.90))
         drop-shadow(0 1px 0 rgba(0,0,0,.55))
         drop-shadow(0 5px 11px color-mix(in srgb,var(--lv) 42%,transparent))}
.hc-word{display:block;text-align:center;font-size:11.5px;color:#5F5769;line-height:1.45;
  margin-top:1px;letter-spacing:.2px;
  text-shadow:0 1px 6px rgba(255,252,248,.95),0 0 2px rgba(255,252,248,.9)}
html[data-theme="dark"] .hc-word{color:#C6BDD1;
  text-shadow:0 1px 6px rgba(15,12,22,.90),0 0 2px rgba(15,12,22,.80)}

/* ---------- 三格：学习任务 / 能力变化 / 晋级奖励（位于卡底 `.hc-plate-bottom` 内） ---------- */
.hc-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:0;
  align-items:stretch}
.hc-cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-width:0;border:1px solid rgba(255,255,255,.68);border-radius:9px;padding:5px 4px 6px;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.50));
  box-shadow:0 1px 4px rgba(28,18,40,.16)}
html[data-theme="dark"] .hc-cell{background:linear-gradient(180deg,rgba(26,20,38,.66),rgba(26,20,38,.44));
  border-color:rgba(255,255,255,.14);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hc-cell-h{display:block;font-size:9.5px;font-weight:700;color:#6E6577;letter-spacing:.2px;flex:none;
  text-shadow:0 0 4px rgba(255,252,248,.92)}
html[data-theme="dark"] .hc-cell-h{color:#B3AAC1;text-shadow:0 0 4px rgba(15,12,22,.85)}
.hc-cell-v{display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:11px;font-weight:700;color:var(--cult-ink);line-height:1.32;
  margin-top:3px;min-height:30px;flex:1}
/* ---------- 奖励印章：朱红方印，两字篆意。⚠「还没走到」画成虚线灰印 ----------
   那是一枚**还没拿到**的印，⛔ 不是已到手的奖（与门槛行同一口径）。 */
.hc-seal{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:31px;
  padding:0 5px;margin-top:4px;border:1.6px solid var(--cult-red);border-radius:7px;
  color:var(--cult-red);background:rgba(255,255,255,.74);
  font-family:var(--brush);font-size:17px;line-height:1;letter-spacing:1px;padding-top:2px;
  box-shadow:inset 0 0 0 1px rgba(200,69,47,.18),0 1px 3px rgba(28,18,40,.14);
  transform:rotate(-4deg);   /* 手盖上去的轻微歪斜 */
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
html[data-theme="dark"] .hc-seal{background:rgba(26,20,38,.62);
  box-shadow:inset 0 0 0 1px rgba(240,112,90,.22),0 1px 3px rgba(0,0,0,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.4)}
.hall-card[data-state="todo"] .hc-seal{border-style:dashed;border-color:rgba(107,100,112,.55);
  color:#6B6273;background:rgba(255,255,255,.60);box-shadow:none;opacity:.92}
html[data-theme="dark"] .hall-card[data-state="todo"] .hc-seal{border-color:rgba(255,255,255,.26);
  color:#C6BDD1;background:rgba(26,20,38,.55)}
.hall-card[data-state="now"] .hc-seal{box-shadow:inset 0 0 0 1px rgba(200,69,47,.18),
  0 3px 9px -3px rgba(200,69,47,.45)}
.hc-need{display:block;font-size:11.5px;color:var(--cult-muted);padding:9px 12px 11px;line-height:1.6;
  border-top:1px solid var(--cult-line)}

.hc-need b{color:var(--cult-ink);font-variant-numeric:tabular-nums}
/* ⚠「还没走到」要读作"就在前面、只是还没到"，⛔ 不是"看不见"。
   首版遮罩从顶部 30% 就压到 .86、再叠 brightness(.62)，整格近全黑 ——
   八幅画有七幅被自己的样式藏了，孩子点进来只看见一片黑格子。
   现在：画的中段完全露出，只保留上下两条极淡的压暗。 */
.hall-card[data-state="todo"] .hc-shot img{filter:saturate(.62) brightness(.90)}
.hall-card[data-state="todo"] .hc-shot::after{background:linear-gradient(180deg,rgba(10,8,16,0) 0%,
  rgba(10,8,16,0) 70%,rgba(10,8,16,.34) 100%)}
.hall-card[data-state="now"]{border-color:var(--cult-red);
  box-shadow:0 0 0 2px rgba(200,69,47,.30),var(--cult-shadow-lift)}
.hall-card[data-state="done"]{border-color:var(--cult-line2)}
.hall-empty{padding:28px;text-align:center;color:var(--cult-muted);font-size:14px;line-height:1.8;
  border:1px dashed var(--cult-line2);border-radius:16px}

/* --------------------------------------------------- ④ 单境大屏 --- */
.cult-viewer{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px}
/* 🔴 必须显式写这条：作者样式的 `display:flex` 优先级高于 `[hidden]` 的 UA 规则
   （`[hidden]{display:none}` 只是 UA 默认，不是 !important）⇒ 不写它，带 hidden 的开屏
   遮罩照样铺满整页，把内容压在一层半透明黑底下（首版实测就是这个症状）。 */
.cult-viewer[hidden]{display:none}
.cv-backdrop{position:absolute;inset:0;background:rgba(12,9,18,.80);backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px)}
.cv-shell{position:relative;z-index:2;max-height:calc(100vh - 48px);max-width:min(1024px,100%);
  overflow:auto;border-radius:18px;background:var(--cult-card);border:1px solid var(--cult-line);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.cv-close{position:sticky;top:10px;margin:10px 10px 0 auto;display:block;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--cult-line);background:var(--cult-card);color:var(--cult-ink);
  font-size:19px;line-height:1;cursor:pointer;z-index:5}
.cv-close:hover{background:var(--cult-line)}
.cv-body{position:relative}
/* 单境大屏：图按比例收进视口（max-height 控高、width:auto ⇒ 绝不拉伸变形、绝不裁切），
   源文件仍是原生 1024×1536，这里只是显示尺寸。
   ⚠ 首版让图铺满 1536px 原始高度 ⇒ 叠加的境名/状态条落在视口外，
     点开一幅画第一眼看到的只有图，得往下滚才见到"这是第几境"（实测）。 */
/* ⚠ 不要在这里写 line-height:0 —— 它会被题签条继承，叠加的境名/序号行高算成 0px、三行全挤在同一 y 上（首版实测重叠）。
   width:fit-content 让容器贴合图宽，消掉两侧黑边。
   🔴 用户实测（2026-10-08）：大屏原先把「第几境/境名/短句」+ 状态印**叠在画上**
      （`.cv-overlay` 压图底、印钉在右下角），图的下缘被一条深色渐隐带吃掉 ——
      与八境卡片「文字不许盖住画」是同一诉求 ⇒ 整条搬到图**外面**去（见 `.cv-cap`）。
   ⛔ 不要再往 .cv-shot 里塞任何文字/印章：这里只放画本身。 */
.cv-shot{position:relative;background:#0d0b14;display:flex;justify-content:center;width:fit-content;margin:0 auto}
.cv-shot img{display:block;width:auto;height:auto;max-width:min(1024px,100%);max-height:min(66vh,880px);margin:0 auto;object-fit:contain}

/* ---------- 大屏排版：左栏「画 + 题签」，右栏数据面板 ----------
   ⚠ 左栏宽度必须与**画的显示宽度同源**：画是 1024×1536 的 2:3 原图，宽度由
     `max-height:min(66vh,880px)` 反推（= 高的 2/3）⇒ 这里用同一条式子算，
     ⛔ 不要另写一个固定 px：两处一旦不同源，题签条就会比画宽/窄、境名与画脱节
       （首版题签横跨 1024 弹窗、画只有 440 ⇒ 境名飘在最左边，实测已改）。
     将来插画若换非 2:3，只需同步改这一处。 */
.cv-body{--hero-w:calc(min(66vh,880px) * 2 / 3)}
.cv-hero{width:var(--hero-w);max-width:100%;margin:0 auto}
/* 宽屏并排：画在左、数据在右，一屏看全、画两侧不留大片空白。
   ⛔ 不要为了"省事"退回上下堆叠 —— 那样 440 宽的画居中在 1024 弹窗里，两侧各空 290。 */
@media(min-width:901px){
  .cv-body{display:grid;grid-template-columns:var(--hero-w) minmax(0,1fr);gap:0 20px;align-items:start}
  .cv-hero{margin:0}
  .cv-panel{grid-template-columns:minmax(0,1fr);padding:20px 22px 22px;gap:14px}
}

/* ---------- 题签条：图下方的一条题签（左：第几境/境名/短句，右：状态印） ----------
   与卡片同源：境名走本页毛笔子集 + 段位色渐变填字（--lv 由 JS 写在 .cv-cap 上），
   状态印与卡片 `.hc-state` 同一口径三档。 */
.cv-cap{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:13px 18px 15px;background:var(--cult-card);border-bottom:1px solid var(--cult-line)}
.cv-cap-l{min-width:0}
.cv-roman{font-size:12px;line-height:1.4;letter-spacing:3px;font-weight:700;color:var(--cult-ochre)}
.cv-name{display:flex;align-items:baseline;gap:9px;margin:3px 0 4px;min-width:0;line-height:1.15}
/* 渐变填字靠 background-clip:text ⇒ color 必须留一份兜底（--lv 缺失时退 --cult-ink），
   ⛔ 不会变成一片空白字（本仓有过 `.page-h1` 扫光把字填成 transparent 的事故）。 */
.cv-name-t{font-family:var(--brush);font-size:38px;line-height:1.1;letter-spacing:3px;
  color:var(--lv,var(--cult-ink));
  background-image:linear-gradient(178deg,color-mix(in srgb,var(--lv,var(--cult-ink)) 46%,#fff) 4%,var(--lv,var(--cult-ink)) 88%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 7px color-mix(in srgb,var(--lv,var(--cult-ink)) 26%,transparent))}
.cv-word{font-size:13.5px;color:var(--cult-muted);line-height:1.6}
/* 状态印三档：⛔「还没走到」不得用朱红实心印 —— 红印会被读成"奖已经到手了"，
   而字明明写着还没走到（与卡片 `.hc-seal` 同一口径：没走到就画虚线灰印）。 */
.cv-seal{flex:none;font-size:12px;font-weight:700;letter-spacing:1px;white-space:nowrap;
  padding:5px 12px;border-radius:8px;border:1px solid transparent;line-height:1.5}
.cv-seal[data-s="now"]{background:var(--cult-red);color:#fff}
.cv-seal[data-s="done"]{background:transparent;color:var(--cult-moss);border-color:rgba(110,139,90,.38)}
.cv-seal[data-s="todo"]{background:transparent;color:var(--cult-muted);border-style:dashed;
  border-color:rgba(107,100,112,.50)}
html[data-theme="dark"] .cv-seal[data-s="done"]{border-color:rgba(143,178,119,.42)}
html[data-theme="dark"] .cv-seal[data-s="todo"]{border-color:rgba(255,255,255,.24)}
.cv-panel{padding:20px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.cv-block h3{font-size:13px;margin:0 0 9px;color:var(--cult-muted);font-weight:700;letter-spacing:.8px}
.cv-rows{border:1px solid var(--cult-line);border-radius:12px;overflow:hidden}
.cv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;
  font-size:13.5px;border-bottom:1px solid var(--cult-line)}
.cv-row:last-child{border-bottom:0}
.cv-row .k{color:var(--cult-muted)}
.cv-row .v{font-weight:700;font-variant-numeric:tabular-nums}
.cv-row .v small{color:var(--cult-muted);font-weight:600;margin-left:3px}
.cv-row .v.is-unknown{color:var(--cult-muted);font-weight:600}
.cv-note{font-size:12px;color:var(--cult-muted);line-height:1.7;margin-top:10px}
/* 分水岭小签：在题签条里与境名同一行（flex 行内，交给 gap 排距，⛔ 不再用 margin-left+vertical-align） */
.cv-pivot{display:inline-block;flex:none;font-size:11px;font-weight:700;color:var(--cult-ochre);
  border:1px solid currentColor;border-radius:999px;padding:1px 8px}
/* 与卡片同源的「功课」：三列并排（与卡片三格同构，一眼能对上） */
.cv-block--wide{grid-column:1/-1}
.cv-quest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cv-qs{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  border:1px solid var(--cult-line);border-radius:12px;padding:13px 10px;
  background:linear-gradient(180deg,rgba(110,139,90,.05),rgba(176,122,69,.03))}
html[data-theme="dark"] .cv-qs{background:rgba(255,255,255,.03)}
.cv-qk{font-size:12px;color:var(--cult-muted);font-weight:700;letter-spacing:.4px}
.cv-qv{font-size:15px;font-weight:700;color:var(--cult-ink);line-height:1.4}
.cv-qv--seal{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--cult-muted)}
.cv-qv--seal em{font-style:normal;font-size:12px}
.cv-seal-b{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;
  padding:0 8px;border:2px solid var(--cult-red);border-radius:9px;color:var(--cult-red);
  background:rgba(200,69,47,.07);font-family:var(--brush);font-size:22px;font-weight:400;
  line-height:1;letter-spacing:1.5px;padding-top:3px;
  box-shadow:inset 0 0 0 1px rgba(200,69,47,.14)}
.cv-seal-b.is-todo{border-style:dashed;border-color:rgba(107,100,112,.50);color:var(--cult-muted);
  background:transparent;box-shadow:none}
html[data-theme="dark"] .cv-seal-b{background:rgba(240,112,90,.10);
  box-shadow:inset 0 0 0 1px rgba(240,112,90,.18)}
html[data-theme="dark"] .cv-seal-b.is-todo{border-color:rgba(255,255,255,.22)}

/* ---------------------------------------------------------------- 页脚 --- */
.cult-foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--cult-line);
  font-size:12.5px;color:var(--cult-muted);line-height:1.8}
.cult-foot p{margin:0 0 6px}
.cult-foot .cf-thin{font-size:12px;opacity:.9}

/* ------------------------------------------------------------ 响应式 --- */
@media(max-width:900px){
  .ci-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .ci-cell{border-left:0;padding-left:0;border-top:1px solid var(--cult-line);padding-top:14px}
  /* 接壳缩的是容器不是视口 —— 卡片列数必须跟着**容器**走，不能只靠视口断点
     （本仓教训：web/subjects/index.html 接壳后 .mth-plates 的视口断点全失效）。 */
  .hall-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-panel{grid-template-columns:minmax(0,1fr)}
  .hc-title{font-size:46px}   /* 两列后卡更宽，字可以更霸气 */
}
@media(max-width:640px){
  .cult-wrap{padding:16px 14px 44px}
  header.cult-top .top-nav-row{height:auto;min-height:60px;gap:10px;padding:8px 14px !important}
  /* 窄屏：绝对居中的品牌让位回常规流（左），否则它会压在右侧「主页 + 连接胶囊」上 */
  header.cult-top .brand{position:static;transform:none}
  header.cult-top .brand-txt b{font-size:15px}
  .cult-nav a{padding:6px 11px !important;font-size:12.5px}
  .ci-seal{width:66px;height:66px;font-size:24px}
  .ci-rank-name{font-size:20px}
  .ci-num{font-size:27px}
  .hall-grid{gap:12px}
  .hc-title{font-size:36px;letter-spacing:2px}
  .hc-plate{padding:8px 9px 9px}
  .hc-plate-bottom{padding:0 9px 11px}
  .hc-cell-v{font-size:10.5px;min-height:28px}
  .hc-cell-h{font-size:9px}
  /* ⚠ 字号要写在 .cv-name-t 上：.cv-name 现在是 flex 行容器，写它会被 .cv-name-t 的
     显式 font-size 盖掉（等于没写）。 */
  .cv-name-t{font-size:26px;letter-spacing:2px}
  .cv-cap{padding:12px 16px 14px;gap:12px}
  .cv-quest{grid-template-columns:minmax(0,1fr);gap:9px}
}
/* 窄到放不下三格（每格 <90px）时改单列，宁可长一点也不挤成一团 */
@media(max-width:480px){
  .hall-grid{grid-template-columns:minmax(0,1fr)}
  .hc-title{font-size:44px}
}