/*

	The BALLOONS minigame.

	<div id="tank"></div>
	<div id="balloon" frame="1"></div>
	
	App advances frame from 1 to 5.

*/
#FLOWERS {
	background-color: #98e6d7;

	& .toucharea {
		position: absolute;
		left: 100px;
		right: 100px;
		top: 100px;
		bottom: 150px;
		border-radius: 20px;
	}

	& .bouquet {
		width: 560px;
		height: 635px;
		position: absolute;
		left: calc( 50% - 560px * 0.5 );
		top: calc( 50% - 635px * 0.5 );
		background-image:
			url("../images/minigames/FLOWERS-1.png");
		background-repeat: no-repeat;
		background-position: center;
		transition: background-image 0.25s ease,
				transform 1s ease-in;
	}
	
	&[frame="flower2"] .bouquet {
		background-image:
		url("../images/minigames/FLOWERS-2.png");
	}
	&[frame="flower3"] .bouquet {
		background-image:
		url("../images/minigames/FLOWERS-3.png");
	}
	&[frame="flower4"] .bouquet {
		background-image:
		url("../images/minigames/FLOWERS-4.png");
	}
	&[frame="done"] .bouquet {
		background-image:
		url("../images/minigames/FLOWERS-4.png");
		transform: translate( 0px, -1000px );
	}

}

.FOLDING {
	background-color: #99d38b;
	& .foldable {
		position: absolute;
		width: 440px;
		height: 590px;
		top: calc( 50% - 590px * 0.5 );
		border-radius: 20px;
		background-position: center;
		background-repeat: no-repeat;
		transition: left 0.5s ease, background-image 0.25s ease;
		&[loc="pending"] {
			left: 600px;
		}
		&[loc="ondeck"] {
			left: calc( 50% - 440px * 0.5 );
		}
		&[loc="done"] {
			left: -600px;
		}
		&#pants[frame="1"] {
			background-image:
			url("../images/minigames/FOLDING-PANTS-1.png");
		}
		&#pants[frame="2"] {
			background-image:
			url("../images/minigames/FOLDING-PANTS-2.png");
		}
		&#pants[frame="3"] {
			background-image:
			url("../images/minigames/FOLDING-PANTS-3.png");
		}
		&#pants[frame="4"] {
			background-image:
			url("../images/minigames/FOLDING-PANTS-4.png");
		}
		&#shirt[frame="1"] {
			background-image:
			url("../images/minigames/FOLDING-SHIRT-1.png");
		}
		&#shirt[frame="2"] {
			background-image:
			url("../images/minigames/FOLDING-SHIRT-2.png");
		}
		&#shirt[frame="3"] {
			background-image:
			url("../images/minigames/FOLDING-SHIRT-3.png");
		}
		&#shirt[frame="4"] {
			background-image:
			url("../images/minigames/FOLDING-SHIRT-4.png");
		}
		&#blanket[frame="1"] {
			background-image:
			url("../images/minigames/FOLDING-BLANKET-1.png");
		}
		&#blanket[frame="2"] {
			background-image:
			url("../images/minigames/FOLDING-BLANKET-2.png");
		}
		&#blanket[frame="3"] {
			background-image:
			url("../images/minigames/FOLDING-BLANKET-3.png");
		}
		&#blanket[frame="4"] {
			background-image:
			url("../images/minigames/FOLDING-BLANKET-4.png");
		}
	}
}

.necklace-game .game-area {
	position: relative;
	background-color: #97e6d7;
	background-image:
		url("../images/minigames/NECKLACE-BACKDROP.png");
	background-size: cover;
	
	& .necklace-stand {
		background-image:
			url("../images/minigames/NECKLACE-STAND.png");
		width: 600px;
		height: 310px;
		position: absolute;
		left: calc( 50% - 600px * 0.5 );
		top: calc( 50% - 310px * 0.5 );
	}
	
	& .necklace-hand {
		background-image:
			url("../images/minigames/NECKLACE-HAND.png");
		width: 187px;
		height: 451px;
		position: absolute;
		right: 0px;
		bottom: 0px;
	}

	& .necklace-chain {
		position: absolute;
		background-image:
			url("../images/minigames/NECKLACE-CHAIN.png");
		width: 310px;
		height: 200px;
		left: calc( 50% - 310px * 0.5 );
		top: calc( 50% - 200px * 0.5 + 85px );
	}
	& .bead {
		position: absolute;
		width: 57px;
		height: 57px;
		transition: transform 0.5s ease;
		left: calc( 50% - 57px * 0.5 );
		top: 165px;
		transform: translate( 0px, 100px ) rotate( 0deg );
		
		&[bead="1"] {
			background-image:
			url("../images/minigames/NECKLACE-BEAD-1.png");
		}
		&[bead="2"] {
			background-image:
			url("../images/minigames/NECKLACE-BEAD-2.png");
		}
		&[bead="3"] {
			background-image:
			url("../images/minigames/NECKLACE-BEAD-3.png");
		}
		&[bead="4"] {
			background-image:
			url("../images/minigames/NECKLACE-BEAD-4.png");
		}
	}
	& .necklace-options {
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 20px;
		background-color: #333;
		border-radius: 20px;
		padding: 20px;
		display: flex;
		justify-content: space-around;
		gap: 20px;
		align-items: center;
		
		& .necklace-option {
			background-color: white;
			border-radius: 20px;
			width: 97px;
			height: 97px;
			padding: 20px;
			background-repeat: no-repeat;
			background-size: cover;
			&#necklace-option-1 {
				background-image:
				url("../images/minigames/NECKLACE-BEAD-1.png");
			}
			&#necklace-option-2 {
				background-image:
				url("../images/minigames/NECKLACE-BEAD-2.png");
			}
			&#necklace-option-3 {
				background-image:
				url("../images/minigames/NECKLACE-BEAD-3.png");
			}
			&#necklace-option-4 {
				background-image:
				url("../images/minigames/NECKLACE-BEAD-4.png");
			}
		}
	}
}

.concert-game {
	background-image: url("../images/minigames/CONCERT-BACKGROUND.png");
	
	& .concert-view {
		position: relative;
		overflow: hidden;
	}
	
	& .singer,
	& .guitarist,
	& .drummer {
		position: absolute;
		left: 0px;
		bottom: 0px;
		height: 700px;
		transform-origin: 50% 0%;
		transition: transform 1s ease;
	}
	& .singer {
		width: 300px;
		background-image: url("../images/minigames/CONCERT-SINGER.png");
	}
	& .guitarist {
		width: 500px;
		background-image: url("../images/minigames/CONCERT-GUITARIST.png");
	}
	& .drummer {
		width: 700px;
		background-image: url("../images/minigames/CONCERT-DRUMMER.png");
	}
	
	& .concert-view[poses="0"] {
		& .singer {
			transform: translate( 130px, 0px );
			filter: blur( 10px );
		}
		& .guitarist {
			transform: translate( 30px, 0px );
			filter: blur( 10px );
		}
		& .drummer {
			transform: translate( -70px, 0px ) rotate( 2deg );
			filter: blur( 10px );
		}
	}
	
	& .concert-view[poses="1"] {
		& .singer {
			transform: translate( 100px, 0px ) scale( 120% ) rotate( -5deg );
			filter: none;
		}
		& .guitarist {
			transform: translate( -50px, 0px ) scale( 110% );
			filter: blur( 5px );
		}
		& .drummer {
			transform: translate( 100px, 0px ) scale( 90% ) rotate( -2deg );
			filter: blur( 10px );
		}
	}
	
	& .concert-view[poses="2"] {
		& .singer {
			transform: translate( 400px, 0px ) scale( 110% ) rotate( 5deg );
			filter: blur( 5px );
		}
		& .guitarist {
			transform: translate( 50px, 0px ) scale( 110% ) rotate( 5deg );
			filter: none;
		}
		& .drummer {
			transform: translate( 50px, 50px ) scale( 80% );
			filter: blur( 10px );
		}
	}
	
	& .concert-view[poses="3"] {
		& .singer {
			transform: translate( 600px, 0px ) scale( 160% ) rotate( 5deg );
			filter: blur( 10px );
		}
		& .guitarist {
			transform: translate(-200px, 0px ) scale( 130% ) rotate( -5deg );
			filter: blur( 5px );
		}
		& .drummer {
			transform: translate( -100px, 00px ) scale( 110% );
			filter: none;
		}
	}
	
	& .concert-view[poses="4"] {
		& .singer {
			transform: translate( 100px, 0px ) scale( 130% ) rotate( 10deg );
			filter: none;
		}
		& .guitarist {
			transform: translate( 200px, 0px ) scale( 110% ) rotate( -10deg );
			filter: blur( 5px );
		}
		& .drummer {
			transform: translate( 0px, 0px ) scale( 90% );
			filter: blur( 10px );
		}
	}
	
	& .concert-view[poses="5"] {
		& .singer {
			transform: translate( 600px, 0px ) scale( 110% ) rotate( -10deg );
			filter: blur( 5px );
		}
		& .guitarist {
			transform: translate( 50px, 0px ) scale( 120% ) rotate( -10deg );
			filter: none;
		}
		& .drummer {
			transform: translate( 150px, 100px ) scale( 70% );
			filter: blur( 10px );
		}
	}
	
	& .concert-view[poses="6"] {
		& .singer {
			transform: translate( 450px, 0px ) scale( 160% ) rotate( -5deg );
			filter: blur( 10px );
		}
		& .guitarist {
			transform: translate(-100px, 0px ) scale( 130% ) rotate( 15deg );
			filter: blur( 5px );
		}
		& .drummer {
			transform: translate( -100px, 30px ) scale( 90% );
			filter: none;
		}
	}
	
	& .concert-view[poses="7"] {
		& .singer {
			transform: translate( 350px, 0px ) rotate( -2deg );
			filter: blur( 2px );
		}
		& .guitarist {
			transform: translate(-100px, 50px ) rotate( 3deg );
		}
		& .drummer {
			transform: translate( -100px, 30px ) scale( 85% );
			filter: blur( 2px );
		}
	}
	
	& .concert-fret {
		position: absolute;
		width: 560px;
		height: 120px;
		left: 0px;
		bottom: 0px;
		background-image: url("../images/minigames/CONCERT-FRET.png");
	}
	
	& .concert-target {
		position: absolute;
		width: 100px;
		height: 100px;
		left: 91px;
		bottom: 15px;
		background-image: url("../images/minigames/CONCERT-TARGET.png");
		transform-origin: 50% 50%;
		&.hit {
			transform: scale( 110% );
		}
	}
	& .concert-key {
		position: absolute;
		width: 100px;
		height: 100px;
		left: 91px;
		bottom: 15px;
		background-image: url("../images/minigames/CONCERT-KEY.png");
		&.red {
			background-image: url("../images/minigames/CONCERT-KEY-RED.png");
		}
		&.missed {
			background-image: url("../images/minigames/CONCERT-KEY-MISSED.png");
		}
		display: grid;
		align-items: center;
		justify-items: center;
		color: white;
		font-weight: bold;
	}
	
	& .gauge-container {
		position: absolute;
		left: 100px;
		right: 100px;
		top: 50px;
		height: 50px;
		border: 4px solid white;
		outline: 4px solid black;
		background-color: black;
		border-radius: 25px;
		
		& .gauge {
			position: absolute;
			left: 0px;
			top: 0px;
			bottom: 0px;
			background-color: green;
			border-radius: 20px;
			border: 4px solid black;
			min-width: 5%;
			transition: all 0.25s ease;
			
			&[score="0"] { width: 40px; background-color: black; }
			&[score="1"] { width: 40px; background-color: #0c0; }
			&[score="2"] { width: 20%; background-color: #0c0; }
			&[score="3"] { width: 30%; background-color: #0c0; }
			&[score="4"] { width: 40%; background-color: #0c0; }
			&[score="5"] { width: 50%; background-color: #0c0; }
			&[score="6"] { width: 60%; background-color: #0c0; }
			&[score="7"] { width: 70%; background-color: #0c0; }
			&[score="8"] { width: 80%; background-color: #0c0; }
			&[score="9"] { width: 90%; background-color: #0f0; }
			&[score="10"] { width: 100%; background-color: #0f0; }
			
		}
		
	}
	
	& .gauge-message {
		position: absolute;
		right: 10px;
		top: 5px;
		bottom: 5px;
		display: grid;
		align-items: center;
		color: white;
		font-size: 24px;
		font-weight: bold;
		opacity: 0;
		transition: all 0.25s ease;
		&.shown { opacity: 1; }
	}
}

.concert-get-ready {
	display: grid;
	justify-items: center;
	align-items: center;
	& .get-ready-placard {
		background-color: black;
		color: white;
		text-align: center;
		padding: 20px;
		max-width: 300px;
		border-radius: 20px;
	}
}

.concert-results {
	display: grid;
	justify-items: center;
	align-items: center;
	& .concert-results-placard {
		background-color: black;
		color: white;
		text-align: center;
		padding: 20px;
		max-width: 300px;
		border-radius: 20px;
	}
}




#BALLOONS.minigame {
	background-color: #369;

	& #tank {
		position: absolute;
		width: 200px;
		height: 470px;
		left: calc( 50% - 200px / 2 );
		bottom: 0px;
		background-image: url( "../images/minigames/BALLOONS-TANK.png" );
		background-position: bottom;
		background-repeat: no-repeat;
	}
	& #balloon {
		pointer-events: none;
		position: absolute;
		width: 454px;
		height: 800px;
		left: calc( 50% - 454px / 2 );
		bottom: 0px;
		background-image: url( "../images/minigames/BALLOONS-1.png" );
		
		&[frame="2"] {
			background-image: url( "../images/minigames/BALLOONS-2.png" );
		}
		&[frame="3"] {
			background-image: url( "../images/minigames/BALLOONS-3.png" );
		}
		&[frame="4"] {
			background-image: url( "../images/minigames/BALLOONS-4.png" );
		}
		&[frame="5"] {
			background-image: url( "../images/minigames/BALLOONS-5.png" );
			transition: transform 1s ease-in;
			transform: translate( 100px, -1000px );
		}
	}

}

#MinigameFacePainting {
	& .game-area {
		background-color: #e3c3ff;
		isolation: isolate;
		overflow: hidden;
		position: relative;
	}
	
	& .choices {
		width: 479px;
		height: 479px;
		position: absolute;
		top: 20px;
		left: calc( 50% - 479px * 0.5 );
		background-image:
		url( "../images/minigames/FACES-FRAME.png");
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-column-gap: 10px;
		align-items: center;
		justify-items: center;
		padding: 45px 70px 45px 70px;
								
		& .choice {
			border-radius: 20px;
			width: 150px;
			height: 110px;
			background-position: center;
			background-size: cover;
			&.tab-highlighted {
				outline: 4px dashed black;
				background-color: pink;
			}
		}

		& .choice:nth-child(1) {
			background-image:
			url( "../images/minigames/FACES-CHOICE-1.png");
		}
		& .choice:nth-child(2) {
			background-image:
			url( "../images/minigames/FACES-CHOICE-2.png");
		}
		& .choice:nth-child(3) {
			background-image:
			url( "../images/minigames/FACES-CHOICE-3.png");
		}
		& .choice:nth-child(4) {
			background-image:
			url( "../images/minigames/FACES-CHOICE-4.png");
		}
		& .choice:nth-child(5) {
			background-image:
			url( "../images/minigames/FACES-CHOICE-5.png");
		}
		& .choice:nth-child(6) {
			background-image:
			url( "../images/minigames/FACES-CHOICE-6.png");
		}
	}
	
	& .brush {
		width: 130px;
		height: 170px;
		background-image:
			url("../images/minigames/FACES-BRUSH.png");
		position: absolute;
		left: 0px;
		top: 0px;
		transform-origin: 115px 15px;
		transform: rotate( 5deg );
		transition: transform 0.25s ease, left 0.5s ease, top 0.5s ease;
		
		&[position="0"] { left: 600px; top: 380px; }
		&[position="kid"] { left: 270px; top: 420px; }
		&[lift="up"] { transform: rotate( 10deg ); }
		&[lift="down"] { transform: rotate( 0deg ); }
	}
	
	& .kid {
		width: 375px;
		height: 375px;
		position: absolute;
		left: calc( 50% - 375px * 0.5 );
		bottom: 0px;
		transition: all 0.75s ease;
		transform: translate( 450px, 0px ) scale( 0.5 );
		isolation: isolate;
		
		&[state="ready"] {
		transform: translate( 0px, 0px ) scale( 1.0 );
		}
		&[state="done"] {
		transform: translate( -450px, 0px ) scale( 0.5 );
		}
		transform-origin: bottom center;
		
		&#kid-1 {
			background-image:
			url("../images/minigames/FACES-KID-1.png");
		}
		&#kid-2 {
			background-image:
			url("../images/minigames/FACES-KID-2.png");
		}
		&#kid-3 {
			background-image:
			url("../images/minigames/FACES-KID-3.png");
		}
		
	}
	
	& .hair { z-index: 1; }
	
	& .face-paint,
	& .hair {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 375px;
		height: 375px;
		
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-name: paint-the-face;
		
		&.hair-1 {
			background-image:
			url("../images/minigames/FACES-HAIR-1.png");
		}
		&.hair-2 {
			background-image:
			url("../images/minigames/FACES-HAIR-2.png");
		}
		&.hair-3 {
			background-image:
			url("../images/minigames/FACES-HAIR-3.png");
		}
		&.hair-4 {
			background-image:
			url("../images/minigames/FACES-HAIR-4.png");
		}
		&.hair-5 {
			background-image:
			url("../images/minigames/FACES-HAIR-5.png");
		}
		&.hair-6 {
			display: none;
		}
		
		&.paint-1 {
			background-image:
			url("../images/minigames/FACES-PAINT-1.png");
		}
		&.paint-2 {
			background-image:
			url("../images/minigames/FACES-PAINT-2.png");
		}
		&.paint-3 {
			background-image:
			url("../images/minigames/FACES-PAINT-3.png");
		}
		&.paint-4 {
			background-image:
			url("../images/minigames/FACES-PAINT-4.png");
		}
		&.paint-5 {
			background-image:
			url("../images/minigames/FACES-PAINT-5.png");
		}
		&.paint-6 {
			background-image:
			url("../images/minigames/FACES-PAINT-6.png");
		}
	}
	
	& .balloon {
		position: absolute;
		bottom: 20px;
		right: 20px;
		width: 405px;
		height: 155px;
		background-image: url("../images/minigames/FACES-BALLOON.png");
		padding: 30px;
		padding-top: 65px;
		display: flex;
		align-items: center;
		justify-content: center;
		transform-origin: 280px 0px;
		opacity : 0;
		transform: scale( 0% );
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		
		&[shown="true"] {
			animation-name: speech-balloon-in;
		}
		&[shown="false"] {
			animation-name: speech-balloon-out;
		}
	}
	
}
@keyframes paint-the-face {
	0% {
		transform: scale( 1.05 );
		opacity: 0;
	}
	100% {
		transform:  scale( 1.0 );
		opacity: 1;
	}
}
@keyframes speech-balloon-in {
	0% {
		transform: scale( 0 );
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	75% {
		transform: scale( 1.1 );
	}
	100% {
		transform:  scale( 1.0 );
		opacity: 1;
	}
}
@keyframes speech-balloon-out {
	0% {
		transform: scale( 1.0 );
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		transform:  scale( 0.0 );
		opacity: 0;
	}
}


.art-shop {
	position: relative;
	background-color: #9cf;
	overflow: hidden;
	
	& .art-shop-image[sold="true"] {
		& img {
			filter: saturate( 0 ) brightness( 80% );
		}
		& .sold {
			opacity: 1;
			transform: rotate( -35deg ) scale( 100% );
		}
	}
	& .art-shop-image {
		position: absolute;
		left: 0px;
		top: 290px;
		width: 450px;
		height: 450px;
		transform: translate( -225px, -225px );
		
		& img {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 450px;
			height: 450px;
		}
		& .sold {
			font-size: 80px;
			font-weight: bold;
			font-family: sans-serif;
			color: white;
			border: 10px solid black;
			background-color: red;
			border-radius: 30px;
			padding: 20px;
			position: absolute;
			left: 25px;
			top: 150px;
			width: 400px;
			height: 150px;
			-webkit-text-stroke: 20px black;
			paint-order: stroke fill;
			display: flex;
			align-items: center;
			justify-content: center;
			transform-origin: 50% 50%;
			opacity: 0;
			transform: rotate( -35deg ) scale( 150% );
			transition: all 0.5s ease;
		}
	}
	& .art-shop-buttons {
		background-color: rgba(255,255,255,0.5);
		padding: 20px;
		position: absolute;
		left: 0px;
		right: 0px;
		top: 530px; 
		min-height: 50px;
		display: flex;
		justify-content: space-between;
		gap: 20px;
		& .art-shop-prompt {
			text-align: right;
		}
	}
	& #confirm-art {
		width: 100%;
		flex-grow: 1;
	}

	& .balloon {
		position: absolute;
		left: calc( 560px * 0.5 - 405px * 0.5 );
		bottom: -10px;
		width: 405px;
		height: 155px;

		background-image: url("../images/minigames/ART-SHOP-BALLOON.png");
		padding: 30px;
		padding-bottom: 75px;
		display: flex;
		align-items: center;
		justify-content: stretch;
		transform-origin: 280px 155px;
		opacity : 0;
		transform: scale( 0% );
		animation-duration: 0.5s;
		animation-fill-mode: forwards;

		&[shown="true"] {
			animation-name: speech-balloon-in;
		}
		&[shown="false"] {
			animation-name: speech-balloon-out;
		}
	}
}