*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body {
	width: 100%;
	height: 100vh;
}

.wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: hsl(190, 52%, 84%);
}

.wrap .stacking {
	position: relative;
	width: 450px;
	height: calc(100vh - 80px);
	background-color: hsl(201, 43%, 85%);
	border-radius: 7px;
	box-shadow: -2px -2px 5px rgba(0,0,0,0.3) inset,
				 2px  2px 5px rgba(255,255,255,0.8) inset;
	isolation: isolate;
}

.wrap .scoreboard {
	width: 450px;
	height: auto;
	padding: 10px;
}

.wrap .scoreboard h4 {
	font-size: 14px;
	line-height: 1.2;
	font-family: 'Unispace', monospace;
	display: grid;
	grid-template-columns: 130px auto;
	min-width: calc(50% - 80px);
	font-weight: 600;
	letter-spacing: 1px;
}

.wrap .scoreboard h4 span#score {
	color: hsl(216, 100%, 30%);
	font-family: 'Unispace', monospace;
	letter-spacing: 1px;
}

.wrap .scoreboard h4 span#high-score {
	color: hsl(36, 100%, 50%);
	font-family: 'Unispace', monospace;
	letter-spacing: 1px;
}

.wrap .stacking .stacking-container {
	--padding: 30px;
	--background: hsl(189, 62%, 91%);
	position: relative;
	width: calc(100% - var(--padding));
	height: calc(100% - var(--padding));
	margin: calc(var(--padding) / 2);
	background-color: var(--background);
	box-shadow: 3px 3px 5px rgba(0,0,0,0.43) inset,
				-2px -2px 2px rgba(0,0,0,0.25),
				2px 2px 2px rgba(255,255,255,0.3);
	border-radius: 5px;
	padding: 5px;
	overflow: hidden;
	z-index: -1;
}
.wrap .stacking .stacking-container .level {
	position: absolute;
	width: auto;
	height: auto;
	padding: 10px;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	display: none;
}

.wrap .stacking .stacking-container .level div {
	width: 20px;
	height: 20px;
	font-size: 18px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	opacity: 0;
	translate: 100px 0;
	color: hsl(184, 66%, 22%);
	animation: appear .5s var(--i) linear forwards,
				opaque .2s var(--i) linear forwards;
}

.wrap .stacking .stacking-container .level div:nth-child(6) {
	margin-left: 20px;
}

.wrap .stacking .stacking-container .block {
	--height: calc(100% / 27);
	--width: 200px;
	width: var(--width);
	height: var(--height);
	position: absolute;
	bottom: calc(var(--height) *(var(--i)));
	left: 0;
	border-radius: 3px;
	box-shadow: 2px 2px 2px hsl(201, 100%, 74%) inset,
				-2px -2px 2px hsl(201, 100%, 34%) inset;
	background-color: hsl(201, 100%, 44%);
	filter: hue-rotate(calc((360deg / 26) * var(--i)));
	z-index: 1;
}

.wrap .stacking .stacking-container .block:nth-child(3) {
	left: calc(50% - (var(--width) / 2));
	bottom: 0;
}

.wrap .stacking .stacking-container .block .excess {
	position: absolute;
	content: '';
	width: var(--width);
	height: 100%;
	background-color: inherit;
	box-shadow: inherit;
	border-radius: inherit;
	left: var(--left);
	right: var(--right);
	top: 0;
	transform-origin: var(--origin) bottom;
	animation: parted .3s ease-in-out forwards,
			   drop .3s .3s ease-in-out forwards,
			   disappear .3s .3s ease-in-out forwards;
	z-index: 25;

}

.wrap .stacking .percent {
	width: 50px;
	height: calc(100% - 30px);
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 0;
	display: grid;
	grid-template-rows: repeat(27, 1fr);
}

.wrap .stacking .stacking-container .percent-right {
	width: 70px;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
}

.wrap .stacking .stacking-container .percent-right .value-percent {
	/*--bottom: 0;*/
	--height: calc(100% / 27);
	--background: ;
	width: 100%;
	height: var(--height);
	background-color: var(--background);
	position: absolute;
	bottom: calc((100% / 27) * var(--bottom));
	border-radius: 5px;
	transition: .2s linear;
	font-size: 12px;
	font-weight: 600;
	color: var(--color);
	display: grid;
	align-items: center;
	justify-content: center;
	clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
	clip-path: polygon(55px 0, 100% 50%, 55px 100%, 0 100%, 0 0);
}

.wrap .stacking .percent .value {
	width: 100%;
	height: 100%;
	font-weight: 600;
	display: grid;
	align-items: center;
	padding-left: 10px;
	font-size: 12px;
	background: var(--background);
	color: var(--color);
	grid-row-start: var(--row);
}
.wrap .stacking .percent .value:first-child {
	/*border-radius: 0 0 0 5px;*/
}

@keyframes parted {
	to {
		rotate: var(--rotate);
	}
}

@keyframes disappear {
	to {
		opacity: 0;
	}
}
@keyframes drop {
	to {
		translate: 0 400%;
	}
}

@keyframes appear {
	from {
		translate: 100px 0;
	}
	to {
		translate: 0 0;
	}
}

@keyframes opaque {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.stacking .select {
	position: absolute;

	top: 100px;
	left: 100px;
}