/* ============================================================
   games.css — /games launcher. New-theme tokens, light+dark.
   ============================================================ */

.games-page { width: 100%; }

.games-hero { text-align: center; margin-bottom: 20px; }
.games-hero .eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint, #7a6260);
}
.games-hero h1 { font-size: 1.9rem; margin: .12em 0 .15em; color: var(--text, #1f1a1a); }
.games-hero p { color: var(--text-muted, #54403a); font-size: .96rem; line-height: 1.5; margin: 0 auto; max-width: 600px; }

.games-grid {
  display: grid; gap: 14px; margin: 8px 0 18px;
  /* auto-fill (not auto-fit): keeps empty tracks so a lone card in the last
     row stays card-sized instead of stretching full-width — matters now that
     the grid shares the row with the ad rail. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.game-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  padding: 20px; border-radius: 14px;
  background: var(--bg, #fbf6ea); border: 1.5px solid var(--container-border, #d9cdb4);
  color: var(--text, #1f1a1a); transition: border-color .15s, transform .1s, box-shadow .15s;
}
@media (hover: hover) {
  .game-card:hover {
    border-color: var(--accent, #b32a2a); transform: translateY(-2px);
    box-shadow: 0 6px 18px -10px rgba(40, 30, 20, 0.35);
  }
}
.game-icon { font-size: 2.4rem; line-height: 1; }
.game-name { font-size: 1.15rem; font-weight: 700; }
.game-desc { font-size: .9rem; color: var(--text-muted, #54403a); line-height: 1.45; flex: 1; }
.game-tag {
  align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent, #b32a2a);
  background: var(--accent-hover, rgba(179, 42, 42, 0.10)); border-radius: 999px; padding: 3px 11px;
}

/* SEO + FAQ (mirrors chart-seo) */
.games-seo { margin-top: 26px; color: var(--text-muted, #54403a); line-height: 1.6; }
.games-seo h2 { font-size: 1.25rem; color: var(--text, #1f1a1a); margin: 0 0 8px; }
.games-seo h3 { font-size: 1rem; color: var(--text, #1f1a1a); margin: 18px 0 4px; }
.games-seo p { margin: 0 0 8px; }
.games-seo a { color: var(--accent, #b32a2a); }
.games-seo details { border-top: 1px solid var(--container-border, #d9cdb4); padding: 10px 0; }
.games-seo summary { cursor: pointer; font-weight: 600; color: var(--text, #1f1a1a); }
.games-seo details p { margin: 8px 0 0; }