:root {
	--game-size: min(75vh, 75vw);
	/* --game-background: url("https://picsum.photos/800"); */
	--game-background: url("../assets/puzzle_1.jpg");
}

body {
	height: 100vh;
	width: 100vw;

	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#game {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#game h2 {
	font-size: 50px;
}

@media screen and (width < 900px) {
	#game h2 {
		font-size: 30px;
	}
	#game .button {
		font-size: 20px;
	}

}

.game {
	width: var(--game-size);
	height: var(--game-size);
	position: relative;
}

.gameContainer {
	width: var(--game-size);
	height: var(--game-size);
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.gamePuzzle {
	/* border: 1px solid white; */
	width: calc(33.33% - 2px);
	height: calc(33.33% - 2px);
	position: absolute;
	background: var(--game-background);
	transition: top 300ms, left 300ms;
	background-size: 300%;
	color: white;
	font-size: 30px;
}

.gamePuzzle.active {
	box-shadow: 0px 0px 20px white;
	z-index: 1;
}

.gamePuzzlePlace {
	/* border: 1px solid red; */
	width: calc(33.33% - 2px);
	height: calc(33.33% - 2px);
}

.gameOverScreen, .gameErrorScreen {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	background-color: #59245F;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: none;
	z-index: 2;
}

.gameOverScreen {
	background-size: 100%, 100%;
	background: #59245F;
	background-size: cover, contain;
}

.gameOverScreen.active, .gameErrorScreen.active {
	display: flex;
	animation: smoothShow 1s linear 200ms both;
}

@keyframes smoothShow {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.gameHint {
	inset: 0;
	/* top: 1px;
	left: 1px; */
	position: absolute;
	width: var(--game-size);
	height: var(--game-size);
	background: var(--game-background);
	background-size: 100%;
	display: none;
	z-index: 2;
}

.gameShowHint {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0;
	left: calc(100%);
	background: url("../assets/moricon-logo-white-svg.png") no-repeat;
	background-size: contain;
        color: #ffffff;
	cursor: pointer;
}

.gameShowHint:hover ~.gameHint {
	display: block;
}

.gameOverDescription {
	font-size: 23px;
	color: #ffffff;
}

#game .zab {
	position: relative;
}
#game .zab::after {
	content: "";
	height: .15em;
	width: .15em;
	background: var(--momoroz);
	position: absolute;
	top: 0px;
	left: 5.5%;
	border-radius: 50%;
}

.gameType {
	font-size: 23px;
	font-family: Ubuntu;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

.gameType p {
	margin: 0 5px;
}

.gameType :where(input, label) {
	width: 100px;
	height: 50px;
	position: relative;
	cursor: pointer;
}

.gameType input {
	visibility: hidden;
}

.gameType label span {
	position: absolute;
	content: " ";
	width: 100px;
	height: 50px;
	background: #ffffff;
	border-radius: 25px;
	z-index: 1;
	top: 0;
}

.gameType label span::after {
	position: absolute;
	content: " ";
	width: 48px;
	height: 48px;
	top: 1px;
	right: calc(100% - 49px);
	background: #DA1A82;
	border-radius: 50%;
	transition: 400ms;
	z-index: 1;
}

.gameType input:checked + span::after {
	right: 1px;
}