/* Ajuste de compatibilidade: diretivas de build ausentes no ZIP original. */
/* Responsividade mobile: mantém a lógica original 640x480, ajustando apenas a apresentação. */
html, body { margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; }
html { touch-action: none; }
body { touch-action: none; -webkit-user-select: none; user-select: none; }

html, body{
	width: 100%;
	height: 100%;
	background: #484848;
}

body{
	position: relative;
}

em{
	display: none;
}

#extra, #view{
	position: absolute;
	left: 50%;
	top: calc(50% - 28px);
	width: 640px;
	height: 480px;
	margin: 0;
	transform-origin: center center;
	transform: translate(-50%, -50%) scale(var(--game-scale, 1));
	text-align: left;
	background: #fff;
}

#view{
	display: block;
	background: transparent url(blank.gif) repeat 0 0;
	cursor: default;
	z-index: 20;
}

#extra{
	background: #000;
}

#extra .layer{
	position: absolute;
	left: 0;
	top: 0;
	width: 640px;
	height: 480px;
	z-index: 10;
}

#fork{
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 356px;
	height: 92px;
	cursor: pointer;
	background-image: url(fork.gif);
	z-index: 0;
}

#desc{
	width: 100%;
	position: absolute;
	left: 0;
	top: auto;
	bottom: max(12px, env(safe-area-inset-bottom));
	height: auto;
	color: #ccc;
	line-height: 26px;
	margin-top: 0;
	text-align: center;
	font-size: 14px;
}

#desc a{
	color: #318fe1;
}

#browser{
	font-size: 14px;
	line-height: 16px;
}

#browser .b{
	color: #fff;
	font-weight: 700;
}
/* Evita que o rodapé cubra a partida em telas horizontais pequenas. */
@media (max-height: 420px) {
  #desc { display: none; }
  #extra, #view { top: 50%; }
}