/*
	The combat scenes.
*/

/*
	This is the scene where you select the zombie to fight (if there is
	more than one queued).
*/
#ZombiePhase {
	
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1024px;
	height: 768px;
	background-color: #01271f;
	
	#zombie-horde-backdrop {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 1024px;
		height: 768px;
		background-image: url('../images/combat/backdrop.png');
		filter: blur( 20px ) brightness( 50% );
	}
	
	#zombie-horde-header {
		position: absolute;
		left: 20px;
		right: 20px;
		top: 20px;
		text-align: center;
		font-size: 22px;
		
		.approaching {
			font-weight: bold;
			margin-bottom: 0px;
			color: rgb(255,190,0);
            font-size:50px;
            font-family:var(--heading-font-family);
		}
		.instructions {
		}
	}
	
	#zombie-horde {
		position: absolute;
		left: 10px;
		right: 10px;
		top: 130px;
		bottom: 110px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.horde-button {
		border-radius: 10px;
		position: relative;
		text-align: center;
		max-width: 300px;
		padding: 0px 20px 20px 20px;
        height:100%;
		
		& img {
			width: 100%;
			transition: all 0.25s ease;
			transform: scale( 0.95 );
		}
		
		&.tab-highlighted {
			background-color: rgba(30,123,95,.5); //#1d7a5e;
            box-shadow:inset 0 0 50px rgba(30,123,95,1);
			outline: none;

			& img {
				width: 100%;
				transform: scale( 1 );
			}
		
		}

		.horde-name {
			font-size: 38px;
            line-height: .85;
            margin-bottom:5px;
            font-family:var(--heading-font-family);
		
		}
		.horde-amount {
			color: rgb(255,190,0);
			font-weight: bold;
			font-size: 32px;
            font-family: var(--button-font-family);
		}

		animation-duration: 0.75s;
		animation-direction: forwards;
		animation-iteration-count: once;
		animation-fill-mode: both;
		animation-timing-function: ease-out;
		animation-name: zombie-select-entrance-animation;
		
		&:nth-child(1) {
			animation-delay: 0s;
		}
		&:nth-child(2) {
			animation-delay: 0.2s;
		}
		&:nth-child(3) {
			animation-delay: 0.4s;
		}

	}
	
}

#Combat {

	/*
		UI elements are given .entering to animate them into
		place.  The actual animations are defined at the end of this
		document.
	*/
	.entering {
		animation-duration: 0.75s;
		animation-direction: alternate;
		animation-iteration-count: once;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
		&.payment-amounts {
			animation-name: combat-payments-enter;
		}
		&.payment-options {
			animation-name: combat-options-enter;
		}
		&.prompt {
			animation-name: combat-prompt-enter;
		}
	}

	width: 1024px;
	height: 768px;
	background-image: url('../images/combat/backdrop.png');
	
	/*
		The zombie figure.  We use the large image but scaled
		down a bit. Includes the image and the name placard.
	*/
	.zombie {
		position: absolute;
		right: 170px;
		top: 40px;
		
		width: calc( 446px * 0.8 );
		height: calc( 695px * 0.8 );
		transition: all 0.5s ease;
		transform: translateX( 200px );
		opacity: 0;
		
		.animated-zombie {
			transform: scale( 0.8 );
			transform-origin: 0% 0%;
		}
		img.pose {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			zwidth: calc( 446px * 0.8 );
			zheight: calc( 695px * 0.8 );
		}

		.zombie-name {
			position: absolute;
			bottom: -30px;
			left: 18%;
			right: 0px;
/*			background-color: rgba(0,0,0,0.5);*/
            background-image:radial-gradient(ellipse , rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.5) 100%);
            box-shadow:inset 0 0 20px rgba(0,0,0,0.9);
			padding:0px;
            width:74%;
			border-radius:6px;
			text-align: center;
            /*	font-weight: bold; */
			font-size: 28px;
            text-shadow:1px 1px 10px rgba(0,0,0,.5);
/*            border:3px solid rgb(20,100,120);*/
            font-family:var(--heading-font-family);
/*            text-transform:uppercase;*/
		}

		
		&.menacing {
			transform: translateX( 0px );
			opacity: 1;
		}
		
	}
    .zombie.menacing {
        transform: translateX( 0px );
			opacity: 1;
    }
	/*	Used to place the particles behind the HUD	*/
	.particle-layer {
		width: 1024px;
		height: 768px;
		position: absolute;
		left: 0px;
		top: 0px;
	}

}

/*
	A prompt that appears at the top of the screen to give
	user instructions.
*/
.combat-prompt{ 
		position: absolute;
		top: 10px;
		left: 350px;
		right: 350px;
		background-color: rgba(0,0,0,0.9);
		color: rgb(62,202,169);
		border:4px solid rgb(20,100,120);
		font-size: 20px;
		padding: 10px 20px 10px;
		border-radius: 10px;
		text-align: center;
           
	animation-name: combat-prompt-enter;
	animation-duration: 0.75s;
	animation-iteration-count: once;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
         &:before {
            content:'';
            display:block;
            background:transparent;
            position: absolute;
            top:-24px;
            height:10px;
            width:100px;
            left:Calc(50% - 60px);
            border:10px solid rgb(20,100,120);
            border-bottom:0px;
/*            border-top:0px;*/
        }
}
@keyframes combat-prompt-enter {
	0% {
		transform: translate( 0px, -200px );
		opacity: 0;
	}
	100% {
		transform: translate( 0px, 0px );
		opacity: 1;
	}
}

#ChoosePaymentAmount {

	width: 1024px;
	height: 768px;
	/*
		A container for payment amount buttons. Currently, it just
		flexes them into a column to the right of the zombie.
	*/
	.payment-amounts {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		top: 50px;
		right: 30px;
		bottom: 150px;
		
		/*	Animate in	*/
		animation-duration: 0.75s;
		animation-direction: forwards;
		animation-iteration-count: once;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
		animation-name: combat-payments-enter;
	
		/*	An amount button  */
		.payment-amount {
			background-color: #44af90;
			background-color: rgba(23, 62, 51,.9);
            box-shadow:inset 0 0 4px 2px #98d1b1;
/*			border: 4px solid #98d1b1;*/
			padding: 10px;
			color: white;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			font-weight: bold;
			width: 130px;
			height: 130px;
			text-align: center;
			border-radius: 2px;
			transition: transform 1s ease;
			
			&#payment-amount-do-not-pay {
				background-color: #600;
				border-color: #F00;
			}
			
			/*	The text on the amount button */
			.amount {
				font-size: 36px;
			}
			
			&.deselected {
				filter: brightness( 25% );
			}
		}
	
	}
	
}

#ChoosePaymentMethod {

	width: 1024px;
	height: 768px;
	/*
		A container for payment method buttons.
	*/
	.payment-methods {
		position: absolute;
		left: 30px;
		top: 50px;
		bottom: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		
		/*	Animate in	*/
		animation-duration: 0.75s;
		animation-direction: forwards;
		animation-iteration-count: once;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in-out;
		animation-name: combat-methods-enter;

		.disabled {
			filter: brightness( 0.5 );
		}
		
		.payment-method {
			border-radius: 10px;
			width: 130px;
			height: 130px;
			display: flex;
			align-items: end;
			justify-content: center;
			text-align: center;
			font-size: 18px;
			padding: 10px;
			text-align: center;
			line-height: 1.0;
			text-transform: uppercase;
			color: #333;
			font-weight: bold;
			transition: transform 1s ease;
			
			&.deselected {
				filter: brightness( 25% );
			}
		}
	}
	
	#pay-with-cash {
		background-image: url('../images/buttons/button_cash.png' );
	}
	#pay-with-credit {
		background-image: url('../images/buttons/button_credit.png' );
	}
	#pay-with-savings {
		background-image: url('../images/buttons/button_savings.png' );
	}
	#pay-with-subprime {
		background-image: url('../images/buttons/button_subprime.png' );
	}
	#pay-with-wait {
		background-image: url('../images/buttons/button_wait.png' );
	}

}

@keyframes combat-payments-enter {
	0% {
		transform: translate( 200px, 0px );
		opacity: 0;
	}
	100% {
		transform: translate( 0px, 0px );
		opacity: 1;
	}
}

@keyframes combat-zombie-exit {
	0% {
		transform: translate( 0px, 0px );
		opacity: 0;
	}
	100% {
		transform: translate( 200px, 0px );
		opacity: 1;
	}
}
@keyframes combat-methods-enter {
	0% {
		transform: translate( -200px, 0px );
		opacity: 0;
	}
	100% {
		transform: translate( 0px, 0px );
		opacity: 1;
	}
}

@keyframes zombie-select-entrance-animation {
	0% {
		transform: translate( 0px, 700px );
		opacity: 0;
	}
	100% {
		transform: translate( 0px, 0px );
		opacity: 1;
	}
}