#MinigameTrashOrCool {
	& .safearea {
		background-image: 
		url("../images/minigames/TRASH-OR-COOL-BACKDROP.png");
	}
	& .game-area {
		overflow: hidden;
		border: 2px solid blue;
		isolation: isolate;
		position: relative;
	}
	
	& .sample {
		width: 330px;
		height: 330px;
		position: absolute;
		left: calc( 50% - 330px * 0.5 );
		top: 450px;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-name: TRASH-OR-COOL-waiting;
		&[state="ondeck"] {
			animation-duration: 0.25s;
			animation-name: TRASH-OR-COOL-enter;
		}
		&[state="left"] {
			animation-duration: 0.75s;
			animation-name: TRASH-OR-COOL-left;
		}
		&[state="right"] {
			animation-duration: 0.75s;
			animation-name: TRASH-OR-COOL-right;
		}
		& .sample-display {
			width: 330px;
			height: 330px;
			position: absolute;
			left: 0px;
			top: 0px;
			transform: translateY( 0px );
		}
		&[height="up"] .sample-display {
			transition:
				transform 0.375s ease-out;
			transform: translateY( -400px );
		}
		&[height="down"] .sample-display {
			transition:
				transform 0.375s ease-in;
			transform: translateY( 0px ); 
		}
	}
	& .sample[foodtype="STRAWBERRY"] .sample-display {
		background-image:
		url("../images/minigames/TRASH-OR-COOL-STRAWBERRY.png");
	}
	& .sample[foodtype="GUACAMOLE"] .sample-display {
		background-image:
		url("../images/minigames/TRASH-OR-COOL-GUACAMOLE.png");
	}
	& .sample[foodtype="BEEF"] .sample-display {
		background-image:
		url("../images/minigames/TRASH-OR-COOL-BEEF.png");
	}
	
	& .prompt {
		background-color: black;
		position: absolute;
		left: 20px;
		right: 20px;
		top: 60px;
		color: white;
		padding: 20px;
		border-radius: 20px;
		font-weight: bold;
		font-size: 24px;
		text-align: center;
		transition: opacity 0.25s ease;
	}
	.touch-pad {
		position: absolute;
		top: 250px;
		width: 200px;
		height: 350px;
		border-radius: 20px;
		&#left-pad {
			left: 30px;
		}
		&#right-pad {
			right: 30px;
		}
	}
}
@keyframes TRASH-OR-COOL-waiting {
	0% {
		transform: translate( 0px, 200px );
		opacity:0;
	}
	100% {
		transform: translate( 0px, 200px );
		opacity:0;
	}
}
@keyframes TRASH-OR-COOL-enter {
	0% {
		transform: translate( 0px, 200px );
		opacity:0;
	}
	100% {
		transform: translate( 0px, 0px );
		opacity: 1;
	}
}
@keyframes TRASH-OR-COOL-left {
	0% {
		transform: translate( 0px, 0px );
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		transform: translate( -160px, -160px ) scale( 0.25 );
		opacity: 0;
	}
}
@keyframes TRASH-OR-COOL-right {
	0% {
		transform: translate( 0px, 0px );
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		transform: translate( 150px, -260px ) scale( 0.25 );
		opacity: 0;
	}
}