.minigame.TABLE {
	background-color: #222;
	overflow: hidden;

	& #towel {
		position: absolute;
		width: 250px;
		height: 250px;
		left: calc( 50% - 250px / 2 );
		bottom: -250px;
		background-image:
			url("../images/minigames/TABLE-TOWEL.png");
		&.animating {
			animation-timing-function: linear;
			animation-duration: 2.5s;
			animation-fill-mode: forwards;
			animation-name: TABLE-APPLY-TOWEL;
		}
		
	}
	
	& #cleaner {
		position: absolute;
		width: 225px;
		height: 300px;
		left: calc( 50% - 225px / 2 );
		bottom: -300px;
		background-image:
			url("../images/minigames/TABLE-CLEANER-1.png");
		transition: all 0.5s ease;
		
		&.animating {
			animation-duration: 2s;
			animation-fill-mode: forwards;
			animation-name: TABLE-APPLY-CLEANER;
		}
		
	}
	
	& #sanitizer {
		position: absolute;
		width: 225px;
		height: 250px;
		left: calc( 50% - 225px / 2 );
		bottom: -250px;
		background-image:
			url("../images/minigames/TABLE-SANITIZER.png");
		transition: all 0.5s ease;
		
		&.animating {
			animation-duration: 2s;
			animation-fill-mode: forwards;
			animation-name: TABLE-APPLY-SANITIZER;
		}
		
	}
	
	& #table {
		position: absolute;
		left: calc( 50% - ( 375px / 2 ) );
		top: 30px;
		width: 375px;
		height: 750px;
		background-image:
			url("../images/minigames/TABLE-TOP.png");
		& div {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 375px;
			height: 750px;
			transition: all 1s ease;
			&.cleaned {
				opacity: 0;
			}
		}
		& #layer-1A {
			background-image:
				url("../images/minigames/TABLE-MUCK-1A.png");
			&.cleaned {
				transform: translateX( -200px );
			}
		}
		& #layer-1B {
			background-image:
				url("../images/minigames/TABLE-MUCK-1B.png");
			&.cleaned {
				transform: translateX( 200px );
			}
		}
		& #layer-2A {
			background-image:
				url("../images/minigames/TABLE-MUCK-2A.png");
		}
		& #layer-2B {
			background-image:
				url("../images/minigames/TABLE-MUCK-2B.png");
		}
		& #layer-3 {
			background-image:
				url("../images/minigames/TABLE-MUCK-3.png");
		}
		
		& .liquid {
			transform: scale( 0 );
			opacity: 0;
			transform-origin: 50% 100%;
			&.animating {
				animation-duration: 1.0s;
				animation-fill-mode: forwards;
				animation-name: TABLE-LIQUID-SPREAD;
			}
			&.cleaned {
				animation-duration: 1.0s;
				animation-fill-mode: forwards;
				animation-name: TABLE-LIQUID-CLEAN;
			}
		}
		& #layer-cleaner {
			background-image:
			url("../images/minigames/TABLE-CLEANER-DROPS.png");
		}
		& #layer-sanitizer {
			background-image:
			url("../images/minigames/TABLE-SANITIZER-DROPS.png");
		}
	}
	
	& #hint-bar {
		position: absolute;
		top: -100px;
		left: 0px;
		right: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0px;
		opacity: 0;
		transition: all 0.5s ease;
		
		& .hint {
			width: 100px;
			height: 100px;
			transition: all 0.5s ease;
			&.done {
				opacity: 0.5;
			}
		}
		
		& #hint-1 {
			background-image:
			url("../images/minigames/TABLE-HINT-TRASH.png");
		}
		& #hint-2 {
			background-image:
			url("../images/minigames/TABLE-HINT-CLEANER.png");
		}
		& #hint-3 {
			background-image:
			url("../images/minigames/TABLE-HINT-PAPERTOWEL.png");
		}
		& #hint-4 {
			background-image:
			url("../images/minigames/TABLE-HINT-SANITIZER.png");
		}
		& #hint-5 {
			background-image:
			url("../images/minigames/TABLE-HINT-PAPERTOWEL.png");
		}
		
		&.shown {
			top: 65px;
			opacity: 1;
		}
	}
		
	& #button-bar {
		background-color: rgba( 0, 0, 0, 0.0 );
		position: absolute;
		bottom: -140px;
		left: 0px;
		right: 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		opacity: 0;
		padding: 20px;
		transition: all 0.5s ease;
		&.arrived {
			bottom: 20px;
			opacity: 1;
		}
		
		& .button {
			width: 110px;
			height: 110px;
			background-color: #ccc;
			border-radius: 20px;
			background-size: cover;
			position: relative;
			
			&:active {
				transform: scale( 0.9 );
			}

			& .table-button-label {
				position: absolute;
				left: -5px;
				right: -5px;
				bottom: -30px;
				background-color: white;
				color: black;
				text-align: center;
				border-radius: 10px 10px 10px 10px;
				padding: 5px;
			}
			
			&.tab-highlighted .table-button-label {
				background-color: yellow;
			}

		}
		
		& #trash-button {
			background-image:
			url("../images/minigames/TABLE-BUTTON-TRASH.png");
		}
		& #cleaner-button {
			background-image:
			url("../images/minigames/TABLE-BUTTON-CLEANER.png");
		}
		& #towel-button {
			background-image:
		url("../images/minigames/TABLE-BUTTON-PAPERTOWEL.png");
		}
		& #sanitizer-button {
			background-image:
			url("../images/minigames/TABLE-BUTTON-SANITIZER.png");
		}
	}
	
	& #hint {
		position: absolute;
		top: 20px;
		left: 200px;
		right: 200px;
		background-color: #ccc;
		padding: 10px 20px;
		color: black;
		text-align: center;
		border-radius: 10px;
		font-weight: bold;
		font-size: 20px;
		min-width: 110px;
		transition: opacity 0.5s ease;
		&:active {
			transform: scale( 0.9 );
		}
	}
	
}

@keyframes TABLE-APPLY-CLEANER {
	0% {
		bottom: -300px;
	}
	25% {
		bottom: 0px;
		background-image:
		url("../images/minigames/TABLE-CLEANER-1.png");
	}
	35% {
		background-image:
		url("../images/minigames/TABLE-CLEANER-2.png");
	}
	65% {
		background-image:
		url("../images/minigames/TABLE-CLEANER-2.png");
	}
	75% {
		background-image:
		url("../images/minigames/TABLE-CLEANER-1.png");
		bottom: 0px;
	}
	100% {
		bottom: -300px;
	}
}
@keyframes TABLE-APPLY-SANITIZER {
	0% {
		bottom: -300px;
	}
	25% {
		bottom: 0px;
	}
	75% {
		bottom: 0px;
	}
	100% {
		bottom: -300px;
	}
}
@keyframes TABLE-LIQUID-SPREAD {
	0% {
		transform: scale( 0 );
		opacity: 0.0;
	}
	50% {
		transform: scale( 0 );
		opacity: 0.0;
	}
	60% {
		opacity: 1.0;
	}
	100% {
		opacity: 1.0;
		transform: scale( 1 );
	}
}
@keyframes TABLE-LIQUID-CLEAN {
	0% {
		opacity: 1.0;
		transform: scale( 1 );
	}
	100% {
		opacity: 0.0;
		transform: scale( 1 );
	}
}
@keyframes TABLE-APPLY-TOWEL {
	0% {
		bottom: -300px;
	}
	20% {
		bottom: 50px;
		left: 80px;
	}
	45% {
		bottom: 550px;
		left: 80px;
	}
	55% {
		bottom: 550px;
		left: 220px;
	}
	80% {
		bottom: 50px;
		left: 220px;
	}
	100% {
		left: calc( 50% - 250px / 2 );
		bottom: -250px;
	}
}