:root {
    --cell-size: 30px;
    --grid-width: 12;
    --grid-height: 20;
    --grid-color-1: #FFF;
    --grid-color-2: #FFF;
}

#tetris {
    position: relative;
    width: calc(253px + (var(--grid-width) * var(--cell-size)));
    height: calc(2px + (var(--grid-height) * var(--cell-size)));
    background: #fff;
    border: rgb(100, 174, 248) 1px solid;
    margin: 0 auto 0;
}

#tetris .left {
    background: rgb(227, 241, 255);
    position: absolute;
    width: 250px;
    height: 100%;
    left: 0px;
    top: 0px;
    padding: 25px;
}

#tetris .left table {
    width: 100%;
}

.left-border {
    background: rgb(100, 174, 248);
    position: absolute;
    z-index: 100;
    top: 0px;
    left: 250px;
    width: 1px;
    height: 100%;
}

#tetris-area {
    /* 168,308 +2px	borders	*/
    background: #fff;
    position: absolute;
    width: calc(var(--cell-size) * var(--grid-width));
    height: calc(var(--cell-size) * var(--grid-height));
    left: 251px;
    top: 0px;
    overflow: hidden;
    background: repeating-linear-gradient(to right,
        var(--grid-color-1),
        var(--grid-color-1) var(--cell-size),
        var(--grid-color-2) var(--cell-size),
        var(--grid-color-2) calc(var(--cell-size) * 2)
    );
}

#tetris .block0,
#tetris .block1,
#tetris .block2,
#tetris .block3,
#tetris .block4,
#tetris .block5,
#tetris .block6 {
    z-index: 1000;
    font-size: 10px;
    line-height: 1em;
    font-family: arial;
    position: absolute;
    width: var(--cell-size);
    height: var(--cell-size);
    border: none;
    background-size: calc(var(--cell-size) * 2) calc(var(--cell-size) * 2);
    transform-origin: center center;
}

#tetris .left h1,
#tetris .left h2 {
    color: #826C55;
    font-size: 11px;
    font-family: "trebuchet	ms", arial;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

#tetris .left h1 a {
    color: #3366CC;
    text-decoration: none;
}

#tetris .left h1 a:hover {
    color: #FF6600;
    text-decoration: none;
}

/* menu	*/

#tetris .left .menu .btn {
    width: 100%;

}

/* game	over */

#tetris-gameover {
    position: absolute;
    width: 200px;
    top: 50%;
    text-align: center;
    font-weight: bold;
    display: none;
    font-size: 1.5rem;
}

/* next	puzzle */
#tetris-nextpuzzle {
    position: absolute;
    top: 47%;
    left: 35%;
    background: #ffffff;
    overflow: visible;
    display: none;
}

#tetris-keys {
    position: absolute;
    left: 25px;
    right: 25px;
    top: 175px;
}

#tetris div.h5 {
    margin-bottom: 0.5em;
    display: block;
    font-weight: bold;
}

#tetris-keys td {
    padding-right: 1px;
    padding-bottom: 1px;
}

/* stats */

#tetris .left .stats {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 5px;
}

#tetris .stats td {
    padding-bottom: 1px;
    line-height: 1.25em;
}

#tetris .stats .level {
    text-align: left;
    padding-right: 5px;
}

#tetris-stats-level {
    font-weight: bold;
}

#tetris .stats .time {
    text-align: left;
    padding-right: 5px;
}

#tetris-stats-time {
    font-weight: bold;
}

#tetris .stats .apm {
    text-align: left;
    padding-right: 5px;
}

#tetris-stats-apm {
    font-weight: bold;
}

#tetris .stats .lines {
    text-align: left;
    padding-right: 5px;
}

#tetris-stats-lines {
    font-weight: bold;
}

#tetris .stats .score {
    text-align: left;
    padding-right: 5px;
}

#tetris-stats-score {
    font-weight: bold;
}


/*** window	***/

#tetris .window {
    background: #FFFFFF;
    position: absolute;
    left: 251px;
    top: 0px;
    z-index: 50000;
    display: none;

    width: calc(var(--cell-size) * var(--grid-width));
    height: calc(var(--cell-size) * var(--grid-height));
}

#tetris .window .top {
    position: relative;
    background: rgb(196, 226, 255);
    color: #666666;
    letter-spacing: +1px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    border-bottom: 1px solid #ffffff;
    text-indent: 10px;
}

#tetris .window .top .close {
    position: absolute;
    background: rgb(196, 226, 255);
    font-family: verdana;
    font-weight: bold;
    right: 0px;
    top: 0px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 25px;
    border-left: 1px solid #ffffff;
    cursor: pointer;
    font-size: 15px;
}

#tetris .window .content {
    margin: 10px;
}

#tetris .window .content table {
    width: 100%;
}

.keyboard-key {
    width: 30px;
    height: 30px;
    border: 1px solid #CCC;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #999;
}

.keyboard-key.space {
    width: 105px;
}

#tetris .block0 {
    background-size: calc(var(--cell-size) * 3) calc(var(--cell-size) * 3);
}

#tetris .block1 {
    background-size: calc(var(--cell-size) * 3) calc(var(--cell-size) * 3);
}

#tetris .block2 {
    background-size: calc(var(--cell-size) * 3) calc(var(--cell-size) * 3);
}

#tetris .block3 {
    background-size: calc(var(--cell-size) * 3) calc(var(--cell-size) * 3);
}


#tetris .block4 {
    background-size: calc(var(--cell-size) * 3) calc(var(--cell-size) * 3);
}


#tetris .block5 {
    background-size: calc(var(--cell-size) * 2) calc(var(--cell-size) * 2);
}

#tetris .block6 {
    background-size: calc(var(--cell-size) * 4) calc(var(--cell-size) * 4);
}

.block[data-puzzle-type="0"] {
    background: url('../resources/dogs/dog-l.svg') no-repeat transparent center center;
}
.block[data-puzzle-type="0"][data-block-id="0"] {
    background-position: -60px 0px;
}
.block[data-puzzle-type="0"][data-block-id="1"] {
    background-position: 0px -30px;
}
.block[data-puzzle-type="0"][data-block-id="2"] {
    background-position: -30px -30px;
}
.block[data-puzzle-type="0"][data-block-id="3"] {
    background-position: -60px -30px;
}

.block[data-puzzle-type="1"] {
    background: url('../resources/dogs/dog-j.svg') no-repeat transparent center center;
}
.block[data-puzzle-type="1"][data-block-id="0"] {
    background-position: 0px 0px;
}
.block[data-puzzle-type="1"][data-block-id="1"] {
    background-position: 0px -30px;
}
.block[data-puzzle-type="1"][data-block-id="2"] {
    background-position: -30px -30px;
}
.block[data-puzzle-type="1"][data-block-id="3"] {
    background-position: -60px -30px;
}

.block[data-puzzle-type="2"] {
    background: url('../resources/dogs/dog-s.svg') no-repeat transparent center center;
}
.block[data-puzzle-type="2"][data-block-id="0"] {
    background-position: -30px 0px;
}
.block[data-puzzle-type="2"][data-block-id="1"] {
    background-position: -60px 0px;
}
.block[data-puzzle-type="2"][data-block-id="2"] {
    background-position: 0px -30px;
}
.block[data-puzzle-type="2"][data-block-id="3"] {
    background-position: -30px -30px;
}

.block[data-puzzle-type="3"] {
    background: url('../resources/dogs/dog-z.svg') no-repeat transparent center center;
}
.block[data-puzzle-type="3"][data-block-id="0"] {
    background-position: 0px 0px;
}
.block[data-puzzle-type="3"][data-block-id="1"] {
    background-position: -30px 0px;
}
.block[data-puzzle-type="3"][data-block-id="2"] {
    background-position: -30px -30px;
}
.block[data-puzzle-type="3"][data-block-id="3"] {
    background-position: -60px -30px;
}

.block[data-puzzle-type="4"] {
    background: url('../resources/dogs/dog-t.svg') no-repeat transparent center center;
}
.block[data-puzzle-type="4"][data-block-id="0"] {
    background-position: -30px 0px;
}
.block[data-puzzle-type="4"][data-block-id="1"] {
    background-position: 0px -30px;
}
.block[data-puzzle-type="4"][data-block-id="2"] {
    background-position: -30px -30px;
}
.block[data-puzzle-type="4"][data-block-id="3"] {
    background-position: -60px -30px;
}




.block[data-puzzle-type="5"] {
    background: url('../resources/dogs/dog-o.svg') no-repeat transparent center center;
}
.block[data-puzzle-type="5"][data-block-id="0"] {
    background-position: 0px 0px;
}
.block[data-puzzle-type="5"][data-block-id="1"] {
    background-position: -30px 0px;
}
.block[data-puzzle-type="5"][data-block-id="2"] {
    background-position: 0px -30px;
}
.block[data-puzzle-type="5"][data-block-id="3"] {
    background-position: -30px -30px;
}

.block[data-puzzle-type="6"] {
    background: url('../resources/dogs/dog-i.svg') no-repeat transparent center center;
}
.block[data-puzzle-type="6"][data-block-id="0"] {
    background-position: 0px -30px;
}
.block[data-puzzle-type="6"][data-block-id="1"] {
    background-position: -30px -30px;
}
.block[data-puzzle-type="6"][data-block-id="2"] {
    background-position: -60px -30px;
}
.block[data-puzzle-type="6"][data-block-id="3"] {
    background-position: -90px -30px;
}

#tetris.block-background .block[data-puzzle-type="0"] {
    background-color: rgb(255, 141, 34);
}
#tetris.block-background .block[data-puzzle-type="1"] {
    background-color: rgb(136, 173, 255);
}
#tetris.block-background .block[data-puzzle-type="2"] {
    background-color: rgb(105, 216, 41);
}
#tetris.block-background .block[data-puzzle-type="3"] {
    background-color: rgb(228, 68, 68);
}
#tetris.block-background .block[data-puzzle-type="4"] {
    background-color: rgb(224, 165, 252);
}
#tetris.block-background .block[data-puzzle-type="5"] {
    background-color: rgb(255, 237, 78);
}
#tetris.block-background .block[data-puzzle-type="6"] {
    background-color: rgb(155, 255, 242);
}