/* @font-face {
	font-family: 'pixel'; font-weight: 400;
	src: url('/_fonts/PixelifySans-VariableFont_wght.ttf') format("opentype");
} */
@import url('https://fonts.googleapis.com/css2?family=Geo:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Micro+5+Charted&display=swap');



body.gameover #ot_wrapper{animation: gameover 2s infinite;}

#game{
	position: absolute; width: 100%; height: calc(100% - 10px); top: 0; left: 0; overflow: hidden;
	backdrop-filter: blur(6px);
}
body.gameover #game{backdrop-filter: none;}
#game div{position: absolute;}

#game .airplane{width: 37px; height: 45px;}
#game .airplane.on{transform: translateZ(0); z-index: 5; animation: fly 5s linear infinite; background: url(/_images/game/alien/airplane.svg) no-repeat; background-size: cover; top: -50%;}


#game .airplane ul{margin: 0; padding: 0; list-style: none;}
#game .airplane.explode{width: 40px; height: 40px; background: #ff0000; border-radius: 100%;}
#game .airplane.explode ul{position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%);}
#game .airplane.explode li{position: absolute; width: 6px; height: 20px; top: 0; left: 50%; border-radius: 30px; transform-origin: 50% 100%;}
#game .airplane.explode ul::before,
#game .airplane.explode ul::after,
#game .airplane.explode li::before,
#game .airplane.explode li::after{content: ''; position: absolute;}
#game .airplane.explode li::before,
#game .airplane.explode li::after{
	width: 100%; height: 50%; top: 100%; background: #fff; border-radius: 30px; 
	animation: burst 1s ease-in-out infinite; animation-fill-mode: backwards;
}
#game .airplane.explode li::before{animation-delay: 0.05s;}
#game .airplane.explode li::after{animation-delay: 0.1s;}
#game .airplane.explode li:nth-child(1){transform: translateX(-50%) rotate(45deg);}
#game .airplane.explode li:nth-child(2){transform: translateX(-50%) rotate(90deg);}
#game .airplane.explode li:nth-child(3){transform: translateX(-50%) rotate(135deg);}
#game .airplane.explode li:nth-child(4){transform: translateX(-50%) rotate(180deg);}
#game .airplane.explode li:nth-child(5){transform: translateX(-50%) rotate(225deg);}
#game .airplane.explode li:nth-child(6){transform: translateX(-50%) rotate(270deg);}
#game .airplane.explode li:nth-child(7){transform: translateX(-50%) rotate(315deg);}
#game .airplane.explode li:nth-child(8){transform: translateX(-50%) rotate(360deg);}
#game .airplane.explode li:nth-child(9){transform: translateX(-50%) rotate(405deg);}

@keyframes burst {
    0%,
    100%{top: 100%; opacity: 0; background-color: #fff;}
    20%{opacity: 0;}
    50%{opacity: 0.5;}
    65%{opacity: 1;}
    99%{top: -50%; opacity: 0; height: 0; background-color: #222;}
}


/* body.gameover .airplane.on{animation-duration: 4s;} */

#game .alien{
	transform: translateZ(0); z-index: 10; bottom: 0; 
	background-image: url(/_images/game/alien/alien.sprite.svg); background-repeat: no-repeat; background-position-y: 0;
	transition: left .09s, transform .09s, bottom .2s; animation: alien 0.8s steps(4) infinite; 
	animation-play-state: paused;
	
	left: calc(50% - 57.5px); width: 115px; height: 85px;
	background-size: 460px 170px;
}

@keyframes alien{
	100%{background-position-x: -460px;}
}
@keyframes alienmini{
	100%{background-position-x: -256px;}
}

#game .alien.wait{animation: standout 5s infinite; bottom: calc(50% - 200px);}
#game .bullet{width: 10px; height: 10px;}
#game .bullet.on{transform: translateZ(0); z-index: 10; bottom: 40px; animation: bullet 2s linear infinite; background: #fff;}
#game .alien.moving{animation-play-state: running;}
#game .alien.crash{animation: blink .3s linear infinite;}
#game .alien.gameover{transition: 2s bottom; bottom: -50%;}
#game .score{font-family: "Micro 5 Charted", sans-serif; top: 20px; font-size: 32px; letter-spacing: 3px;}
#game .score:before,
#game .score:after{content: '\00a0';}

#game .touch{top: 0; left: 0; width: 100%;height: 100%; display: none;}
.start #game .touch{display: block;}
#game .touch .left,
#game .touch .right{top: 0; left: 0; width: 50%; height: 100%;}
#game .touch .right{left: 50%;}


.start{animation: huecycle 200s linear infinite;}



@keyframes blink{
	50%{background: none;}
}

@keyframes fly{100%{top: 150%;}}
@keyframes bullet{100%{bottom: 150%;}}

@keyframes standout{
	95%{transform: scale(1);}
	100%{transform: scale(1.2);}
/* 	0%{transform: scale(.75);}
	20%{transform: scale(1);}
	40%{transform: scale(.75);}
	60%{transform: scale(1);}
	80%{transform: scale(.75);} 
	100%{transform: scale(.75);}*/
}

@keyframes colorchange{
	0%{background: #ffc107;}
	25%{background: #FFEE58;}
	50%{background: #9df403;}
	75%{background: #8BC34A;}
	100%{background: #ffc107;}
}
@keyframes gameover{
	50%{background: red;}
}

@keyframes huecycle{
    from{filter: hue-rotate(0deg);}
    to{filter: hue-rotate(359deg);}
}



@media only screen and (max-height: 450px){
	#game{display: none;}
}

@media only screen and (max-width: 600px){
	#game .airplane{width: 25px; height: 30px;}
	#game .alien{
		left: calc(50% - 32.5px); width: 65px; height: 48px;
		background-size: 256px 96px;
		animation-name: alienmini;
	}
	#game .alien.wait{bottom: calc(50% - 120px)};
	#game .bullet{width: 5px; height: 5px;}
}