/**
 * Shared foundation for the child theme's custom pages.
 *
 * Loaded by both the Recently Updated Games and Top Games templates so the
 * palette, hero and empty states are defined once. Page-specific stylesheets
 * load after this and only add what is unique to them.
 *
 * Palette comes from the child footer (#0a0e16 ground, #3aa3ff / #1f7fff
 * gradient) and the Load More button (#0063BA → #004a8c), so these pages read
 * as part of the same design pass rather than a bolt-on.
 *
 * Everything is scoped under .rsg-page: the parent theme sets global rules
 * (a:link { color:#000 }, h1-h6 { line-height:26px }, ul { list-style:none })
 * that would otherwise bleed in.
 */

.rsg-page {
	--rsg-bg:        #0a0e16;
	--rsg-surface:   #111725;
	--rsg-surface-2: #161d2e;
	--rsg-hover:     #1b2338;
	--rsg-border:    rgba(255, 255, 255, .07);
	--rsg-border-mid:rgba(255, 255, 255, .12);
	--rsg-text:      #e9edf3;
	--rsg-muted:     #9aa1ad;
	--rsg-dim:       #5f6775;
	--rsg-primary:   #0063BA;
	--rsg-primary-d: #004a8c;
	--rsg-accent:    #3aa3ff;
	--rsg-accent-2:  #1f7fff;
	--rsg-gold:      #f5c66b;
	--rsg-silver:    #cbd3e1;
	--rsg-bronze:    #d68f57;
	--rsg-radius:    14px;

	background: var(--rsg-bg);
	color: var(--rsg-muted);
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.rsg-page *,
.rsg-page *::before,
.rsg-page *::after { box-sizing: border-box; }

.rsg-shell {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.rsg-hero {
	position: relative;
	padding: 68px 0 44px;
	text-align: center;
	border-bottom: 1px solid var(--rsg-border);
	background:
		radial-gradient(900px 340px at 50% -35%, rgba(31, 127, 255, .22), transparent 70%),
		radial-gradient(1200px 300px at 50% 0%, rgba(0, 99, 186, .12), transparent 72%);
}

.rsg-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--rsg-accent);
}

.rsg-page h1.rsg-hero-title {
	margin: 0;
	color: #fff;
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.6px;
}

/* auto side margins are what actually centre a max-width block */
.rsg-hero-intro {
	margin: 16px auto 0;
	max-width: 620px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--rsg-muted);
}

.rsg-hero-intro p { margin: 0 0 10px; color: var(--rsg-muted); }
.rsg-page .rsg-hero-intro a { color: var(--rsg-accent); }

.rsg-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.rsg-stat {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px 20px;
	background: var(--rsg-surface);
	border: 1px solid var(--rsg-border);
	border-radius: 999px;
}

.rsg-stat-num {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.rsg-stat-label {
	font-size: 13px;
	color: var(--rsg-dim);
	letter-spacing: .3px;
}

/* ── Shared atoms ─────────────────────────────────────────────────────── */

.rsg-page a.rsg-title {
	color: var(--rsg-text);
	font-weight: 700;
	text-decoration: none;
	transition: color .16s ease;
}
.rsg-page a.rsg-title:hover,
.rsg-page a.rsg-title:focus { color: var(--rsg-accent); }

.rsg-chip {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
}

/* ── Empty states ─────────────────────────────────────────────────────── */

.rsg-empty {
	text-align: center;
	color: var(--rsg-muted);
	font-size: 15px;
}

.rsg-empty--page {
	max-width: 560px;
	margin: 90px auto 110px;
	padding: 48px 32px;
	background: var(--rsg-surface);
	border: 1px solid var(--rsg-border);
	border-radius: 20px;
}

.rsg-empty-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 22px;
	color: var(--rsg-accent);
	opacity: .8;
}
.rsg-empty-icon svg { width: 100%; height: 100%; }

.rsg-page .rsg-empty--page h2 {
	margin: 0 0 12px;
	color: #fff;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
}
.rsg-empty--page p { margin: 0 0 10px; line-height: 1.7; }
.rsg-page .rsg-empty-admin { font-size: 14px; color: var(--rsg-dim); }
.rsg-page .rsg-empty-admin a { color: var(--rsg-accent); }

.rsg-truncated {
	margin: 22px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--rsg-dim);
}

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

@media (max-width: 700px) {
	.rsg-hero { padding: 46px 0 34px; }
	.rsg-shell { padding: 0 16px; }
}

@media (max-width: 420px) {
	.rsg-stats { gap: 8px; }
	.rsg-stat { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.rsg-page *,
	.rsg-page *::before,
	.rsg-page *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}