/* Gameplay page styles — minimal, leveraging base.css */
:root {
  --noir-bg: #0f0f12;
  --noir-surface: #15161a;
  --noir-text: #e6e2da;
  --noir-muted: #a7a3a0;
  --ember: #e6a354;
  --shadow-blue: #2a3340;
}

body.gameplay-page {
  background: linear-gradient(180deg, var(--noir-bg) 0%, #0b0c0e 100%);
  color: var(--noir-text);
}

.container { max-width: 1200px; margin-inline: auto; padding: 0 1.25rem; }

.section { padding: 3.5rem 0; border-top: 1px solid rgba(230,226,218,0.06); }
.section-header { margin-bottom: 1.25rem; }
.section-header .section-lead { color: var(--noir-muted); max-width: 68ch; }

.noir-hero { position: relative; padding: 4.5rem 0 2rem; background: radial-gradient(1200px 400px at 15% 10%, rgba(255,228,196,0.08), transparent), linear-gradient(180deg, #0e0f12 0%, #121318 100%); border-bottom: 1px solid rgba(230,226,218,0.06); }
.noir-hero .hero-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; align-items: end; }
.noir-hero .eyebrow { letter-spacing: .12em; text-transform: uppercase; color: var(--ember); font-weight: 600; margin: 0 0 .5rem; }
.noir-hero h1 { line-height: 1.12; margin: 0 0 .5rem; }
.noir-hero .subtitle { color: var(--noir-muted); max-width: 60ch; }
.hero-ctas { display: flex; gap: .75rem; margin-top: 1rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1rem; border-radius: .5rem; text-decoration: none; border: 1px solid transparent; transition: transform .2s ease, background .2s ease, color .2s ease; }
.btn.primary { background: var(--ember); color: #0c0c0e; font-weight: 700; }
.btn.ghost { background: transparent; border-color: rgba(230,226,218,0.2); color: var(--noir-text); }
.btn:hover { transform: translateY(-1px); }

.quick-nav { background: rgba(255,255,255,0.02); border: 1px solid rgba(230,226,218,0.06); border-radius: .75rem; padding: .75rem; }
.quick-nav ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; margin: 0; padding: 0; }
.quick-nav a { display: block; padding: .5rem .6rem; border-radius: .5rem; text-decoration: none; color: var(--noir-muted); border: 1px solid transparent; }
.quick-nav a:hover, .quick-nav a.is-active { color: var(--noir-text); border-color: rgba(230,226,218,0.12); background: rgba(230,226,218,0.04); }

.content-grid.two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.content-grid.media { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.25rem; align-items: start; }

.figure { margin: 0; background: var(--noir-surface); border: 1px solid rgba(230,226,218,0.06); border-radius: .75rem; overflow: hidden; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption { padding: .75rem 1rem; color: var(--noir-muted); font-size: .95rem; }

.checklist, .bulleted, .numbered { margin: .5rem 0 0; }
.checklist li::marker { content: '▸ '; color: var(--ember); }
.bulleted { list-style: disc; padding-left: 1.2rem; }
.numbered { list-style: decimal; padding-left: 1.2rem; }

.cta-row { display: flex; gap: .5rem; flex-wrap: wrap; }

.back-to-top { margin-top: 1.75rem; text-align: right; }
.to-top { color: var(--noir-muted); text-decoration: none; border-bottom: 1px dashed rgba(230,226,218,0.25); }
.to-top:hover { color: var(--noir-text); border-bottom-color: var(--ember); }

@media (max-width: 960px) {
  .noir-hero .hero-inner { grid-template-columns: 1fr; }
  .content-grid.two-cols, .content-grid.media { grid-template-columns: 1fr; }
  .quick-nav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .section { padding: 2.5rem 0; }
  .quick-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}