/* Overview-page-only layout. Shared tokens/fonts/nav come from theme.css. */

.site-header{
  text-align:center;
  padding:1.5rem 1.5rem 1.5rem;
}

.site-header h1{
  font-size:clamp(1.8rem, 5vw, 2.6rem);
  margin:0 0 0.4rem;
}

.site-header p{
  margin:0;
  color:var(--napps-text-muted);
  font-size:1.05rem;
}

main{
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:0 1.25rem 3rem;
}

.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.25rem;
}

.game-card{
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,var(--napps-surface-2) 0%,var(--napps-surface) 100%);
  border:3px solid var(--napps-border);
  border-radius:var(--napps-radius);
  box-shadow:var(--napps-shadow);
  overflow:hidden;
  text-decoration:none;
  color:var(--napps-text);
  transition:transform .1s ease, border-color .15s ease;
}

.game-card:hover,
.game-card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--napps-accent);
}

.game-card__thumb{
  aspect-ratio:16 / 10;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.75rem;
  background:rgba(0,0,0,.18);
}

.game-card__body{
  padding:1rem 1.1rem 1.25rem;
}

.game-card__title{
  font-size:1.1rem;
  margin:0 0 0.35rem;
}

.game-card__desc{
  margin:0;
  font-size:.9rem;
  color:var(--napps-text-muted);
  line-height:1.4;
}

.game-card__play{
  display:inline-block;
  margin-top:0.6rem;
  font-family:'Fredoka',sans-serif;
  font-size:0.85rem;
  font-weight:700;
  color:var(--napps-accent);
  letter-spacing:0.02em;
  text-transform:uppercase;
}

.empty-state{
  text-align:center;
  color:var(--napps-text-muted);
  margin-top:3rem;
}

.site-footer{
  text-align:center;
  color:var(--napps-text-muted);
  font-size:0.85rem;
  padding:1.5rem;
}

@media (max-width:480px){
  .games-grid{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:0.85rem;
  }
  .game-card__thumb{font-size:2rem}
  .game-card__body{padding:0.8rem 0.9rem 1rem}
}