/* Shared across the /games/ section — the hub and every individual game's
   library page reuse this card-grid component instead of each defining
   their own. Game-specific board/gameplay styles stay in their own file
   (see puzzle.css for the jigsaw board, memory.css for the memory board). */

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  padding-bottom: 3rem;
}

.game-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--ink);
  max-width: 260px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-card:hover, .game-card:focus-visible {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 20px 40px rgba(38, 50, 74, 0.18);
}

.game-card.is-coming-soon {
  cursor: default;
  opacity: 0.6;
}

.game-card.is-coming-soon:hover, .game-card.is-coming-soon:focus-visible {
  transform: none;
  box-shadow: var(--shadow-soft);
}

.game-card-thumb {
  aspect-ratio: 1 / 1;
  background: var(--paper-shade);
}

.game-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card-info {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.game-card-info h3 {
  font-size: 1.1rem;
  margin: 0;
}

.game-empty {
  max-width: 34rem;
  margin: 4rem auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink-soft);
}

/* ---------- Difficulty picker ---------- */
/* Used by both the jigsaw play page and the memory setup screen. */
.difficulty-picker {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.difficulty-btn.is-active {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}