/* Gameplay page styles — keep minimal and leverage base.css */
.page-hero { position: relative; padding: var(--space-16) 0 var(--space-10); background: linear-gradient(180deg, rgba(121,197,150,0.06), transparent 35%); }
.page-hero__inner { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: 1fr; }
.page-hero__copy h1 { margin-bottom: var(--space-3); }
.page-hero__copy p { color: var(--color-text-muted); max-width: 65ch; }
.page-hero__media img { box-shadow: var(--shadow-3); }
@media (min-width: 880px) { .page-hero__inner { grid-template-columns: 1.1fr 1fr; } }

.search { margin-top: var(--space-6); }
.search__hint { color: var(--color-text-muted); margin-top: var(--space-3); }
.search__status { margin-top: var(--space-4); color: var(--color-text-muted); font-style: italic; }

.section-nav { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--color-bg-elevated) 85%, black); border-block: 1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow-1); }
.section-nav__list { display: flex; gap: var(--space-4); overflow-x: auto; padding: var(--space-3) 0; }
.section-nav__list a { white-space: nowrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); border: 1px solid transparent; }
.section-nav__list a[aria-current="true"] { background: rgba(121,197,150,0.08); border-color: color-mix(in oklab, var(--color-primary) 35%, transparent); }

/* Cards inside grid blocks */
.mini-card { padding: var(--space-4); border: 1px dashed rgba(255,255,255,0.06); border-radius: var(--radius-m); background: color-mix(in oklab, var(--color-bg-elevated) 88%, black); }
.muted { color: var(--color-text-muted); }

.media-row { margin-top: var(--space-4); }
.media-row img { width: 100%; height: auto; }

.updates { display: grid; gap: var(--space-3); }

/* Better spacing for details/summary */
details { padding: var(--space-3) 0; border-top: 1px solid rgba(255,255,255,0.06); }
details:first-of-type { border-top: 0; }
details > summary { cursor: pointer; font-weight: 600; }
details > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }