html, body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	
	background: #000000;
	color: white;
}

html, body, canvas {
	touch-action: none;
	touch-action-delay: none;
}

#notSupportedWrap {
	margin: 2em auto 1em auto;
	width: 75%;
	max-width: 45em;
	border: 2px solid #aaa;
	border-radius: 1em;
	padding: 2em;
	background-color: #f0f0f0;
	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	color: black;
}

#notSupportedTitle {
	font-size: 1.8em;
}

.notSupportedMessage {
	font-size: 1.2em;
}

.notSupportedMessage em {
	color: #888;
}

/* Short intro line under PLAY */
.game-intro {
	--px-outline:
		-1px -1px 0 #111,
		 1px -1px 0 #111,
		-1px  1px 0 #111,
		 1px  1px 0 #111,
		 0    2px 0 #111;
	position: fixed;
	left: 50%;
	top: 58%;
	transform: translateX(-50%);
	z-index: 20;
	width: min(26rem, calc(100vw - 2rem));
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: transparent;
	text-align: center;
	color: #f4f4f4;
	font-family: "Courier New", Courier, "Lucida Console", monospace;
	line-height: 1.35;
	pointer-events: none;
	user-select: none;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.game-intro.is-hidden {
	opacity: 0;
	filter: blur(2px);
	visibility: hidden;
}

.game-intro h1 {
	margin: 0 0 0.4rem;
	font-size: clamp(1.1rem, 3.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffe14a;
	text-shadow: var(--px-outline);
}

.game-intro p {
	margin: 0 auto;
	max-width: 24rem;
	font-size: clamp(0.68rem, 1.7vw, 0.82rem);
	color: #ececec;
	text-shadow: var(--px-outline);
}

@media (max-height: 520px) {
	.game-intro {
		top: auto;
		bottom: 6%;
	}
}