/*
	Elements:
		<div class="well" id="well-1" position="1"></div>
		<div class="well" id="well-2" position="2"></div>
		<div class="well" id="well-3" position="3"></div>
		<div class="well" id="well-4" position="4"></div>
		<div class="well" id="well-5" position="5"></div>
		<div class="card" id="card-1"></div>
		<div class="card" id="card-2"></div>
		<div class="card" id="card-3"></div>
		<div class="card" id="card-4"></div>
		<div class="card" id="card-5"></div>
	
	Wells are placed as locations for cards to be played in order.
	Cards can be given positions of:
		offscreen, hand-[N], or well-[N]
	
*/

.minigame.card-order {

	border: 2px solid black;
	background-color: rgba( 32,64,96, 0.6 );

	/*	450 width, 30 pixel margin = 180px  */
	/*	Images are 725x828	*/
	.card, .well {
		position: absolute;
		aspect-ratio: 150 / 170;
		width: 180px;
		height: auto;	/* To maintain aspect ratio  */
		background-image: url( "../images/minigames/HANDWASHING-0.png" );
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
		transition: left 0.5s ease, top 0.5s ease, transform 0.5s ease;
		transform: translate( -90px, -102px ) scale( 0.8 );
		
		&#card-1 {
		background-image: url( "../images/minigames/HANDWASHING-1.png" );
		}
		&#card-2 {
		background-image: url( "../images/minigames/HANDWASHING-2.png" );
		}
		&#card-3 {
		background-image: url( "../images/minigames/HANDWASHING-3.png" );
		}
		&#card-4 {
		background-image: url( "../images/minigames/HANDWASHING-4.png" );
		}
		&#card-5 {
		background-image: url( "../images/minigames/HANDWASHING-5.png" );
		}
		
		&[position="0"] {
			left: 20%;
			top: 150px;
		}
		&[position="1"] {
			left: 50%;
			top: 150px;
		}
		&[position="2"] {
			left: 80%;
			top: 150px;
		}
		&[position="3"] {
			left: 35%;
			top: 332px;
		}
		&[position="4"] {
			left: 65%;
			top: 332px;
		}
		&[position="ondeck"] {
			aspect-ratio:225 / 255;
			width: 50%;
			height: auto;

			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-name: HANDWASHING-ondeck;
		}
		&[position="offscreen"] {
			left: 50%;
			top: 120%;
		}
		
		outline: 10px dashed rgba(0,0,0,0);
		&.tab-highlighted {
			outline: 5px dashed white;
			outline-offset: 0px;
		}
	}
	
	#card-text {
		position: absolute;
		bottom: 0px;
		left: 8.9%;
		right: 8.9%;
		text-align: center;
		font-weight: bold;
		font-size: 2.5vh;
		background-color: black;
		color: white;
		border-radius: 20px 20px 0px 0px;
		padding: 2vh;
		/*min-height: 100px;*/
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	&.MONEY-HANDLING {
		.tile#action-1 {
			background-image: url( "../images/minigames/MONEY-HANDLING-1.png" );
		}
		.tile#action-2 {
			background-image: url( "../images/minigames/MONEY-HANDLING-2.png" );
		}
		.tile#action-3 {
			background-image: url( "../images/minigames/MONEY-HANDLING-3.png" );
		}
		.tile#action-4 {
			background-image: url( "../images/minigames/MONEY-HANDLING-4.png" );
		}
		.tile#action-5 {
			background-image: url( "../images/minigames/MONEY-HANDLING-5.png" );
		}
	}

}

/*	Special CSS for the "pre-placed" card types	*/
.minigame.card-order.pre-placed {
	background-color: #fac830;
	background-image: url("../images/minigames/TAKING-MONEY-PATH.png");
	background-size: 50%;
	background-position: 50% 20%;
	background-repeat: no-repeat;
	
	.card, .well {
		width: 150px;
		&[position="0"] {
			left: 35%;
			top: 110px;
		}
		&[position="1"] {
			left: 75%;
			top: 150px;
		}
		&[position="2"] {
			left: 30%;
			top: 300px;
		}
		&[position="3"] {
			left: 80%;
			top: 380px;
		}
		&[position="4"] {
			left: 50%;
			top: 460px;
		}
	}
}

@keyframes HANDWASHING-ondeck {
	0% {
		transform: translate( 0px, 350px ) rotate( 10deg );
	}
	100% {
		transform: translate( 0px, 0px ) rotate( 0deg );
	}
}