/*
	The page around Eldaria’s two canvases: a black page with nothing to scroll, select, nor flash under a tap.
	- The world canvas and the interface canvas fill the window, stacked, with the interface on top.
	- The one text field hides beneath them, still able to take focus, so a phone keyboard can rise for it.
*/


/* #region The page */
html, body
{
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
	overscroll-behavior: none;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}
/* #endregion */




/* #region The canvases */
/* - Both canvases cover the whole window; the game sets their pixel sizes to match the device's pixel ratio. */
#world, #interface
{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	outline: none;
}

/* - The world is pixel art, so the browser scales it with hard edges rather than blurring it. */
#world
{
	z-index: 0;
	image-rendering: pixelated;
}

/* - The interface sits above the world and takes every press. */
#interface
{
	z-index: 1;
}
/* #endregion */




/* #region The typing field */
/* - The field stays in the window, one pixel wide and fully clear, so phones still raise their keyboards for it. */
/* - Its text is 16 px, since iOS zooms the whole page into any field with smaller text. */
#typing
{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	z-index: -1;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	font-size: 16px;
	caret-color: transparent;
	pointer-events: none;
	user-select: text;
	-webkit-user-select: text;
}
/* #endregion */




/* #region The boot failure note */
/* - When the game cannot start, it writes the reason here, in plain words on the black page. */
#boot-failure
{
	position: fixed;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: #e9dcb4;
	font: 18px/1.6 "Palatino Linotype", "Book Antiqua", Georgia, serif;
	text-align: center;
	white-space: pre-wrap;
}
/* #endregion */