/* Gameplay page styles - scoped with gp- prefix to avoid conflicts and keep base.css as the foundation */
:root {
  --gp-bg: #0c0f12;
  --gp-panel: #12161b;
  --gp-elev: #171c22;
  --gp-accent: #7a95ff;
  --gp-accent-2: #b77bff;
  --gp-text: #e5e9f0;
  --gp-muted: #a6b0bf;
  --gp-border: #232a33;
  --gp-success: #3ddc97;
}

.gp-main { background: linear-gradient(180deg, var(--gp-bg) 0%, #0f1318 100%); color: var(--gp-text); }
.gp-container { width: min(1120px, 94%); margin-inline: auto; }

/* Hero */
.gp-hero { position: relative; padding-top: 2rem; background: radial-gradient(1200px 400px at 50% 0%, rgba(92, 120, 255, 0.12), transparent), linear-gradient(180deg, rgba(15,19,24,0.6) 0%, rgba(15,19,24,0.9) 100%); overflow: hidden; }
.gp-breadcrumbs { display: flex; gap: .5rem; align-items: center; color: var(--gp-muted); font-size: .9rem; margin-bottom: .75rem; }
.gp-breadcrumbs a { color: var(--gp-muted); text-decoration: none; }
.gp-breadcrumbs a:hover { color: var(--gp-text); text-decoration: underline; }
.gp-hero-title { font-size: clamp(2rem, 4vw, 3rem); margin: .25rem 0 .5rem; letter-spacing: .5px; }
.gp-hero-subtitle { color: var(--gp-muted); max-width: 75ch; }
.gp-hero-cta { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.gp-hero-media { margin: 1.25rem 0 0; border-top: 1px solid var(--gp-border); background: linear-gradient(180deg, rgba(122,149,255,.08), rgba(122,149,255,0) 30%); }
.gp-hero-media img { width: 100%; height: auto; display: block; object-fit: cover; }

/* Buttons */
.gp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border-radius: .6rem; border: 1px solid var(--gp-border); color: var(--gp-text); text-decoration: none; background: var(--gp-panel); transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.gp-btn:hover { transform: translateY(-1px); border-color: var(--gp-accent); }
.gp-btn-primary { background: linear-gradient(180deg, var(--gp-accent), var(--gp-accent-2)); border-color: transparent; color: #0c0f12; font-weight: 600; }
.gp-btn-primary:hover { filter: brightness(1.05); }
.gp-btn-ghost { background: transparent; }

/* TOC */
.gp-toc { position: sticky; top: 0; z-index: 5; background: rgba(12,15,18,.75); backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid var(--gp-border); }
.gp-toc-list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; padding: .75rem 0; list-style: none; margin: 0; }
.gp-toc-link { display: block; text-align: center; padding: .5rem .5rem; border-radius: .5rem; border: 1px solid var(--gp-border); color: var(--gp-muted); text-decoration: none; font-size: .9rem; background: var(--gp-elev); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-toc-link:hover, .gp-toc-link.is-active { color: var(--gp-text); border-color: var(--gp-accent); box-shadow: inset 0 0 0 1px rgba(122,149,255,.25); }

/* Sections */
.gp-section { padding: 2.5rem 0; border-top: 1px solid var(--gp-border); }
.gp-section-title { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 1rem; }
.gp-note { color: var(--gp-muted); border-left: 3px solid var(--gp-accent); padding: .75rem 1rem; background: rgba(122,149,255,.06); border-radius: .25rem; margin-top: 1rem; }

/* Layout helpers */
.gp-grid { display: grid; gap: 1rem; }
.gp-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.gp-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gp-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 960px) {
  .gp-toc-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gp-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gp-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .gp-grid-2, .gp-grid-3, .gp-grid-4 { grid-template-columns: 1fr; }
  .gp-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cards */
.gp-card { background: linear-gradient(180deg, var(--gp-panel), var(--gp-elev)); border: 1px solid var(--gp-border); border-radius: .8rem; padding: 1rem; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.25); }
.gp-card h3 { margin-top: 0; }
.gp-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.gp-list li { margin: .25rem 0; }

/* Flex media */
.gp-flex { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; align-items: start; }
.gp-flex-col { min-width: 0; }
.gp-media img { width: 100%; height: auto; border-radius: .6rem; border: 1px solid var(--gp-border); }
.gp-media-wide img { width: 100%; height: auto; border-radius: .6rem; border: 1px solid var(--gp-border); }

@media (max-width: 960px) {
  .gp-flex { grid-template-columns: 1fr; }
}

/* Biome cards */
.gp-bio-card { background: var(--gp-elev); border: 1px solid var(--gp-border); border-radius: .8rem; padding: 1rem; }

/* Accordion */
.gp-accordion { display: grid; gap: .5rem; }
.gp-acc-item { background: var(--gp-panel); border: 1px solid var(--gp-border); border-radius: .6rem; overflow: hidden; }
.gp-acc-summary { cursor: pointer; list-style: none; padding: .9rem 1rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.gp-acc-summary::-webkit-details-marker { display: none; }
.gp-acc-item[open] .gp-acc-summary { background: rgba(122,149,255,.08); border-bottom: 1px solid var(--gp-border); }
.gp-acc-panel { padding: .75rem 1rem 1rem; }

/* Builds and CTA */
.gp-builds { display: grid; gap: 1rem; margin-top: .5rem; }
.gp-build { background: var(--gp-panel); border: 1px solid var(--gp-border); border-radius: .8rem; padding: 1rem; }
.gp-cta-final { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }

/* Links */
.gp-link { color: var(--gp-accent); text-decoration: none; }
.gp-link:hover { text-decoration: underline; }