/* AstroTown · Games Page */
@import url('../tokens.css');

/* Search icon positioning */
.games-search-wrap .search-icon-inline {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 16px;
  z-index: 1;
}

/* Category row header count badge */
.cat-row-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: var(--s2);
  font-weight: var(--weight-normal);
}

/* Highlighted featured row */
.cat-row.is-featured .cat-row-title { color: var(--accent-glow); }
.cat-row.is-featured .cat-row-icon { filter: drop-shadow(0 0 4px rgba(167,139,250,0.6)); }

/* Skeleton row placeholder */
.cat-row-skeleton .gc-cover {
  background: var(--bg-raised);
  animation: shimmer 1.8s linear infinite;
}

/* Full-grid view (when single category selected) */
.games-full-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

@media (min-width: 480px) {
  .games-full-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: var(--s4); }
}

/* Auth button in search bar */
.games-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
  min-height: 36px;
}
.games-auth-btn:hover {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.4);
  color: var(--text-primary);
}
.games-auth-btn.is-logged-in {
  background: rgba(99,102,241,0.1);
  border-color: rgba(99,102,241,0.25);
}
.games-auth-label { letter-spacing: 0.01em; }

/* Empty state */
.games-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s24) var(--s6);
  gap: var(--s4);
  text-align: center;
}
.games-empty-icon { font-size: 48px; opacity: 0.4; }
.games-empty-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.games-empty-desc  { font-size: var(--text-sm); color: var(--text-muted); max-width: 280px; }