/* Geral */
html {
  font-family: 'Montserrat', sans-serif;
  background-image: url(images/bg-cena.gif);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.panel {
  margin: 10;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Área dos Pontos */
.scores {
  display: flex;
}

.score {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.score {
  font-weight: 300;
  font-size: 1.6rem;
}

.life-bar {
  width: 80%;
  height: 20px;
  border: 1px solid #AAA;
}

.life-bar .life {
  display: flex;
  justify-content: center;
  height: 100%;
  background: #2fc236;
}

.percent {
  color: #fff;
}

.life-bar .life.danger {
  background-color: #FF0000;
}

/* Área de resultado */
.result {
  display: flex;
  justify-content: center;
  font-size: 2em;
  font-weight: 600;
}

.img-res {
  width: 100%;
  rotate: 10deg;
}

/* Área dos Botões (controle do Jogo) */
.buttons {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 auto;
  }
}

.btn {
  margin: 10px;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: 1.1rem;
}

.btn:active {
  transition: all 2s;
  transform: translateY(30px);
}

.start-game {
  background: #2193b0;
  color: #fff;
}

.attack {
  background: #ED213A;
  color: #fff;
}

.special-attack {
  background: #FDC830;
  color: #000;
}

.heal {
  background: #56ab2f;
  color: #000;
}

.giv-up {
  background: #E0EAFC;
  color: #000;
}

/* Área dos Logs */
.logs ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.logs ul li {
  display: flex;
  justify-content: center;
  margin: 4px 0;
  padding: 3px 0;
  font-weight: 600;
  font-size: 1.3rem;
  border-radius: 3px;
}

.ninja {
  background-color: #4252af3f;
  color: rgba(226, 226, 226, 0.404);
}

.robo {
  background-color: #ED213A3f;
  color: rgb(255, 196, 0, 0.7);
}

.ninja:nth-child(2) {
  background-color: #4253afaa;
  color: rgb(192, 192, 192);
}

.robo:nth-child(1) {
  background-color: #ED213A;
  color: rgb(255, 196, 0);
}

.link-none {
  display: none;
}