.ui__center{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.ui{
    position: relative;
    display: flex;
    width: 600px;
    height: 606px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    border: 2px solid white;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
    overflow: hidden;
    clip-path: polygon(0% 0%, calc(100% + 10px) 0%, calc(100% + 10px) calc(100% + 10px), 0% calc(100% + 10px), 0% calc(100% + 10px), 0% calc(100% + 10px));
    animation: 1s draw-ui-in linear;
}
@keyframes draw-ui-in{
    0% {
        box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
        clip-path: polygon(calc(100% + 10px) 0%, calc(100% + 10px) 0%, calc(100% + 10px) 0%, calc(100% + 10px) 0%, calc(100% + 10px) 0%, calc(100% + 10px) 0%);
    }
    50% {clip-path: polygon(0% 0%, calc(100% + 10px) 0%, calc(100% + 10px) calc(100% + 10px), calc(100% + 10px) calc(100% + 10px), 50% 50%, 0% 0%);}
    100% {
        box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
        clip-path: polygon(0% 0%, calc(100% + 10px) 0%, calc(100% + 10px) calc(100% + 10px), 0% calc(100% + 10px), 0% calc(100% + 10px), 0% calc(100% + 10px));
    }
}

.left-panel{
    width: 150px; height: 100%;
    border-right: 2px solid white;
    display: flex;
    flex-direction: column;
}
.hold-panel{
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-bottom: 2px solid white;
    background: #8090A0;
    display: flex;
    flex-direction: column;
    padding: 10px;
}
.hold-text{
    font-size: 12px;
    font-family: 'Roboto Slab', serif;
    color: white;
    width: 100%;
}
.hold-tetromino{
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .4s all;
}
.hold-tetromino.remove{
    transform: rotate(-360deg) scale(0);
}
.hold-tetromino > span{
    position: relative !important;
    transform: rotate(-20deg);
}
.hold-tetromino > span > span{
    background: #8090A0;
}
.hold-tetromino.not-ready > span{
    position: relative !important;
    transform: rotate(-20deg);
}
.hold-tetromino.not-ready > span > span{
    border-style: dashed;
}
.next-panel{
    width: 100%;
    flex: 1;
    overflow: hidden;
    display: flex; 
    flex-direction: column;
    padding: 10px;
}
.next-text{
    font-size: 12px;
    font-family: 'Roboto Slab', serif;
    color: white;
    width: 100%;
}
.next-tetromino{
    width: 100%;
    flex: 1;
    display: flex; 
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    transform: translateY(100%);
    animation: 1.5s draw-next-tetromino-in forwards;
    animation-delay: 1s;
}
.next-tetromino > span{
    position: relative !important;
    transform: scale(.7) rotate(0deg);
    margin: 15px 0px;
    transition: .3s;
}
.next-tetromino > span:nth-child(1){
    transform: scale(.8) rotate(-20deg);
}
@keyframes draw-next-tetromino-in{
    0%{transform: translateY(100%);}
    100%{transform: translateY(0%);}
}
.right-panel{
    flex: 1; height: 100%;
    border-left: 2px solid white;
}
.right-panel > .points-panel{
    width: 100%;
    height: 150px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10px;
}
.right-panel > .points-panel > p{
    font-size: 12px;
    font-family: 'Roboto Slab', serif;
    color: white;
    width: 100%;
}
.right-panel > .points-panel > .points-total{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    width: 100%;
    font-size: 24px;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    text-shadow: 2px 2px rgba(0,0,0,0.2);
    transition: .2s all;
}
.right-panel > .points-panel > .points-total.point{
    transform: scale(1.2);
}
.right-panel > .control-panel{
    width: 100%;
    padding: 10px;
}
.right-panel > .control-panel > .button{
    width: 100%;
}
.right-panel > .control-panel > .button > div{
    font-size: 12px;
    padding: 8px 16px;
}
.middle-panel{
    position: relative;
    width: 302px; height: 100%;
    background-image:
        linear-gradient(#8090A0 2px, transparent 1px),
        linear-gradient(90deg, #8090A0 2px, transparent 1px);
    background-size: 600px 600px, 600px 600px;
    background-position: 0px 0px, 0px 0px;
    -ms-text-overflow: hidden;
    animation: 1s draw-middle-in forwards;
    animation-delay: 1s;
}
@keyframes draw-middle-in{
    0%{background-size: 600px 600px, 600px 600px;}
    100%{background-size: 30px 30px, 30px 30px;}
}
.middle-panel > .start-panel{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 4;
    transition: 0.5s all ease-in;
    animation: 2s draw-start-panel-in forwards;
    animation-delay: 0.6s;
}
@keyframes draw-start-panel-in{
    0%{top: -100%;}
    100%{top: 0%;}
}
.middle-panel > .start-panel.hide{
    transform: scale(0.5);
    opacity: 0;
    pointer-events: none;
}
.middle-panel > .start-panel > .message{
    font: 1em 'Roboto Slab';
    color: white;
    margin: 50px 0px;
    padding: 12px 16px;
    background: slategray;
    border: 2px solid white;
    border-radius: 6px;
    text-align: center;
    text-shadow: 2px 2px rgba(0,0,0,0.2);
    box-shadow: 2px 2px rgba(0,0,0,0.2);
}
.middle-panel > .pause-panel{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.2);
    z-index: 4;
    transition: 0.3s all ease-in;
}
.middle-panel > .pause-panel.hide{
    transform: scale(1.2);
    opacity: 0;
    pointer-events: none;
}
.middle-panel > .pause-panel > .pause-div{
    position: relative;
    font: 1em Roboto;
    color: white;
    text-align: center;
    transition: 0.3s all;
    transition-delay: 0.3s;
}
.middle-panel > .pause-panel.show-instructions > .pause-div{
    opacity: 0;
    transition: 0s all;
}

.middle-panel > .pause-panel > .instructions-div{
    position: absolute;
    top: 90px;
    left: 50%;
    width: 0%;
    height: calc(100% - 110px);
    background: slategray;
    border: 2px solid white;
    border-radius: 6px;
    opacity: 0;
    transition: 1s all ease-in-out; 
    font: 1em Roboto;
    color: white;
    overflow: auto;
}
.middle-panel > .pause-panel.show-instructions > .instructions-div{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 2px solid white;
    border-radius: 6px;
    opacity: 1;
}
.middle-panel > .pause-panel > .instructions-div > .instructions-desktop{
    position: relative;
    height: calc(100% - 60px);
    width: 100%;
    padding: 10px;
    overflow: auto;
}
.middle-panel > .pause-panel > .instructions-div > .instructions-mobile{
    position: relative;
    height: calc(100% - 60px);
    width: 100%;
    padding: 10px;
    overflow: auto;
}
.middle-panel > .pause-panel > .instructions-div > .close{
    position: relative;
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 639px){
    .ui{
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .right-panel{
        flex: 0;
        width: 0;
        height: 100%;
        border-left: none;
        overflow: visible;
    }
    .right-panel > .points-panel{
        position: absolute;
        right: 0; top: 0;
        width: 90px;
        height: 70px;
        text-align: center;
    }
    .right-panel > .control-panel{
        display: none;
    }
    .left-panel{
        flex: 1;
    }
}
@media screen and (max-width: 486px), screen and (max-height: 646px){
    .ui__center{
        padding: 0px;
    }
    .ui{
        border-radius: 0px;
    }
}
@media screen and (max-width: 428px), screen and (max-height: 606px){
    .ui__center{
        padding: 0px;
        justify-content: initial;
    }
    .ui{
        height: 100%;
        border-radius: 2px;
        flex-wrap: wrap;
    }    
    .left-panel{
        flex: 1;
        height: 502px;
        width: 50px;
    }
    .middle-panel{
        width: 252px; height: 502px;
        background-size: 600px 600px, 600px 600px;
        animation: 1s draw-middle-25px-in forwards;
        animation-delay: 1s;
    }
    @keyframes draw-middle-25px-in{
        0%{background-size: 600px 600px, 600px 600px;}
        100%{background-size: 25px 25px, 25px 25px;}
    }
    .right-panel{
        min-width: 100%;
        width: 100%;
        height: calc(100% - 502px);
        border-left: none;
        overflow: visible;
        border-top: 2px solid white;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .right-panel > .points-panel{
        position: absolute;
        right: 0; top: 0;
        width: 90px;
        height: 70px;
        text-align: center;
    }
    .right-panel > .control-panel{
        display: block;
    }
    .right-panel > .control-panel > .button{
        width: auto;
    }
}