/*
 * Embed mode for the Vega II landing page game window. The page only shows the
 * arcade: the window frame supplies the chrome, the landing page the copy.
 */

html,
body {
	overflow: hidden;
}

/* On mobile the landing page sizes the frame, so the arcade fills it and the
   screen takes whatever height the toolbar and touch controls leave. game.js
   matches the canvas width to the screen's shape, so fill never distorts. */
@media (max-width: 650px) {
	html,
	body,
	main {
		height: 100%;
	}

	.arcade {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.screen {
		flex: 1 1 0;
		min-height: 0;
		aspect-ratio: auto !important;
	}

	.screen canvas,
	.screen:fullscreen canvas {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: auto;
		object-fit: fill !important;
	}
}

main,
.screen {
	width: 100%;
	max-width: none;
	margin: 0;
}

.masthead,
.power-guide,
.enemies,
footer,
.font-credit {
	display: none;
}