/*
	Written by Ridge Batty (c) 2020-2021
	Default stylesheet for engine v2
	
	Many arcade style games do not respond well to pixel resolution changes.
	You should define a fixed resolution for your game, especially if it differs from PPG frame size (1152 x 648 pixels).
*/
html, body {					/* Makes sure the parent frame is fully utilized and the game will float inside it */
	display:flex;
	position:absolute;
	margin:0;
	inset:0;
	background:black;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	user-select:none;
	cursor: url('../gfx/icons/cursor-icon.png'), auto;
}
body.mine {
	cursor: url('../gfx/icons/cursor-pickaxe.png'), auto;
}
body.walk {
	cursor: url('../gfx/icons/cursor-walk.png'), auto;
}
body.use {
	cursor: url('../gfx/icons/cursor-tap.png'), auto;
}
.cover {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
#game {					
	position:relative;

	width:1920px;	
	min-width:1920px;
	height:1080px;
	min-height:1080px;	
/*
	width:3840px;	
	min-width:3840px;
	height:2160px;
	min-height:2160px;	
*/
	overflow:hidden;
	background-color: black;
	zoom:1;
	/*cursor:none;*/
}

#game.low-resolution-landscape {
	width:1366px;	
	min-width:1366px;
	height:768px;
	min-height:768px;	
}
.warn {
	color:white;
	font:20px arial;
	text-align: center;
}

input[type="password"] {
	color: white !important;
	-webkit-text-fill-color: white !important;
}
input:-webkit-autofill {	
    background-color: transparent !important;
	background-image: none !important;
	transition: background-color 0s 600000s !important;
}
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s !important;
}
input:-webkit-autofill:default {
    transition: background-color 0s 600000s !important;
}
.info-login {
	position: absolute;
	color: white;	
	font:32px 'Main';
	inset:0;
	display: flex;
	justify-self:center;
	align-items: center;
	text-align: center;
	text-shadow:1px 1px 3px black;
}
.copyright {
	position: absolute;
	color: white;	
	font:20px 'Main';
	inset:0;
	display: flex;
	justify-self:center;
	align-self: end;
	text-shadow:1px 1px 3px black;
}
.login-form {
	color:white;
	text-shadow:1px 1px 3px black;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-self: center;
	align-self: center;
	width:320px;
	height:240px;
	inset:0;		
}

.login-form input {
	width:320px;
	height:64px;
	font:bold 48px 'Side';
	color: white;	
	text-shadow:1px 1px 5px black;
	border:none;
	outline: none;
	background-color: rgba(64, 56, 48, 0.85);
	border-radius:12px;
	text-align: center;
}

.login-form div {
	font:18px Arial;
	text-align: center;
	margin-top:5px;
	margin-bottom:24px;
	letter-spacing:1px;
}

.login-form .login-error {
	font:bold 24px Arial;
	color:red;
	text-shadow: 1px 1px 3px black;
}

.faded {
	position: absolute;
	inset: 0;
	background-color: rgba(64, 64, 64, 0.85);
}

input.chat {
	display: flex;
	position: absolute;
	inset: 0;
	bottom:260px;
	justify-self: center;
	align-self: end;

	width:390px;
	height:60px;
	font:bold 24px 'Side';
	color: white;	
	text-shadow:1px 1px 5px black;
	border:none;
	outline: none;
	background-color: rgba(64, 56, 48, 0.85);
	border-radius:12px;
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
}