:root{
    --size: 30px;
}
@media screen and (max-width: 486px), screen and (max-height: 646px){
    :root{
        --size: 25px;
    }
}

.stack-block{
    display: block;
    position: absolute;
    width: calc(var(--size) + 2px);
    height: calc(var(--size) + 2px);
    border: 2px solid white;
    background: rgba(255,255,255,0.2);
    transition: .4s transform, .4s left, .4s top, .4s opacity;
}
.stack-block.remove{
    transform: scale(0);
    opacity: 0;
    border: 2px solid white !important;
    left: 100% !important;
}
.stack-block.tetris{
    background: #e67e22AA;
}

.tetromino{
    transform-origin: calc(50% + 1px) calc(100% - (var(--size) / 2) + 1px);
    transition: .2s all;
    z-index: 3;
}
.tetromino.hide{
    height: 0;
    margin: 0;
    opacity: 0 !important;
}
.tetromino.hold{
    transform: scale(1.5);
    opacity: 0;
}

.tetromino-L{
    display: block;
    position: absolute;
    width: calc(var(--size) * 3);
    height: calc(var(--size) * 2);
}
.tetromino-L > span{
    position: absolute;
    width: calc(var(--size) + 2px);
    height: calc(var(--size) + 2px);
    border: 2px solid #ffa502;
    background: slategray;
}
.tetromino-L > span:nth-child(1){
    top: var(--size); left: 0px;
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-L > span:nth-child(2){
    top: var(--size); left: var(--size);
    border-left: 0px solid rgba(0,0,0,0);
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-L > span:nth-child(3){
    top: var(--size); left: calc(var(--size) * 2);
    border-top: 0px solid rgba(0,0,0,0);
    border-left: 0px solid rgba(0,0,0,0);
}
.tetromino-L > span:nth-child(4){
    top: 0px; left: calc(var(--size) * 2);
    border-bottom: 0px solid rgba(0,0,0,0);
}

.tetromino-J{
    display: block;
    position: absolute;
    width: calc(var(--size) * 3);
    height: calc(var(--size) * 2);
}
.tetromino-J > span{
    position: absolute;
    width: calc(var(--size) + 2px);
    height: calc(var(--size) + 2px);
    border: 2px solid #54a0ff;
    background: slategray;
}
.tetromino-J > span:nth-child(1){
    top: var(--size); left: 0px;
    border-top: 0px solid rgba(0,0,0,0);
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-J > span:nth-child(2){
    top: var(--size); left: var(--size);
    border-left: 0px solid rgba(0,0,0,0);
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-J > span:nth-child(3){
    top: var(--size); left: calc(var(--size) * 2);
    border-left: 0px solid rgba(0,0,0,0);
}
.tetromino-J > span:nth-child(4){
    top: 0px; left: 0px;
    border-bottom: 0px solid rgba(0,0,0,0);
}

.tetromino-T{
    display: block;
    position: absolute;
    width: calc(var(--size) * 3);
    height: calc(var(--size) * 2);
}
.tetromino-T > span{
    position: absolute;
    width: calc(var(--size) + 2px);
    height: calc(var(--size) + 2px);
    border: 2px solid #be2edd;
    background: slategray;
}
.tetromino-T > span:nth-child(1){
    top: var(--size); left: 0px;
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-T > span:nth-child(2){
    top: var(--size); left: var(--size);
    border-top: 0px solid rgba(0,0,0,0);
    border-left: 0px solid rgba(0,0,0,0);
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-T > span:nth-child(3){
    top: var(--size); left: calc(var(--size) * 2);
    border-left: 0px solid rgba(0,0,0,0);
}
.tetromino-T > span:nth-child(4){
    top: 0px; left: var(--size);
    border-bottom: 0px solid rgba(0,0,0,0);
}

.tetromino-I{
    display: block;
    position: absolute;
    width: calc(var(--size) * 4);
    height: var(--size);
    transform-origin: calc(50% + 1px) calc(100% + 1px);
}
.tetromino-I > span{
    position: absolute;
    width: calc(var(--size) + 2px);
    height: calc(var(--size) + 2px);
    border: 2px solid #00cec9;
    background: slategray;
}
.tetromino-I > span:nth-child(1){
    top: 0px; left: 0px;
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-I > span:nth-child(2){
    top: 0px; left: var(--size);
    border-left: 0px solid rgba(0,0,0,0);
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-I > span:nth-child(3){
    top: 0px; left: calc(var(--size) * 2);
    border-left: 0px solid rgba(0,0,0,0);
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-I > span:nth-child(4){
    top: 0px; left: calc(var(--size) * 3);
    border-left: 0px solid rgba(0,0,0,0);
}

.tetromino-O{
    display: block;
    position: absolute;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
}
.tetromino-O > span{
    position: absolute;
    width: calc(var(--size) + 2px);
    height: calc(var(--size) + 2px);
    border: 2px solid #f9ca24;
    background: slategray;
}
.tetromino-O > span:nth-child(1){
    top: 0px; left: 0px;
    border-right: 0px solid rgba(0,0,0,0);
    border-bottom: 0px solid rgba(0,0,0,0);
}
.tetromino-O > span:nth-child(2){
    top: 0px; left: var(--size);
    border-left: 0px solid rgba(0,0,0,0);
    border-bottom: 0px solid rgba(0,0,0,0);
}
.tetromino-O > span:nth-child(3){
    top: var(--size); left: 0px;
    border-right: 0px solid rgba(0,0,0,0);
    border-top: 0px solid rgba(0,0,0,0);
}
.tetromino-O > span:nth-child(4){
    top: var(--size); left: var(--size);
    border-left: 0px solid rgba(0,0,0,0);
    border-top: 0px solid rgba(0,0,0,0);
}

.tetromino-S{
    display: block;
    position: absolute;
    width: calc(var(--size) * 3);
    height: calc(var(--size) * 2);
}
.tetromino-S > span{
    position: absolute;
    width: calc(var(--size) + 2px);
    height: calc(var(--size) + 2px);
    border: 2px solid #4cd137;
    background: slategray;
}
.tetromino-S > span:nth-child(1){
    top: var(--size); left: 0px;
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-S > span:nth-child(2){
    top: var(--size); left: var(--size);
    border-left: 0px solid rgba(0,0,0,0);
    border-top: 0px solid rgba(0,0,0,0);
}
.tetromino-S > span:nth-child(3){
    top: 0px; left: var(--size);
    border-right: 0px solid rgba(0,0,0,0);
    border-bottom: 0px solid rgba(0,0,0,0);
}
.tetromino-S > span:nth-child(4){
    top: 0px; left: calc(var(--size) * 2);
    border-left: 0px solid rgba(0,0,0,0);
}

.tetromino-Z{
    display: block;
    position: absolute;
    width: calc(var(--size) * 3);
    height: calc(var(--size) * 2);
}
.tetromino-Z > span{
    position: absolute;
    width: calc(var(--size) + 2px);
    height: calc(var(--size) + 2px);
    border: 2px solid #eb2f06;
    background: slategray;
}
.tetromino-Z > span:nth-child(1){
    top: 0px; left: 0px;
    border-right: 0px solid rgba(0,0,0,0);
}
.tetromino-Z > span:nth-child(2){
    top: 0px; left: var(--size);
    border-left: 0px solid rgba(0,0,0,0);
    border-bottom: 0px solid rgba(0,0,0,0);
}
.tetromino-Z > span:nth-child(3){
    top: var(--size); left: var(--size);
    border-right: 0px solid rgba(0,0,0,0);
    border-top: 0px solid rgba(0,0,0,0);
}
.tetromino-Z > span:nth-child(4){
    top: var(--size); left: calc(var(--size) * 2);
    border-left: 0px solid rgba(0,0,0,0);
}

.tetromino.ghost{
    z-index: 2;
}
.tetromino.ghost > span{
    border-style: dashed;
    background: none;
}