/* ============================================================
   ГипноФилин - страница одной игры/приложения
   Требует tokens.css (цвета/радиусы) + Manrope с основного сайта.
   Заголовки - Space Grotesk, как в разделе "Статьи" (articles.css) -
   общая типографика контентных страниц, отдельная от Playfair Display
   в about.html. См. Материалы/дизайн-система-игры/README.md.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --game-disp:'Space Grotesk',sans-serif;
}

.game-page{max-width:900px;margin:0 auto;padding:0 26px}

/* ---------- герой ---------- */
.game-hero{display:flex;align-items:center;gap:20px;padding:24px 0 8px}
.game-icon{width:88px;height:88px;border-radius:22px;flex-shrink:0;background:var(--bg-3);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.game-icon img{width:100%;height:100%;object-fit:cover}
.game-badge{display:inline-block;padding:4px 10px;background:var(--amber);color:var(--bg);
  border-radius:6px;font-family:var(--game-disp);font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:8px}
.game-title{font-family:var(--game-disp);font-weight:600;font-size:28px;letter-spacing:-0.3px;color:var(--ink);margin:0 0 6px}
.game-pitch{font-size:15px;color:var(--ink-dim);margin:0;max-width:48ch}

/* ---------- CTA-кнопки ---------- */
.game-actions{padding:20px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.game-btn{display:inline-block;padding:14px 28px;background:var(--amber);color:var(--bg);
  text-decoration:none;border-radius:12px;font-family:var(--game-disp);font-size:15px;font-weight:600}
.game-btn-outline{display:inline-block;padding:14px 24px;background:transparent;border:1px solid var(--line);
  color:var(--ink-dim);text-decoration:none;border-radius:12px;font-family:var(--game-disp);font-size:15px;font-weight:600}

/* ---------- скриншоты ---------- */
.game-shots-label{font-family:var(--game-disp);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);margin:0 0 16px}
.game-shots{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.game-shots::-webkit-scrollbar{display:none}
.game-shot{flex:0 0 180px;height:360px;border-radius:14px;border:1px solid var(--line);
  background:var(--bg-3);overflow:hidden}
.game-shot img{width:100%;height:100%;object-fit:cover}

/* ---------- текстовые блоки ---------- */
.game-section{padding:36px 0 0}
.game-section h2{font-family:var(--game-disp);font-weight:600;font-size:20px;color:var(--ink);margin:0 0 14px}
.game-section p{font-size:15px;line-height:1.7;color:var(--ink-dim);margin:0 0 12px}
.game-section p:last-child{margin-bottom:0}

/* ---------- финальный CTA ---------- */
.game-cta{margin:48px 0 60px;padding:36px 32px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.game-cta h3{font-family:var(--game-disp);font-weight:600;font-size:20px;color:var(--ink);margin:0}
.game-cta p{font-size:14.5px;color:var(--ink-faint);margin:0;max-width:44ch}

.game-demo-badge{display:inline-block;margin:16px 0 0;font-family:var(--game-disp);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);border:1px dashed var(--line);
  border-radius:999px;padding:6px 14px}