/* Gameplay page styles – minimal, building on base.css */
:root {
  --gp-accent-1: #ff7a59;
  --gp-accent-2: #ffce54;
  --gp-accent-3: #6bd5e1;
  --gp-dark: #1e1f23;
}

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

.gp-hero { background: linear-gradient(135deg, var(--gp-accent-1), var(--gp-accent-2) 60%, var(--gp-accent-3)); color: #0f0f12; padding: 3.5rem 0 2.5rem; }
.gp-hero h1 { font-size: clamp(1.8rem, 2.5vw, 2.4rem); margin: 0 0 .5rem; }
.gp-hero-lead { font-size: 1.05rem; max-width: 68ch; margin: 0.25rem 0 1rem; }

.gp-subnav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .75rem 0 0; }
.gp-subnav a { display: inline-block; padding: .5rem .75rem; border-radius: 999px; background: rgba(255,255,255,.85); color: #121212; text-decoration: none; font-weight: 600; border: 1px solid rgba(0,0,0,.06); }
.gp-subnav a:hover, .gp-subnav a:focus { background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }

.gp-section { padding: 2.25rem 0; background: #fff; }
.gp-section:nth-of-type(even) { background: #f8fafc; }

.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)); }
@media (max-width: 960px) { .gp-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .gp-grid-2, .gp-grid-3 { grid-template-columns: 1fr; } }

.gp-list { padding-left: 1.1rem; }
.gp-list li { margin: .4rem 0; }

.gp-note { margin-top: .75rem; font-size: .95rem; color: #333; background: #fff7e6; border-left: 4px solid var(--gp-accent-1); padding: .6rem .75rem; border-radius: .25rem; }

.gp-figure { margin: 1rem 0; }
.gp-figure img { display: block; width: 100%; height: auto; border-radius: .5rem; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.gp-figure figcaption { font-size: .9rem; color: #475569; margin-top: .4rem; }

.gp-cta-line { margin-top: .75rem; font-weight: 600; }
.gp-link { color: #0f62fe; text-decoration: underline; text-underline-offset: 2px; }
.gp-link:hover { color: #0043ce; }

.gp-tips h3 { margin-top: 0; }

.gp-videos { align-items: stretch; }
.gp-video { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(180deg, #0b0f1a, #1b2233); border-radius: .5rem; overflow: hidden; display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.08); border: 1px solid rgba(255,255,255,.06); }
.gp-video-btn { appearance: none; border: none; background: #ffffff; color: #0b0f1a; padding: .75rem 1rem; border-radius: 999px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.15); transition: transform .1s ease, box-shadow .2s ease; }
.gp-video-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.gp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.gp-quote { border-left: 4px solid var(--gp-accent-3); padding: .5rem .75rem; background: #f1fafe; border-radius: .25rem; margin: .75rem 0; }
.gp-testimonials { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.gp-testimonials figure { background: #ffffff; border: 1px solid #eef2f7; border-radius: .5rem; padding: .75rem; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.gp-testimonials blockquote { margin: 0; }
@media (max-width: 960px) { .gp-testimonials { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .gp-testimonials { grid-template-columns: 1fr; } }

.gp-backtop { margin-top: 1rem; }