/* styles.css */

.tetris-container,
.preview-holder {
    box-shadow: inset 1px 1px 8px 2px #0000005e;
    outline: 1px solid rgb(255 255 255 / 10%);
    background-color: rgb(255 255 255 / 3%);
}

.tetris-container {
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(20, 1fr);
}

.preview-holder {
    text-align: center;
    padding: 1.4em 0;
    box-shadow: inset 1px 1px 8px 2px #00000029;
    background-color: rgb(0 0 0 / 49%);
    position: relative;
}

.lblPieces {
    position: absolute;
    bottom: .3em;
    left: .4em;
    color: rgb(0 0 0 / 90%);
}

.preview-holder-in {
    display: inline-block;
}

.preview.tetris-grid {
    grid-template-columns: repeat(4, 1fr);
}

.preview.tetris-grid div {
    width: 1.4em;
    height: 1.4em;
    background-color: transparent;
}


.preview.tetris-grid[data-width="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.preview.tetris-grid[data-width="2"] {
    grid-template-columns: repeat(2, 1fr);
}


.tetris-grid {
    display: grid;
    gap: 1px;
}

.tetris-grid div {
    background-color: rgb(0 0 0 / 43%);
}

.tetris-grid.tetris-preview div {
    width: 1.5em;
    height: 1.5em;
    background-color: transparent;
}



.off {
    display: none;
}

/** **/

.game-over {
    position: absolute;
    top: 5em;
    left: 5%;
    right: 5%;
    text-align: center;
    background: rgb(39 41 45);
    padding: 2em 1em;
    box-shadow: 1px 1px 4px rgb(25 30 51 / 54%);
    border: 1px solid rgb(255 255 255 / 6%);

    background: rgb(66 68 73);
}

.game-over h2 {
    margin-bottom: .4em;    
}

.game-over input,
.game-over button {
    margin: 4px 0;
    width: 100%;
}

.game-over input {
    font-size: 1.2em;
    text-align: center;
    padding: .2em;
    width: 100%;
    color: #fff;
    border: 1px solid #fff;
    background-color: transparent;
}

.game-over button {
    padding: .4em;
}

.game-over-score {
    margin: 1em 0;
}

/** **/



/** **/

div[data-color="1"] {
    background-color: cyan;
    background-color: #EC1B24 !important;
    ;
}

div[data-color="2"] {
    background-color: orange;
    background-color: #EC008B !important;
    ;
}

div[data-color="3"] {
    background-color: blue;
    background-color: #1B74BB;
    background-color: #FFF100 !important;
    ;
}

div[data-color="4"] {
    background-color: yellow;
    background-color: #1B74BB !important;
    ;
}

div[data-color="5"] {
    background-color: green;
    background-color: #8BC53F;
    background-color: #F6921E !important;
    ;
}

div[data-color="6"] {
    background-color: purple;
    background-color: #F04AAC;
    background-color: #00ADEE !important;
    ;
}

div[data-color="7"] {
    background-color: #8BC53F !important;
}

/** **/

.pause .tetris-grid div {
    opacity: .3;
}

.pause .tetris-container {
    background-color: rgb(0 0 0 / 24%);
}

.pause .game-pause {
    display: block;
    border-radius: 2px;
    padding: 2em 0;
    background-color: rgb(50 50 50);
}