/**
 * Seção de ranking — fundo colorido com boas-vindas e widget de placar.
 *
 * Modificador define --hero-overlay (decorações) e os tokens de cor de texto
 * consumidos pelo componente game-section-header.
 * Para novo tema: adicione token em tokens.css + modificador aqui.
 */

.game-ranking {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: var(--height-ranking-hero);
	display: flex;
	flex-direction: column;
}

.game-ranking--primary {
	background: var(--color-primary);
	--hero-overlay: var(--overlay-white-sm);
	--section-title-color: var(--color-pure-white);
	--section-lead-color: var(--overlay-white-xl);
}

.game-ranking-inner {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: var(--space-32);
	padding-top: var(--space-48);
	padding-bottom: var(--space-48);
	position: relative;
	z-index: 1;
}

.game-ranking-scoreboard {
	display: none;
}

/* ── Decoração de fundo ── */

/*
 * left:0/right:0 + margin:auto espelha o container de 960px sem transform.
 * transform no pai quebraria o left/right dos filhos.
 */
.game-ranking-decor {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	max-width: var(--container-game);
	pointer-events: none;
	color: var(--hero-overlay);
}

.game-ranking-decor-item {
	position: absolute;
	fill: currentColor;
}

.game-ranking-decor-ranking {
	width: 220px;
	height: 196px;
	bottom: -12px;
	left: 32px;
}

.game-ranking-decor-medal {
	width: 76px;
	height: 92px;
	top: calc(50% + var(--space-16));
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 48rem) {
	.game-ranking {
		min-height: 0;
	}

	.game-ranking-inner {
		grid-template-columns: 1fr;
		padding-top: var(--space-32);
		padding-bottom: var(--space-32);
	}

	/* Ícone de ranking migra para a direita — referência visual do placar sem ocupar coluna */
	.game-ranking-decor-ranking {
		left: auto;
		right: 0;
		width: 140px;
		height: 125px;
	}

	.game-ranking-decor-medal {
		display: none;
	}
}