/* ===== Game guides ===== */
.gd-hero { padding-bottom: 26px; }
.gd-hero .lead { max-width: 720px; }
.gd-crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1.4rem; }
.gd-crumbs a { color: var(--muted); border-bottom: 1px solid var(--border); }
.gd-crumbs a:hover { color: var(--text); }
.gd-body { padding-top: 10px; }
.gd-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 300px); gap: 56px; align-items: start; justify-content: space-between; }
.gd-article { font-size: 1.04rem; line-height: 1.75; color: var(--soft, #c9cdc6); }
.gd-article h2 { color: var(--text); font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.015em; margin: 2.4rem 0 .8rem; scroll-margin-top: 100px; }
.gd-article h2:first-child { margin-top: 0; }
.gd-article p { margin: 0 0 1rem; }
.gd-article ul, .gd-article ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.gd-article li { margin: 0 0 .55rem; padding-left: .2rem; }
.gd-article li::marker { color: var(--gold, #d7b779); }
.gd-article strong { color: var(--text); font-weight: 600; }
.gd-article a { color: var(--gold, #d7b779); border-bottom: 1px solid rgba(215,183,121,.35); }
.gd-article a:hover { border-color: var(--gold, #d7b779); }
.gd-faq { margin-top: 2.6rem; border-top: 1px solid var(--border); padding-top: .4rem; }
.gd-faq details { border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); padding: .2rem 0; }
.gd-faq summary { cursor: pointer; list-style: none; padding: .9rem 2rem .9rem 0; position: relative; color: var(--text); font-weight: 600; }
.gd-faq summary::-webkit-details-marker { display: none; }
.gd-faq summary::after { content: '+'; position: absolute; right: .2rem; top: .75rem; color: var(--gold, #d7b779); font-size: 1.3rem; font-weight: 400; transition: transform .25s; }
.gd-faq details[open] summary::after { transform: rotate(45deg); }
.gd-faq p { margin: 0 0 1rem; }
.gd-updated { margin-top: 2rem; font-size: .85rem; color: var(--muted); }
.gd-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.gd-card { border: 1px solid var(--border); border-radius: 18px; padding: 1.3rem; background: radial-gradient(120% 140% at 0% 0%, rgba(215,183,121,.09), var(--surface) 60%); }
.gd-play { display: grid; gap: .5rem; justify-items: start; }
.gd-play img { width: 56px; height: 56px; border-radius: 14px; }
.gd-play strong { font-size: 1.2rem; color: var(--text); }
.gd-play span { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.gd-play .btn { margin-top: .5rem; }
.gd-play .gd-links { font-size: .88rem; color: var(--muted); }
.gd-play .gd-links a { color: var(--text); }
.gd-toc p { margin: 0 0 .6rem; font-family: var(--font-display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold, #d7b779); }
.gd-toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .9rem; }
.gd-toc a { color: var(--muted); }
.gd-toc a:hover { color: var(--text); }
.gd-more { padding-top: 70px; }
.gd-more h2 { font-size: 1.4rem; margin: 0 0 1.2rem; }
/* hub */
.gd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gd-item { display: grid; grid-template-columns: 52px 1fr; gap: .4rem 1rem; align-items: start; padding: 1.2rem 1.25rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); transition: border-color .25s, transform .25s var(--ease); }
.gd-item:hover { border-color: rgba(215,183,121,.45); transform: translateY(-3px); color: var(--text); }
.gd-item img { width: 52px; height: 52px; border-radius: 13px; grid-row: span 3; }
.gd-item small { font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold, #d7b779); }
.gd-item strong { font-size: 1.05rem; line-height: 1.35; }
.gd-item span { color: var(--muted); font-size: .86rem; }
@media (max-width: 900px) {
  .gd-grid { grid-template-columns: 1fr; gap: 30px; }
  .gd-side { position: static; order: -1; }
  .gd-toc { display: none; }
  .gd-play { grid-template-columns: 56px 1fr; align-items: center; column-gap: 1rem; }
  .gd-play img { grid-row: span 2; }
  .gd-play .btn, .gd-play .gd-links { grid-column: 1 / -1; }
}
