/* 攻略頁共用樣式（/guide/*.html 共用）。
   只管「呈現」：內文、H1、導言、FAQ 文字與 JSON-LD 都在各頁 HTML 裡，這裡不碰。
   搭配 guide.js 漸進增強（目錄、FAQ 手風琴、閱讀進度、文末 CTA）；沒 JS 時全文照樣可讀。
   改版請把各頁引用的 ?v= 一起更新。 */

.guide{
  --g-line:#ffffff17; --g-card:#ffffff08; --g-card2:#ffffff0d;
  --g-ink2:#d7dcf0; --g-accent2:#ff9f5c;
  background:
    radial-gradient(90% 50% at 50% -6%, #3a3f74 0%, transparent 60%),
    radial-gradient(60% 40% at 100% 30%, #ffcf5c0a 0%, transparent 70%),
    var(--pf-bg);
  background-attachment:fixed;
}
.guide .pf-doc{max-width:760px; padding:max(14px,env(safe-area-inset-top)) 16px 72px; line-height:1.85}
.guide .pf-doc p,.guide .pf-doc li{font-size:16px; color:var(--g-ink2); line-height:1.85; letter-spacing:.2px}
.guide .pf-doc b,.guide .pf-doc strong{color:#fff}
.guide .pf-doc a{text-underline-offset:3px}
.guide .pf-doc .back{margin-bottom:12px; background:#ffffff10; border:1px solid var(--g-line)}
.guide .pf-doc .muted{font-size:13px}
.guide .pf-doc ul{padding-left:1.2em}
.guide .pf-doc li{margin:6px 0}
.guide .pf-doc li::marker{color:var(--pf-accent)}

/* ── 閱讀進度條 ── */
.g-progress{position:fixed; left:0; top:0; height:3px; width:100%; z-index:50; pointer-events:none;
  background:linear-gradient(90deg,var(--pf-accent),var(--g-accent2)); transform-origin:0 50%; transform:scaleX(0)}

/* ── Hero：封面大圖＋遊戲名＋立即玩 ── */
.g-hero{position:relative; margin:0 0 22px; border-radius:20px; overflow:hidden;
  background:#1d2238; border:1px solid var(--g-line);
  box-shadow:0 18px 40px #0007}
.g-hero-art{position:relative; aspect-ratio:16/10; background:
  radial-gradient(70% 90% at 30% 20%, #ffcf5c33, transparent 60%),
  radial-gradient(60% 80% at 80% 90%, #7a6cff33, transparent 60%), #252b48;
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.g-hero-art::before{content:attr(data-emoji); font-size:84px; filter:drop-shadow(0 8px 18px #0008)}
.g-hero-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.g-hero-art::after{content:""; position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(#1d223800,#1d2238); pointer-events:none}
.g-hero-body{position:relative; padding:0 18px 18px; margin-top:-44px}
.guide .g-hero h1{font-size:28px; line-height:1.25; margin:0 0 6px; letter-spacing:.5px;
  text-shadow:0 2px 12px #000a}
.guide .g-hero .muted{margin:0 0 14px; color:#b9c1de}
.g-play{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:linear-gradient(180deg,#ffd970,#ffb83d); color:#2c1f04 !important; text-decoration:none;
  font-weight:900; font-size:18px; letter-spacing:1px; padding:14px 18px; border-radius:14px;
  box-shadow:0 5px 0 #b97a12, 0 10px 24px #ffb83d40; transition:transform .1s, box-shadow .1s}
.g-play:hover{filter:brightness(1.05)}
.g-play:active{transform:translateY(3px); box-shadow:0 2px 0 #b97a12, 0 6px 14px #ffb83d30}
.g-play .ic{display:inline-flex; width:24px; height:24px; border-radius:50%; background:#2c1f04;
  color:#ffd970; align-items:center; justify-content:center; font-size:12px; padding-left:2px}
@media(min-width:720px){
  .g-hero{display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch; background:linear-gradient(160deg,#2f3760,#1d2238)}
  .g-hero-art{aspect-ratio:auto; min-height:260px}
  .g-hero-art::after{inset:0 0 0 auto; width:40%; height:auto; background:linear-gradient(90deg,#262d4c00,#262d4c)}
  .g-hero-body{margin:0; padding:26px 24px; display:flex; flex-direction:column; justify-content:center}
  .guide .g-hero h1{font-size:30px}
  .g-play{width:auto; align-self:flex-start; padding:13px 26px}
}

/* ── 答案先行導言（hero 後第一段）── */
.guide .g-hero + p{font-size:16.5px; color:#e6eaf8; background:linear-gradient(90deg,#ffcf5c14,transparent 80%);
  border-left:3px solid var(--pf-accent); padding:12px 16px; border-radius:0 12px 12px 0; margin:0 0 18px}

/* ── 目錄 ── */
.g-toc{margin:0 0 22px; background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; overflow:hidden}
.g-toc summary{cursor:pointer; list-style:none; padding:12px 16px; font-weight:800; font-size:15px;
  display:flex; align-items:center; gap:8px; user-select:none}
.g-toc summary::-webkit-details-marker{display:none}
.g-toc summary::after{content:"▾"; margin-left:auto; color:var(--pf-muted); transition:transform .2s}
.g-toc[open] summary::after{transform:rotate(180deg)}
.g-toc summary .n{font-size:12px; font-weight:600; color:var(--pf-muted)}
.g-toc ol{list-style:none; margin:0; padding:0 10px 12px; counter-reset:toc}
.g-toc li{margin:0 !important}
.g-toc a{display:flex; gap:10px; align-items:baseline; padding:7px 8px; border-radius:9px; text-decoration:none;
  color:var(--g-ink2) !important; font-size:14.5px; line-height:1.45}
.g-toc a::before{counter-increment:toc; content:counter(toc,decimal-leading-zero); font-size:11px; font-weight:800;
  color:var(--pf-accent); opacity:.75; min-width:18px; font-variant-numeric:tabular-nums}
.g-toc a:hover{background:#ffffff0c; color:#fff !important}
.g-toc a.on{background:#ffcf5c18; color:#fff !important}
@media(min-width:1240px){
  .g-toc{position:fixed; top:84px; left:calc(50% + 400px); width:210px; max-height:calc(100vh - 120px);
    overflow:auto; margin:0; background:#1c2230d9; backdrop-filter:blur(6px)}
  .g-toc summary{pointer-events:none}
  .g-toc summary::after{display:none}
}

/* ── 段落標題 ── */
.guide .pf-doc{counter-reset:sec}
.guide .pf-doc h2{position:relative; font-size:21px; line-height:1.35; margin:40px 0 14px; padding:0 0 10px 44px;
  border-bottom:1px solid var(--g-line); scroll-margin-top:18px}
.guide .pf-doc h2::before{counter-increment:sec; content:counter(sec);
  position:absolute; left:0; top:-1px; width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; color:#2c1f04;
  background:linear-gradient(180deg,#ffd970,#ffb83d); box-shadow:0 3px 0 #b97a12}
.guide .pf-doc h2::after{content:""; position:absolute; left:44px; bottom:-1px; width:56px; height:2px;
  background:linear-gradient(90deg,var(--pf-accent),transparent)}
.guide .pf-doc h2.g-faq-h::before{content:"?"; background:linear-gradient(180deg,#9fb4ff,#6f86f0); color:#101a3d; box-shadow:0 3px 0 #3f52b0}
.guide .pf-doc h3{font-size:17px; margin:24px 0 8px; color:#fff}
.guide .pf-doc h3::before{content:""; display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--pf-accent);
  margin-right:8px; vertical-align:middle; transform:rotate(45deg)}

/* ── 技巧卡片（JS 標記「技巧／心法／打法」段的清單）── */
.guide .pf-doc ul.g-tips{list-style:none; padding:0; display:grid; gap:10px; margin:12px 0 18px}
.guide .pf-doc ul.g-tips > li{position:relative; margin:0; padding:12px 14px 12px 44px; background:var(--g-card);
  border:1px solid var(--g-line); border-radius:14px; font-size:15.5px; line-height:1.75}
.guide .pf-doc ul.g-tips > li::before{content:""; position:absolute; left:14px; top:14px; width:19px; height:19px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcf5c' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.guide .pf-doc ul.g-tips > li > b:first-child{color:var(--pf-accent)}

/* ── 表格 ── */
.g-table{margin:12px 0 18px; border:1px solid var(--g-line); border-radius:12px; overflow-x:auto}
.guide .pf-doc table{border-collapse:separate; border-spacing:0; width:100%; margin:12px 0 18px; font-size:14.5px}
.guide .pf-doc .g-table table{margin:0}
.guide .pf-doc th,.guide .pf-doc td{border-bottom:1px solid var(--g-line); padding:9px 12px; text-align:left; vertical-align:top}
.guide .pf-doc th{background:#ffcf5c14; color:#fff; white-space:nowrap}
.guide .pf-doc tr:nth-child(even) td{background:#ffffff05}
.guide .pf-doc tr:last-child td{border-bottom:none}

/* ── FAQ 手風琴（JS 增強；DOM 文字原樣保留）── */
.guide .pf-doc p.g-faq{margin:0 0 10px; padding:0; background:var(--g-card); border:1px solid var(--g-line);
  border-radius:14px; overflow:hidden; transition:border-color .2s, background .2s}
.guide .pf-doc p.g-faq > b:first-child{display:block; position:relative; cursor:pointer; padding:14px 46px 14px 16px;
  font-size:16px; line-height:1.55; user-select:none; outline-offset:-3px}
.guide .pf-doc p.g-faq > b:first-child::after{content:"+"; position:absolute; right:14px; top:50%; width:24px; height:24px;
  margin-top:-12px; border-radius:50%; background:#ffffff12; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; color:var(--pf-accent); transition:transform .25s}
.guide .pf-doc p.g-faq > br{display:none}
.g-faq-a{display:block; padding:0 16px 14px; color:var(--g-ink2); border-top:1px dashed var(--g-line); padding-top:12px; margin:0 0 0}
.guide .pf-doc p.g-faq:not(.open) .g-faq-a{display:none}
.guide .pf-doc p.g-faq.open{background:var(--g-card2); border-color:#ffcf5c40}
.guide .pf-doc p.g-faq.open > b:first-child::after{transform:rotate(45deg)}

/* 原本的「開始玩」按鈕：升級成主色 */
.guide .pf-doc p > a.pf-btn:not(.tiny){background:linear-gradient(180deg,#ffd970,#ffb83d); color:#2c1f04;
  font-size:16px; padding:12px 22px; box-shadow:0 4px 0 #b97a12}

/* ── 文末 CTA＋相關攻略 ── */
.g-end{margin:40px 0 10px; padding:20px 18px; border-radius:20px; text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, #ffcf5c26, transparent 60%), #262d48; border:1px solid #ffcf5c33}
.g-end .ttl{font-size:20px; font-weight:900; color:#fff; margin:0 0 4px}
.g-end .sub{font-size:14px; color:var(--pf-muted); margin:0 0 14px}
.g-end .g-play{max-width:360px; margin:0 auto}
.g-end p{margin:0}
.g-rel{margin:30px 0 0}
.g-rel h4{margin:0 0 12px; font-size:15px; color:var(--pf-muted); letter-spacing:1px; font-weight:700}
.g-rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.g-rel a{display:block; text-decoration:none; color:#fff !important; background:var(--g-card); border:1px solid var(--g-line);
  border-radius:14px; overflow:hidden; transition:transform .15s, border-color .15s}
.g-rel a:hover{transform:translateY(-2px); border-color:#ffcf5c55}
.g-rel .art{aspect-ratio:16/10; background:#2a3150; display:flex; align-items:center; justify-content:center; position:relative; font-size:30px}
.g-rel .art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.g-rel .nm{padding:8px 10px; font-size:13.5px; font-weight:800; line-height:1.35}
.g-rel .nm small{display:block; font-weight:500; color:var(--pf-muted); font-size:11.5px}
@media(max-width:480px){ .g-rel-grid{grid-template-columns:1fr 1fr} .g-rel-grid a:nth-child(3){display:none} }

/* ── 攻略總覽（index）卡片網格 ── */
.guide-index .pf-doc{max-width:1080px}
.guide-index .pf-doc > h1{font-size:30px; margin:6px 0 4px}
.guide-index .pf-doc > h1 + .muted{font-size:14px; margin:0 0 10px}
.guide-index .pf-doc > h1 + .muted + p{max-width:760px; font-size:16px; color:#e6eaf8; background:linear-gradient(90deg,#ffcf5c14,transparent 80%);
  border-left:3px solid var(--pf-accent); padding:12px 16px; border-radius:0 12px 12px 0}
.guide-list{list-style:none; padding:0 !important; margin:20px 0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.guide-list li{margin:0 !important; background:#262d45; border:1px solid var(--g-line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s, border-color .15s, box-shadow .15s}
.guide-list li:hover{transform:translateY(-3px); border-color:#ffcf5c55; box-shadow:0 14px 30px #0006}
.guide-list .gl-art{display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; position:relative; overflow:hidden;
  background:radial-gradient(70% 90% at 30% 20%, #ffcf5c26, transparent 60%), #2a3150; font-size:44px; text-decoration:none}
.guide-list .gl-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s}
.guide-list li:hover .gl-art img{transform:scale(1.04)}
.guide-list .t{font-size:18px; font-weight:900; margin:12px 16px 2px}
.guide-list .t a{text-decoration:none; color:#fff}
.guide-list p{margin:4px 16px 10px !important; font-size:14px !important; line-height:1.7 !important; color:#c7cee6 !important; flex:1}
.guide-list .links{font-size:13.5px; margin:0 16px 14px; padding-top:10px; border-top:1px solid var(--g-line); font-weight:700}
@media(max-width:420px){ .guide-list{grid-template-columns:1fr} .guide-list .gl-art{aspect-ratio:2/1} }

/* ── 個別攻略的示意圖（原各頁內嵌樣式收斂至此）── */
.grid4{display:inline-grid; grid-template-columns:repeat(4,34px); gap:3px; margin:6px 12px 6px 0; vertical-align:top}
.grid4 span{width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:#0f2036; border:1px solid #2a4a74; color:#eaf2ff}
.grid4 .a{background:#f4c95d; color:#2a1c05} .grid4 .b{background:#ffab4a; color:#2a1405} .grid4 .c{background:#9bd84a; color:#1a2a05} .grid4 .d{background:#3fa3a0; color:#04231f}
.pat{display:inline-grid; gap:2px; margin:6px 10px 6px 0; vertical-align:top; font-family:ui-monospace,Menlo,monospace}
.pat span{width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; background:#0f2036; border:1px solid #2a4a74}
.pat .h{background:#2a4a74} .pat .m{background:#5a2233} .pat .s{background:#1f4a32}
.pat-cap{font-size:13px; color:var(--pf-muted)}

@media(prefers-reduced-motion:reduce){
  .guide *{transition:none !important}
}

/* 遊客提示（guide.js 未登入時插在 .g-play 後） */
.guide .pf-doc p.g-guest{margin:10px 0 0; font-size:13px; line-height:1.5; color:#ffd88a; text-align:center}
.guide .pf-doc p.g-guest b{color:#ffb02e; font-weight:700}
.guide .pf-doc p.g-guest.idx{display:inline-block; text-align:left; margin:2px 0 6px; padding:6px 12px; border-radius:999px; background:rgba(255,176,46,.12); border:1px solid rgba(255,176,46,.35)}

/* 攻略頁實機截圖（缺圖時 img onerror 移除整個 figure） */
.guide .g-shot{margin:18px auto 22px; max-width:390px; text-align:center}
.guide .g-shot.wide{max-width:100%}
.guide .g-shot img{display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--g-line); box-shadow:0 10px 26px #0008; background:#0f1424}
.guide .g-shot figcaption{margin-top:8px; font-size:13px; line-height:1.6; color:var(--pf-muted); text-align:left}
.guide .g-shot + .g-shot{margin-top:6px}
.pat .x{background:none; border-color:transparent}