.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%;
    opacity: 0.7;
    background: black;
}

.tetro-board.game-board {
    height: 97%;
    position: absolute;
    width: 30%;
    top: 2%;
    left: 20%;
}


.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: 4.029%;
    width: 7.326%;

}


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

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

.tetro-board.next-piece-1 {
    left: 49%;
}

.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(50,50,40);
    border: .075em solid rgba(200,200,50,.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(20,50,50);
    border: .075em solid rgba(50,200,50,.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-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 {
    position: absolute;
    color: white;
    font-size: .7em;
    top: 7%;
    left: 2%;
}
.enemy-container {
    width: 40%;
    height: 90%;
    background-size: 100%;
    right: 2%;
    background-repeat: no-repeat;
    top: 5%;
    position: absolute;
}
.enemy-bar-container {
    position: absolute;
    width: 1%;
    height: 42%;
    left: 47%;
    top: 51%;
    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: 15%;
    height: 50%;
    top: 15%;
    left: 2%;
}

.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: 59%;
    width: 50%;
    height: 100%;
}
.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: 100%;
    height: 25%;
}
.companion-item .tetro-board .tetro-square {
    width: 21%;
    height: 100%;
}

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

@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);}
}

/*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;
    }
}