/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding: var(--gap-lg) 0 var(--gap-md);
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  max-width: 720px;
  margin: 0 auto var(--gap-xs);
}
.hero h1 em,
.hero .brand-highlight {
  font-style: normal;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto;
  font-size: 0.98rem;
}

/* =========================================================
   CATEGORY CHIPS - horizontal scroll on mobile, wrap on desktop
   ========================================================= */
.category-chips {
  display: flex;
  gap: var(--gap-xs);
  overflow-x: auto;
  padding: var(--gap-sm) var(--gap-md);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-chips::-webkit-scrollbar { display: none; }

.category-chips a {
  flex: 0 0 auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.88rem;
  white-space: nowrap;
}
.category-chips a:hover,
.category-chips a.is-active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}

@media (min-width: 900px) {
  .category-chips {
    flex-wrap: wrap;
    overflow: visible;
    justify-content: center;
    padding: var(--gap-sm) 0;
  }
}

/* =========================================================
   AD SLOT — consistent wrapper so layout never shifts (CLS)
   ========================================================= */
.ad-slot {
  margin: var(--gap-md) auto;
  width: 100%;
  max-width: 728px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ad-slot.ad-slot-sidebar { max-width: 300px; min-height: 250px; }
.ad-slot.ad-slot-leaderboard { min-height: 90px; }

/* =========================================================
   GAME GRID — responsive, mobile-first columns
   ========================================================= */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--gap-md);
  margin: var(--gap-lg) 0 var(--gap-sm);
}
.section-heading h2 { font-size: 1.2rem; margin: 0; }
.section-heading a { font-size: 0.85rem; color: var(--accent); }

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-sm);
  padding: 0 var(--gap-md) var(--gap-md);
}

.game-card {
  background: var(--bg-panel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid transparent;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.game-card:hover,
.game-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.game-card .thumb-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-panel-2);
}
.game-card img { width: 100%; height: 100%; object-fit: cover; }

.game-card .badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--gradient-warm);
  color: #1a0a2e;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

.game-card .meta { padding: 10px 12px 12px; }
.game-card .meta h3 {
  font-size: 0.9rem;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-card .meta span {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* tablet */
@media (min-width: 600px) {
  .game-grid { grid-template-columns: repeat(3, 1fr); }
}
/* small desktop */
@media (min-width: 900px) {
  .game-grid { grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
}
/* large desktop */
@media (min-width: 1200px) {
  .game-grid { grid-template-columns: repeat(6, 1fr); }
}