/** @format */

:root {
	--BAR-COLOR: linear-gradient(180deg, #3fc5d7 0%, #9ae1e9 37%, #9ae1e9 100%);
	/* 1 px of the Figma frame (360 wide) in the 9:16 game column */
	--U: calc(min(100vw, 100vh * 0.5625) / 360);
	/* 1 px of the landscape frame (640×360) */
	--V: calc(min(100vw, 100vh * 1.7778) / 640);
	--TEXT-COLOR: #145d65;
	--SHADOW-BOX: 0px 0px 0px 0px rgba(34, 60, 80, 0.2);
	--HEIGHT-LOADBAR: 18px;
}
canvas:focus {
	outline: none;
}

html,
body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	height: 100%;
	background-image: var(--BAR-COLOR);
	background-position-x: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-size: 100% 100%;
}

#unity-container {
	position: fixed;
	width: 100%;
	height: 100%;
	background-image: var(--BAR-COLOR);
	background-position-x: 50%;
	background-repeat: no-repeat;
}

#unity-canvas {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	-webkit-box-shadow: var(--SHADOW-BOX);
	-moz-box-shadow: var(--SHADOW-BOX);
	box-shadow: var(--SHADOW-BOX);
}
/* Экран загрузки */
#unity-loading-bar {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-image: var(--BAR-COLOR);
}

/* Кадр «лоадер»: колонка 9:16 по ширине канваса, элементы в px макета (--U) */
.pz-frame {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100vw, 100vh * 0.5625);
	height: 100%;
	overflow: hidden;
}
.pz-el {
	position: absolute;
	left: calc(var(--x) * var(--U));
	width: calc(var(--w) * var(--U));
	height: calc(var(--h) * var(--U));
	display: block;
	pointer-events: none;
}
/* якоря как у экрана Loading в Unity */
.pz-top {
	top: calc(var(--y) * var(--U));
}
.pz-center {
	top: calc(50% + (var(--y) - 320) * var(--U));
}
.pz-bottom {
	bottom: calc((640 - var(--y) - var(--h)) * var(--U));
}
.pz-vignette {
	position: absolute;
	inset: 0;
	background: url('./img/loader/vignette.png') center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Полоса загрузки: трек 294×24, заливка 16..286 px внутри (9-slice, как в Unity) */
.pz-track {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0 calc(13.333 * var(--U));
	border-image: url('./img/loader/progress-track.png') 0 40 fill / 0 calc(13.333 * var(--U)) stretch;
}
.pz-fill {
	position: absolute;
	/* track has 13.333 px side borders: offset from its inner edge */
	top: calc(4 * var(--U));
	left: calc((4 - 13.333) * var(--U));
	height: calc(16 * var(--U));
	width: calc(16 * var(--U));
	border-radius: calc(8 * var(--U));
	background: linear-gradient(180deg, rgba(255,174,223,1.00) 0%, rgba(254,150,212,1.00) 9%, rgba(255,125,200,1.00) 17%, rgba(253,116,194,1.00) 26%, rgba(253,109,189,1.00) 34%, rgba(252,101,184,1.00) 43%, rgba(252,94,179,1.00) 51%, rgba(250,82,170,1.00) 60%, rgba(245,67,157,1.00) 68%, rgba(239,52,142,1.00) 77%, rgba(233,42,132,1.00) 85%, rgba(230,38,126,1.00) 94%, rgba(229,37,125,1.00) 100%);
	transition: width 0.3s ease;
}

#loading-screen {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-image: var(--BAR-COLOR);
	background-position-x: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	background-size: 100%;
	background-attachment: fixed;
	z-index: 9999;
	transition: opacity 0.5s ease;
	opacity: 1;
}

#loading-screen.hidden {
	opacity: 0;
	pointer-events: none;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: var(--BAR-COLOR);
	z-index: 9999;
	display: none;
}

.error {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: var(--BAR-COLOR);
	z-index: 9999;
	display: none;
}


/* Кадр «поверните устройство» 640×360 */
.pz-frame-land {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(100vw, 100vh * 1.7778);
	height: calc(min(100vw, 100vh * 1.7778) * 0.5625);
}
.pz-frame-land .pz-el {
	left: calc(var(--x) * var(--V));
	top: calc(var(--y) * var(--V));
	width: calc(var(--w) * var(--V));
	height: calc(var(--h) * var(--V));
}
.pz-frame-land .pz-card {
	box-sizing: border-box;
	background: #fff;
	border: calc(4 * var(--V)) solid #2ad1c5;
	border-bottom-color: #1fa99f;
	border-radius: calc(32 * var(--V));
	pointer-events: auto;
}
.pz-rotate-icon {
	position: absolute;
	left: calc(118 * var(--V));
	top: calc(32 * var(--V));
	width: calc(60 * var(--V));
	height: calc(60 * var(--V));
	animation: rotate-clockwise 2s linear infinite;
}
.pz-card-text {
	position: absolute;
	left: calc(20 * var(--V));
	right: calc(20 * var(--V));
	top: calc(108 * var(--V));
	margin: 0;
	text-align: center;
	font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
	font-weight: 600;
	font-size: calc(16 * var(--V));
	line-height: calc(26 * var(--V));
	color: var(--TEXT-COLOR);
}

/* Ошибка: белая карточка с бирюзовой обводкой, как попапы игры */
.error-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(304 * var(--U));
	box-sizing: border-box;
	padding: calc(32 * var(--U)) calc(24 * var(--U));
	background: #fff;
	border: calc(4 * var(--U)) solid #2ad1c5;
	border-radius: calc(32 * var(--U));
	text-align: center;
}
.error-message p {
	margin: 0;
	font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
	color: var(--TEXT-COLOR);
}
.pz-error-title {
	font-weight: 700;
	font-size: calc(28 * var(--U));
	line-height: calc(30 * var(--U));
	margin-bottom: calc(16 * var(--U)) !important;
}
.pz-error-text {
	font-weight: 600;
	font-size: calc(16 * var(--U));
	line-height: calc(26 * var(--U));
}

p {
	font-family: Arial;
	color: white;
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	.overlay {
		display: block;
	}
}

@keyframes rotate-clockwise {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(15deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@keyframes rotate-error {
	0% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(-10deg);
	}
}

.rotate-animation {
	animation: rotate-clockwise 2s linear infinite;
}


input,
textarea {
	caret-color: transparent;
	-webkit-user-select: none;
}