/*
	New Round
*/

#NewRound {
	
	width: 1024px;
	height: 768px;
	background-image: url('../images/round/backdrop.png' );
	
	.tap-to-continue {
		position: absolute;
		top: -3px;
		left: 300px;
		right: 300px;
		text-align: center;
		font-weight: bold;
		font-size: 20px;
		padding: 10px;
		background-color: #034135;
		color: white;
		border-radius: 0px 0px 10px 10px;
		box-shadow: 0px 10px 5px rgba(0,0,0,0.5);
		zborder: 2px solid white;
	}
	
	#particles {
		position: absolute;
		width: 1024px;
		height: 768px;
		left: 0px;
		top: 0px;
	}
	
	#dirt {
		position: absolute;
		left: 255px;
		bottom: 120px;
		width: 514px;
		height: 134px;
		background-image: url('../images/round/dirt.png' );
	}
	
	#grass {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 1024px;
		height: 242px;
		background-image: url('../images/round/grass.png' );
	}
	
	.column {
		position: absolute;
		width: 340px;
		height: 474px;
		animation-duration: 0.6s;
		animation-iteration-count: once;
		animation-fill-mode: forwards;
		animation-timing-function: ease-out;
        animation-timing-function:cubic-bezier(.31,-0.01,.17,1.46);
		animation-name: groundburst-animation;
		
		&#column-center {
			left: 342px;
			top: 180px;
		}
		&#column-left {
			left: 172px;
			top: 180px;
			
			.hand { transform: scale(-1,1); }
		}
		&#column-right {
			left: 512px;
			top: 180px;
		}
		
		&.hand-1 { background-image: url('../images/round/hand-1.png' ); }
		&.hand-2 { background-image: url('../images/round/hand-2.png' ); }
		&.hand-3 { background-image: url('../images/round/hand-3.png' ); }
		&.hand-4 { background-image: url('../images/round/hand-4.png' ); }
		&.hand-6 { background-image: url('../images/round/hand-6.png' ); }
		&.hand-7 { background-image: url('../images/round/hand-7.png' ); }
		&.hand-8 { background-image: url('../images/round/hand-8.png' ); }
		&.hand-9 { background-image: url('../images/round/hand-9.png' ); }
		
		.thumb {
			position: absolute;
			left: -30px;
			top: 250px;
			width: 154px;
			height: 66px;
			transform-origin: 90% 50%;
			background-image: url('../images/round/hand-5.png' );
			animation-duration: 1.2s;
			animation-iteration-count: once;
			animation-fill-mode: forwards;
			animation-timing-function: ease-in-out;
			animation-name: thumb-wiggle-animation;
		}
		.finger {
			position: absolute;
			left: 220px;
			top: 200px;
			width: 190px;
			height: 70px;
			transform-origin: 10% 50%;
			background-image: url('../images/round/hand-10.png' );
			animation-duration: 1.0s;
			animation-iteration-count: once;
			animation-fill-mode: forwards;
			animation-timing-function: ease-in-out;
			animation-name: finger-wiggle-animation;
		}
			
		
	}
	
	.round {
		width: 400px;
		height: 200px;
		position: absolute;
		left: 312px;
		bottom: 0px;
		
		&#round-1 { background-image: url( '../images/round/round-1.png' ); }
		&#round-2 { background-image: url( '../images/round/round-2.png' ); }
		&#round-3 { background-image: url( '../images/round/round-3.png' ); }
		&#round-4 { background-image: url( '../images/round/round-4.png' ); }
		&#round-5 { background-image: url( '../images/round/round-5.png' ); }
		&#round-6 { background-image: url( '../images/round/round-6.png' ); }
		&#round-7 { background-image: url( '../images/round/round-7.png' ); }
		&#round-8 { background-image: url( '../images/round/round-8.png' ); }
		&#round-9 { background-image: url( '../images/round/round-9.png' ); }
		&#round-10 { background-image: url( '../images/round/round-10.png' ); }
	}
	
}

@keyframes groundburst-animation {
	0% {
		transform: translate( 0px, 474px );
	}
	100% {
		transform: translate( 0px, 0px );
	}
}

@keyframes finger-wiggle-animation {
	0% { transform: rotate( -40deg ); }
	30% { transform: rotate( -30deg ); }
	50% { transform: rotate( -45deg ); }
	75% { transform: rotate( -35deg ); }
	100% { transform: rotate( -40deg ); }
}

@keyframes thumb-wiggle-animation {
	0% { transform: rotate( 5deg ); }
	30% { transform: rotate( 15deg ); }
	50% { transform: rotate( 0deg ); }
	75% { transform: rotate( 10deg ); }
	100% { transform: rotate( 5deg ); }
}

#GameOver {
	width: 1024px;
	height: 768px;
	background-color: black;
	.ending {
		width: 1024px;
		height: 768px;
		position: absolute;
		left: 0px;
		top: 0px;
		&.ending-0 {
			background-image: url( '../images/game-over/ending-0-en.png' );
			.final-credit-score {
				left: 330px;
				top: 405px;
			}
		}
		&.ending-1 {
			background-image: url( '../images/game-over/ending-1-en.png' );
			.final-credit-score {
				left: 278px;
				top: 480px;
			}
		}
		&.ending-2 {
			background-image: url( '../images/game-over/ending-2-en.png' );
			.final-credit-score {
				left: 759px;
				top: 390px;
			}
		}
		
		.final-credit-score {
			color: white;
			font-size: 48px;
			font-weight: bold;
			position: absolute;
			width: 115px;
			height: 115px;
			border-radius: 58px;
			display: grid;
			align-items: center;
			justify-items: center;
		}
	}

	#game-over-exit {
			position: absolute;
	left: 0px;
	top: 0px;
	width: 80px;
	height: 81px;
	background-image: url('../images/buttons/button_exit.png');
    background-repeat:no-repeat;
	text-transform: uppercase;
	display: grid;
	align-items: center;
	justify-items: center;
	padding-left: 6px;
	padding-right: 0px;
	font-size: 12px;
	color: black;
	font-weight: bold;
	text-align: center;
	filter: brightness( 0.8 );
    transform-origin: left top;
    transition:all .2s ease-in-out;
	
	&.tab-highlighted {
		filter: none;
		outline: none;
		transform: scale( 1.1 );
        filter: brightness( 1.1 );
	}
		
		&.shown {
			top: 20px;
		}
	}
	
}

#EndOfRound {
	
	width: 1024px;
	height: 768px;
	background-color: black;
	
	.survival-banner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		left: 50px;
		top: 20px;
		bottom: 100px;
		width: 400px;
		text-align: center;
		color: white;
		font-weight: bold;
		font-size: 32px;

		.round-marker {
			width: 400px;
			height: 200px;
			&.marker-1 { background-image: url('../images/round/round-1.png'); }
			&.marker-2 { background-image: url('../images/round/round-2.png'); }
			&.marker-3 { background-image: url('../images/round/round-3.png'); }
			&.marker-4 { background-image: url('../images/round/round-4.png'); }
			&.marker-5 { background-image: url('../images/round/round-5.png'); }
			&.marker-6 { background-image: url('../images/round/round-6.png'); }
			&.marker-7 { background-image: url('../images/round/round-7.png'); }
			&.marker-8 { background-image: url('../images/round/round-8.png'); }
			&.marker-9 { background-image: url('../images/round/round-9.png'); }
			&.marker-10 { background-image: url('../images/round/round-10.png'); }
		}
		
	}
	
	.zombies-listing {
		display: flex;
		gap: 30px;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		left: 470px;
		top: 20px;
		bottom: 100px;
		right: 50px;
		text-align: center;
		color: white;
		
		.button {
			display: inline-flex;
			margin-top: 40px;
		}

		.zombies-listing-header {
			font-weight: bold;
			font-size: 32px;
			text-align: center;
			border-bottom: 2px dashed #888;
		}
		
		.zombies-listing-content {
			font-size: 26px;
			font-weight: bold;
			
			.zombie-approach {
				display: flex;
				justify-content: space-between;

				.appearing {
					font-weight: normal;
					font-size: 20px;
					span {
						font-weight: bold;
						font-size: 26px;
					}
				}
			}
			
		}
		
	}
	
}