/*
	Elements:
	<div id="temp-button-grid">
		<div id="temp-button-140" class="temp-button"></div>
		<div id="temp-button-145" class="temp-button"></div>
		<div id="temp-button-160" class="temp-button"></div>
		<div id="temp-button-165" class="temp-button"></div>
	</div>
	<div id="food"></div>
	
	States:
	start, prompt, complete
	
	They are inside a 450x960 #PICK-TEMP.mini-game container.

*/

.PICK-TEMP {

	/*	Don't clip to the mini-game container in this one.	*/
	overflow: visible !important;

	#temp-button-grid {
		position: absolute;
		top: 60px;
		left: 40px;
		right: 40px;
		height: 520px;
		display: grid;
		align-items: center;
		justify-items: center;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
	}
	.temp-button {
		/*max-height: 221px;*/
		width: 184px;
		height: 221px;
		padding-bottom: 20px;
		text-align: center;
		font-weight: bold;
		font-size: 38px;
		display: flex;
		justify-content: center;
		align-items: end;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
		
		&#temp-button-140 {
			background-image:
				url("../images/minigames/PICK-TEMP-140.png");
		}
		&#temp-button-145 {
			background-image:
				url("../images/minigames/PICK-TEMP-145.png");
		}
		&#temp-button-160 {
			background-image:
				url("../images/minigames/PICK-TEMP-160.png");
		}
		&#temp-button-165 {
			background-image:
				url("../images/minigames/PICK-TEMP-165.png");
		}
		
		&.fail:after {
			content: " ";
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0px;
			top: 0px;
			background-image:
				url("../images/minigames/PICK-TEMP-X.png");
			background-position: center;
			background-repeat: no-repeat;
		}
	}
	
	#food {
		aspect-ratio: 450 / 250;
		width: 100%;
		height: AUTO	;
		/*max-height:250px;*/
		background-size: 100%;
		bottom: 40px;
		left: 0px;
		animation-duration: 1.0s;
		animation-fill-mode: forwards;
		animation-name: PICK-TEMP-food-in;
		background-image:
			url("../images/minigames/PICK-TEMP-POULTRY.png");
		background-size: 100%;
	}
	
	&#PICK-TEMP-POULTRY #food {
		background-image:
			url("../images/minigames/PICK-TEMP-POULTRY.png");
	}
	
	&#PICK-TEMP-BEEF #food {
		background-image:
			url("../images/minigames/PICK-TEMP-BEEF.png");
	}
	
	&#PICK-TEMP-PORK #food {
		background-image:
			url("../images/minigames/PICK-TEMP-PORK.png");
	}
	
	&[frame="done"] {
		#food {
			animation-duration: 1.0s;
			animation-fill-mode: forwards;
			animation-name: PICK-TEMP-food-done;
		}
		.temp-button {
			animation-duration: 1.0s;
			animation-fill-mode: forwards;
			animation-name: PICK-TEMP-button-done;
		}
	}

}

@keyframes PICK-TEMP-food-in {
	0% {
		transform: translate( 0px, 100% );
	}
	50% {
		transform: translate( 0px, -20% );
	}
	100% {
		transform: translate( 0px, 0px );
	}
}

@keyframes PICK-TEMP-food-done {
	0% {
		transform: scale( 1 );
		bottom: 40px;
	}
	50% {
		transform: scale( 1.3 );
	}
	100% {
		transform: scale( 1.2 );
		bottom: 120px;
	}
}

@keyframes PICK-TEMP-button-done {
	0% {
		transform: scale( 1 );
	}
	100% {
		transform: scale( 0 );
	}
}