/**
 * Banner da loja — espelha o ranking: mesma section, mesmo inner, mesmo decor.
 */

.game-store {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 300px;
	display: flex;
	flex-direction: column;
}

.game-store--purple {
	background: var(--color-purple);
	--section-title-color: var(--color-pure-white);
	--section-lead-color:  var(--overlay-white-xl);
}

/* position:absolute no cta conflitaria com o transform do hover — margin-top:auto no cta mantém o botão no fundo sem sair do fluxo */
.game-store-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-top: var(--space-48);
	padding-bottom: var(--space-48);
	position: relative;
	z-index: 1;
}

.game-store-cta {
	margin-top: auto;
	align-self: center;
}

.game-store-decor {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: var(--container-game);
	pointer-events: none;
}

.game-store-decor-character {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
}

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

	.game-store-inner {
		padding-top: var(--space-32);
		padding-bottom: var(--space-32);
	}

	.game-store-decor-character {
		display: none;
	}
}