/*
	Elements:
		<div class="tile" position="1"></div>
		<div class="tile" position="2"></div>
		<div class="tile" position="3"></div>
		<div class="tile" position="4"></div>
		<div class="tile" position="5"></div>
		<div id="action-1" class="tile" position="ondeck"></div>
		<div id="action-2" class="tile" position="offscreen"></div>
		<div id="action-3" class="tile" position="offscreen"></div>
		<div id="action-4" class="tile" position="offscreen"></div>
		<div id="action-5" class="tile" position="offscreen"></div>
	
	States:
	start, card1, card2, card3, card4, card5, done
	
	They are inside a 450x960 #HANDWASHING.mini-game container.
	The minigame modifies the "position" property of the action
	tiles to come "ondeck" and then to "1", "2", etc. as the player
	taps the different wells.
	
*/

.PLACE-TILES-IN-ORDER {

	/*	450 width, 30 pixel margin = 180px  */
	/*	Images are 725x828	*/
	.tile {
		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 );
		
		&[position="1"] {
			left: 20%;
			top: 150px;
		}
		&[position="2"] {
			left: 50%;
			top: 150px;
		}
		&[position="3"] {
			left: 80%;
			top: 150px;
		}
		&[position="4"] {
			left: 35%;
			top: 332px;
		}
		&[position="5"] {
			left: 65%;
			top: 332px;
		}
		&[position="ondeck"] {
			left: 50%;
			top: 80%;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-name: PLACETILES-ondeck;
			transform: translate( -90px, -102px ) scale( 1.2 ) rotate( 0deg );
		}
		&[position="offscreen"] {
			left: 50%;
			top: 120%;
			transform: translate( -90px, -102px ) scale( 1.2 ) rotate( 90deg );
		}
		
		outline: 10px dashed rgba(0,0,0,0);
		&.tab-highlighted {
			outline: 5px dashed white;
			outline-offset: 0px;
		}
	}

}
	
#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" );
	}
}