/* games pages: immersive marketing body shown under the shared top bar; relies on index.css for the reset, fonts and color tokens */

/* immersive content column */
.games {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--major-spacing);
  display: flex;
  flex-direction: column;
  gap: calc(var(--element-spacing) * 1.5);
}

/* full-width hero logo */
.game-hero { display: flex; justify-content: center; padding: var(--element-spacing) 0; }
.game-hero img { max-height: 200px; width: auto; }

/* steam store widget */
.game-steam { display: flex; justify-content: center; }
.game-steam iframe { border: 0; max-width: 100%; }

/* image + text feature rows */
.game-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--element-spacing);
  align-items: center;
}
.game-row img { width: 100%; border-radius: var(--radius); display: block; }
.game-row-text { display: flex; flex-direction: column; gap: var(--major-spacing); }
.game-row-text h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.game-row-text p { color: var(--text); line-height: 1.6; }
.game-row-text ul { display: flex; flex-direction: column; gap: var(--minor-spacing); padding-left: 1.1em; color: var(--text); line-height: 1.6; }

/* games index: a grid of game tiles */
.game-index { display: flex; flex-direction: column; gap: var(--element-spacing); }
.game-index h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.04em; }
.game-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--element-spacing); }
.game-card {
  display: flex;
  flex-direction: column;
  gap: var(--major-spacing);
  padding: var(--element-spacing);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
}
.game-card:hover { border-color: var(--accent); }
.game-card img { width: 100%; height: 120px; object-fit: contain; }
.game-card .game-card-name { font-weight: 600; font-size: 18px; }
.game-card .game-card-desc { color: var(--muted); line-height: 1.5; font-size: 13px; }

@media (max-width: 640px) {
  .game-row { grid-template-columns: 1fr; }
  .games { gap: var(--element-spacing); }
  .game-row-text h1 { font-size: 26px; }
}