/* 凡尘修仙图 · 共享样式 — 宋徽宗工笔青绿 × 妙笔千山 */
/* 书法字体（自托管，SIL OFL 开源可商用）：首选 webfont，辅选系统楷体 */
@font-face{font-family:'MSZ';src:url('fonts/MaShanZheng-subset.woff2') format('woff2');
  font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:'ZXW';src:url('fonts/ZCOOLXiaoWei-subset.woff2') format('woff2');
  font-display:swap;font-weight:400;font-style:normal}
:root{
  --paper:#f2ecdd; --paper2:#faf6ea; --ink:#2f2d28; --ink2:#6b675c;
  --qing:#5f7f76; --lv:#7d9b76; --zhu:#a8412f; --jin:#a67c2e;
  --xuan:#4a4a55; --line:#d8cfba; --card:rgba(255,252,244,.92);
  --font-title:'MSZ','STKaiti','Kaiti SC','KaiTi','楷体','Songti SC',serif;
  --font-body:'ZXW','STKaiti','Kaiti SC','KaiTi','楷体','Songti SC','STSong',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--paper);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(125,155,118,.10), transparent 60%),
    radial-gradient(ellipse 800px 600px at 95% 110%, rgba(95,127,118,.10), transparent 60%);
  color:var(--ink); line-height:1.7; min-height:100vh;
}
.wrap{max-width:1020px;margin:0 auto;padding:18px 18px 60px}

/* 顶栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .seal{
  width:40px;height:40px;border-radius:8px;background:var(--zhu);color:#f8f1df;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;
  box-shadow:0 2px 6px rgba(90,40,25,.3); letter-spacing:0;
}
.brand .t{font-size:22px;font-weight:700;letter-spacing:6px;font-family:var(--font-title)}
.brand .s{font-size:12px;color:var(--ink2);letter-spacing:2px}
.stones{display:flex;gap:8px;flex-wrap:wrap}
.stone{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px 3px 5px;font-size:13px;color:var(--ink2)}
.stone i{width:16px;height:16px;border-radius:50%;display:inline-block;box-shadow:inset 0 -2px 3px rgba(0,0,0,.18)}
.stone b{color:var(--ink);font-weight:600;min-width:1.2em;text-align:right}
.st-q i{background:radial-gradient(circle at 35% 30%, #a8c8a0, #5d8a5e)}
.st-c i{background:radial-gradient(circle at 35% 30%, #e0a184, #b0532f)}
.st-b i{background:radial-gradient(circle at 35% 30%, #f4f1e6, #c9c2ab)}
.st-x i{background:radial-gradient(circle at 35% 30%, #8b8b9c, #3d3d49)}
.st-h i{background:radial-gradient(circle at 35% 30%, #eeda9e, #c19a3a)}

/* 卡片 */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 4px 18px rgba(90,80,50,.08); overflow:hidden}
.pad{padding:18px 20px}

/* 道场 hero */
.hero{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(90,80,50,.12)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:saturate(.96)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg, rgba(242,236,221,0) 30%, rgba(242,236,221,.55) 68%, rgba(242,236,221,.94) 100%)}
.hero .inner{position:relative;display:flex;gap:18px;align-items:flex-end;padding:210px 20px 18px;flex-wrap:wrap}
.portrait{width:158px;flex:none;border-radius:12px;overflow:hidden;border:2px solid rgba(250,246,234,.9);
  box-shadow:0 6px 18px rgba(60,50,30,.28);background:#e9e2cf}
.portrait img{width:100%;display:block}
.who{flex:1;min-width:230px}
.who .name{font-size:24px;font-weight:700;letter-spacing:3px}
.who .badge{display:inline-block;margin-top:4px;background:rgba(168,65,47,.1);color:var(--zhu);
  border:1px solid rgba(168,65,47,.35);border-radius:999px;padding:2px 12px;font-size:13px;letter-spacing:2px}
.vals{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.val{font-size:13px;color:var(--ink2)}
.val b{display:block;font-size:22px;color:var(--ink);font-weight:700;letter-spacing:1px}
.pet{position:absolute;right:16px;top:14px;width:118px;text-align:center}
.pet .pimg{width:96px;height:96px;border-radius:50%;overflow:hidden;margin:0 auto;
  border:2px solid rgba(250,246,234,.95);box-shadow:0 4px 14px rgba(60,50,30,.25)}
.pet .pimg img{width:100%;height:100%;object-fit:cover}
.pet .pname{margin-top:5px;font-size:12px;color:var(--ink);background:rgba(250,246,234,.85);
  border-radius:999px;display:inline-block;padding:1px 10px;border:1px solid var(--line)}
.pet .pbars{margin-top:6px;background:rgba(250,246,234,.85);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:11px;color:var(--ink2);text-align:left}
.pbar{display:flex;align-items:center;gap:5px;margin:2px 0}
.pbar .tr{flex:1;height:5px;border-radius:3px;background:#e3dcc6;overflow:hidden}
.pbar .tr i{display:block;height:100%;border-radius:3px;background:var(--lv)}

/* 向导气泡 */
.guide{display:flex;gap:14px;align-items:flex-start;margin-top:16px}
.gavatar{flex:none;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #f3e6c8, #d9b96a);
  border:2px solid #c8a34e;display:flex;align-items:center;justify-content:center;font-size:24px;color:#7a5a18;font-weight:700}
.gbubble{flex:1;background:var(--card);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:14px 18px;position:relative}
.gbubble .gname{font-size:12px;color:var(--jin);letter-spacing:2px;margin-bottom:2px}
.gbubble .gtext{font-size:16px}
.gacts{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* 按钮 */
.btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer;
  border-radius:10px;padding:9px 18px;font-size:15px;letter-spacing:2px;border:1px solid transparent;
  font-family:inherit;transition:transform .12s ease, box-shadow .12s ease}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--zhu);color:#faf3e3;box-shadow:0 3px 10px rgba(168,65,47,.3)}
.btn-g{background:rgba(95,127,118,.12);color:var(--qing);border-color:rgba(95,127,118,.4)}
.btn-n{background:transparent;color:var(--ink2);border-color:var(--line)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* 入口卡 */
.gates{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:16px}
.gate{position:relative;display:block;text-decoration:none;color:var(--ink);padding:20px;overflow:hidden}
.gate .gt{font-size:20px;font-weight:700;letter-spacing:3px}
.gate .gs{font-size:13px;color:var(--ink2);margin-top:3px;letter-spacing:1px}
.gate .prog{margin-top:14px;height:8px;border-radius:4px;background:#e6dfca;overflow:hidden}
.gate .prog i{display:block;height:100%;width:0%;border-radius:4px}
.gate .pn{font-size:12px;color:var(--ink2);margin-top:6px;letter-spacing:1px}
.gate.heart .prog i{background:var(--zhu)}
.gate.spirit .prog i{background:var(--qing)}
.gate.locked{opacity:.62}
.gate .locktip{position:absolute;right:16px;top:16px;font-size:12px;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:1px 10px;background:rgba(250,246,234,.8)}

/* 家当 */
.strip{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.item{width:104px;text-align:center;padding:10px 8px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.item img{width:64px;height:64px;border-radius:10px;object-fit:cover;filter:grayscale(.9) opacity(.55)}
.item .in{font-size:12px;color:var(--ink2);margin-top:6px;letter-spacing:1px}
.item .it{font-size:11px;color:#a89f86}

/* 面板页 */
.pagehead{display:flex;align-items:center;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.back{text-decoration:none;color:var(--ink2);font-size:14px;border:1px solid var(--line);border-radius:999px;padding:4px 14px;background:var(--card)}
.pagetitle{font-size:26px;font-weight:700;letter-spacing:5px}
.pagesub{color:var(--ink2);font-size:14px;letter-spacing:1px}
.stats{display:flex;gap:18px;margin:10px 0 18px;flex-wrap:wrap}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 18px;font-size:13px;color:var(--ink2)}
.stat b{font-size:20px;color:var(--ink);margin-left:6px}
.notice{background:rgba(166,124,46,.08);border:1px solid rgba(166,124,46,.3);color:#7a5f28;
  border-radius:12px;padding:10px 16px;font-size:14px;margin-bottom:20px;letter-spacing:1px}

.stage{margin-bottom:26px}
.stage .sh{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.stage .sh .no{font-size:15px;color:var(--zhu);font-weight:700;letter-spacing:2px}
.stage .sh .nm{font-size:18px;font-weight:700;letter-spacing:3px}
.stage .sh .ds{font-size:12px;color:var(--ink2);letter-spacing:1px}
.grid9{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}
@media(max-width:860px){.grid9{grid-template-columns:repeat(6,1fr)}}
@media(max-width:560px){.grid9{grid-template-columns:repeat(3,1fr)}}
.node{text-align:center;cursor:pointer;user-select:none}
.node .c{width:52px;height:52px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;border:2px solid #c6bda2;background:#e9e3d0;color:#a29a80;transition:all .15s ease}
.node .n{font-size:11px;color:#a29a80;margin-top:5px;letter-spacing:0;line-height:1.35;height:2.7em;overflow:hidden}
.node.open .c{border-color:var(--zhu);color:var(--zhu);background:#fdf6ea;animation:pulse 1.8s infinite}
.node.open .n{color:var(--ink)}
.node.done .c{border-color:var(--lv);background:var(--lv);color:#f6f9ef}
.node.done .n{color:var(--ink)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(168,65,47,.35)}50%{box-shadow:0 0 0 9px rgba(168,65,47,0)}}

/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(40,36,26,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:18px}
.mask.show{display:flex}
.modal{background:var(--paper2);border:1px solid var(--line);border-radius:16px;max-width:440px;width:100%;
  max-height:88vh;overflow:auto;box-shadow:0 18px 60px rgba(40,30,10,.35)}
.modal .mimg{width:100%;display:block}
.modal .mbody{padding:18px 20px 22px}
.modal .mt{font-size:20px;font-weight:700;letter-spacing:2px}
.modal .mtag{font-size:12px;color:var(--zhu);letter-spacing:2px;margin-bottom:4px}
.modal .md{font-size:14px;color:var(--ink2);margin:10px 0 16px}
.modal .macts{display:flex;gap:10px;flex-wrap:wrap}

/* toast */
.toast{position:fixed;left:50%;bottom:60px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:rgba(47,45,40,.92);color:#f4efe0;padding:10px 22px;border-radius:999px;font-size:14px;
  letter-spacing:1px;transition:all .25s ease;z-index:99;pointer-events:none;max-width:86vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.foot{margin-top:34px;text-align:center;color:#a89f86;font-size:12px;letter-spacing:1px;line-height:2}
.sec-t{font-size:17px;font-weight:700;letter-spacing:3px;margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.sec-t::before{content:"";width:6px;height:18px;background:var(--zhu);border-radius:2px}

/* ---- v2 新增 ---- */

/* 用户栏（我的道场 / 登录） */
.userbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.userbar .u{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-size:14px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 14px}
.userbar .u b{font-weight:600}
.userbar .u.out{color:var(--ink2);cursor:pointer}
.userbar .login-links{display:flex;gap:8px}
.userbar .login-links a{text-decoration:none;font-size:14px;border-radius:999px;padding:4px 14px;letter-spacing:1px}
.userbar .login-links a.reg{background:rgba(168,65,47,.1);color:var(--zhu);border:1px solid rgba(168,65,47,.35)}
.userbar .login-links a.lg{background:var(--card);color:var(--qing);border:1px solid rgba(95,127,118,.4)}

/* 卷轴（道场图 / 渡劫图 / 内经图） */
.scroll{position:relative;margin:10px 0 6px;border-radius:6px;overflow:hidden;
  box-shadow:0 10px 34px rgba(70,55,25,.25)}
.scroll::before,.scroll::after{content:"";position:absolute;left:0;right:0;height:14px;z-index:3;
  background:linear-gradient(180deg,#4d3a22,#6d5230 45%,#3a2a15);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.scroll::before{top:0;border-radius:6px 6px 0 0}
.scroll::after{bottom:0;border-radius:0 0 6px 6px}
.scroll .knob{position:absolute;top:-5px;bottom:-5px;width:16px;z-index:4;
  background:radial-gradient(ellipse at 50% 50%, #8a6a3c, #4d3a22 70%);border-radius:8px;
  box-shadow:0 3px 8px rgba(0,0,0,.45)}
.scroll .knob.l{left:-8px}.scroll .knob.r{right:-8px}
.scroll img{width:100%;display:block}
.scroll .veil{position:absolute;inset:14px 0;background:linear-gradient(180deg,rgba(30,24,12,.0),rgba(30,24,12,.22));
  z-index:2;pointer-events:none}

/* 道场卷轴上的信息层 */
.scroll .hud{position:absolute;inset:14px 0;z-index:5;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px}
.scroll .hud .titlerow{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.zhuan{writing-mode:vertical-rl;font-family:var(--font-title);
  font-size:30px;font-weight:700;color:#f8f1df;letter-spacing:6px;line-height:1.25;
  text-shadow:0 1px 3px rgba(40,30,10,.65),0 0 14px rgba(20,15,5,.5);
  background:rgba(40,30,12,.38);padding:14px 6px;border-radius:6px;border:1px solid rgba(248,241,223,.25);height:fit-content}
.zhuan .stamp{display:block;margin-top:10px;width:26px;height:26px;background:var(--zhu);color:#f8f1df;
  border-radius:4px;font-size:13px;font-weight:700;writing-mode:horizontal-tb;display:flex;align-items:center;justify-content:center}
.hud .sub{flex:1;min-width:200px;color:#f4efe0;font-size:12px;letter-spacing:2px;text-shadow:0 1px 3px rgba(40,30,10,.7);padding-bottom:6px}
.hud .vals{display:flex;gap:14px;flex-wrap:wrap;color:#f4efe0;font-size:12px;text-shadow:0 1px 3px rgba(40,30,10,.7)}
.hud .vals b{font-size:18px;color:#fff;letter-spacing:1px}
.scroll .pet2{position:absolute;right:14px;top:20px;z-index:6;text-align:center;width:112px}
.scroll .pet2 .pimg{width:92px;height:92px;border-radius:50%;overflow:hidden;margin:0 auto;border:2px solid rgba(250,246,234,.9);box-shadow:0 4px 14px rgba(40,30,10,.4)}
.scroll .pet2 .pimg img{width:100%;height:100%;object-fit:cover}
.scroll .pet2 .pname{margin-top:4px;font-size:11px;color:#2f2d28;background:rgba(250,246,234,.85);border-radius:999px;display:inline-block;padding:1px 8px}
.portrait2{width:128px;flex:none;border-radius:10px;overflow:hidden;border:2px solid rgba(250,246,234,.9);
  box-shadow:0 6px 16px rgba(40,30,10,.35);background:#e9e2cf}
.portrait2 img{width:100%;display:block}

/* 页面横幅（渡劫图 / 内经图）+ 从左向右修行进度 */
.banner{position:relative}
.banner .bt{position:absolute;left:16px;top:24px;z-index:5;color:#f8f1df;font-size:22px;font-weight:700;
  letter-spacing:5px;writing-mode:vertical-rl;font-family:var(--font-title);
  text-shadow:0 2px 6px rgba(30,20,8,.8);background:rgba(40,30,12,.4);padding:12px 5px;border-radius:6px;
  border:1px solid rgba(248,241,223,.25)}
.banner .bpath{position:absolute;left:0;right:0;bottom:18px;z-index:5;height:6px;margin:0 24px;
  background:rgba(250,246,234,.35);border-radius:3px;overflow:hidden}
.banner .bpath i{display:block;height:100%;background:linear-gradient(90deg,#c19a3a,#e8d9a0);border-radius:3px}
.banner .bdesc{position:absolute;right:22px;top:22px;z-index:5;color:#f4efe0;font-size:12px;letter-spacing:2px;
  text-shadow:0 1px 4px rgba(30,20,8,.8);background:rgba(40,30,12,.4);padding:4px 10px;border-radius:999px}

/* 瑞塔化身（仙女形象） */
.gavatar2{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid #c8a34e;
  box-shadow:0 4px 12px rgba(150,110,40,.35);background:#f3e6c8}
.gavatar2 img{width:100%;height:100%;object-fit:cover}

/* 设置弹层表单 */
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:13px;color:var(--ink2);letter-spacing:1px;margin-bottom:5px}
.form-row input,.form-row select{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--paper2)}
.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--qing)}
.mini-note{font-size:12px;color:#a89f86;margin-top:4px}

/* 标题统一书法体 */
h1,h2,h3{font-family:var(--font-title)}