.arcade-game {
	--game-accent: #7c3aed;
}

.arcade-game .stage {
	background:
		radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--game-accent) 28%, transparent), transparent 34%),
		linear-gradient(155deg, #172554, #0f172a 58%, #020617);
	cursor: crosshair;
}

.arcade-game .stage::after {
	position: absolute;
	z-index: 2;
	right: 12px;
	bottom: 10px;
	padding: 5px 9px;
	content: attr(data-stage-label);
	color: rgba(255, 255, 255, 0.7);
	background: rgba(15, 23, 42, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 7px;
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.13em;
	pointer-events: none;
}

.arcade-game canvas {
	position: relative;
	z-index: 1;
}

.snake-game {
	--game-accent: #16a34a;
}

.breakout-game {
	--game-accent: #7c3aed;
}

.flappy-game {
	--game-accent: #0284c7;
}

.catcher-game {
	--game-accent: #d97706;
}

.maze-game {
	--game-accent: #0f766e;
}

.stack-game {
	--game-accent: #e11d48;
}

.snake-game .stage {
	background: linear-gradient(145deg, #052e16, #0f3d2e 55%, #071b13);
}

.breakout-game .stage {
	background: radial-gradient(circle at 50% 110%, #4c1d95, #1e1b4b 52%, #0f102c);
}

.flappy-game .stage {
	background: linear-gradient(#7dd3fc, #e0f2fe 64%, #bbf7d0 64%, #4ade80);
}

.catcher-game .stage {
	background: radial-gradient(circle at 50% 110%, #78350f, #312e81 52%, #111827);
}

.maze-game .stage {
	background: radial-gradient(circle at 50% 50%, #ccfbf1, #5eead4 35%, #134e4a 100%);
}

.stack-game .stage {
	background: linear-gradient(#172554, #4338ca 57%, #f97316 100%);
}

@media (max-width: 480px) {
	.arcade-game .game-footer {
		font-size: 10px;
	}

	.arcade-game .stage::after {
		display: none;
	}
}