* {
    font-family: monospace;
}

.container {
    margin: 0 auto;
    max-width: 600px;
    text-align: center;
}

.game-field {
    display: flex;
    flex-wrap: wrap;
    width: 240px;
    margin: auto;
    position: relative;
    background: #f0e3b4;
    border-radius: 4px;
    padding: 5px;
}

.cell-pool-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 240px;
    position: absolute;
    border-radius: 4px;
}

.cell-pool {
    width: 50px;
    height: 50px;
    margin: 5px;
    display: flex;
    background-color: rgb(255, 250, 231);
    box-sizing: border-box;
    border-radius: 2px;
    position: relative;
    opacity: 1;
    z-index: 1;
}

.cell {
    width: 50px;
    height: 50px;
    margin: 5px;
    display: flex;
    background: rgba(0, 0, 0, .25);
    align-items: center;
    box-sizing: border-box;
    border-radius: 2px;
    justify-content: center;
    position: relative;
    opacity: 1;
    transition: top ease .5s, left ease .5s, background ease .5s;
    font-size: 28px;
    font-weight: bold;
    z-index: 5;
}
    .cell[data-num="0"] {
        background-color: rgb(255, 250, 231);
        color: rgb(44, 44, 44);
        z-index: 1;
    }
    .cell[data-num="2"] {
        background-color: rgb(218, 207, 178);
        color: rgb(44, 44, 44);
    }
    .cell[data-num="4"] {
        background-color: rgb(211, 189, 132);
        color: rgb(44, 44, 44);
    }
    .cell[data-num="8"] {
        background-color: rgb(255, 214, 89);
        color: rgb(255, 255, 255);
    }    
    .cell[data-num="16"] {
        background-color: rgb(255, 192, 0);
        color: rgb(255, 255, 255);
    }
    .cell[data-num="32"] {
        background-color: rgb(255, 148, 0);
        color: rgb(255, 255, 255);
    }
    .cell[data-num="64"] {
        background-color: rgb(255, 31, 31);
        color: rgb(255, 255, 255);
    }
    .cell[data-num="128"] {
        background-color: rgb(152, 133, 255);
        color: rgb(44, 44, 44);
        font-size: 26px;
    }
    .cell[data-num="256"] {
        background-color: rgb(112, 86, 250);
        color: rgb(255, 255, 255);
        font-size: 26px;
    }
    .cell[data-num="512"] {
        background-color: rgb(0, 0, 255);
        color: rgb(255, 255, 255);
        font-size: 26px;
    }
    .cell[data-num="1024"] {
        background-color: rgba(0, 100, 100, 0.65);
        color: rgb(255, 255, 255);
        font-size: 20px;
    }
    .cell[data-num="2048"] {
        background-color: rgba(0, 100, 100, 0.85);
        color: rgb(255, 255, 255);
        font-size: 20px;
    }
    .green {
        background-color: rgba(0, 255, 0, .65);
        color: black;
    }

@keyframes hide {
    from{opacity: 1;}
    to{opacity: 0;}
}

.cell.hide {
    position: absolute;
    margin: 0;
    opacity: 0;
    animation: .5s ease 0s hide
}

@keyframes spawn {
    from{
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.2, 1.2);
    }
    to{
        transform: scale(1, 1);
    }
}

.cell.spawn {
    position: absolute;
    z-index: 999;
    opacity: 1;
    margin: 0;
    animation: .5s ease 0s spawn
}

@keyframes merge {
    from{
        transform: scale(1, 1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1, 1.1);
        opacity: .75;
    }
    95% {
        transform: scale(1.2, 1.2);
        opacity: .5;
    }
    to{
        transform: scale(1, 1);
        opacity: .25;
    }
}

.cell.merge {
    position: absolute;
    margin: 0;
    animation: .5s ease 0s merge;
    z-index: 100;
}

@keyframes move {
    from{
        transform: scale(1, 1);
    }
    to{
        transform: scale(1, 1);
    }
}

.cell.move {
    position: absolute;
    margin: 0;
    animation: .5s ease 0s move
}