@font-face {
	font-family: 'Argentina';
	src: url('../assets/fonts/argentina.ttf') format('truetype');
}

html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
}

#game {
	display: block;
	position: relative;
	z-index: 1;
}

/* Fondo de la página, detrás del canvas: llena las franjas que deja el canvas 16:9 en ventanas
   de otra proporción. La imagen la pone game.js (syncPageBackground) y es la misma que dibuja
   el juego. Va más desenfocada y más oscura que la del canvas a propósito: es marco, no escena,
   y así el borde del canvas se sigue distinguiendo en vez de confundirse con el fondo. */
#page-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(12px) brightness(0.55);
	/* El blur difumina contra el borde y deja un halo claro; se agranda un poco para taparlo. */
	transform: scale(1.06);
	transition: opacity 300ms linear;
}