/* The page around the emulated screen: black, with the screen centered. */
html, body {
	margin: 0;
	height: 100%;
	background: #000;
	color: #fff;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* A finger on the screen is the mouse: no scrolling or zooming by touch. */
.screen {
	image-rendering: pixelated;
	cursor: none;
	touch-action: none;
}

/* At a fractional scale the canvas is drawn at the next whole one and shrunk smoothly (Filters.ts). */
.screen.smooth {
	image-rendering: auto;
}

/*
 * The screen's filters (Filters.ts): the frame clips the screen to rounded corners; over the screen, a
 * blurred copy lightens it (glow), and a phosphor's white multiplies it (tint).
 */
.screen-frame {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	line-height: 0;
}

.screen-frame > .screen {
	display: block;
}

.screen-glow, .screen-tint {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.screen-glow {
	mix-blend-mode: screen;
}

.screen-tint {
	mix-blend-mode: multiply;
}

.screen-glow[hidden], .screen-tint[hidden] {
	display: none;
}

/* The text field a touch screen's keyboard types into, off the screen. 16px keeps iOS from zooming to it. */
.keyboard {
	position: fixed;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	font-size: 16px;
	pointer-events: none;
}

/*
 * The virtual gamepad (src/platform/browser/Pads.ts), in the margins beside the screen: two buttons
 * on each side, pause above the energy button's side in landscape or between the sides in portrait.
 * The sizes match Pads.ts's button, gap, and margin.
 */
.pad {
	touch-action: none;
}

.pad[hidden] {
	display: none;
}

.pad-group {
	position: fixed;
	display: flex;
	gap: 10px;
}

.pad-button {
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	border-radius: 8px;
	background: #fff center no-repeat;
	image-rendering: pixelated;
}

/* Held, the rounded rectangle goes black around the icon, which stays as it is. */
.pad-button.pressed {
	background-color: #000;
}

.pad-landscape .pad-west { left: 12px; bottom: 20%; }
.pad-landscape .pad-east { right: 12px; bottom: 20%; }
.pad-landscape .pad-pause { right: 45px; top: 12px; }
.pad-landscape.pad-pause-west .pad-pause { right: auto; left: 45px; }

.pad-portrait .pad-west { left: 12px; bottom: 78px; }
.pad-portrait .pad-east { right: 12px; bottom: 78px; }
.pad-portrait .pad-pause { left: 50%; bottom: 12px; transform: translateX(-50%); }

.message {
	position: fixed;
	bottom: 1em;
	font: 14px monospace;
}

/* Without JavaScript, a line of plain text (PORT.md, decision 9). */
.noscript {
	max-width: 32em;
	margin: 1em;
	font: 16px/1.5 system-ui, sans-serif;
}

.noscript a {
	color: inherit;
}