/* Multiplayer page styles — minimal, leveraging base.css */
.page-hero { padding-block: var(--space-16) var(--space-10); position: relative; }
.page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(800px 400px at 85% 10%, rgba(255,184,77,0.08), transparent 60%); }
.hero__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: center; }
.hero__lead { color: var(--color-text-muted); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.hero__media { aspect-ratio: 16/9; }

.section-nav { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: color-mix(in oklab, var(--color-surface-1), black 5%); }
.section-nav__list { display: flex; gap: var(--space-4); overflow-x: auto; padding-block: var(--space-3); }
.section-nav__list a { white-space: nowrap; padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.section-nav__list a.is-active { border-color: var(--color-border); background: rgba(255,255,255,0.03); }

.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-combos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }

.matchmaking-layout, .pvp-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: start; }
.steps { counter-reset: step; padding-left: 1rem; }
.steps li { margin-bottom: var(--space-2); }

.table-responsive { overflow-x: auto; }
.events-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-field--full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--space-3); align-items: center; }

.feature-list { margin: 0; padding-left: 1rem; }
.feature-list li { margin: 6px 0; }

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .cards-grid, .grid-3, .grid-combos, .events-grid { grid-template-columns: 1fr 1fr; }
  .matchmaking-layout, .pvp-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cards-grid, .grid-3, .grid-combos, .grid-2, .events-grid { grid-template-columns: 1fr; }
  .section-nav__list { gap: var(--space-3); }
}