/* Gameplay page styles – keep minimal and leverage base.css */
.hero { position: relative; }
.hero__wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-24); align-items: center; }
.hero__content p { color: var(--color-text-muted); }
.hero__cta { display: flex; gap: var(--space-16); margin-top: var(--space-16); }
.hero__figure img { aspect-ratio: 16 / 9; object-fit: cover; }

.toc { background: linear-gradient(180deg, rgba(212,175,55,0.06), transparent); border-block: 1px solid rgba(255,255,255,0.08); }
.toc__list { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); }
.toc__list a { padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
.toc__list a:hover { background: rgba(212,175,55,0.08); text-decoration: none; }

.setup ol { padding-left: 1.25rem; }
.faq-controls { display: flex; gap: var(--space-12); margin-bottom: var(--space-16); }
.faq .faq-item { margin-bottom: var(--space-16); }
.faq details > summary { list-style: none; cursor: pointer; }
.faq details > summary::-webkit-details-marker { display: none; }
.faq details > summary h3 { display: inline; }

.cta { gap: var(--space-16); }

/* Responsive */
@media (max-width: 960px) {
  .hero__wrap { grid-template-columns: 1fr; }
  .grid-cols-3 { grid-template-columns: 1fr; }
  .grid-cols-2 { grid-template-columns: 1fr; }
}