/*
	Elements:

	<div id="question-container">
		<div id="icons"></div>
		<div id="question"></div>
		<div id="buttons">
		</div>
	</div>
	<div id="answer-container">
		<div id="answer"></div>
		<button id="confirm-answer">
			OK
		</button>
	</div>
	
	States:
	start, first, second, third, complete
	
	They are inside a 450x960 #TRASH-SAMPLES.mini-game container.
	The samples are given position="trash" when they are trashed.

*/

.FANCY-TRIVIA {

	background-color: rgba( 32, 32, 32, 0.75 );
	#question-container,
	#answer-container {
		position: absolute;
		/*
			They are shunted off to the right until "shown"
			to prevent click-blocking.
		*/
		left: 1000%;
		width: 100%;
		top: 50px;
		bottom: 20px;
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		gap: 10px;
		padding: 0px;
		
		transform-origin: 50% 50%;
		transform: scale( 0.75 );
		opacity: 0;
		transition: opacity 0.25s ease, transform 0.25s ease;
		
		/*	Offscreen until shown	*/
		&.shown {
			left: 0px;
			transform: scale( 1.0 );
			opacity: 1;
		}
		p {
			margin: 3% 0px;
		}
		p:first-child {
			margin-top: 0px;
		}
		p:last-child {
			margin-bottom: 0px;
		}
		button {
			pointer-events: all;
		}
	}
	#answer-container {
		padding: 20px;
	}
	#icons {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		& img {
			width: 175px;
			height: 212px;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			transform-origin: 50% 100%;
		}
		& img:nth-child(1) {
			animation-name: trivia-icon-slide-in-right;
			transform: translate( 20px, -20px );
		}
		& img:nth-child(2) {
			animation-name: trivia-icon-slide-in-left;
			transform: translate( -20px, 20px );
		}
	}
	#buttons {
		display: grid;
		grid-template-rows: 1fr;
		grid-auto-flow: column;
		align-items: stretch;
		justify-items: center;
		gap: 20px;
		padding: 0px 20px;
		
	}

	#intro,
	#question,
	#answer {
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 20px;
		font-weight: bold;
		& p, & li {
			font-size: 20px;
		}
		background-color: #fac831;
		padding: 20px;
		color: black;
	}
	
	.answer-button {
		display: flex;
		padding: 20px;
		gap: 20px;
		align-items: center;
		justify-content: space-around;
		& img {
			width: 100px;
			height: 100px;
		}
		color: white;
		font-weight: bold;
		font-size: 32px;
		border: 2px solid black;
		border-radius: 20px;
		background-color: rgba(255,255,255,0.2);
		width: 100%;
	}
	.answer-button.tab-highlighted {
			background-color: rgba(255,128,0,0.3);
		}
		
	#answer {
		display: grid;
		padding: 20px;
		grid-row-gap: 20px;
		background-color: #775035;
		border-radius: 20px;
		color: white;
		border: 2px solid #000;
		
		h2.incorrect {
			color: #f99;
		}
		h2.incorrect:before {
			content: '❌';
		}
		h2.correct {
			color: #9F9;
		}
		h2.correct:before {
			content: ' 👍 ';
		}
	}
	button {
		justify-self: stretch;
		padding: 10px;
		font-size: 22px;
		justify-self: stretch;
		margin: 0px;
	}	

}

.TRIVIA {	/*	The minigame container for .YESNO minigames.	*/

	background-color: rgba( 32, 32, 32, 0.75 );

	#question-container,
	#answer-container {
		position: absolute;
		/*
			They are shunted off to the right until "shown"
			to prevent click-blocking.
		*/
		left: 1000%;
		width: 100%;
		top: 0px;
		bottom: 0px;
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		gap: 20px;
		padding: 20px;
		
		transform-origin: 50% 50%;
		transform: scale( 0.75 );
		opacity: 0;
		transition: opacity 0.25s ease, transform 0.25s ease;
		
		/*	Offscreen until shown	*/
		&.shown {
			left: 0px;
			transform: scale( 1.0 );
			opacity: 1;
		}
		p {
			margin: 3% 0px;
		}
		p:first-child {
			margin-top: 0px;
		}
		p:last-child {
			margin-bottom: 0px;
		}
		button {
			pointer-events: all;
		}
	}
	
	#icons, #buttons {
		display: grid;
		grid-template-rows: 1fr;
		grid-auto-flow: column;
		align-items: stretch;
		justify-items: center;
		gap: 20px;
		
	}

	#question,
	#answer {
		color: white;
		font-size: 22px;
		& p, & li {
			font-size: 22px;
		}
	}
	
	.answer-button img {
		width: 100%;
		border: 2px solid black;
		border-radius: 20px;
		background-color: rgba(255,255,255,0.2);
		
	}
	.answer-button.tab-highlighted {
			background-color: rgba(255,128,0,0.3);
		}
		
	#answer {
		display: grid;
		padding: 20px;
		grid-row-gap: 20px;
		
		h2.incorrect {
			color: #f99;
		}
		h2.incorrect:before {
			content: '❌';
		}
		h2.correct {
			color: #9f9;
		}
		h2.correct:before {
			content: '👍';
		}
	}
	button {
		justify-self: stretch;
		padding: 20px;
		font-size: 22px;
		justify-self: stretch;
		margin: 0px;
	}
	
}


@keyframes trivia-icon-slide-in-right {
	0% {
		transform: translate( -100px, -20px );
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translate( 10px, -20px );
		opacity: 1;
	}
}
@keyframes trivia-icon-slide-in-left {
	0% {
		transform: translate( 100px, 20px );
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translate( -10px, 20px );
		opacity: 1;
	}
}



/*	Special styles for individual trivia types	*/
#WHAT-TO-FRIDGE {
	
	#buttons img {
		max-width: 100%;
	}
	.should-refrigerate {
		text-align: center;
		strong {
			font-size: 125%;
			font-weight: bold;
		}
	}