/* Shared styles for /play/ guide pages (SEO/GEO content around the games). */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  line-height: 1.7; min-height: 100vh;
}
.glow-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glow-bg::before {
  content: ""; position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,252,.16), transparent 62%); filter: blur(20px);
}
.guide { max-width: 760px; margin: 0 auto; padding: 104px 20px 40px; }
.crumbs { font-size: .82rem; color: var(--text-faint); margin: 0 0 18px; }
.crumbs a { color: var(--text-faint); text-decoration: none; }
.crumbs a:hover { color: var(--text-dim); text-decoration: underline; }
.guide h1 {
  font-family: var(--font-head, inherit); font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.15; margin: 0 0 14px; color: var(--text);
}
.guide .lead { font-size: 1.12rem; color: var(--text-soft, var(--text)); margin: 0 0 22px; }
.guide h2 { font-family: var(--font-head, inherit); font-size: 1.5rem; margin: 34px 0 10px; color: var(--text); }
.guide h3 { font-size: 1.08rem; margin: 22px 0 6px; color: var(--text); }
.guide p { margin: 0 0 14px; color: var(--text-soft, var(--text-dim)); }
.guide ul, .guide ol { margin: 0 0 16px; padding-left: 22px; color: var(--text-soft, var(--text-dim)); }
.guide li { margin: 0 0 8px; }
.guide a { color: var(--accent, #7c5cfc); text-decoration: none; }
.guide a:hover { text-decoration: underline; }
.guide strong { color: var(--text); }
.tldr {
  background: rgba(124,92,252,.08); border: 1px solid var(--border, rgba(255,255,255,.09));
  border-radius: 14px; padding: 18px 20px; margin: 0 0 28px;
}
.tldr h2 { margin: 0 0 8px; font-size: 1.05rem; }
.tldr ul { margin: 0; padding-left: 20px; }
.tldr li { margin: 0 0 6px; }
.play-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  background: rgba(124,92,252,.1); border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 16px; padding: 20px 22px; margin: 30px 0;
}
.play-cta .cta-txt { flex: 1 1 260px; }
.play-cta h3 { margin: 0 0 4px; font-size: 1.1rem; }
.play-cta p { margin: 0; font-size: .92rem; }
.faq h3 { font-size: 1.02rem; margin: 20px 0 4px; }
.guide-more { border-top: 1px solid var(--border, rgba(255,255,255,.08)); margin-top: 40px; padding-top: 22px; }
.guide-more h2 { font-size: 1.15rem; margin-top: 0; }
.guide-more ul { list-style: none; padding: 0; }
.guide-more li { margin: 0 0 8px; }
footer { border-top: 1px solid var(--border); padding: 26px 20px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; font-size: .8rem; margin-top: 40px; }
footer .footer-copy { color: var(--text-faint); }
footer .footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
footer .footer-links a { color: var(--text-faint); text-decoration: none; }
footer .footer-links a:hover { color: var(--text-dim); }