@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

html {
    height: 100%;
}

canvas {
    outline: none;
}

body {
    height: 100%;
    margin: 0;
	padding: 0;
	background: radial-gradient(ellipse farthest-corner at center, #2D3248, #1D2130) no-repeat fixed;
}

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

#unity-container { position: absolute }
#unity-container.unity-desktop {transform: translate(calc((100vw - min(calc(100vh * (9/16)), 100vw) )/ 2), 0%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { 
	width: min(calc(100vh * (9/16)), 100vw);
	max-width: 100%;
	max-height: 100%;
	height: auto;
	aspect-ratio:  9/16;
	background-size: cover;
	background: url('background_pattern.png') no-repeat center;
}
.unity-mobile #unity-canvas { width: 100%; height: 100% }

#unity-loading-bar { 
    position: absolute; 
    left: 50%; 
    top: 40%; 
    transform: translate(-50%, -50%); 
    display: none; 
}


#unity-logo { 
	width: 275px; 
	height: 283px; 
	margin: auto;
	background: url('ppnards-logo.png') no-repeat center;
}

#unity-progress-bar-empty {
	width: 337px; 
	height: 17px; 
	margin: auto;
	display: block;
	transform: translate(-10%, 1750%); 
	background: linear-gradient(to right, #3a3f4b, #1e2430); /* цвет фона */
	border-radius: 10px; /* закругление краев */
	box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.5); /* тень для эффекта глубины */
}

#unity-progress-bar-full {
	width: 0%;
	height: 17px;
	display: block;
	background-size: cover;
	background: linear-gradient(to right, #52A0FD, #A066FE); /* Градиент от голубого к фиолетовому */
	border-radius: 12px; /* Закругленные края */
}

#progress-label {
	font-family: 'Inter', sans-serif;
	width: 337px;
	height: 32px;
	font-size: 14px;
	margin: auto;
	color: white;
	text-align:center;
	vertical-align: middle;
	display: flex;
	justify-content: center; /* Горизонтальное выравнивание */
	align-items: center;
}

#progress-text {
	font-family: 'Inter', sans-serif;
	width: 337px;
	height: 14px;
	font-size: 14px;
	margin: auto;
	color: white;
	text-align:center;
	vertical-align: middle;
	display: flex;
	justify-content: center; /* Горизонтальное выравнивание */
	align-items: center;
}

#version-text {
	font-family: Arial, sans-serif;
	width: 337px;
	height: 14px;
	font-size: 12px;
	margin: auto;
	text-align:center;
	vertical-align: middle;
	display: flex;
	justify-content: center; /* Горизонтальное выравнивание */
	align-items: center;/* Обычный вес */
	color: #6c757d; /* Серый цвет */
}

#main-header {
	position: absolute;
	top: 24%;
	font-family: 'Inter', sans-serif;
	width: 100%;
	height: 22px;
	font-size: 2.2vh;
	margin: auto;
	transform: translate(0, 48%);
	color: white;
	text-align:center;
	vertical-align: middle;
	display: flex;
}

#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }