/** @format */

@font-face {
	font-family: 'Cera Pro';
	src: url('./fonts/CeraPro-Medium.woff?v=v0.5') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: block;
}

:root {
	--BAR-COLOR: url('./img/bg.jpg?v=v0.5');
	/* Фон страницы вокруг игры на широких экранах (ПК) — размытая кухня */
	--PAGE-BG: url('./img/bg-landscape.jpg?v=v0.5');
	--SHADOW-BOX: 0px 0px 0px 0px rgba(34, 60, 80, 0.2);
	/* Сцена игры: на телефоне — весь экран, на широком экране — колонка 9:16 по центру */
	--stage-w: min(100vw, calc(100vh * 9 / 16));
	/* 1 px макета: кадр 360x640, масштаб как у Unity-канваса (Expand) */
	--u: calc(var(--stage-w) / 360);
	/* 1 px альбомного макета 640x360 */
	--ul: min(calc(100vw / 640), calc(100vh / 360));
}
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-color: #e9dccb;
	background-image: var(--PAGE-BG);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Сцена: канвас Unity и лоадер, по центру экрана */
#unity-container {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--stage-w);
	transform: translateX(-50%);
	overflow: hidden;
	background-image: var(--BAR-COLOR);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 calc(var(--u) * 24) rgba(0, 0, 0, 0.25);
}

#unity-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-box-shadow: var(--SHADOW-BOX);
	-moz-box-shadow: var(--SHADOW-BOX);
	box-shadow: var(--SHADOW-BOX);
}

/* Кадр макета по центру экрана: ширина сцены (360 px макета), высота на весь экран */
.frame {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--stage-w);
	transform: translateX(-50%);
}

/* Экран загрузки (лоадер) — внутри сцены */
#unity-loading-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: var(--BAR-COLOR);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Лого и полоса проявляются, когда погас спиннер прелоадера */
#unity-loading-bar .frame {
	opacity: 0;
	transition: opacity 0.4s ease;
}

body.shell-ready #unity-loading-bar .frame {
	opacity: 1;
}

/* Лого «SPAR + Нямурай» */
#unity-logo {
	position: absolute;
	top: calc(var(--u) * 52);
	left: calc(var(--u) * 82);
	width: calc(var(--u) * 196.2);
	height: calc(var(--u) * 76.8);
	background: url('./img/logo-spar.png?v=v0.5') center / contain no-repeat;
}

#unity-loader-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--u) * 31);
}

#unity-loader-text p {
	margin: 0;
	text-align: center;
	font-family: 'Cera Pro', Arial, sans-serif;
	font-weight: 500;
	font-size: calc(var(--u) * 12);
	line-height: calc(var(--u) * 15);
	color: #ffffff;
}

/* Контейнер полосы загрузки: белая рамка r12 с отступом 4 */
.loading-container {
	position: absolute;
	left: calc(var(--u) * 28);
	bottom: calc(var(--u) * 56);
	width: calc(var(--u) * 304);
	height: calc(var(--u) * 24);
	box-sizing: border-box;
	padding: calc(var(--u) * 4);
	background-color: #ffffff;
	border-radius: calc(var(--u) * 12);
	box-shadow: 0 calc(var(--u) * 1) 0 #c4c4c4, inset 0 0 calc(var(--u) * 1) rgba(64, 52, 12, 0.5);
}

/* Дорожка: кремовая r8 с коричневой обводкой */
.loading-track {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #fff2d0;
	border-radius: calc(var(--u) * 8);
	box-shadow: inset 0 0 0 calc(var(--u) * 1) #874703;
	overflow: hidden;
}

/* Полоса прогресса */
.loading-bar {
	height: 100%;
	width: 0%;
	box-sizing: border-box;
	background: linear-gradient(180deg, #94f741 0%, #4ec216 84.6%, #4ec216 100%);
	border: calc(var(--u) * 1) solid #0f9802;
	border-radius: calc(var(--u) * 8);
	box-shadow: inset 0 calc(var(--u) * -3) calc(var(--u) * 1) rgba(0, 0, 0, 0.2);
	transition: width 0.3s ease;
}

/* Прелоадер: фон страницы, сцена с фоном кухни, затемнение 50% и спиннер из точек.
   Гаснут спиннер и затемнение — фон совпадает с лоадером под ним, поэтому смена экранов без мигания. */
#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #e9dccb;
	background-image: var(--PAGE-BG);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 9999;
}

#loading-screen .frame {
	background-image: var(--BAR-COLOR);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Затемнение под спиннером (::before рисуется раньше спиннера, поэтому под ним) */
#loading-screen .frame::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s ease;
}

#loading-screen .spinner {
	transition: opacity 0.3s ease;
}

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

#loading-screen.hidden .spinner,
#loading-screen.hidden .frame::before {
	opacity: 0;
}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--u) * 108.3);
	height: calc(var(--u) * 108);
	transform: translate(-50%, -50%);
	background: url('./img/spinner.png?v=v0.5') center / contain no-repeat;
	animation: spinner-rotate 1s steps(10) infinite;
}

@keyframes spinner-rotate {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* «Поверните устройство» */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffff url('./img/bg-landscape.jpg?v=v0.5') center / cover no-repeat;
	z-index: 9999;
	display: none;
}

/* Карточка: зелёная рамка r52 и кремовая подложка r48 с белой обводкой */
.message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: calc(var(--ul) * 328);
	height: calc(var(--ul) * 220);
	padding: calc(var(--ul) * 8) calc(var(--ul) * 8) calc(var(--ul) * 16);
	background-color: #66bc17;
	border-radius: calc(var(--ul) * 52);
	box-shadow: inset 0 calc(var(--ul) * 3) 0 rgba(255, 255, 255, 0.25),
		inset 0 calc(var(--ul) * -6) calc(var(--ul) * 2) rgba(0, 0, 0, 0.3),
		inset 0 0 calc(var(--ul) * 3) rgba(64, 52, 12, 0.5);
}

.message-content {
	box-sizing: border-box;
	height: 100%;
	padding-top: calc(var(--ul) * 40);
	text-align: center;
	background-color: #fff2d0;
	border: calc(var(--ul) * 4) solid #ffffff;
	border-radius: calc(var(--ul) * 48);
	box-shadow: 0 calc(var(--ul) * 2) calc(var(--ul) * 1) rgba(0, 0, 0, 0.25),
		inset 0 calc(var(--ul) * 3) 0 rgba(255, 255, 255, 0.25),
		inset 0 0 calc(var(--ul) * 1) rgba(64, 52, 12, 0.5);
}

.message-content img {
	display: block;
	width: calc(var(--ul) * 80);
	height: calc(var(--ul) * 80);
	margin: 0 auto calc(var(--ul) * 16);
}

.message-content p {
	margin: 0;
	font-family: 'Cera Pro', Arial, sans-serif;
	font-weight: 500;
	font-size: calc(var(--ul) * 16);
	line-height: calc(var(--ul) * 20);
	color: #874703;
}

.error {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: var(--PAGE-BG);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 9999;
	display: none;
}

.error-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #124250;
	padding: 30px;
	border-radius: 15px;
	text-align: center;
	font-size: 20px;
	-webkit-box-shadow: var(--SHADOW-BOX);
	-moz-box-shadow: var(--SHADOW-BOX);
	box-shadow: var(--SHADOW-BOX);
}

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

/* «Поверните устройство» — только на сенсорных устройствах; на ПК узкое окно игру не закрывает */
@media screen and (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
	.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;
}

.error-animation {
	animation: rotate-error 2s linear infinite;
	width: 80px;
	height: 80px;
}

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