:root {
  --width: 5.4%;
}

body {
  margin: 0;
}

@keyframes down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

#tela-do-jogo {
  width: 100%;
  height: 100%;
  background: url("../assets/img/space-background.jpg");
  background-size: cover;
  position: fixed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.animacao {
  animation-name: down;
  animation-duration: 20s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  position: fixed;
  width: 100vw;
}

#personagem {
  position: absolute;
  height: 10vh;
  width: 10vw;
  right: calc(50% - 5vw);
  bottom: 0;
  background-image: url("../assets/svg/TG1-GSA.gif");
  background-repeat: space;
  background-size: contain;
  background-position: center;
}

/*MOEDAS DO CENÁRIO*/
#tela-de-moedas,
.moedas {
  position: fixed;
  width: 100%;
  height: 100%;
}

.moeda {
  width: 50px;
  height: 50px;
  position: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("../assets/icons/gundam-coin.png");
}

/*BATERIAS DO CENÁRIO*/
#tela-de-baterias,
.baterias {
  position: fixed;
  width: 100%;
  height: 100%;
}

.bateria {
  width: 50px;
  height: 50px;
  position: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("../assets/icons/battery-icon.png");
}

/*DISPLAY DE PONTUAÇÃO*/
#pontuação {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-direction: row;
  position: fixed;
  color: yellow;
}

#pontuação h1 {
  font-size: 30px;
  font-family: "Courier New", Courier, monospace;
}

#pontuação p {
  font-size: 30px;
}

/*BARRA DE ENERGIA*/
#energia {
  position: fixed;
  top: 0;
  width: 100vw;
  -webkit-appearance: none;
  appearance: none;
}

/*PARADES DO JOGO*/
.parede {
  background: url("../assets/img/space-black.jpg");
  background-size: contain;
  height: 12.5vh;
}

/*CONJUNTO DE DUAS PAREDES LATERAIS*/
.parede-lateral {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

/*PASSAGEM LIVRE*/
.passagem-livre > .parede:first-child,
.passagem-livre > .parede:last-child {
  width: calc(var(--width) * 5.74);
}

/*PASSAGEM LIVRE MAIOR PARA POSTO*/
.passagem-livre-maior > .parede:first-child,
.passagem-livre-maior > .parede:last-child {
  width: var(--width);
}

/*PASSAGEM ZIG ZAG*/
.passagem-zig-zag:nth-child(1) > .parede:first-child,
.passagem-zig-zag:nth-child(2) > .parede:first-child,
.passagem-zig-zag:nth-child(3) > .parede:first-child,
.passagem-zig-zag:nth-child(7) > .parede:first-child,
.passagem-zig-zag:nth-child(7) > .parede:last-child,
.passagem-zig-zag:nth-child(8) > .parede:last-child,
.passagem-zig-zag:nth-child(8) > .parede:first-child,
.passagem-zig-zag:nth-child(3) > .parede:last-child,
.passagem-zig-zag:nth-child(4) > .parede:last-child,
.passagem-zig-zag:nth-child(5) > .parede:last-child,
.passagem-zig-zag:nth-child(6) > .parede:last-child,
.passagem-zig-zag:nth-child(4) > .parede:first-child {
  width: calc(var(--width) * 4.05);
}
.passagem-zig-zag:nth-child(2) > .parede:last-child,
.passagem-zig-zag:nth-child(1) > .parede:last-child,
.passagem-zig-zag:nth-child(5) > .parede:first-child,
.passagem-zig-zag:nth-child(6) > .parede:first-child {
  width: calc(var(--width) * 10.43);
}

/*PASSAGEM LIVRE A DIREITA*/
.passagem-livre-direita:nth-child(1) > .parede:first-child {
  width: calc(var(--width) * 7.43);
}
.passagem-livre-direita:nth-child(1) > .parede:last-child {
  width: calc(var(--width) * 4.05);
}
.passagem-livre-direita:nth-child(2) > .parede:first-child {
  width: calc(var(--width) * 6.513);
}
.passagem-livre-direita:nth-child(2) > .parede:last-child {
  width: calc(var(--width) * 4.97);
}
.passagem-livre-direita:nth-child(3) > .parede:first-child {
  width: calc(var(--width) * 5.594);
}
.passagem-livre-direita:nth-child(3) > .parede:last-child {
  width: calc(var(--width) * 5.89);
}
.passagem-livre-direita:nth-child(4) > .parede:first-child {
  width: calc(var(--width) * 4.675);
}
.passagem-livre-direita:nth-child(4) > .parede:last-child {
  width: calc(var(--width) * 6.81);
}
.passagem-livre-direita:nth-child(5) > .parede:first-child {
  width: calc(var(--width) * 3.756);
}
.passagem-livre-direita:nth-child(5) > .parede:last-child {
  width: calc(var(--width) * 7.729);
}
.passagem-livre-direita:nth-child(6) > .parede:first-child {
  width: calc(var(--width) * 2.837);
}
.passagem-livre-direita:nth-child(6) > .parede:last-child {
  width: calc(var(--width) * 8.648);
}
.passagem-livre-direita:nth-child(7) > .parede:first-child {
  width: calc(var(--width) * 1.918);
}
.passagem-livre-direita:nth-child(7) > .parede:last-child {
  width: calc(var(--width) * 9.567);
}
.passagem-livre-direita:nth-child(8) > .parede:first-child {
  width: var(--width);
}
.passagem-livre-direita:nth-child(8) > .parede:last-child {
  width: calc(var(--width) * 10.486);
}

/*PASSAGEM LIVRE A ESQUERDA*/
.passagem-livre-esquerda:nth-child(1) > .parede:first-child {
  width: calc(var(--width) * 4.05);
}
.passagem-livre-esquerda:nth-child(1) > .parede:last-child {
  width: calc(var(--width) * 7.43);
}
.passagem-livre-esquerda:nth-child(2) > .parede:first-child {
  width: calc(var(--width) * 4.97);
}
.passagem-livre-esquerda:nth-child(2) > .parede:last-child {
  width: calc(var(--width) * 6.513);
}
.passagem-livre-esquerda:nth-child(3) > .parede:first-child {
  width: calc(var(--width) * 5.89);
}
.passagem-livre-esquerda:nth-child(3) > .parede:last-child {
  width: calc(var(--width) * 5.594);
}
.passagem-livre-esquerda:nth-child(4) > .parede:first-child {
  width: calc(var(--width) * 6.81);
}
.passagem-livre-esquerda:nth-child(4) > .parede:last-child {
  width: calc(var(--width) * 4.675);
}
.passagem-livre-esquerda:nth-child(5) > .parede:first-child {
  width: calc(var(--width) * 7.729);
}
.passagem-livre-esquerda:nth-child(5) > .parede:last-child {
  width: calc(var(--width) * 3.756);
}
.passagem-livre-esquerda:nth-child(6) > .parede:first-child {
  width: calc(var(--width) * 8.648);
}
.passagem-livre-esquerda:nth-child(6) > .parede:last-child {
  width: calc(var(--width) * 2.837);
}
.passagem-livre-esquerda:nth-child(7) > .parede:first-child {
  width: calc(var(--width) * 9.567);
}
.passagem-livre-esquerda:nth-child(7) > .parede:last-child {
  width: calc(var(--width) * 1.918);
}
.passagem-livre-esquerda:nth-child(8) > .parede:first-child {
  width: calc(var(--width) * 10.486);
}
.passagem-livre-esquerda:nth-child(8) > .parede:last-child {
  width: var(--width);
}

/*PASSAGEM BIFURCADA*/
.passagem-bifurcada:nth-child(8) > .parede:first-child {
  width: calc(var(--width) * 5.74);
}
.passagem-bifurcada:nth-child(8) > .parede:last-child {
  width: calc(var(--width) * 5.74);
}
.passagem-bifurcada:nth-child(7) > .parede:first-child {
  width: calc(var(--width) * 4.729);
}
.passagem-bifurcada:nth-child(7) > .parede:last-child {
  width: calc(var(--width) * 4.729);
}
.passagem-bifurcada:nth-child(6) > .parede:first-child {
  width: calc(var(--width) * 3.716);
}
.passagem-bifurcada:nth-child(6) > .parede:last-child {
  width: calc(var(--width) * 3.716);
}
.passagem-bifurcada:nth-child(5) > .parede:first-child {
  width: calc(var(--width) * 2.702);
}
.passagem-bifurcada:nth-child(5) > .parede:nth-child(2) {
  width: calc(var(--width) * 4.05);
}
.passagem-bifurcada:nth-child(5) > .parede:last-child {
  width: calc(var(--width) * 2.702);
}
.passagem-bifurcada:nth-child(4) > .parede:first-child {
  width: calc(var(--width) * 2);
}
.passagem-bifurcada:nth-child(4) > .parede:nth-child(2) {
  width: calc(var(--width) * 6.08);
}
.passagem-bifurcada:nth-child(4) > .parede:last-child {
  width: calc(var(--width) * 2);
}
.passagem-bifurcada:nth-child(3) > .parede:first-child {
  width: calc(var(--width) * 2);
}
.passagem-bifurcada:nth-child(3) > .parede:nth-child(2) {
  width: calc(var(--width) * 6.08);
}
.passagem-bifurcada:nth-child(3) > .parede:last-child {
  width: calc(var(--width) * 2);
}
.passagem-bifurcada:nth-child(2) > .parede:first-child {
  width: var(--width);
}
.passagem-bifurcada:nth-child(2) > .parede:nth-child(2) {
  width: calc(var(--width) * 7.43);
}
.passagem-bifurcada:nth-child(2) > .parede:last-child {
  width: var(--width);
}
.passagem-bifurcada:nth-child(1) > .parede:first-child {
  width: var(--width);
}
.passagem-bifurcada:nth-child(1) > .parede:nth-child(2) {
  width: calc(var(--width) * 7.43);
}
.passagem-bifurcada:nth-child(1) > .parede:last-child {
  width: var(--width);
}