/* ========================== */
/* == Games index (design system "Storefront" page) ==
   Hero, tiles and buttons come from design_system.css; this file only
   lays out the page. Everything is scoped to #games-index-page because
   admin pages load every stylesheet. */

/* == Game tiles == */
#games-index-page #games-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

/* == How it works == */
#games-index-page .games-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

#games-index-page .games-steps li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-100);
}

#games-index-page .games-steps i {
  font: 900 20px/1 var(--font-display);
  font-style: normal;
  color: var(--ki);
}

#games-index-page .games-steps p { margin: 0; }
#games-index-page .games-steps b { display: block; margin-bottom: 4px; font-size: 15px; color: var(--ink); }
#games-index-page .games-steps span { font-size: 13px; color: var(--ink-muted); }

/* == Empty state == */
#games-index-page .empty-state {
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}

#games-index-page .empty-state-text { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
#games-index-page .empty-state-hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-muted); }

@media (max-width: 900px) {
  #games-index-page #games-container,
  #games-index-page .games-steps { grid-template-columns: minmax(0, 1fr); }
}