/* Ranking dos jogos: reaproveita o pódio e a lista da temporada (season.css) e acrescenta o topo e os filtros. */
.gr-hero { display: grid; gap: 8px; padding: 24px 22px; border-radius: 26px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: radial-gradient(110% 130% at 100% 0%, color-mix(in srgb, #22c55e 18%, transparent), transparent 55%), radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), var(--surface); }
.gr-hero h1 { margin: 6px 0 2px; font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.1; letter-spacing: -.02em; }
.gr-hero p { margin: 0; color: var(--text-soft); max-width: 58ch; line-height: 1.5; }
.gr-hero .ss-kicker { justify-self: start; }
.gr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.gr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-games { margin-top: -4px; }
@media (max-width: 600px) {
  .gr-games { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .gr-games .chip { flex: none; }
}