/* Dungeons page styles — built atop base.css */
.page-hero {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 60%),
              radial-gradient(1200px 400px at 20% -10%, color-mix(in oklab, var(--color-warning) 20%, transparent), transparent 70%);
  padding-block: clamp(var(--space-8), 6vw, var(--space-16));
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}
.hero-copy .hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-media { max-width: 640px; margin-left: auto; }

/* Sections */
.section { padding-block: clamp(var(--space-8), 6vw, var(--space-16)); }
.section__header p { color: var(--gray-700); }

/* TOC */
.toc { margin-top: var(--space-6); }
.toc__title { font-size: var(--font-size-md); margin-bottom: var(--space-3); }
.toc__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-2); padding-left: 0; list-style: none; }
.toc__list a { display: block; padding: var(--space-2) var(--space-3); border: 1px dashed var(--gray-300); border-radius: var(--radius-1); background: var(--color-surface); }
.toc__list a:hover { background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface)); }

/* Bosses & grids */
.bosses .card h3 { margin-top: 0; }

/* Map secret tips */
.secret-tips { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-warning); background: color-mix(in oklab, var(--color-warning) 18%, white); border-radius: var(--radius-2); }

/* Leaderboard */
.leaderboard { display: grid; gap: var(--space-2); padding-left: 0; list-style: none; }
.leaderboard__row {
  display: grid; grid-template-columns: 3rem 1fr 8rem 8rem; align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--gray-300); border-radius: var(--radius-2); background: var(--color-surface);
}
.leaderboard__row .place { font-family: var(--font-display); font-weight: 700; }
.leaderboard__row .score { justify-self: end; font-variant-numeric: tabular-nums; }
.leaderboard__row .mode { justify-self: end; color: var(--gray-600); }

/* CTA */
.cta { text-align: left; }
.cta .btn { margin-right: var(--space-2); }

/* Responsive */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { max-width: 100%; margin: 0; }
  .map-wrap { grid-template-columns: 1fr !important; }
  .leaderboard__row { grid-template-columns: 2.5rem 1fr 6.5rem 6.5rem; }
}