.tile-2 {
    color: #776e65;
    background-color: #eee4db;
}

.tile-4 {
    color: #776e65;
    background-color: #ede0c8;
}

.tile-8 {
    color: #f9f6f2;
    background-color: #f2b179;
}

.tile-16 {
    color: #f9f6f2;
    background-color: #f59563;
}

.tile-32 {
    color: #f9f6f2;
    background-color: #f67c5f;
}

.tile-64 {
    color: #f9f6f2;
    background-color: #f56545;
}

.tile-128 {
    color: #f9f6f2;
    background-color: #edd361;
}

.tile-256 {
    color: #f9f6f2;
    background-color: #ecc61d;
}

.tile-512 {
    color: #f9f6f2;
    background-color: #f8ac1f;
}

.tile-1024 {
    color: #f9f6f2;
    background-color: #f88d00;
}

.tile-2048 {
    color: #f9f6f2;
    background-color: #e94504;
}

.tile-4096 {
    color: #f9f6f2;
    background-color: #a759c9;
}

.tile-8192 {
    color: #f9f6f2;
    background-color: #a13bcc;
}

.tile-16384 {
    color: #f9f6f2;
    background-color: #8f1ec0;
}

.tile-32768 {
    color: #f9f6f2;
    background-color: #750aa3;
}

.tile-65536 {
    color: #f9f6f2;
    background-color: #324ab4;
}

.tile-131072 {
    color: #f9f6f2;
    background-color: #1f3ab1;
}

.tile-super {
    color: #f9f6f2;
    background-color: #070418;
}

@keyframes trans-0 {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes trans-1 {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(8px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes trans-2 {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(8px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes trans-3 {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-8px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes merge {
    0% {
        opacity: 1;
        transform: scale(0.2);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes clear {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(0.8);
    }

    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

@keyframes new {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}