/* CSS RESET */

*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html {font-size: 100%;}
html:focus-within {scroll-behavior: smooth;}
body {min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5;}
a:not([class]) {text-decoration-skip-ink: auto;}
img, picture {display: block; max-width: 100%;}
input, button, textarea, select {font: inherit;}
@media (prefers-reduced-motion: reduce) {html:focus-within {scroll-behavior: auto;} *, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}

/* GENERAL */

body {
	display: grid;
	place-content: center;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	font-family: 'Caveat Brush', Georgia, serif;
}

.hidden {
	display: none !important;
}

/* GAME */

.game-container {
	display: grid;
	place-content: center;
	width: 100vw;
	height: 100vh;
	background-color: black;
	cursor: url(../gui/cursor/default.png), default;
	user-select: none;
}

.game-container a {
	cursor: url(../gui/cursor/pointer.png) 8 0, pointer;

}

.game-container-inner {
	position: relative;
	width: 1920em;
	height: 1080em;
	background-color: #333333;
	overflow: hidden;
}

.game-container-inner > * {
	position: absolute;
}

/* Theather */

.theather {
	inset: 0;
	filter: brightness(100%);
	transition: filter 1s ease-in-out;
}

.theather-darkness {
	filter: brightness(50%);
}

.non-existing-animation {
	animation-name: does-not-exist;
}
/* theather has its own stylesheet */

/* Wait clock */

.wait-clock-container {
	inset: 0;
	pointer-events: none;
}

.wait-clock-container > img {
	position: absolute;
	height: 40em;
	border-radius: 100vw;
	animation-name: rotate-full;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transition: opacity 500ms ease-in;
	opacity: 0.75;
}

.wait-clock-container > img.clock-hiding {
	transition: opacity 2s ease-in;
}

.wait-clock-container > img.clock-hidden {
	opacity: 0;
}

.wait-clock-container > img:nth-child(1) {
	left: 585em;
	top: 857em;
	animation-duration: 30s;
}
.wait-clock-container > img:nth-child(2) {
	left: 947em;
	top: 750em;
	animation-duration: 32s;
}
.wait-clock-container > img:nth-child(3) {
	left: 1064em;
	top: 985em;
	animation-duration: 33s;
}
.wait-clock-container > img:nth-child(4) {
	left: 1385em;
	top: 625em;
	animation-duration: 25s;
}
.wait-clock-container > img:nth-child(5) {
	left: 860em;
	top: 18em;
	animation-duration: 36s;
}
.wait-clock-container > img:nth-child(6) {
	left: 38em;
	top: 717em;
	animation-duration: 39s;
}
.wait-clock-container > img:nth-child(7) {
	left: 355em;
	top: 535em;
	animation-duration: 37s;
}
.wait-clock-container > img:nth-child(8) {
	left: 1397em;
	top: 75em;
	animation-duration: 38s;
}
.wait-clock-container > img:nth-child(9) {
	left: 344em;
	top: 983em;
	animation-duration: 38s;
}
.wait-clock-container > img:nth-child(10) {
	left: 1199em;
	top: 716em;
	animation-duration: 31s;
}
.wait-clock-container > img:nth-child(11) {
	left: 1198em;
	top: 810em;
	animation-duration: 30s;
}
.wait-clock-container > img:nth-child(12) {
	left: 1446em;
	top: 984em;
	animation-duration: 38s;
}
.wait-clock-container > img:nth-child(13) {
	left: 404em;
	top: 858em;
	animation-duration: 39s;
}
.wait-clock-container > img:nth-child(14) {
	left: 975em;
	top: 646em;
	animation-duration: 36s;
}
.wait-clock-container > img:nth-child(15) {
	left: 1852em;
	top: 377em;
	animation-duration: 31s;
}

/* Curtain */

.curtain {
	width: 100%;
	height: 100%;
	pointer-events: none;
	filter: brightness(100%) contrast(100%);
	filter: brightness(80%) contrast(110%);
	transition: filter 1s ease-in-out;
}

.curtain > * {
	position: absolute;
	inset: 0;
}

.curtain-color {
	background-color: #8F1C1C;
	opacity: 0;
	transition: opacity 0.5s ease-out;
}

.curtain-color.transparent {
	background-color: transparent;
	transition: background-color 0s linear 1s;
}

.curtain-images {
	opacity: 0;
}

.curtain-images > * {
	position: absolute;
}

.curtain-base {
	left: 0;
	bottom: 0;
	width: 1920em;
	height: 128em;
	transform: translateY(100%);
	transition: transform 1s ease-in-out;
	transition-delay: 0s;
}

.curtain-right {
	top: 0;
	right: 0;
	width: 988em;
	height: 1080em;
	transform: translateX(100%);
	transition: transform 4s ease-in-out;
	transition-delay: 1s;
}

.curtain-left {
	top: 0;
	left: 0;
	width: 1013em;
	height: 1080em;
	transform: translateX(-100%);
	transition: transform 4s ease-in-out;
	transition-delay: 1s;
}

/* curtain dark */

.curtain-dark {
	filter: brightness(30%) contrast(120%);
}

/* curtain drawn */

.curtain-drawn {
	pointer-events: all;
}

.curtain-drawn > .curtain-color {
	opacity: 1;
}

.curtain-drawn .curtain-base {
	transition: transform 1s ease-in-out;
	transition-delay: 4s;
}

.curtain-drawn .curtain-right {
	transition: transform 4s ease-in-out;
	transition-delay: 0s;
}

.curtain-drawn .curtain-left {
	transition: transform 4s ease-in-out;
	transition-delay: 0s;
}

.curtain-drawn > .curtain-images > * {
	transform: translate(0%);
}

/* curtain imags loaded */

.curtain-images-loaded > .curtain-images {
	opacity: 1;
	transition: opacity 1s ease-in;
}

.curtain-images-loaded

/* Fog */

.fog {
	width: 100%;
	height: 100%;
	background-image: url(../gui/fog.png);
	background-size: 100% 100%;
	pointer-events: none;
}

/* Click detector */

.click-detector-container {
	width: 100%;
	height: 100%;
}

.click-detector-container.deactivated {
	pointer-events: none;
}

.click-detector-img {
	width: 1920em;
	height: 1080em;
}

.click-detector-container area {
	cursor: url(../gui/cursor/pointer.png) 8 0, pointer;
}

/* Guide */

.guide {
	inset: 0;
	transition: opacity 0.5s ease-in-out;
	opacity: 1;
}

.guide.invisible {
	opacity: 0;
	pointer-events: none;
}

.guide > img {
	width: 100%;
	height: 100%;
}

/* Info */

.info-container {
	inset: 0;
	background-color: #00000038;
	display: grid;
	place-content: center;
	opacity: 1;
	transition: opacity 0.6s ease-out;
}

.info-container.invisible {
	opacity: 0;
	pointer-events: none;
}

.info {
	width: 480em;
	height: 666em;
	background-color: rgb(110, 70, 16);
	border-width: 6em;
	border-style: double;
	border-color: #DC9224;
	box-shadow: 0 0 26em #ecb35dd2;
	transition: transform 0.6s ease-out;
	transform: translateY(0%);
}

.info-container.invisible .info {
	transition-duration: 0s;
	transition-delay: 0.6s;
	transform: translateY(-10%);
}

.info-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40em;
	width: 100%;
	height: 100%;
	background-color: #07070a;
	box-shadow: inset 0 0 40em #ecb35d81;
	cursor: url(../gui/cursor/text.png) 5 13, text;
}

.info-nazev {
	padding: 8em 0;
}

.info-nazev-inner {
	font-size: 50em;
	color: whitesmoke;
	letter-spacing: 0.1em;
}

.info-hr {
	background-color: #868686;
	width: 315em;
	height: 2em;
}

.info-text {
	width: 290em;
	margin: 0 auto;
	padding: 40em 0;
}

.info-text-inner {
	font-size: 26em;
	color: #e0e0e0;
}

.info-text-inner a {
	position: relative;
	text-decoration: none;
	color: inherit;
	font-size: inherit;
}

.info-text-inner a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0.11538em;
	display: block;
	width: 100%;
	height: 0.11538em;
	background-color: #e0e0e0;
	opacity: 1;
	transition: opacity 120ms ease-out;
	border-radius: 100vw;
}

.info-text-inner a:hover::after {
	opacity: 0;
}

.info-year {
	color: #b16e09;
}

.info-year.underlined {
	text-decoration: underline;
}

.info-table {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em 14em;
}

.info-table-data {
	font-size: 25em;
	color: #cec8c5;
}

.info-table-data:nth-child(odd) {
	text-align: right;
}

.accent-color {
	color: #b16e09;
}

.info-making-of {
	padding-top: 40em;
}

.info-making-of-inner {
	font-size: 26em;
	color: #cec8c5;
}

.info-making-of-inner > a {
	color: inherit;
	transition: color 70ms ease-out;
}

.info-making-of-inner > a:hover {
	color: #d8a456;
}

/* Loading info */

.loading-info-container {
	inset: 0;
	display: grid;
	place-content: center;
	transition: opacity 1s ease-in-out;
	opacity: 1;
}

.loading-info-container-hidden {
	opacity: 0;
	pointer-events: none;
}

.loading-info {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 540em;
	height: 430em;
}

.loading-info > * {
	position: absolute;
}

.loading-info-bg {
	inset: 0;
	top: 140em;
	background-color: #000000d3;
	filter: blur(20em);
}

.loading-info-img {
	top: 32em;
	width: 218em;
	height: 218em;
	border-radius: 100vw;
	opacity: 0;
	animation-name: loading-info-img;
	animation-duration: 16s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

.loading-info-img-loaded {
	opacity: 1;
	transition: opacity 1s ease-in-out;
}

.loading-info-text-container {
	top: 295em;
}

.loading-info-text {
	font-size: 36em;
	color: whitesmoke;
}

/* Hint arrow */

.start-game-hint-arrow {
	left: 534em;
	top: 0em;
	width: 129em;
	height: 972em;
	filter: drop-shadow(-4em -2em 6em #0000006c);
	animation-name: start-game-hint-arrow;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	transition: opacity 2s ease-in;
}

.start-game-hint-arrow-hidden {
	opacity: 0;
	transition-duration: 0.4s;
}

/* Bottom bar */

.bottom-bar {
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 1920em;
	height: 50em;
	background-color: #000000e5;
	transform: translateY(0%);
	transition: transform 0.2s ease-out;
}

.bottom-bar:hover {
	transform: translateY(0%);
}

.bottom-bar-hidden {
	transform: translateY(100%);
}

.bottom-bar-always-show {
	transform: translateY(0%);
}

.bottom-bar-item-container {
	display: flex;
}

.bottom-bar-item-container + .bottom-bar-item-container::before {
	content: '|';
	margin: 0 2em;
	color: whitesmoke;
	font-size: 30em;
	opacity: 0.8;
}

.bottom-bar-item {
	display: block;
	padding: 0 0.25em;
	color: whitesmoke;
	font-size: 30em;
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 1s ease-in-out;
}

.bottom-bar-item.disabled {
	opacity: 0.4;
	pointer-events: none;
}

.bottom-bar-item:hover {
	opacity: 1;
}

/* Full screen button */

.fullscreen-btn {
	right: 10em;
	top: 15em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 4em;
	width: 64em;
	height: 64em;
	transition: padding .1s ease-in-out;
	user-select: none;
}

.fullscreen-btn:hover {
	padding: 0;
}

.fullscreen-btn > img {
	width: 100%;
	height: 100%;
	transition: transform .2s 2s;
}

.fullscreen-btn-1 {
	transform: rotate(180deg);
}

.fullscreen-btn-2 {
	transform: rotate(-90deg);
}

.fullscreen-btn-3 {
	transform: rotate(90deg);
}

.fullscreen-btn-4 {
	transform: rotate(360deg);
}

.fullscreen-active >.fullscreen-btn-1 {
	transform: rotate(0deg);
}

.fullscreen-active > .fullscreen-btn-2 {
	transform: rotate(90deg);
}

.fullscreen-active > .fullscreen-btn-3 {
	transform: rotate(270deg);
}

.fullscreen-active > .fullscreen-btn-4 {
	transform: rotate(180deg);
}

/* Mute button */

.mute-btn {
	right: 10em;
	top: 95em;
	width: 64em;
	height: 64em;
	user-select: none;
}

.mute-tooltip {
	display: none;
}

.mute-btn-img-container {
	position: absolute;
	padding: 4em;
	width: 100%;
	height: 100%;
	transition: padding .1s ease-in-out,
				opacity .1s ease-in;
}

.mute-btn:hover > .mute-btn-img-container {
	padding: 0;
}

.mute-btn-img {
	width: 100%;
	height: 100%;
}

.unmuted-icon {
	opacity: 1;
}

.muted-icon {
	opacity: 0;
}

.mute-btn-muted > .unmuted-icon {
	opacity: 0;
}

.mute-btn-muted > .muted-icon {
	opacity: 1;
}

/* Tooltip */

.fullscreen-tooltip, .mute-tooltip {
	position: absolute;
	display: flex;
	align-items: center;
	height: 64em;
	width: max-content;
	transform: translateX(-96%);
	pointer-events: none;
	transition: transform 1s 1s, opacity 0.3s ease-out;
	opacity: 0;
}

.fullscreen-tooltip-text, .mute-tooltip-text {
	padding: 10em 30em;
	background-color: black;
	background-image: linear-gradient(to right, #0f0f0f, #1d1609, #1d0f0e);
	border-radius: 28em;
}

.fullscreen-tooltip-text-inner, .mute-tooltip-text-inner {
	font-size: 30em;
	color: white;
}

.fullscreen-tooltip-arrow, .mute-tooltip-arrow {
	height: 10em;
	width: 10em;
	border-width: 16em;
	border-style: solid;
	border-color: transparent transparent transparent #1d0f0e;
	transform: translateX(-4em);
}

.fullscreen-btn:hover > .fullscreen-tooltip, .mute-btn:hover > .mute-tooltip {
	transform: translateX(-100%);
	opacity: 1;
	transition: transform 0.3s ease-out 1s, opacity 0.3s ease-out 1s;
}

/* WAIT OVERLAY */

.wait-overlay {
	position: absolute;
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
	background-color: #000000d0;
	user-select: none;
}
.wait-overlay-inner {
	color: whitesmoke;
	font-size: 1.75rem;
	letter-spacing: .125em;
}

.audio-wrapper {
	display: none;
}

.imgs-preload {
	display: none;
}