body {cursor: crosshair;}
#game, #score {z-index: 1000;}
#protector {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001;}
#fighter {position: fixed; bottom: 0; left: calc(50% - 4vh); width: 8vh; height: 16vh; z-index: 1003; background: url('/data/img/raketa.gif') center center; background-size: cover; animation: fly 2s infinite;}
.ball {position: fixed; width: 0.4vh; height: 5vh; background: purple; z-index: 1002; animation: strela 1s infinite;}
.trefen {opacity: 0.3; animation: wiggle 0.3s; filter: grayscale(100%);}
.exploze {position: absolute; width: 10vh; height: 10vh; background: url('/data/img/bomb.gif') center center; background-size: cover; z-index: 1004; transform: translate(-50%, -50%);}
#msg {display: none; border-collapse: collapse; padding: 0; margin: 0; z-index: 1005; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); color: white; text-align: center; vertical-align: middle;} /* backdrop-filter: blur(0.5vh); */
  #msg span, #esc span {font-size: 6vh; background: red; padding: 1vh 1.5vh;}
  #scorelist {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3vh; z-index: 1006; background: transparent; color: white; border-collapse: collapse;}
  #scorelist tr:first-child, #scorelist tr:nth-child(3) {background: red; color: white;}
    #scorelist tr:first-child {animation: fly 5s infinite;}
  #scorelist tr:nth-child(2) td {height: 1vh}
  #scorelist tr td {padding: 1vh 1.5vh;}
#esc {position: fixed; bottom: 5vh; left: 50%; transform: translateX(-50%); z-index: 1006;}
  #esc span {font-size: 3vh; color: white;}
audio {display: none;}
#name {width: 28vh; font-size: 6vh; background: #3700ff; color: white; padding: 1vh; border: none; outline: none; animation: fly 5s infinite; text-align: center;}

@keyframes strela {
	0%		{background: #ff00bf;}
	25%		{background: #3700ff;}
	50%		{background: #fff700;}
	75%		{background: #ff0044;}
	100%  {background: #00ff88;}
}

@keyframes fly {
	0%		{transform: translate(-0.2vh, -0.2vh);}
	25%		{transform: translate(0.2vh, -0.2vh);}
	50%		{transform: translate(0.2vh, 0.2vh);}
	75%		{transform: translate(-0.2vh, 0.2vh);}
	100%	{transform: translate(-0.2vh, -0.2vh);}
}

@keyframes esc {
	0%		{transform: translate(-1vh, -1vh);}
	25%		{transform: translate(1vh, -1vh);}
	50%		{transform: translate(1vh, 1vh);}
	75%		{transform: translate(-1vh, 1vh);}
	100%	{transform: translate(-1vh, -1vh);}
}