html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: #05080c;
}

body {
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

#screen {
	position: fixed;
	top: 0;
	left: 0;
	cursor: none;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

/* Scanlines sized to one game pixel (--px is set from JS) plus a soft vignette. */
.crt {
	--px: 4px;
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(var(--px) * 0.6),
		rgba(0, 0, 0, 0.22) calc(var(--px) * 0.6),
		rgba(0, 0, 0, 0.22) var(--px)
	);
	box-shadow: inset 0 0 18vmin rgba(0, 0, 0, 0.7);
	animation: flicker 0.15s steps(2) infinite;
}

@keyframes flicker {
	50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
	.crt { animation: none; }
}