/* Gameplay page styles – focused, minimal, leveraging base tokens */
.hero-gameplay {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: center;
  color: var(--color-parchment);
  background:
    linear-gradient(180deg, rgba(26,29,46,0.6), rgba(26,29,46,0.85)),
    url('../images/hero-banner.webp') center/cover no-repeat;
  box-shadow: var(--shadow-xl);
}
.hero-gameplay .hero-inner { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.hero-gameplay .hero-copy { max-width: 780px; }
.hero-actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.section { padding: var(--space-16) 0; }

/* Table of contents */
.toc { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-background-elevated); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-base); }
.toc-inner { overflow-x: auto; }
.toc-list { display: flex; gap: var(--space-4); padding: var(--space-3) 0; white-space: nowrap; }
.toc-link { color: var(--color-parchment); opacity: 0.8; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.toc-link:hover { opacity: 1; background: rgba(232,116,59,0.08); }
.toc-link.is-active { color: var(--color-midnight-navy); background: var(--color-primary); box-shadow: var(--shadow-sm); }

/* Media frame tweaks */
.media-frame { background: var(--color-background-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.media-frame img { border-radius: var(--radius-md); }

@media (max-width: 768px) {
  .hero-gameplay { min-height: 46vh; }
}