/* ═══════════════════════════════════════════════════════════════
   Game pages (/games/<slug>, /en/games/<slug>), built by seo/build.py.
   Loaded after home.css: same tokens, header, chips, FAQ, CTA and
   footer; this file only adds what a single game's page needs.
═══════════════════════════════════════════════════════════════ */
.gp .hdr { position: sticky; }

.gp-hero {
  padding-block: 28px 56px;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(165,110,255,.18), transparent 70%),
    var(--bg);
}
@media (min-width: 980px) { .gp-hero { padding-block: 40px 88px; } }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--text-3); }
.crumbs li + li::before { content: '/'; margin-inline-end: 6px; color: var(--text-3); opacity: .6; }
.crumbs a:hover { color: var(--gold-300); }
.crumbs [aria-current] { color: var(--text-2); }

.gp-hero-grid { display: grid; gap: 28px; align-items: center; margin-top: 28px; }
@media (min-width: 900px) { .gp-hero-grid { grid-template-columns: 1.3fr 1fr; gap: 56px; } }
.gp-title { font-size: clamp(34px, 7vw, 60px); line-height: 1.15; font-weight: 700; margin-top: 6px; }
html[lang="en"] .gp-title { letter-spacing: -0.025em; font-weight: 800; }
.gp-hero .lead { margin-top: 14px; max-width: 32em; }
.gp-art { width: 200px; height: 200px; padding: 22px; border-radius: var(--r-xl); justify-self: center; }
@media (min-width: 560px) { .gp-art { width: 280px; height: 280px; padding: 28px; } }
.gp-art img { filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
@media (max-width: 899px) { .gp-art { order: -1; } }

.gp-sec { padding-block: 64px; }
@media (min-width: 980px) { .gp-sec { padding-block: 88px; } }
#how { background: var(--bg-2); }
.gp-narrow { max-width: 880px; }

.gp-steps { display: grid; gap: 14px; margin-top: 28px; counter-reset: step; }
.gp-steps li {
  position: relative; padding: 18px 20px; padding-inline-start: 64px;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--border);
}
.gp-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 18px; inset-inline-start: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-family: var(--font-en);
  background: rgba(245, 200, 75, .14); color: var(--gold-300); border: 1px solid var(--border-gold);
}
.gp-steps h3 { font-size: 18px; font-weight: 700; }
.gp-steps p { margin-top: 4px; color: var(--text-2); font-size: 15.5px; }

.gp-cards { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 760px) { .gp-cards { grid-template-columns: 1fr 1fr; } }
.gp-card { padding: 22px; border-radius: var(--r); border: 1px solid var(--border-gold); background: rgba(245,200,75,.05); }
.gp-card h2 { font-size: 18px; font-weight: 700; color: var(--gold-300); }
.gp-card p, .gp-tips li { margin-top: 8px; color: var(--text-2); font-size: 15.5px; }
.gp-tips li { position: relative; padding-inline-start: 18px; }
.gp-tips li::before { content: '•'; position: absolute; inset-inline-start: 2px; color: var(--gold-400); }

.gp .faq .h2, .gp-more .h2 { margin-bottom: 24px; }
.gp .faq { padding-block: 64px; }

.gp-more { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.gp-others { display: grid; gap: 14px; }
@media (min-width: 760px) { .gp-others { grid-template-columns: 1fr 1fr; } }
.gp-other {
  display: flex; gap: 16px; align-items: center; height: 100%; padding: 16px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--border); transition: border-color .2s ease, transform .2s ease;
}
.gp-other:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.gp-other .game-art { flex-shrink: 0; width: 80px; height: 80px; border-radius: 18px; padding: 8px; }
.gp-other-text { display: grid; gap: 2px; }
.gp-other-text b { font-size: 18px; }
.gp-other-text span { color: var(--text-2); font-size: 14.5px; }
.gp-other-text em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--gold-300); margin-top: 4px; }

.foot-col a[aria-current] { color: var(--gold-300); }