/*
	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.

*/

#MinigameFamilyFeud {

	& .safearea {
		overflow: hidden;
	}

	& .frame {
		position: absolute;
		width: 450px;
		height: 700px;
		left: calc( 50% - 225px );
		top: 5px;
		background-image: url('../images/minigames/FAMILY-FEUD-FRAME.png');
		
		& .prompt {
			position: absolute;
			left: 30px;
			right: 30px;
			top: 30px;
			bottom: 532px;
			display: grid;
			text-align: center;
			align-items: center;
			justify-items: center;
			font-size: 28px;
			font-weight: bold;
			color: black;
			background-color: white;
			border-radius: 20px;
			border: 2px solid black;
			padding: 10px;
		}
		
	}
	
	& .plaque {
		position: absolute;
		left: calc( 50% - 255px * 0.5 );
		width: 255px;
		height: 120px;
		&.position-0 {
			top: 194px;
		}
		&.position-1 {
			top: calc( 193px + 114px );
		}
		&.position-2 {
			top: calc( 193px + 114px + 114px );
		}
		&.position-3 {
			top: calc( 193px + 114px + 114px + 114px );
		}

		& .prompt, & .answer {
			position: absolute;
			left: 0px;
			top: 0px;
			right: 0px;
			bottom: 0px;
			display: grid;
			align-items: center;
			justify-items: center;
			padding: 10px;
			text-align: center;
			font-weight: bold;
			font-size: 26px;
			animation-duration: 0.25s;
			animation-fill-mode: forwards;
			line-height: 1.0;
		}
		
		& .prompt {
			background-image:
			url('../images/minigames/FAMILY-FEUD-ANSWER-HIDDEN.png');
			transform: perspective( 500px ) rotateX( 0deg );
		}

		& .answer {
			background-image:
			url('../images/minigames/FAMILY-FEUD-ANSWER-REVEALED.png');
			transform: perspective( 500px ) rotateX( -90deg );
		}
		
		&.shown .prompt {
			animation-name: FAMILY-FEUD-HIDE-PROMPT;
		}
		&.shown .answer {
			animation-delay: 0.25s;
			animation-name: FAMILY-FEUD-REVEAL-ANSWER;
		}
		
		&.tab-highlighted {
			z-index: 2;
			outline: 5px solid white;
			border-radius: 2px;
		}

	}
	
	& .safearea {
		background-color: #5866b4;
		border: 2px solid #777;
	}
	
	& .answers {
		position: absolute;
		bottom: 0px;
		left: 0px;
		right: 0px;
		padding: 10px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		justify-items: center;
		grid-column-gap: 10px;
		grid-row-gap: 10px;
		> div {
			background-image:
				url("../images/minigames/FAMILY-FEUD-ANSWER.png");
			width: 250px;
			height: 96px;
			color: black;
			font-size: 22px;
			text-align: center;
			display: grid;
			align-items: center;
			justify-items: center;
			text-align: center;
			padding: 10px;
			filter: brightness( 0.9 );
			
			&.tab-highlighted {
				border-radius: 20px;
				transform: scale( 1.05 );
				filter: none;
			}
			
		}
		transform: translate( 0px, 250px );
		transition: transform 0.5s ease;
		
		&.shown {
			transform: translate( 0px, 0px );
		}
	}

	& .scientists-say {
		position: absolute;
		bottom: 20px;
		left: 20px;
		right: 20px;
		padding: 30px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		transform: translate( 0px, 250px );
		transition: transform 0.5s ease;
		color: white;
		font-weight: bold;
		font-size: 24px;
		height: 180px;
		background-color: #234;
		border-radius: 20px;
		
		&.shown {
			transform: translate( 0px, 0px );
		}
	}
	
	& .incorrect {
		color: #F00;
		font-size: 64px;
		font-weight: bold;
	}
	& .correct {
		color: #6F6;
		font-size: 64px;
		font-weight: bold;
	}
	
	& .glow {
		position: absolute;
		width: 200px;
		height: 200px;
		background-image:
			url("../images/minigames/FAMILY-FEUD-LIGHT-OVERLAY.png");
		top: 155px;
		mix-blend-mode: screen;
		opacity: 0.0;

		&.row-0 { top: 155px; }
		&.row-1 { top: calc( 155px + 114px ); }
		&.row-2 { top: calc( 155px + 114px + 114px ); }
		&.row-3 { top: calc( 155px + 114px + 114px + 114px ); }
		&.left {  left: -5px; }
		&.right {  right: -5px; }
		&.lit { opacity: 1.0; }
	}

}

@keyframes FAMILY-FEUD-HIDE-PROMPT {
	0% {
		transform: perspective( 500px ) rotateX( 0deg );
	}
	100% {
		transform: perspective( 500px ) rotateX( 90deg );
	}
}
@keyframes FAMILY-FEUD-REVEAL-ANSWER {
	0% {
		transform: perspective( 500px ) rotateX( -90deg );
	}
	100% {
		transform: perspective( 500px ) rotateX( 0deg );
	}
}