/* =====================================================
   P77 App — Games page
   ===================================================== */

/* filter bar */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center;
  margin-bottom: var(--sp-2xl);
}
.filter-btn {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  padding: 0.5em 1.15em; border-radius: var(--radius-pill);
  border: 1px solid var(--clr-border); color: var(--clr-text-secondary);
  background: var(--clr-bg-card); transition: all var(--transition-fast);
}
.filter-btn:hover { color: var(--clr-text-primary); border-color: var(--clr-accent-gold); }
.filter-btn.active { background: var(--gradient-gold); color: #0d0d12; border-color: transparent; box-shadow: var(--shadow-gold); }

/* game grid */
.games-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg);
}
.game-card {
  display: flex; flex-direction: column;
  background: var(--clr-bg-card); border: 1px solid var(--clr-border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.game-card:hover {
  transform: translateY(-6px); border-color: var(--clr-accent-gold);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), var(--shadow-glow);
}
.game-card__img-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.game-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); }
.game-card:hover .game-card__img-wrap img { transform: scale(1.06); }
.game-card__body { padding: var(--sp-md); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.game-card__name { font-size: var(--fs-base); color: var(--clr-text-primary); }
.game-card__meta { font-size: var(--fs-xs); color: var(--clr-text-muted); margin-bottom: var(--sp-sm); }
.game-card__body .btn { margin-top: auto; }

.games-empty { text-align: center; color: var(--clr-text-muted); padding: var(--sp-3xl); display: none; }

.games-count { text-align: center; color: var(--clr-text-muted); font-size: var(--fs-sm); margin-top: var(--sp-2xl); font-family: var(--font-mono); }

@media (min-width: 768px) { .games-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .games-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); } }
@media (min-width: 1280px) { .games-grid { grid-template-columns: repeat(5, 1fr); } }