.minigame-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 100px;
	align-items: stretch;
	justify-items: stretch;
	margin:auto;
	background-color: #888;
	overflow: hidden;
	isolation: isolate;
	padding: 0px;
	border: 2px solid black;
	
	& .minigame {
		position: relative;
		width: auto;
		overflow: hidden;
		> * {
			position: absolute;
		}
		isolation: isolate;
	}
	
	& .minigame-instructions {
		background-color: #333;
		border-top: 2px solid black;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		color: white;
		padding: 2vh;
		left: 0px;
		right: 0px;
		bottom:0;
		-webkit-margin-bottom-collapse: discard;
		text-align: center;
		font-weight: bold;
		font-size: var( --body-font-size );
		/*border-radius: 0px 0px 20px 20px;*/
	}
	
	& .tab-highlighted {
		border-radius: 20px;
	}

}

#MinigameComplete {
	position: relative;
	& .smiley-happy {
		position: absolute;
		left: calc( 50% - 105px );
		top: calc( 40% - 105px );
		height: 210px;
		width: 210px;
		background-image:
			url( "../images/minigames/SmileyHappy.png" );
		background-size: 100%;
		animation-duration: 1.0s;
		animation-fill-mode: forwards;
		animation-name: SMILEY-HAPPY-ANIMATION;
		animation-delay: 0.5s;
		opacity: 0;
	}
	& .smiley-happy-star {
		position: absolute;
		left: calc( 50% - 250px );
		top: calc( 40% - 250px - 10px);
		width: 500px;
		height: 500px;
		background-image:
			url( "../images/minigames/Completion-Star.png" );
		background-size:100%;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-name: SMILEY-HAPPY-STAR-ANIMATION;
		animation-delay: 0.9s;
		opacity: 0;
	}
}

@keyframes SMILEY-HAPPY-ANIMATION {
	0% {
		opacity: 0;
		transform: scale( 75% ) translate( 0px, 30vh );
	}
	50% {
		opacity: 1;
		transform: scale( 110% ) translate( 0px, -1vh );
	}
	100% {
		opacity: 1;
		transform: scale( 100% ) translate( 0px, 0vh );
	}
}

@keyframes SMILEY-HAPPY-STAR-ANIMATION {
	0% {
		opacity: 0;
		transform: scale( 0% );
	}
	50% {
		opacity: 1.0;
		transform: scale( 110% );
	}
	100% {
		opacity: 1.0;
		transform: scale( 100% );
	}
}


/*
	Minigame browser, for debugging and testing.
*/

#MinigameBrowser, #StallBrowser, #BlurbBrowser {
	& .game-browser {
		padding-top: 40px;
		display: flex;
		flex-direction: column;
		justify-items: center;
		background-color: black;
		color: white;
		font-size: 18px;
		& .tab-highlighted {
			outline: none;
			background-color: #369;
			color: white;
		}
		button {
			width: auto;
		}
	}
	& .game-browser button {
		padding: 1px;
		border-radius: 0px;
	}
}