/* games: original homepage design and editable color variables. */

:where(.wp-site-blocks, .editor-styles-wrapper) .game-grid {
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap: 14px;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game {
	aspect-ratio: .73;
	border-radius: 15px;
	color: #fff;
	position: relative;
	overflow: hidden;
	padding: 16px;
	display: flex;
	flex-direction: column;
	justify-content: end;
	box-shadow: inset 0 -80px 60px #0009;
	transition: .25s;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game:hover {
	transform: translateY(-5px);
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 53% 28%,#fff8 0 3%,transparent 4%),radial-gradient(circle at 50% 45%,transparent 0 12%,#fff2 13% 14%,transparent 15%);
	opacity: .6;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game>* {
	position: relative;
	z-index: 1;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game-icon {
	font-size: 58px;
	position: absolute;
	top: 25px;
	left: 0;
	right: 0;
	text-align: center;
	text-shadow: 0 4px 10px #0006;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game h3 {
	font-size: 15px;
	margin: 0;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game p {
	font-size: 11px;
	margin: 4px 0 0;
	opacity: .8;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .tag {
	position: absolute;
	top: 12px;
	left: 12px;
	border-radius: 50px;
	padding: 5px 7px;
	background: var(--orange);
	font-size: 9px;
	font-weight: 700;
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game-aurora {
	background: linear-gradient(145deg,#412bc8,#ee6bb3);
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game-jungle {
	background: linear-gradient(145deg,#074b4b,#bad84d);
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game-cosmos {
	background: linear-gradient(145deg,#092d74,#e2449f);
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game-cherry {
	background: linear-gradient(145deg,#8e0d43,#ff9267);
}

:where(.wp-site-blocks, .editor-styles-wrapper) .game-dragon {
	background: linear-gradient(145deg,#df4c25,#4f1138);
}

@media(max-width:760px) {
	:where(.wp-site-blocks, .editor-styles-wrapper) .game-grid {
		display: flex;
		overflow: auto;
		margin-right: -16px;
		padding-right: 16px;
	}
	
	:where(.wp-site-blocks, .editor-styles-wrapper) .game {
		flex: 0 0 142px;
	}
	
}

.np-block.games-section { display: flow-root; background: var(--section-bg, transparent); color: var(--section-text, var(--ink)); }
.np-block.games-section .game {
	background: linear-gradient(145deg, var(--game-start, #412bc8), var(--game-end, #ee6bb3));
	color: var(--game-text, #fff); min-width: 0;
}
.np-block.games-section .game-icon { color: var(--game-icon, currentColor); }
.np-block.games-section .tag { background: var(--badge-bg, var(--orange)); color: var(--badge-text, #fff); }
.np-block.games-section .game-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.np-block.games-section .game:has(.game-cover)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, #000c); }
.np-block.games-section .game h3 { position: static; }
.np-block.games-section .game-link { color: inherit; text-decoration: none; }
.np-block.games-section .game-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.np-block.games-section .game:focus-within { outline: 3px solid var(--purple); outline-offset: 3px; }
@media (max-width: 760px) {
	.np-block.games-section .game-grid { padding-block: 8px; margin-block: -8px; }
	.np-block.games-section .section-heading { gap: 16px; align-items: center; }
	.np-block.games-section .section-heading .text-link { flex-shrink: 0; max-width: 40%; }
}