/* Hello there! We welcome you to the file responsible to beautify your task. Go through the elements once by searching for them and please don't get overwhelmed by these hundreds of lines of code because once you start knowing that they do, they're beautiful (here, quite literally xD)*/

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

body{
  background-repeat: repeat;
  color: white;

}

.game-board {
  height: 100%;
  width: 100%;
  position: absolute;
  height: 100vh;
}

.hacker-area h1 {
  padding: 12px 10px 0 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,.6);
  font-style: italic;
  position: absolute;
  top: 0;
}

h1 strong {
  color: white;
  font-style: normal;
}

.hacker-area,
.player-area {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 30px 10px 30px 110px;
  min-height: 235px;
  background-repeat: repeat;
  background-size: 200px;
  height: 50vh;
  box-sizing: border-box;
}

.hacker-area {
  background-position: bottom;
  align-items: flex-end;
  background-color: #e65b74;
}

.player-area {
  background-position: top;
  align-items: top;
  background-color: #2563eb;
}

.player-area .card {
  cursor: pointer;
}

.life-bar {
  background: rgba(255,255,255,.15);
  width: 10px;
  height: 90px;
  position: relative;
}

.life-left {
  position: absolute;
  left: 0;
  bottom: 0;
  background: white;
  width: 100%;
  height: 50%;
  transition: height .25s ease-out;
}

.stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: 90px;
  padding: 0 5px 0 5px;
  border-radius: 4px;
  background: rgba(0,0,0,.3);
}

.stats .thumbnail {
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 5px 0;
  text-shadow: 5px 5px 0px rgba(0,0,0,.2);
}

.stats .thumbnail.ouch {
  animation: ouch .15s linear 3;
}

.stats .name {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.life-total {
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0;
}

@keyframes ouch {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

.game-over button {
  display: none;
}

button.next-turn {
  position: fixed;
  bottom: 20px;
  transition: all .15s ease-out;
  background: black;
  display: none;
}

.during-game .next-turn {
  display: block;
}

button.start-game {
  position: absolute;
  background: black;
  display: none;
  top: -20px;
}

.before-game .start-game {
  display: block;
}

button:hover {
  transform: scale(1.03);
}

button:active {
  transform: scale(.97);
}

.winner-section {
  display: none;
  position: fixed;
  padding: 15px 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  animation: winnerAppear .4s ease-out;
}

.winner-section button {
  margin-left: 15px;
}

.winner-message {
  color: white;
  font-size: 22px;
  font-weight: 700;
  position: relative;
  top: 1px;
}

@keyframes winnerAppear {
  0% {
    transform: translateY(150px);
  }
  60% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

button {
  font-size: 15px;
  line-height: 15px;
  padding: 8px 22px 9px 22px;
  box-sizing: border-box;
  font-weight: 700;
  border: solid 3px white;
  color: white;
  background: transparent;
  border-radius: 30px;
  transition: all ease-out .2s;
  cursor: pointer;
  outline: none;
  animation: buttonPulse .2s infinite ease-in-out;
}

@keyframes buttonPulse {
  50% {
    transform: scale(1.02);
  }
}

button[disabled=true] {
  opacity: 0;
  transform: scale(.95);
  cursor: default;
}

.card {
  opacity: 0;
  margin: 0 10px;
  width: 150px;
  height: 200px;
  padding: 10px 15px;
  color: black;
  font-size: 14px;
  line-height: 18px;
  font-weight: bold;
  position: relative;
  box-sizing: border-box;
  text-align: left;
  transition: all .15s ease-out;
  box-shadow: 0px 5px 5px rgba(0,0,0,.3);
  overflow: hidden;
}

.card:after {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 140%;
  height: 0%;
  background: white;
  animation: sheen infinite .5s ease-in-out;
  display: none;
  transform: rotate(-7deg);
}

.game-board:not(.card-selected) .player-card:hover:after {
  display: block;
  animation: sheen .35s linear 1;
}

@keyframes sheen {
  0% {
    top: -10%;
    height: 0%;
    opacity: 0;
  }
  25% {
    top: -10%;
    height: 20%;
    opacity: .2;
  }
  50% {
    top: 20%;
    height: 50%;
    opacity: .3;
  }
  75% {
    top: 110%;
    height: 20%;
    opacity: .2;
  }
  100% {
    top: 110%;
    height: 0%;
    opacity: 0;
  }
}

.card.prepared {
  display: block;
  opacity: 0;
}

.card.showCard {
  opacity: 1;
}

.hacker-card.showCard {
  animation: hackerShowCard .5s ease-out;
}

/* When the hacker card appears */
@keyframes hackerShowCard {
  0%   { transform: translateY(-25px); opacity: .5; }
  60%  { transform: translateY(5px); }
  100% { transform: translateY(0px); }
}

.player-card.showCard {
  animation: playerShowCard .5s ease-out;
}

/* When the player card appears */
@keyframes playerShowCard {
  0%   { transform: translateY(25px); opacity: .5; }
  60%  { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.card.tie-card {
  transform: translateY(0px) !important;
}

.card.worse-card {
  background: #888;
}

.hacker-card.better-card {
  transform: scale(1.03);
}

.hacker-card.worse-card {
  transform: scale(.90) translateY(-25px) rotate(3deg);
}


.game-board:not(.card-selected) .player-area .card:not(.played-card):hover {
  transform: translateY(-10px);
  box-shadow: 0px 15px 15px rgba(0,0,0,.3);
}

.player-card.played-card {
  transform: translateY(-40px);
  box-shadow: 0px 15px 15px rgba(0,0,0,.3);
}

.player-card.worse-card {
  transform: translateY(10px) rotate(3deg) !important;
  box-shadow: 0px 5px 5px rgba(0,0,0,.3);
}

.player-card.better-card {
  transform: scale(1.03) translateY(-60px);
}


/* Shows a checkmark on the better card */

.card.better-card:before,
.card.worse-card:before {
  font-size: 30px;
  position: absolute;
  bottom: 18px;
  right: 20px;
  color: rgba(0,0,0,.3);
  display: block;
}

.card.better-card:before {
  content: "\2713";
}

.card.worse-card:before {
  content: "\2717";
}

.card .power {
  font-size: 30px;
  position: absolute;
  bottom: 12px;
  line-height: 30px;
  left: 10px;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50%;
  color: rgba(0,0,0,0);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.card.reveal-power .power {
  color: black;
  animation: showPower .2s ease-out;
  background: none;
}


@keyframes showPower {
  0% {
    background: none;
    transform: scaleX(1);
    color: rgba(0,0,0,0);
  }
  49% {
    color: rgba(0,0,0,0);
    transform: scaleX(0);
  }
  51% {
    background: none;
    color: black;
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}