/**
* Colors
*/
/**
* Fonts weights
*/
@font-face {
  font-family: "NuclearRain";
  src: url(61b95dd4b016f64794129f139a8d18a6.eot);
  src: url(61b95dd4b016f64794129f139a8d18a6.eot#iefix) format("embedded-opentype"), url(5813fc45c73eba17232f597c23f43d43.ttf) format("truetype"), url(data:application/font-woff;base64,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) format("woff2"), url(data:application/font-woff;base64,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) format("woff"), url(503f3f3f91278877954780b239fed552.svg#NuclearRain) format("svg");
  font-style: normal;
  font-weight: 400;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
  font-family: "NuclearRain";
  overscroll-behavior: none;
}

body {
  background: black;
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
  color: white;
}
@media (min-width: 770px) {
  body {
    width: 436px;
    margin: 0 auto;
  }
  body .title-screen span {
    display: none;
  }
}

small {
  opacity: 0.7;
  font-size: 0.8rem;
}

.button {
  border: none;
  outline: none;
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  font-size: 2rem;
  transition: all 0.2s ease;
  color: white;
  text-shadow: 0 0 5px black;
}
.button:hover {
  text-shadow: 0 0 5px white;
}

.button2 {
  border: none;
  outline: none;
  display: block;
  width: 100%;
  background: linear-gradient(45deg, #474747, rgba(71, 71, 71, 0));
  border: 3px solid #474747;
  padding: 0.5rem 1rem;
  padding-top: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.button2.success {
  background: #43a047;
  border-color: #347c37;
}
.button2.danger {
  background: #df2424;
  border-color: #b51b1b;
}

input {
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
}
input[type=submit] {
  border: none;
  outline: none;
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  font-size: 2rem;
  transition: all 0.2s ease;
  color: white;
  text-shadow: 0 0 5px black;
  background: none;
  font-size: 1.5rem;
}
input[type=submit]:hover {
  text-shadow: 0 0 5px white;
}
input:not([type=submit]) {
  border: 3px solid white;
}

h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  text-shadow: -0.2rem 0 black, 0.2rem 0 black, 0 -0.2rem black, 0 0.2rem black, -0.2rem -0.2rem black, 0.2rem 0.2rem black;
}

.progress-bar {
  height: 1rem;
  border: 0.1rem solid white;
  padding: 0.2rem;
  position: relative;
  display: block;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.3rem;
  height: 1.2rem;
  font-size: 0.7rem;
  border-radius: 0.2rem;
}
.progress-bar > i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  transition: all 1s ease;
  background: white;
  border: 1px solid black;
}
.progress-bar > i:not([style]) {
  opacity: 0;
}
.progress-bar > span {
  text-shadow: -1px 0 black, 1px 0 black, 0 -1px black, 0 1px black, -1px -1px black, 1px 1px black;
  margin-top: 3px;
}

.currency {
  width: 1.5rem;
  height: auto;
  margin-bottom: -0.6em;
  margin-left: -0.6em;
  margin-right: -0.6em;
  margin-top: -1em;
}

* {
  list-style: none;
}

#status {
  position: fixed;
  top: 2rem;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: inline;
  flex-direction: column;
  padding: 0 0.5rem;
}
#status > .bar {
  height: 1rem;
  border: 0.1rem solid white;
  padding: 0.2rem;
  position: relative;
  display: block;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.3rem;
  height: 1.2rem;
  font-size: 0.7rem;
  border-radius: 0.2rem;
}
#status > .bar > i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  transition: all 1s ease;
  background: white;
  border: 1px solid black;
}
#status > .bar > i:not([style]) {
  opacity: 0;
}
#status > .bar > span {
  text-shadow: -1px 0 black, 1px 0 black, 0 -1px black, 0 1px black, -1px -1px black, 1px 1px black;
  margin-top: 3px;
}
#status > .bar > span {
  z-index: 1;
}
#status > #health > i {
  background: crimson;
  background: linear-gradient(45deg, #7f0c23, crimson);
}
#status > #experience > i {
  background: limegreen;
  background: linear-gradient(45deg, #1e7b1e, limegreen);
}

.level-up-ui,
.game-over-ui,
.credential-ui,
.scores-ui,
.change-log-ui {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 1rem;
  width: calc(100% - 2rem);
}

.score-ui {
  position: fixed;
  top: 5.6rem;
  left: 0;
  color: white;
  width: 100%;
  text-align: center;
  font-size: 1rem;
}

.currency-ui {
  position: fixed;
  top: 1rem;
  right: 0.6rem;
  color: white;
  width: calc(100% - 2rem);
  text-align: right;
  font-size: 0.8rem;
  z-index: 10;
}
.currency-ui > span {
  margin-left: 1rem;
}

.credential-ui form {
  display: flex;
  flex-direction: column;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
  padding: 1rem;
  text-align: center;
  border-radius: 5px;
}

.version-ui {
  position: fixed;
  right: 0.5rem;
  bottom: 0.5rem;
}

.fps-ui {
  position: fixed;
  top: 1rem;
  left: 0.5rem;
  font-size: 0.8rem;
}

.level-up-ui {
  margin-top: 4rem;
  width: calc(100% - 4rem);
}
.level-up-ui > .weapon {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 2px solid white;
  padding: 1rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.2);
}
.level-up-ui > .weapon.upgrade {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
}
.level-up-ui > .weapon > figure {
  margin-right: 1rem;
}
.level-up-ui > .weapon > figure > img {
  width: 4rem;
  image-rendering: pixelated;
}
.level-up-ui > .weapon > .content {
  display: flex;
  flex-direction: column;
}
.level-up-ui > .weapon > .content strong {
  text-shadow: -1px 0 black, 1px 0 black, 0 -1px black, 0 1px black, -1px -1px black, 1px 1px black;
}

.game-over-ui {
  border: 2px solid white;
  padding: 1rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.game-over-ui > div {
  margin-bottom: 2rem;
  text-align: center;
}
.game-over-ui table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.game-over-ui table tr.active {
  position: relative;
}
.game-over-ui table tr.active td {
  background: #fff;
  color: black;
}
.game-over-ui table tr.active:nth-child(1) td {
  background: gold;
  color: black;
}
.game-over-ui table tr.active:nth-child(2) td {
  background: deepskyblue;
  color: black;
}
.game-over-ui table tr.active:nth-child(3) td {
  background: coral;
  color: black;
}
.game-over-ui table tr:nth-child(1) {
  font-size: 1.3em;
  color: gold;
}
.game-over-ui table tr:nth-child(2) {
  font-size: 1.2em;
  color: deepskyblue;
}
.game-over-ui table tr:nth-child(3) {
  font-size: 1.2em;
  color: coral;
}
.game-over-ui table tr td {
  padding-top: 0.3rem;
  padding-bottom: 0.1rem;
}
.game-over-ui table tr td:first-of-type {
  padding-left: 0.5rem;
}
.game-over-ui table tr td:last-of-type {
  padding-right: 0.5rem;
}
.game-over-ui table tr td:nth-child(1), .game-over-ui table tr td:nth-child(2) {
  text-align: left;
}
.game-over-ui table tr td.ship img {
  transform: scale(2) rotate(45deg);
}
.game-over-ui table tr td.upgrades {
  display: flex;
}
.game-over-ui table tr td.upgrades .upgrade {
  position: relative;
  background: black;
  border-radius: 0.2rem;
  margin-left: 0.2rem;
  padding: 0.1rem 0.2rem;
}
.game-over-ui table tr td.upgrades .upgrade span {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  font-size: 0.5rem;
  color: white;
  text-shadow: -1px 0 black, 1px 0 black, 0 -1px black, 0 1px black, -1px -1px black, 1px 1px black;
}
.game-over-ui table tr td img {
  image-rendering: pixelated;
}

.scores-ui {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 1rem;
  width: calc(100% - 2rem);
  border: 2px solid white;
  padding: 1rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scores-ui > div {
  text-align: center;
}
.scores-ui table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.scores-ui table tr.active {
  position: relative;
}
.scores-ui table tr.active td {
  background: #fff;
  color: black;
}
.scores-ui table tr.active:nth-child(1) td {
  background: gold;
  color: black;
}
.scores-ui table tr.active:nth-child(2) td {
  background: deepskyblue;
  color: black;
}
.scores-ui table tr.active:nth-child(3) td {
  background: coral;
  color: black;
}
.scores-ui table tr:nth-child(1) {
  font-size: 1.3em;
  color: gold;
}
.scores-ui table tr:nth-child(2) {
  font-size: 1.2em;
  color: deepskyblue;
}
.scores-ui table tr:nth-child(3) {
  font-size: 1.2em;
  color: coral;
}
.scores-ui table tr td {
  padding-top: 0.3rem;
  padding-bottom: 0.1rem;
}
.scores-ui table tr td:first-of-type {
  padding-left: 0.5rem;
}
.scores-ui table tr td:last-of-type {
  padding-right: 0.5rem;
}
.scores-ui table tr td:nth-child(1), .scores-ui table tr td:nth-child(2) {
  text-align: left;
}
.scores-ui table tr td.ship img {
  transform: scale(2) rotate(45deg);
}
.scores-ui table tr td.upgrades {
  display: flex;
}
.scores-ui table tr td.upgrades .upgrade {
  position: relative;
  background: black;
  border-radius: 0.2rem;
  margin-left: 0.2rem;
  padding: 0.1rem 0.2rem;
}
.scores-ui table tr td.upgrades .upgrade span {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  font-size: 0.5rem;
  color: white;
  text-shadow: -1px 0 black, 1px 0 black, 0 -1px black, 0 1px black, -1px -1px black, 1px 1px black;
}
.scores-ui table tr td img {
  image-rendering: pixelated;
}

.ship-select-ui {
  position: fixed;
  top: 2rem;
  left: 1rem;
  transform: unset;
  color: white;
  width: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
}
.ship-select-ui .active-ship .ship {
  height: 20rem;
}
.ship-select-ui .active-ship .ship.active figure img {
  animation: animate-ship 15s ease-out infinite;
}
.ship-select-ui .active-ship .ship:not(.active) .head figure img {
  filter: contrast(0);
}
.ship-select-ui .active-ship .ship:not(.selected) {
  display: none;
}
.ship-select-ui .ship {
  border: 2px solid white;
  padding: 1rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.ship-select-ui .ship:not(.active) figure img {
  filter: brightness(0);
}
.ship-select-ui .ship:not(.active):not(.selected) figure img {
  filter: contrast(0);
}
.ship-select-ui .ship figure > img {
  width: 4rem;
  image-rendering: pixelated;
}
.ship-select-ui .ship > .head {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.ship-select-ui .ship > .head > .images {
  display: flex;
  margin-bottom: 1rem;
}
.ship-select-ui .ship > .head > .images > figure {
  margin: 0 2rem;
  margin-right: 1rem;
  padding: 0.5rem;
  border-radius: 5px;
  border: 2px solid white;
  padding: 1rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.2);
}
.ship-select-ui .ship > .head > .images > figure > img {
  width: 4rem;
  image-rendering: pixelated;
}
.ship-select-ui .ship > .head > .stats .stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.2rem;
}
.ship-select-ui .ship > .head > .stats .stat span {
  font-size: 0.8rem;
}
.ship-select-ui .ship > .head > .stats .stat > figure {
  display: flex;
  width: 5rem;
  height: 1rem;
  margin-left: 0.6rem;
}
.ship-select-ui .ship > .head > .stats .stat > figure > i {
  background: linear-gradient(45deg, orange, gold);
}
.ship-select-ui .ship > .content {
  display: flex;
  flex-direction: column;
  height: 4rem;
  align-items: center;
  justify-content: center;
}
.ship-select-ui .ship > .button2 span img {
  width: 2rem;
  height: auto;
  margin-bottom: -0.6em;
  margin-left: -0.6em;
  margin-right: -0.6em;
  margin-top: -1em;
  margin-left: 0;
  font-size: 1rem;
}
.ship-select-ui .ship > .button2.danger {
  filter: grayscale(1);
}
.ship-select-ui .ships {
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100vh - 25rem);
  border: 2px solid white;
  padding: 1rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.2);
}
.ship-select-ui .ships > .ship {
  width: calc(33% - 0.5rem);
  margin: 0.25rem;
  border: 2px solid white;
  padding: 1rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.2);
}
.ship-select-ui .ships > .ship.selected {
  background: white;
  text-shadow: -2px 0 black, 2px 0 black, 0 -2px black, 0 2px black, -2px -2px black, 2px 2px black;
}
.ship-select-ui .ships > .ship figure > img {
  width: 3rem;
}

@keyframes animate-ship {
  0% {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  10% {
    transform: rotate3d(1, 1, 0, 0deg) translate(0, -10px);
  }
  20% {
    transform: rotate3d(1, 1, 0, 0deg) translate(0, 0px);
  }
  30% {
    transform: rotate3d(0, 1, 1, 45deg) translate(0, -10px) scale(0.7);
  }
  40% {
    transform: rotate3d(0, 1, 1, 45deg) translate(0, 10px) scale(0.5);
  }
  50% {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  60% {
    transform: rotate3d(1, 1, 0, 0deg) translate(0, -10px);
  }
  70% {
    transform: rotate3d(1, 1, 0, 0deg) translate(0, 0px);
  }
  80% {
    transform: rotate3d(0, 1, 1, -45deg) translate(0, -10px) scale(0.7);
  }
  90% {
    transform: rotate3d(0, 1, 1, -45deg) translate(0, 10px) scale(0.5);
  }
  100% {
    transform: rotate3d(1, 1, 0, 0deg);
  }
}
.wave-ui {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 1rem;
  width: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-style: italic;
  color: white;
  top: 9rem;
  transition: all 2s ease;
}
.wave-ui .progress-bar {
  min-width: 10rem;
  height: 0.7rem;
}
.wave-ui.hidden {
  opacity: 0.5;
}
.wave-ui.invisible {
  opacity: 0;
}

.title-screen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 1rem;
  width: calc(100% - 2rem);
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-screen h1 {
  text-align: center;
  font-size: 4rem;
  position: relative;
  margin-bottom: 0.5em;
  overflow: hidden;
  animation: titleAnimation 1s linear forwards;
  text-shadow: -0.2rem 0 black, 0.2rem 0 black, 0 -0.2rem black, 0 0.2rem black, -0.2rem -0.2rem black, 0.2rem 0.2rem black;
}
.title-screen h1 figure {
  position: absolute;
  width: 4rem;
  height: 4rem;
  right: 0;
  top: 0;
  margin-left: auto;
}
.title-screen h1 figure img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  transform: rotate(90deg);
}
.title-screen > span {
  margin-bottom: 1rem;
  border: none;
  outline: none;
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  font-size: 2rem;
  transition: all 0.2s ease;
  color: white;
  text-shadow: 0 0 5px black;
  height: 0;
  margin-bottom: 0;
  padding: 0;
  opacity: 0;
  animation: buttonAnimation 0.2s linear 1s forwards;
}
.title-screen > span:hover {
  text-shadow: 0 0 5px white;
}

@keyframes titleAnimation {
  0% {
    width: 0%;
  }
  100% {
    width: 20rem;
  }
}
@keyframes buttonAnimation {
  0% {
    height: 0;
    opacity: 0;
    margin-bottom: 0;
    padding: 0;
  }
  100% {
    height: auto;
    opacity: 1;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
  }
}
.pause-ui {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 1rem;
  width: calc(100% - 2rem);
  border: 2px solid white;
  padding: 1rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-ui {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.progress-ui i {
  height: 1rem;
  width: 1rem;
  border-radius: 0.4rem;
  border: 3px solid black;
  outline: 2px solid white;
  background-color: black;
}
.progress-ui i:not(:last-of-type) {
  position: relative;
}
.progress-ui i.running, .progress-ui i.completed {
  background: white;
}
.progress-ui i.running {
  border-width: 6px;
}
.progress-ui i.boss {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
}
.progress-ui i.boss img {
  width: 2rem;
  image-rendering: pixelated;
  transform: translate(-1px, 0px) scale(2);
}
.progress-ui i + hr + i, .progress-ui i.completed {
  transform: scale(0.8);
}
.progress-ui i.completed + hr + i:not(.completed) {
  transform: scale(1);
}
.progress-ui i + hr {
  opacity: 0;
}
.progress-ui i.completed + hr {
  opacity: 1;
}
.progress-ui hr {
  width: 0.1rem;
  height: 1rem;
  background: white;
}

.player-weapon-ui {
  position: fixed;
  display: flex;
  width: 100%;
  bottom: 1rem;
  left: 0;
  justify-content: center;
}
.player-weapon-ui img {
  width: 4rem;
  image-rendering: pixelated;
}
.player-weapon-ui .weapon {
  position: relative;
  height: 2rem;
  width: 2rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5rem;
  border: 2px solid white;
  padding: 1rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.2);
}
.player-weapon-ui span {
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
  font-weight: bold;
  font-size: 0.6rem;
  text-shadow: -1px 0 black, 1px 0 black, 0 -1px black, 0 1px black, -1px -1px black, 1px 1px black;
}

.change-log-ui {
  max-height: calc(100vh - 4rem);
  overflow-y: scroll;
}
.change-log-ui h3 {
  margin: 1rem 0;
  border-top: 2px solid #fff;
  padding-top: 1rem;
}
.change-log-ui ul {
  padding-left: 1rem;
}
.change-log-ui ul li {
  margin-top: 0.5rem;
  list-style: square;
}