/* The guide under the game: how to play and the questions people ask, in the page's language.
   Written into the HTML by scripts/build-pages.mjs, so crawlers that never run JavaScript read it. */
.guide {
  padding: 40px var(--gutter) 56px;
  border-top: 5px solid var(--enamel);
  background: var(--tiles) 0 0 / 40px 40px;
}
.guide-inner { max-width: 980px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px); border-radius: 6px; background: rgb(251 249 243 / 0.95); }
.guide h2 { margin: 0 0 6px; font: italic 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--font-display); }
:lang(ja) .guide h2 { font: 700 1.4rem/1.3 var(--font-ja-display); }
.guide-lede { margin: 0 0 20px; color: var(--ink-soft); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.facts li { padding: 12px 14px; border-radius: 6px; background: var(--enamel); box-shadow: inset 0 0 0 3px var(--enamel), inset 0 0 0 4px rgb(255 255 255 / 0.55); color: #fff; }
.facts b { display: block; font: italic 700 1.9rem/1 var(--font-display); color: var(--amber); }
.facts span { font-size: 0.82rem; }
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 28px; }
.faq-item h3 { margin: 16px 0 4px; font-size: 1rem; }
.faq-item p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }