/**
 * Top Games leaderboard.
 *
 * Loads after rsg-base.css, which supplies the palette tokens, .rsg-shell,
 * the hero, the shared title/chip atoms and the empty-page state.
 *
 * A grid of poster cards, same shape as the homepage game cards, plus the
 * leaderboard extras: rank badge, version badge and view count. The Load More
 * button reuses .load-more-btn from the child stylesheet so it matches the
 * buttons already on the homepage and archives.
 */

.rsg-top .rsg-shell { padding-bottom: 80px; }

/* ── Card grid ────────────────────────────────────────────────────────── */

/*
 * Fixed column counts, not auto-fill.
 *
 * auto-fill picks whatever number of tracks happens to fit — at ~1200px that
 * was 5, and 24 cards across 5 columns leaves 4 in the final row and one
 * visibly empty cell. Every count used here (6/4/3/2) divides 24 exactly, and
 * each Load More click adds another 24, so the grid stays flush at every
 * width. The only ragged row is the genuine end of the catalogue.
 */
.rsg-cards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 22px 18px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.rsg-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--rsg-surface);
	border: 1px solid var(--rsg-border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rsg-card:hover {
	transform: translateY(-4px);
	border-color: var(--rsg-border-mid);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}

.rsg-card-art {
	position: relative;
	display: block;
	/* Matches the 205x319 poster the templates request. */
	aspect-ratio: 205 / 319;
	overflow: hidden;
	background: var(--rsg-hover);
}

.rsg-card-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	transition: transform .35s ease;
}
.rsg-card:hover .rsg-card-art img { transform: scale(1.05); }

/* Keeps the badges readable over a pale poster */
.rsg-card-art::after {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 38%;
	background: linear-gradient(to bottom, rgba(10, 14, 22, .6), transparent);
	pointer-events: none;
}

.rsg-card-rank {
	position: absolute;
	top: 9px;
	left: 9px;
	z-index: 2;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: #0a0e16;
	background: var(--rsg-accent);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

/* Gold / silver / bronze read instantly as a ranking; everything below
   third place stays in the blue system. */
.rsg-card-rank--1 { background: linear-gradient(135deg, #ffd98a, var(--rsg-gold)); }
.rsg-card-rank--2 { background: linear-gradient(135deg, #e6ecf7, var(--rsg-silver)); }
.rsg-card-rank--3 { background: linear-gradient(135deg, #eaad7c, var(--rsg-bronze)); }

.rsg-card-ver {
	position: absolute;
	top: 9px;
	right: 9px;
	z-index: 2;
	max-width: calc(100% - 56px);
	padding: 4px 9px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--rsg-primary) 0%, var(--rsg-primary-d) 100%);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 4px 12px rgba(0, 99, 186, .35);
}

.rsg-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 13px 14px 15px;
}

.rsg-page a.rsg-card-title {
	font-size: 14px;
	line-height: 1.4;
	/* Two lines then ellipsis, so every card in a row is the same height */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rsg-card-views {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: auto 0 0;
	color: var(--rsg-muted);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}
.rsg-card-views svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--rsg-accent); }

/* ── Load more ────────────────────────────────────────────────────────── */

/* .load-more-wrapper / .load-more-btn come from the child stylesheet, which
   loads site-wide; only the page-specific bits live here. */
.rsg-load-wrap { margin-top: 34px; }

.rsg-page .load-more-btn { user-select: none; }
.rsg-page .load-more-btn:focus-visible {
	outline: 2px solid var(--rsg-accent);
	outline-offset: 3px;
}
.rsg-page .load-more-btn.is-loading {
	opacity: .7;
	cursor: default;
	transform: none;
}
.rsg-page .load-more-btn.is-loading::before { display: none; }

.rsg-load-error {
	margin: 16px 0 0;
	text-align: center;
	font-size: 14px;
	color: #ff9d9d;
}
.rsg-load-error[hidden] { display: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */

/* 6 -> 4 -> 3 -> 2, all exact divisors of the 24-per-page count. */
@media (max-width: 1080px) {
	.rsg-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.rsg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; margin-top: 32px; }
}

@media (max-width: 700px) {
	.rsg-card:hover { transform: none; }
	.rsg-card-rank { min-width: 26px; height: 26px; font-size: 12.5px; border-radius: 8px; }
	.rsg-card-ver { font-size: 10px; padding: 3px 8px; }
	.rsg-page a.rsg-card-title { font-size: 13.5px; }
}

@media (max-width: 520px) {
	.rsg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
	.rsg-card-body { padding: 11px 11px 13px; }
	.rsg-card-views { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.rsg-card:hover { transform: none; }
	.rsg-card:hover .rsg-card-art img { transform: none; }
}