.tile {
    position: absolute;
    border-radius: 4px;
    background: #eee4da;
    color: #776e65;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    transition: transform 100ms ease-in-out, background-color 100ms;
    z-index: 10;
}

/* Tile Colors */
.tile-2 { background: #eee4da; color: #776e65; }
.tile-4 { background: #ede0c8; color: #776e65; }
.tile-8 { background: #f2b179; color: #f9f6f2; }
.tile-16 { background: #f59563; color: #f9f6f2; }
.tile-32 { background: #f67c5f; color: #f9f6f2; }
.tile-64 { background: #f65e3b; color: #f9f6f2; }
.tile-128 { background: #edcf72; color: #f9f6f2; font-size: 24px; }
.tile-256 { background: #edcc61; color: #f9f6f2; font-size: 24px; }
.tile-512 { background: #edc850; color: #f9f6f2; font-size: 24px; }
.tile-1024 { background: #edc53f; color: #f9f6f2; font-size: 18px; }
.tile-2048 { background: #edc22e; color: #f9f6f2; font-size: 18px; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.4); }

/* Animation Classes */
.tile-new {
    animation: appear 200ms ease;
}
.tile-merged {
    animation: pop 200ms ease;
    z-index: 20;
}

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

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Positions (calculated based on grid gap 0.5rem = 8px and cell size) */
/* We will calculate these dynamically in JS or use percentage based on the container */
/* Actually, let's use JS for neat absolute positioning to match the responsive grid */