.tetro-screen {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.tetro-screen-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100%;
}

.tetro-board.game-board {
  height: 97%;
  position: absolute;
  width: 30%;
  left: 480px;
  bottom: 0;
}

/* .tetro-board.game-board.paused-game::after {
  content: "PAUSED GAME";
  position: absolute;
  top: 39%;
  left: 11%;
  color: white;
  animation: opacity-pulse .5s infinite alternate;
} */

.tetro-board.game-board .tetro-row {
  width: 100%;
}

.tetro-board.game-board .tetro-square {
  height: 42px;
  width: 42px;
}


.tetro-board.next-piece-1 {
  position: absolute;
  top: 90px;
  width: 10%;
  height: 14%;
}

.tetro-board.next-piece-1 .tetro-row {
  width: 100%;
}
.tetro-board.next-piece-1 .tetro-square {
  width: 38px;
  height: 38px;
}

.tetro-board.next-piece-1 {
  left: 970px;
}

.tetro-board.next-piece-1 .tetro-square.empty-cell {
  background: none;
}

.tetro-board {
  /*background: #666;*/
  margin: auto;
}



.tetro-square {
  display: inline-block;
  background: #005;
  box-sizing: border-box;
}
.doom-mode .tetro-square {
  background: #500;
}

.regular-mode .tetro-square.odd-square.empty-cell {
  /*background: #007*/
  animation: bg-pulse 2s infinite alternate;
}
.doom-mode .tetro-square.odd-square.empty-cell {
  /*background: #007*/
  animation: bg-doom-pulse 1s infinite alternate;
}


.tetro-square.full {
  background: #000;
  border-radius: .1em;
}

.tetro-square.ghost {
  background: #333;
  border-radius: 0;
}



/*Squares*/
.tetro-square.fixed-1000 {
  background: rgb(200,50,50);
  border-top: .12em solid rgb(230,60,60);
  border-left: .12em solid rgb(230,60,60);
  border-bottom: .12em solid rgb(170,40,40);
  border-right: .12em solid rgb(170,40,40);
}
.tetro-square.fixed-2000 {
  background: rgb(50,20,40);
  border: .075em solid rgba(200,50,50,.25);
}
.tetro-square.fixed-3000 {
  background: rgb(200,50,50);
  border-top: .12em solid rgb(230,60,60);
  border-left: .12em solid rgb(230,60,60);
  border-bottom: .12em solid rgb(170,40,40);
  border-right: .12em solid rgb(170,40,40);
}
.tetro-square.fixed-1001 {
  background: rgb(200,200,50);
  border-top: .12em solid rgb(230,230,60);
  border-left: .12em solid rgb(230,230,60);
  border-bottom: .12em solid rgb(170,170,40);
  border-right: .12em solid rgb(170,170,40);
}
.tetro-square.fixed-2001 {
  background: rgb(108,108,35);
  border: .075em solid rgba(255,255,0,.25);
}
.tetro-square.fixed-3001 {
  background: rgb(200,200,50);
  border-top: .12em solid rgb(230,230,60);
  border-left: .12em solid rgb(230,230,60);
  border-bottom: .12em solid rgb(170,170,40);
  border-right: .12em solid rgb(170,170,40);
}
.tetro-square.fixed-1002 {
  background: rgb(50,200,50);
  border-top: .12em solid rgb(60,230,60);
  border-left: .12em solid rgb(60,230,60);
  border-bottom: .12em solid rgb(40,170,40);
  border-right: .12em solid rgb(40,170,40);
}
.tetro-square.fixed-2002 {
  background: rgb(2,84,4);
  border: .075em solid rgba(7,250,7,.25);
}
.tetro-square.fixed-3002 {
  background: rgb(50,200,50);
  border-top: .12em solid rgb(60,230,60);
  border-left: .12em solid rgb(60,230,60);
  border-bottom: .12em solid rgb(40,170,40);
  border-right: .12em solid rgb(40,170,40);
}
/*.tetro-square.fixed-1003 {
  background: rgb(50,50,200);
  border-top: .12em solid rgb(60,60,230);
  border-left: .12em solid rgb(60,60,230);
  border-bottom: .12em solid rgb(40,40,170);
  border-right: .12em solid rgb(40,40,170);
}*/
.tetro-square.fixed-1003 {
  background: rgb(236, 126, 12);
  border-top: .12em solid rgb(236, 155, 70);
  border-left: .12em solid rgb(236, 155, 70);
  border-bottom: .12em solid rgb(183, 93, 0);
  border-right: .12em solid rgb(183, 93, 0);

}
/* .tetro-square.fixed-2003 {
  background: rgb(20,20,70);
  border: .075em solid rgba(50,50,200,.25);
} */
.tetro-square.fixed-2003 {
  background: rgb(108,77,30);
  border: .075em solid rgba(255,163,41,.25);
}
/*.tetro-square.fixed-3003 {
  background: rgb(50,50,200);
  border-top: .12em solid rgb(60,60,230);
  border-left: .12em solid rgb(60,60,230);
  border-bottom: .12em solid rgb(40,40,170);
  border-right: .12em solid rgb(40,40,170);
}*/
.tetro-square.fixed-3003 {
  background: rgb(236, 126, 12);
  border-top: .12em solid rgb(236, 155, 70);
  border-left: .12em solid rgb(236, 155, 70);
  border-bottom: .12em solid rgb(183, 93, 0);
  border-right: .12em solid rgb(183, 93, 0);
}
.tetro-square.fixed-1004 {
  background: rgb(50,200,200);
  border-top: .12em solid rgb(60,230,230);
  border-left: .12em solid rgb(60,230,230);
  border-bottom: .12em solid rgb(40,170,170);
  border-right: .12em solid rgb(40,170,170);
}
.tetro-square.fixed-2004 {
  background: rgb(20,50,70);
  border: .075em solid rgba(50,200,200,.25);
}
.tetro-square.fixed-3004 {
  background: rgb(50,200,200);
  border-top: .12em solid rgb(60,230,230);
  border-left: .12em solid rgb(60,230,230);
  border-bottom: .12em solid rgb(40,170,170);
  border-right: .12em solid rgb(40,170,170);
}
.tetro-square.fixed-1005 {
  background: rgb(200,50,200);
  border-top: .12em solid rgb(230,60,230);
  border-left: .12em solid rgb(230,60,230);
  border-bottom: .12em solid rgb(170,40,170);
  border-right: .12em solid rgb(170,40,170);
}
.tetro-square.fixed-2005 {
  background: rgb(50,20,70);
  border: .075em solid rgba(200,50,200,.25);
}
.tetro-square.fixed-3005 {
  background: rgb(200,50,200);
  border-top: .12em solid rgb(230,60,230);
  border-left: .12em solid rgb(230,60,230);
  border-bottom: .12em solid rgb(170,40,170);
  border-right: .12em solid rgb(170,40,170);
}
.tetro-square.fixed-1006 {
  background: rgb(200,200,200);
  border-top: .12em solid rgb(230,230,230);
  border-left: .12em solid rgb(230,230,230);
  border-bottom: .12em solid rgb(170,170,170);
  border-right: .12em solid rgb(170,170,170);
}
.tetro-square.fixed-2006 {
  background: rgba(200,200,200,.5);
  background: rgb(50,50,70);
  border: .075em solid rgba(200,200,200,.25);
}
.tetro-square.fixed-3006 {
  background: rgb(200,200,200);
  border-top: .12em solid rgb(230,230,230);
  border-left: .12em solid rgb(230,230,230);
  border-bottom: .12em solid rgb(170,170,170);
  border-right: .12em solid rgb(170,170,170);
}

.timer-container {
  position: absolute;
  color: #fff;
  font-size: 0.7em;
  left: 2%;
  bottom: 6%;
}
.mp-container {
  position: absolute;
  color: white;
  font-size: .7em;
  top: 2%;
  left: 2%;
}
.lines-container,
.level-container {
  font-family: 'Girassol';
  position: absolute;
  color: white;
  font-size: 3rem;
  top: 200px;
  left: 30px;
}
.level-container {
  top: 120px;
}
.enemy-container {
  width: 811px;
  height: 1080px;
  right: 0px;
  top: 0px;
  background-repeat: no-repeat;
  background-size: auto;
  position: absolute;
  z-index: 100;
}
.enemy-bar-container {
  position: absolute;
  width: 20px;
  height: 1017px;
  left: 920px;
  top: 30px;
  border-top: .07em solid #eee;
  border-left: .07em solid #eee;
  border-bottom: .07em solid #666;
  border-right: .07em solid #666;
}

.enemy-bar-filled {
  position: absolute;
  width: 100%;
  background: rgb(20,100,20);
  bottom: 0%;
}

.companion-container {
  position: absolute;
  width: 400px;
  height: 440px;
  top: 355px;
  left: 0;
}

.companion-item {
  height: 23%;
  background-size: 51%;
  background-repeat: no-repeat;
  background-position-x: 15%;
  position: relative;
}

.companion-item.companion-1 {
  height: 30%;
  width: 66%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.companion-item .action-key {
  color: #fff;
  font-size: .4em;
  position: absolute;
  left: 51%;
  width: 50%;
  bottom: 0;
}
.companion-item .action-key.disabled,
.companion-item .init-text.active-power.disabled {
  color: #666;
}
.companion-item.companion-1 .action-key {
  left: 83%;
}

.companion-item .tetro-board {
  position: absolute;
  top: 0;
  left: 220px;
  width: 160px;
  height: 140px;
}
.companion-item .tetro-board .init-text {
  font-size: .34em;
  color: #fff;
  padding: 25% 0 0 4%;
}

.companion-item .init-text.active-power {
  position: absolute;
  color: white;
  font-size: .4em;
  left: 110%;
  width: 60%;
  top: 29%;
}

.companion-item .tetro-board .tetro-square.empty-cell {
  background: none;
}
.companion-item .tetro-board .tetro-row {
  width: 160px;
  height: 32px;
}
.companion-item .tetro-board .tetro-square {
  width: 32px;
  height: 32px;
}

.enemy-hit {
  animation: shake .5s;
  animation-iteration-count: 2;
}

.enemy-change {
  animation: zoom 1.5s;
  animation-iteration-count: 1;
}

.Keyboard .tetro-button {
  display: none;
}

.Keyboard .tetro-button.tetro-swap {
  /* Alwasy display */
  display: block;
}

.Keyboard .tetro-button.tetro-swap::after {
  content: 'Press Z or 1';
  position: absolute;
  font-size: 2rem;
  top: 112px;
  left: 70px;
}


.Keyboard .tetro-button.tetro-pause,
.tetro-button.tetro-pause {
  opacity: 1;
  font-size: 2.2rem;
  padding-top: 8px;
  border-top: 0;
  border-left: 0;
  padding-left: 16px;
}

.tetro-button {
  border-radius: 0;
  font-size: 7rem;
  padding-top: 35px;
  opacity: .2;
}

.tetro-left {
  bottom: 0;
  left: 0;
  border-top-right-radius: 150px;
  width: 306px;
  height: 160px;
  padding-right: 70px;
  border-bottom: 0;
  border-left: 0;
}

.tetro-right {
  bottom: 0;
  right: 0;
  border-top-left-radius: 150px;
  width: 306px;
  height: 160px;
  padding-left: 70px;
  border-bottom: 0;
  border-right: 0;
}

.tetro-rotate, .tetro-down, .tetro-swap {
  bottom: 0;
  left: 0;
  width: 306px;
  height: 160px;
  border-left: 0;
  bottom: 200px;
  border-radius: 0;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  padding-right: 60px;
}

.tetro-down {
  bottom: 400px;
}

.tetro-swap {
  bottom: 600px;
  font-size: 4rem;
  padding-right: 200px;
  padding-top: 40px;
  width: 400px;
}

.tetro-drop {
  bottom: 0;
  right: 490px;
  border-top-left-radius: 150px;
  width: 446px;
  height: 160px;
  padding-left: 20px;
  border-bottom: 0;
  border-top-right-radius: 150px;
}

.tetroContainer .mobile-layer {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100;
}

.tetroContainer .finishModal {
  z-index: 200;
}

.finishModal.pause {
  display: block;
  opacity: 1;
}

@keyframes shake {
    0% {transform: translate(-3%,0);}
   10% { transform: translate(3%,0);}
   20% { transform: translate(-5%,0);}
   30% { transform: translate(-7%,0);}
   40% { transform: translate(8%,0);}
   50% { transform: translate(-4%,0);}
   60% { transform: translate(10%,0);}
   70% { transform: translate(-10%,0);}
   80% { transform: translate(5%,0);}
   90% { transform: translate(-3%,0);}
  100% { transform: translate(3%,0);}
}
@keyframes zoom {
  /* 0% {transform: translate(-3%,0);} */
  45% { transform: translate(-100%,0) scale(1.5);}
  55% { transform: translate(-100%,0) scale(1.5);}
  /* 100% { transform: translate(3%,0);} */
}

/*Animations*/
@keyframes bg-pulse {
  0% {
      background: #003;
  }
  100% {
      background: #007;
  }
}

@keyframes bg-doom-pulse {
  0% {
      background: #300;
  }
  100% {
      background: #700;
  }
}

@keyframes opacity-pulse {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}