#game-zone {
	display: flex;
	flex-direction: column;
	padding: 1em;
	& > div {
		display: flex;
		flex-direction: column;
		padding: 1em;
}
#game-board {
	margin: 1rem;
}

#solution-zone {
	/*position: sticky;
	bottom: 3%;*/
	width: 70vw;
	margin: auto;
	padding: 0.5rem;
	background-color: black;
	border: 2px solid green;
	border-radius: 0.7em;
	color: green;
	font-size: 2rem;
	text-align: center;
	min-height: 3rem;
}
/*
Letters to symbol
*/

#letters-to-symbol {
	.hint {
		float: left;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
}

#counter {
	border: 2px solid orange;
	color: orange;
	font-size: 3rem;
}
#counter::before {
	content: "score : ";
}
	

/*
Scroll images
*/

.sample-symbol {
	display: inline-block;
	width: 3.2rem;
	height: 3.2rem;
	margin: 0.7rem;
	font-size: 2.8rem;
	text-align: center;
	overflow: hidden;
	& img {
		width: 2.8rem;
	}
}

.scroll-images {
	display: inline-block;
	/*width: 3em;*/
}

/*
Memory
*/
#memory {
	display: grid;
	column-gap: 1rem;
	row-gap: 1.5rem;
	margin: 1rem;
}
	.easy {
		grid-template-columns: repeat(4, 1fr);
		--medium-card-width: 15vw;
	}
	.medium {
		grid-template-columns: repeat(6, 1fr);
		--medium-card-width: 10vw;
	}
	.hard {
		grid-template-columns: repeat(8, 1fr);
		--medium-card-width: 7vw;
	}
.card-container {
	--container-width: clamp(2rem, var(--medium-card-width), 5rem);
	width: var(--container-width);
	height: calc(var(--container-width)*1.5);
	margin: auto;
}

[class^=memory-card] {
	/*width: clamp(2rem, var(--medium-card-width), 5rem);*/
	--card-width: clamp(2rem, var(--medium-card-width), 5rem);
	width: var(--card-width);
	/*height: calc(var(--card-width)*1.5);*/
}

/*
Dobble
*/

#dobble {
	position: relative;
	height: 95svh;
	width: 95svw;
	--game-card-width: min(50vw, 85vh);
	
	#game-master {
		width: var(--game-card-width);
		&.easy {
			width: fit-content;
		}
		/*height: calc(1.5*(var(--game-card-width)));*/
		border: 2px solid gold;
		border-radius: 2em;
		margin: 2em auto;
		padding: 1em;
		&:has(.fade-out) {
			transition: opacity 0.9s;
			opacity: 0;
			@starting-style {
				opacity: 1;
			}
		}
	}
	
	#player {
		/*position: absolute;
		bottom: 0;*/
		width: fit-content;
		border: 2px solid gold;
		border-radius: 2em;
		margin: auto;
		padding: 1em;
	}
	--card-width-unit: min(1vw, 0.5rem);
	.player-card {
		/*width: 8vw;*/
		width: calc(var(--card-width-unit)*8);
	}
	.size-0 {
		/*width: 5vw;*/
		width: calc(var(--card-width-unit)*5);
	}
	.size-1 {
		/*width: 8vw;*/
		width: calc(var(--card-width-unit)*8);
	}
	.size-2 {
		/*width: 11vw;*/
		width: calc(var(--card-width-unit)*11);
	}
	.size-3 {
		/*width: 13vw;*/
		width: calc(var(--card-width-unit)*13);
	}
	.size-4 {
		/*width: 16vw;*/
		width: calc(var(--card-width-unit)*16);
	}
	.size-5 {
		/*width: 20vw;*/
		width: calc(var(--card-width-unit)*20);
	}
	/*
	.fade-out {
		transition: opacity 0.9s;
		opacity: 0;
		@starting-style {
			opacity: 1;
		}
	}
	*/
	.fade-in {
		animation: fade-in 0.9s ease-out forwards;
	}
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Piano player */
#piano-player {
	#piano {
		background-color: lightgrey;
		width: fit-content;
		padding; 1rem;
	}
	.key-note {
		width: 3rem;
		height: 15rem;
		&.sharp {
			background-color: black;
			width: 1.5rem;
			height: 7rem;
			position: relative;
			bottom: 8rem;
			margin-left: -0.75rem;
			margin-right: -0.75rem;
		}
	}
}

#catch-em {
	/*
	#game-screen {
		background-color: white;
		border: 1px solid red;
	#game-screen.bad-collision {
			background-color: lightblue;
	}
	}
	*/
	canvas {
		background-color: white;
		border: 1px solid red;
		&.bad-collision {
			background-color: lightblue;
		}
		&.good-collision {
			background-color: lightyellow;
		}
	}
	#arrows {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		font-weight: bold;
		font-size: 3rem;
		margin: 0;
		padding: 0;
		height: auto;
		& button {
			font-size: 4rem;
			font-weight: bold;
			width: 100%;
		}
	}
	#sack {
		width: 50px;
		height: 50px;
		border: 2px solid green;
		filter: hue-rotate(180deg);
	}
	
}
#mastermind {
	#player-grid {
		display: grid;
		/*grid-template-columns: repeat(4,1fr);
		width: 50%;
		height: 4rem;
		background-color: red;*/
		&.symbols-4 {
			grid-template-columns: repeat(4,1fr);
		}
		&.symbols-5 {
			grid-template-columns: repeat(4,1fr);
		}
		&.symbols-6 {
			grid-template-columns: repeat(4,1fr);
		}
	}
}

#coded-grid {
	table, th, td {
	border: 1px solid;
	}
	img {
		width: 2rem;
	}
	#coded-message {
		margin : 3rem;
		span {
			margin: 0 2rem;
		}
	}
}