/* ============================================================================
   天龙攻略阁 · 单页式攻略样式
   设计基调：墨色 × 宣纸 × 青铜——卷轴式的单页长文
   ========================================================================== */

:root{
    --ink:      #171310;
    --ink-2:    #241f19;
    --paper:    #f6f1e7;
    --paper-2:  #efe7d8;
    --card:     #fffdf8;
    --bronze:   #a67c3d;
    --bronze-d: #7d5c2a;
    --cinnabar: #b2452f;
    --text:     #35312a;
    --muted:    #6f6555;
    --line:     #ddd2bd;
    --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
    --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    background:var(--paper);
    color:var(--text);
    font-family:var(--sans);
    font-size:16px; line-height:1.85;
    -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--bronze-d); text-decoration:none; }
.wrap{ max-width:1080px; margin:0 auto; padding-left:24px; padding-right:24px; }

.skip{
    position:absolute; left:-999px; top:0; z-index:99;
    background:var(--ink); color:#f3e9d4; padding:8px 16px;
}
.skip:focus{ left:8px; top:8px; }

/* ------------------------------- 顶部导航 -------------------------------- */
.site-head{
    position:sticky; top:0; z-index:50;
    background:rgba(23,19,16,.96);
    border-bottom:1px solid #3a3128;
}
.head-in{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; height:60px;
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.seal{
    width:34px; height:34px; flex:none;
    display:grid; place-items:center;
    background:var(--cinnabar); color:#f6e9d6;
    font-family:var(--serif); font-weight:900; font-size:19px;
    border-radius:4px;
}
.brand-t{ color:#efe6d3; font-family:var(--serif); font-weight:600; font-size:17px; line-height:1.15; }
.brand-t small{ display:block; font-size:11px; font-weight:400; color:#9a8f7c; letter-spacing:.08em; }
.nav{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.nav::-webkit-scrollbar{ display:none; }
.nav a{
    color:#cbbfa6; font-size:14px; padding:8px 12px; border-radius:4px;
    white-space:nowrap; transition:color .15s, background .15s;
}
.nav a:hover{ color:#f3e9d4; background:#2c251d; }

/* --------------------------------- 头图 ---------------------------------- */
.hero{
    position:relative; overflow:hidden;
    background:linear-gradient(175deg, #1c1712 0%, #171310 58%, #221a10 100%);
    color:#efe6d3;
    padding:76px 0 84px;
}
.hero-art{
    position:absolute; inset:auto 0 0 0; width:100%; height:200px;
    pointer-events:none;
}
.hero-in{ position:relative; max-width:760px; }
.hero-tag{
    display:inline-block; margin-bottom:18px;
    border:1px solid #4a3e2c; color:#c9a86a;
    font-size:13px; letter-spacing:.22em; padding:5px 14px; border-radius:3px;
}
.hero h1{
    font-family:var(--serif); font-weight:900;
    font-size:clamp(32px, 5.4vw, 54px); line-height:1.25;
    letter-spacing:.02em;
}
.hero h1 em{ font-style:normal; color:#d8b46f; }
.hero-sub{
    margin-top:18px; max-width:620px;
    color:#b7ab92; font-size:16px; line-height:1.9;
}
.hero-meta{
    margin-top:26px; display:flex; flex-wrap:wrap; gap:10px;
}
.hero-meta span{
    font-size:13px; color:#9a8f7c; border:1px solid #3a3128;
    padding:5px 12px; border-radius:999px;
}
.hero-toc{
    margin-top:30px; display:flex; flex-wrap:wrap; gap:10px;
}
.hero-toc a{
    color:#e8dcbc; font-size:14px;
    border:1px solid #4a3e2c; background:rgba(255,255,255,.03);
    padding:8px 16px; border-radius:999px;
    transition:background .15s, border-color .15s;
}
.hero-toc a:hover{ background:#2c251d; border-color:var(--bronze); }

/* -------------------------------- 章节 ----------------------------------- */
section.sec{ padding:64px 0 8px; scroll-margin-top:72px; }
section.sec.alt{ background:var(--paper-2); }
.sec-head{ margin-bottom:30px; max-width:760px; }
.sec-no{
    display:flex; align-items:center; gap:14px; margin-bottom:10px;
}
.sec-no b{
    font-family:var(--serif); font-weight:900; font-size:15px;
    color:var(--bronze); letter-spacing:.14em;
}
.sec-no::after{ content:""; height:1px; width:64px; background:var(--bronze); opacity:.55; }
.sec-head h2{
    font-family:var(--serif); font-weight:900;
    font-size:clamp(24px, 3.4vw, 34px); color:var(--ink);
    letter-spacing:.02em;
}
.sec-intro{ margin-top:12px; color:var(--muted); font-size:15.5px; text-wrap:pretty; }

/* 正文排版 */
.prose{ max-width:760px; }
.prose h3{
    font-family:var(--serif); font-weight:600; font-size:19.5px;
    color:var(--ink); margin:34px 0 12px;
    padding-left:12px; border-left:3px solid var(--bronze);
}
.prose p{ margin:12px 0; text-wrap:pretty; }
.prose ul, .prose ol{ margin:12px 0 12px 1.4em; }
.prose li{ margin:7px 0; }
.prose strong{ color:var(--ink); }
.prose blockquote{
    margin:20px 0; padding:14px 18px;
    background:#eee4cf; border-left:3px solid var(--bronze);
    color:#5a4f3e; font-size:15px; border-radius:0 6px 6px 0;
}

/* 表格 */
.tbl-wrap{ margin:18px 0; overflow-x:auto; }
table.tbl{
    width:100%; border-collapse:collapse; background:var(--card);
    border:1px solid var(--line); font-size:14.5px; min-width:560px;
}
.tbl th{
    background:var(--ink); color:#efe6d3;
    font-family:var(--serif); font-weight:600; font-size:14px;
    padding:11px 14px; text-align:left; white-space:nowrap;
}
.tbl td{ padding:11px 14px; border-top:1px solid var(--line); vertical-align:top; }
.tbl tbody tr:nth-child(even){ background:#faf6ec; }

/* ----------------------------- 门派卡片 ---------------------------------- */
.menpai-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    margin-top:8px;
}
.mp-card{
    background:var(--card); border:1px solid var(--line);
    border-radius:8px; padding:26px 26px 22px;
    display:flex; flex-direction:column; gap:12px;
    box-shadow:0 1px 0 rgba(23,19,16,.04);
}
.mp-top{ display:flex; align-items:baseline; gap:12px; }
.mp-top h3{
    font-family:var(--serif); font-weight:900; font-size:22px; color:var(--ink);
}
.mp-role{
    font-size:12.5px; color:var(--bronze-d); letter-spacing:.06em;
    border:1px solid #e0cfa8; background:#f7efdc;
    padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.mp-card p{ font-size:15px; color:var(--text); }
.mp-fit{
    margin-top:auto; padding-top:12px; border-top:1px dashed var(--line);
    font-size:14px; color:var(--muted);
}
.mp-fit b{ color:var(--bronze-d); font-weight:600; }

/* ------------------------------- 副本表格 -------------------------------- */
.sub-h{
    font-family:var(--serif); font-weight:900; font-size:21px; color:var(--ink);
    margin:44px 0 6px; display:flex; align-items:center; gap:10px;
}
.sub-h::before{
    content:""; width:9px; height:9px; background:var(--bronze);
    transform:rotate(45deg); flex:none;
}

/* --------------------------------- FAQ ----------------------------------- */
.faq-list{ max-width:820px; display:flex; flex-direction:column; gap:12px; }
details.qa{
    background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:0; overflow:hidden;
}
details.qa summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; gap:14px;
    padding:16px 20px;
    font-weight:600; font-size:15.5px; color:var(--ink);
}
details.qa summary::-webkit-details-marker{ display:none; }
details.qa summary::before{
    content:"问"; flex:none;
    width:26px; height:26px; display:grid; place-items:center;
    background:#f0e5cc; color:var(--bronze-d);
    font-family:var(--serif); font-size:13px; font-weight:900;
    border-radius:4px;
}
details.qa summary::after{
    content:"+"; margin-left:auto; color:var(--bronze);
    font-size:20px; line-height:1; transition:transform .18s;
}
details.qa[open] summary::after{ transform:rotate(45deg); }
details.qa .qa-a{
    padding:0 20px 18px 60px; color:var(--text); font-size:15px;
}

/* -------------------------------- 页脚 ----------------------------------- */
.site-foot{
    margin-top:72px; background:var(--ink); color:#a99e88;
    font-size:14px;
}
.foot-in{
    display:grid; gap:30px; grid-template-columns:1.6fr 1fr 1.2fr;
    padding-top:46px; padding-bottom:34px;
}
.foot-col h2{
    font-family:var(--serif); font-weight:600; font-size:16px; color:#efe6d3;
    margin-bottom:12px;
}
.foot-col p{ margin:8px 0; line-height:1.8; }
.foot-col a{ display:block; color:#c9ba9c; padding:4px 0; }
.foot-col a:hover{ color:#f3e9d4; }
.top-link{ margin-top:10px; color:var(--bronze) !important; }
.copy{
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
    border-top:1px solid #3a3128; padding-top:16px; padding-bottom:20px;
    font-size:13px; color:#7d7460;
}

/* -------------------------------- 404 ------------------------------------ */
.err-page{ min-height:72vh; display:grid; place-items:center; text-align:center; padding:60px 24px; }
.err-page h1{ font-family:var(--serif); font-size:40px; color:var(--ink); }
.err-page p{ color:var(--muted); margin:14px 0 26px; }
.btn{
    display:inline-block; background:var(--ink); color:#efe6d3;
    padding:11px 26px; border-radius:4px; font-size:15px;
}
.btn:hover{ background:var(--bronze-d); color:#fff; }

/* -------------------------------- 响应式 --------------------------------- */
@media (max-width: 860px){
    .menpai-grid{ grid-template-columns:1fr; }
    .foot-in{ grid-template-columns:1fr; gap:26px; }
    .hero{ padding:56px 0 66px; }
    section.sec{ padding:52px 0 4px; }
    .prose h3{ margin-top:28px; }
}