.HANDWASHING-TECHNIQUE {

	--gaugebottom: 160px;
	--gaugeheight: 190px;
	--gaugepercentage: 0.75;


	background-image: url("../images/minigames/TECHNIQUE-COUNTER.png");
	background-size: cover;
	background-position: center;
	
	&.tab-highlighted {
		outline: none;
	}
	
	& .basin {
		position: absolute;
		left: calc( 50% - 212px );
		bottom: 0px;
		width: 425px;
		height: 400px;
		background-image: url("../images/minigames/TECHNIQUE-BASIN.png");
	}
	
	& .hands {
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 0px;
		height: 500px;
		& div {
			position: absolute;
			left: calc( 50% - 212px );
			bottom: 0px;
			display: none;
		}
		& #left-palm {
			background-image: 
				url("../images/minigames/TECHNIQUE-PALM-LEFT.png");
			width: 425px;
			height: 400px;
			transition: transform 0.25s ease;
		}
		& #right-palm {
			background-image: 
				url("../images/minigames/TECHNIQUE-PALM-RIGHT.png");
			width: 425px;
			height: 400px;
			transition: transform 0.25s ease;
		}
		& #between {
			background-image: 
				url("../images/minigames/TECHNIQUE-BETWEEN-0.png");
			width: 425px;
			height: 400px;
			ztransition: background-image 0.25s ease;
			bottom: 50px;
		}
		& #backs-bottom {
			background-image: 
				url("../images/minigames/TECHNIQUE-BACKS-BOTTOM.png");
			width: 425px;
			height: 400px;
			transition: transform 0.25s ease;
		}
		& #backs-top {
			background-image: 
				url("../images/minigames/TECHNIQUE-BACKS-TOP.png");
			width: 425px;
			height: 400px;
			transition: transform 0.25s ease;
		}
		/*	Hands at rest	*/
		&[state="palms-at-rest"] {
			& #left-palm { display: block; }
			& #right-palm { display: block; }
		}
		&[state="palms-left"] {
			& #left-palm {
				transform: translateY( 40px );
				display: block;
			}
			& #right-palm {
				transform: translateY( -40px );
				display: block;
			}
		}
		&[state="palms-right"] {
			& #left-palm {
				transform: translateY( -40px );
				display: block;
			}
			& #right-palm {
				transform: translateY( 40px );
				display: block;
			}
		}
		&[state="backs-left-start"] {
			& #backs-bottom { display: block; }
			& #backs-top { display: block; }
			& #backs-top {
				transform: translate( -50px, 50px );
			}
		}
		&[state="backs-left-end"] {
			& #backs-bottom { display: block; }
			& #backs-top { display: block; }
			& #backs-top {
				transform: translate( 50px, -50px );
			}
		}
		&[state="backs-right-start"] {
			& #backs-bottom { display: block; }
			& #backs-top { display: block; }
			& #backs-bottom { transform: scale( -1,1 ); }
			& #backs-top {
				transform: scale( -1, 1 ) translate( 50px, -50px );
			}
		}
		&[state="backs-right-end"] {
			& #backs-bottom { display: block; }
			& #backs-bottom { transform: scale( -1,1 ); }
			& #backs-top { display: block; }
			& #backs-top {
				transform: scale( -1, 1 ) translate( -50px, 50px );
			}
		}
		&[state="between-left-start"] {
			& #between { display: block; }
		}
		&[state="between-left-end"] {
			& #between { display: block; }
			& #between {
				background-image: 
				url("../images/minigames/TECHNIQUE-BETWEEN-1.png");
			}
		}
		&[state="between-right-start"] {
			& #between { display: block; }
			& #between { transform: scale( -1, 1 ); }
		}
		&[state="between-right-end"] {
			& #between { display: block; }
			& #between { transform: scale( -1, 1 ); }
			& #between {
				background-image: 
				url("../images/minigames/TECHNIQUE-BETWEEN-1.png");
			}
		}
	}
	
	& .particle {
		position: absolute;
		width: 100px;
		height: 100px;
		animation-duration: 0.75s;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
		animation-name: TECHNIQUE-BUBBLE-PARTICLE;
		background-image: 
				url("../images/minigames/TECHNIQUE-BUBBLE.png");
	}
	
	& .timer {
	
		position: absolute;
		left: calc( 50% - 115px );
		top: 30px;
		width: 230px;
		height: 525px;
		
		& .timer-back {
			position: absolute;
			left: 75px;
			bottom: 10px;
			width: 80px;
			height: 360px;
			border-radius: 0px 0px 40px 40px;
			background-color: #ffe08d;
		}
		
		& .timer-bar {
			position: absolute;
			left: 75px;
			bottom: 138px;
			width: 80px;
			height: 227px;
			height: calc( var(--gaugepercentage) * var( --gaugeheight ) + 10px);
			background-color: #ff811d;
			background-position: center bottom;
			transition: height 0.25s ease;
		}
		
		/*	Gauge runs from 138 to 365	*/
		& .timer-gauge {
			position: absolute;
			left: calc( 50% - 100px );
			bottom: 365px;
			background-image:
				url("../images/minigames/TECHNIQUE-TIMER-GAUGE.png");
			width: 200px;
			height: 120px;
			bottom: calc( var( --gaugebottom ) + var(--gaugepercentage) * var( --gaugeheight ));
			transform: translateY( 50px );
			transition: bottom 0.1s ease;
		}
				
		& .timer-panel {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 230px;
			height: 525px;
			background-image:
				url("../images/minigames/TECHNIQUE-TIMER.png");
			background-position: center;
		}
		
		& .timer-readout {
			position: absolute;
			left: 20px;
			right: 20px;
			top: 20px;
			height: 82px;
			font-family: monospace;
			font-size: 60px;
			font-weight: bold;
			text-align: center;
			display: grid;
			align-items: center;
			justify-items: center;
			color: #444;
		}
	}
}

/*	560 x 900 	*/

@keyframes TECHNIQUE-BUBBLE-PARTICLE {
	0% { opacity: 0; transform: scale( 0.1 ); }
	30% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; transform: scale( 1.0 ); }
}