/* How to play / FAQ, below the game: for first-time visitors and for search engines.
   Set like the notice panel on a station wall — an ink rule on top, the masthead's fading
   screentone, then quiet text in columns. */
.guide {
  position: relative;
  isolation: isolate;
  padding: 26px var(--gutter) 44px;
  border-top: 6px solid var(--ink);
  background: var(--surface);
}

.guide::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  z-index: -1;
  background: var(--tone);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

.guide h2 {
  max-width: 72rem;
  margin: 0 auto 18px;
  font: 400 clamp(1.2rem, 1rem + 0.9vw, 1.55rem)/1.3 var(--font-display);
}

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 20px 32px;
  max-width: 72rem;
  margin: 0 auto;
}

.faq-item { padding-top: 10px; border-top: 1px solid var(--rule); }
.faq-item h3 { margin: 0 0 6px; font-size: 0.98rem; line-height: 1.45; }
.faq-item p { max-width: 40em; margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

.guide-more { max-width: 72rem; margin: 22px auto 0; font-weight: 700; }
.guide-more a { color: var(--ink); }