:root {
	--bg: #faf8ef;
	--fg: #776e65;
	--muted: #a79c8e;
	--board: #bbada0;
	--cell: #cdc1b4;
	--brand: #ed7c3f;
	--score-label: #eee4da;
	--gap: 2.4%;

	/* tile palette */
	--t-2-bg: #eee4da;    --t-2-fg: #776e65;
	--t-4-bg: #ede0c8;    --t-4-fg: #776e65;
	--t-8-bg: #f2b179;    --t-8-fg: #f9f6f2;
	--t-16-bg: #f59563;   --t-16-fg: #f9f6f2;
	--t-32-bg: #f67c5f;   --t-32-fg: #f9f6f2;
	--t-64-bg: #f65e3b;   --t-64-fg: #f9f6f2;
	--t-128-bg: #edcf72;  --t-128-fg: #f9f6f2;
	--t-256-bg: #edcc61;  --t-256-fg: #f9f6f2;
	--t-512-bg: #edc850;  --t-512-fg: #f9f6f2;
	--t-1024-bg: #edc53f; --t-1024-fg: #f9f6f2;
	--t-2048-bg: #edc22e; --t-2048-fg: #f9f6f2;
	--t-super-bg: #3c3a32; --t-super-fg: #f9f6f2;
}

body { background: var(--bg); }

.tile {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.6rem;
	font-weight: 800;
	line-height: 1;
	transition: transform 110ms ease-in-out;
	will-change: transform;
}

@keyframes tile-appear {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}
@keyframes tile-pop {
	0% { transform: scale(1); }
	50% { transform: scale(1.18); }
	100% { transform: scale(1); }
}
.tile-new { animation: tile-appear 140ms ease-out; }
.tile-merged { animation: tile-pop 160ms ease-in-out; }

#overlay.show { display: flex; background: rgba(238, 228, 218, 0.72); }
#overlay.win { background: rgba(237, 194, 46, 0.5); }