/* 摩登原石人攻略站：品牌石刻風（docs/IMAGE_DESIGN_GUIDE.md 色票） */
:root{
  --basalt:#1d231e;--basalt-2:#283428;--seam:#121612;--slate:#555752;--slate-l:#827f7b;
  --rune:#7cb6d9;--rune-d:#4f86a6;--moss:#6d5f3a;--leaf:#465a2d;--lava:#b8532a;
  --paper:#e9e5db;--paper-2:#f3f0e8;--ink:#22241f;--muted:#5d5f57;--line:#cdc6b6;--link:#2d6c8f;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#1a1d19;--paper-2:#222620;--ink:#e6e2d8;--muted:#a3a195;--line:#3a3f37;--link:#8cc3e3;--moss:#a08d5a;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;color:var(--ink);font:17px/1.8 var(--sans);background:var(--paper)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url(/img/stone.png);opacity:.07;pointer-events:none}
a{color:var(--link);text-underline-offset:3px}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:900;letter-spacing:.02em;line-height:1.35}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 頂欄 */
.bar{position:sticky;top:0;z-index:10;background:var(--basalt) url(/img/stone.png);background-blend-mode:multiply;
  border-bottom:3px solid var(--seam);box-shadow:0 2px 0 rgba(124,182,217,.18)}
.bar-in{max-width:1180px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:20px}
.brand img{display:block;width:150px}
.nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav a{color:#d6d2c6;text-decoration:none;font-family:var(--serif);font-weight:700;font-size:16px;padding:6px 12px;white-space:nowrap;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--rune);border-bottom-color:var(--rune-d)}

/* 石碑銘牌按鈕 */
.slab{--cut:7px;position:relative;display:inline-flex;align-items:center;gap:10px;padding:9px 22px;text-decoration:none;
  font-family:var(--serif);font-weight:900;font-size:16px;letter-spacing:.08em;color:var(--rune)!important;
  text-shadow:0 0 8px rgba(124,182,217,.55);background:linear-gradient(#4a4d47,#33362f 55%,#2a2d27);
  border:0;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.45)}
.slab::before,.slab::after{content:"";width:9px;height:10px;background:var(--rune-d);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 0 6px var(--rune)}
.slab:hover{filter:brightness(1.15)}
.slab-sm{padding:6px 14px;font-size:15px;white-space:nowrap}
.slab-lg{padding:13px 30px;font-size:19px}
.slab-ghost{background:rgba(20,24,20,.55)}
.textlink{font-weight:700;text-decoration:none}

/* 標題石帶 */
.band{background:var(--basalt-2) url(/img/stone.png);background-blend-mode:multiply;color:#ece8de;border-bottom:3px solid var(--seam)}
.band-in{max-width:1180px;margin:0 auto;padding:22px 16px 30px}
.band h1{font-size:40px;margin:6px 0 4px;color:#f1ede3;text-shadow:0 2px 0 var(--seam)}
.band-sub{margin:4px 0 0;max-width:46em;color:#c9c5b9;font-size:18px}
.kicker{margin:10px 0 0;color:var(--rune);font-size:14px;letter-spacing:.15em;font-weight:700}
.crumbs{font-size:13px;color:#a9a597}
.crumbs a{color:#bdb9ab;text-decoration:none}
.crumbs span{margin:0 8px;opacity:.6}
.crumbs b{font-weight:400;color:#d8d4c8}

/* 版心 */
.page{max-width:1180px;margin:0 auto;padding:28px 16px 56px}
.page.narrow{max-width:820px}
.with-side{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:44px;align-items:start}
.doc{max-width:760px}
.stamp{margin:0 0 6px;font-size:13px;color:var(--muted)}
.doc h2{font-size:24px;margin:38px 0 12px;display:flex;align-items:center;gap:12px}
.doc h2::before{content:"";flex:none;width:12px;height:14px;background:var(--rune-d);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.doc h2.part{font-size:28px;margin-top:52px;padding-top:22px;border-top:3px double var(--line)}
.doc h2.part::before{display:none}
.doc h3{font-size:19px;margin:26px 0 8px;color:var(--moss)}
.sublead{color:var(--muted);font-size:18px;margin-top:-4px}
.doc p{margin:10px 0}
.doc ul{padding-left:1.2em}
.note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:28px!important}
hr{border:0;border-top:3px double var(--line);margin:40px 0}
code{font-size:.92em;background:var(--paper-2);border:1px solid var(--line);padding:0 5px}

.xy{display:inline-block;font:600 14px/1.5 ui-monospace,Consolas,monospace;padding:0 6px;margin:0 2px;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink);white-space:nowrap}
.arw{color:var(--rune-d);font-weight:700;margin:0 3px}

/* 步驟時間軸 */
.steps{margin:16px 0;border-left:2px solid var(--line);margin-left:20px}
.step{display:grid;grid-template-columns:auto 1fr;gap:14px;margin:0 0 14px -21px;align-items:start}
.step-k{min-width:40px;padding:4px 8px;text-align:center;font-family:var(--serif);font-weight:900;font-size:14px;color:var(--rune);
  background:linear-gradient(#4a4d47,#2c2f29);clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);white-space:nowrap}
.step-b{padding-top:3px}

/* 提醒、機率 */
.tips{list-style:none;padding:14px 18px!important;margin:14px 0;background:var(--paper-2);border-left:4px solid var(--moss)}
.tips li{position:relative;padding-left:16px;margin:4px 0}
.tips li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:8px;background:var(--moss);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tiers{margin:12px 0;display:grid;gap:6px}
.tier{display:inline-block;min-width:5.2em;margin-right:12px;padding:0 8px;font-size:13px;font-weight:700;text-align:center;color:#fff;line-height:1.9}
.t-hi{background:var(--leaf)}.t-mid{background:var(--rune-d)}.t-lo{background:var(--slate)}.t-rare{background:var(--lava)}
.tier.blank{background:none}

/* 配圖 */
.art{background:#191b20;border:3px solid var(--seam);padding:10px;margin:8px 0 18px;display:grid;gap:10px;justify-items:center}
.art img{display:block}

/* 側欄 */
.side{position:sticky;top:92px;display:grid;gap:18px}
.toc{border-top:3px solid var(--basalt-2);padding-top:10px}
.toc p{margin:0 0 6px;font-family:var(--serif);font-weight:900}
.toc ol{margin:0;padding-left:1.3em;font-size:15px}
.toc a{text-decoration:none;color:var(--ink)}
.toc a:hover{color:var(--link)}
.side-cta{background:var(--basalt) url(/img/stone.png);background-blend-mode:multiply;color:#ddd9cd;padding:16px;display:grid;gap:10px;justify-items:start}
.side-cta p{margin:0;font-family:var(--serif);font-weight:700}
.side-cta .textlink{color:var(--rune)}
.gate{margin:44px 0 0;padding:20px 22px;border:2px solid var(--basalt-2);background:var(--paper-2)}
.gate h2{margin-top:0!important}

/* 目錄表 */
.grp{font-size:24px;margin:36px 0 4px}
.grp:first-child{margin-top:0}
.grp-sub{margin:0 0 10px;color:var(--muted)}
.tbl{overflow-x:auto}
.idx{width:100%;border-collapse:collapse;font-size:15px}
.idx th{text-align:left;font-family:var(--serif);font-weight:700;color:var(--muted);border-bottom:2px solid var(--basalt-2);padding:8px 10px;white-space:nowrap}
.idx td{border-bottom:1px solid var(--line);padding:10px;vertical-align:top}
.idx tr:hover td{background:rgba(124,182,217,.08)}
.idx .name a{font-weight:700;font-size:17px;text-decoration:none}
.idx .name small{display:block;color:var(--muted);font-size:13px;line-height:1.6}
.facts{width:100%;border-collapse:collapse}
.facts th,.facts td{padding:9px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.facts th{width:7em;color:var(--muted);font-weight:700;white-space:nowrap}

/* 常見問題 */
.qa{padding:16px 0;border-bottom:1px solid var(--line)}
.qa h2{font-size:20px;margin:0 0 6px}
.qa p{margin:0}

/* 下載 */
.dl{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:8px 0 4px}
.dl p{margin:0;color:var(--muted)}

/* 首頁 */
.hero{background:#5fb6e8}
.hero-box{position:relative;max-width:1500px;margin:0 auto}
.hero img{display:block;width:100%}
.hero-in{position:absolute;left:0;right:0;top:31%;padding:0 16px;text-align:center}
.hero-line{margin:0 auto 16px;max-width:34em;color:#fff;font-family:var(--serif);font-weight:900;font-size:22px;
  text-shadow:0 1px 0 #1d4f6e,0 2px 10px rgba(10,40,60,.75)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-meta{margin:12px 0 0;color:#eaf6ff;text-shadow:0 1px 4px rgba(10,40,60,.8);font-size:14px;letter-spacing:.1em}
.strip{background:var(--basalt) url(/img/stone.png);background-blend-mode:multiply;border-top:3px solid var(--seam);border-bottom:3px solid var(--seam)}
.strip-in{max-width:1180px;margin:0 auto;padding:18px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-weight:900;font-size:44px;line-height:1.1;color:var(--rune);text-shadow:0 0 14px rgba(124,182,217,.4)}
.stat b small{font-size:20px;margin-left:2px;color:#cfd9de}
.stat span{color:#c3bfb3;font-size:14px;letter-spacing:.1em}
.home-split{display:grid;grid-template-columns:1.25fr 1fr;gap:44px}
.home-split h2,.feats>h2{font-size:26px;margin:0 0 10px;padding-bottom:8px;border-bottom:3px solid var(--basalt-2)}
.news ul,.picks ul{list-style:none;margin:0;padding:0}
.news li{display:grid;grid-template-columns:3.4em 1fr auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.news time{font:600 14px ui-monospace,Consolas,monospace;color:var(--muted)}
.news a{text-decoration:none;font-weight:700}
.news em{font-style:normal;font-size:13px;color:var(--muted)}
.picks li{padding:9px 0;border-bottom:1px solid var(--line)}
.picks a{font-weight:700;text-decoration:none}
.picks small{display:block;color:var(--muted);font-size:13px}
.picks .textlink{display:inline-block;margin-top:12px}
.feats{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 44px}
.feats>h2{grid-column:1/-1}
.feat h3{font-size:20px;margin:18px 0 4px}
.feat p{margin:0;color:var(--muted)}
.page.narrow .feats,.page.narrow .feat{display:block}
.duel{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;max-width:none;padding:24px max(16px,calc((100% - 1180px)/2))}
.duel h2{font-size:28px;margin:0 0 6px}
.duel p{color:var(--muted)}

/* 頁尾 */
.foot{background:var(--basalt) url(/img/stone.png);background-blend-mode:multiply;color:#a8a598;border-top:3px solid var(--seam)}
.foot-in{max-width:1180px;margin:0 auto;padding:28px 16px 36px;font-size:14px}
.foot-in img{opacity:.85}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{color:#cfcbbf;text-decoration:none}
.foot a:hover{color:var(--rune)}

@media (max-width:900px){
  .with-side{grid-template-columns:1fr;gap:20px}
  .side{position:static}
  .toc{display:none}
  .home-split,.feats,.duel{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .bar-in{flex-wrap:wrap;gap:6px 12px;padding:8px 12px}
  .brand img{width:120px}
  .nav{order:3;flex-basis:100%;margin:0 -12px;padding:0 6px}
  .nav a{font-size:15px;padding:4px 10px}
  .bar-in .slab-sm{margin-left:auto}
  .band h1{font-size:30px}
  .band-sub{font-size:16px}
  .hero img{max-height:none}
  .hero-in{position:static;background:var(--basalt);padding:18px 16px 22px}
  .hero-line{font-size:18px}
  .slab-lg{padding:11px 22px;font-size:17px}
  .strip-in{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .stat b{font-size:36px}
  .idx thead{display:none}
  .idx tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .idx td{display:block;border:0;padding:2px 0}
  .idx td:not(.name){font-size:14px;color:var(--muted)}
}

/* 相關攻略 */
.related{margin-top:48px;padding-top:18px;border-top:3px double var(--line)}
.related h2::before{display:none}
.related ul{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 28px}
.related li{padding:8px 0;border-bottom:1px solid var(--line)}
.related a{font-weight:700;text-decoration:none}
.related small{display:block;color:var(--muted);font-size:13px;line-height:1.6}
@media (max-width:640px){.related ul{grid-template-columns:1fr}}

/* 攻略頁的常見問題 */
.page-qa{display:grid;gap:4px}
.qa-item{padding:12px 0;border-bottom:1px solid var(--line)}
.qa-item h3{margin:0 0 4px;color:var(--ink);font-size:18px}
.qa-item h3::before{content:"問";display:inline-block;margin-right:10px;padding:0 7px;font-size:13px;color:var(--rune);background:var(--basalt-2);vertical-align:2px}
.qa-item p{margin:0;color:var(--ink)}