/* ═══════════════════════════════════════════════════════════
   IS7NOW.FUN — Games catalogue + detail
   Depends on .game-card styles from home.css
   ═══════════════════════════════════════════════════════════ */

/* ── Toolbar ── */
.games-toolbar { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-10); }
.games-search {
  position: relative; max-width: 420px; width: 100%;
}
.games-search input {
  width: 100%; background: var(--color-surface); color: var(--color-ivory);
  border: 1px solid var(--color-border-2); border-radius: var(--radius-md);
  padding: 14px 16px 14px 46px; font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.games-search input::placeholder { color: var(--color-text-muted); }
.games-search input:focus { outline: none; border-color: var(--color-border-active); box-shadow: var(--shadow-glow-sm); }
.games-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }

.game-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.game-filter {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 9px 16px; border: 1px solid var(--color-border-2); border-radius: var(--radius-pill);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.game-filter:hover { color: var(--color-ivory); border-color: var(--color-border-plasma); }
.game-filter.is-active { color: #fff; background: var(--grad-plasma); border-color: transparent; }
.game-filter__count {
  font-size: 10px; background: rgba(255,255,255,0.12); color: currentColor;
  padding: 1px 7px; border-radius: var(--radius-pill); font-family: var(--font-mono);
}
.game-filter.is-active .game-filter__count { background: rgba(255,255,255,0.25); }

.games-count { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.games-count strong { color: var(--color-accent); }

.games-empty { text-align: center; padding: var(--space-16) 0; color: var(--color-text-muted); }
.games-empty strong { color: var(--color-ivory); font-family: var(--font-display); font-size: var(--text-3xl); display: block; margin-bottom: var(--space-3); }

/* ── Grid override: denser for full catalogue ── */
#gamesGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 640px)  { #gamesGrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { #gamesGrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { #gamesGrid { grid-template-columns: repeat(5, 1fr); } }

/* ── GAME DETAIL ── */
.gd { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
.gd__media { position: relative; }
.gd__media img { width: 100%; clip-path: var(--chamfer-card); border: 1px solid var(--color-border-plasma); box-shadow: var(--shadow-card); }
.gd__glow { position: absolute; inset: -20px; z-index: -1; background: radial-gradient(circle, rgba(255,23,68,0.28), transparent 70%); filter: blur(20px); }
.gd__title { font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 0.92; text-transform: uppercase; margin: var(--space-3) 0 var(--space-4); }
.gd__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.gd__meta-item { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: var(--space-2); }
.gd__meta-item strong { color: var(--color-ivory); }
.gd__desc { color: var(--color-text-secondary); line-height: 1.8; margin-bottom: var(--space-6); }
.gd__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
.gd__fact { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.gd__fact-label { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.gd__fact-value { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); margin-top: 2px; }
.gd__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (min-width: 900px) { .gd { grid-template-columns: 440px 1fr; gap: var(--space-16); } }