.cell {
	font-size: 9cqw;
	font-weight: 600;
	font-family: var(--main-font);
	display: grid;
	place-items: center;
	background-color: #5d5d5d;
	will-change: transform;
	color: var(--black);
	user-select: none;
}

.cell[data-value="0"] {
	visibility: hidden;
}

.cell[data-value="2"] {
	background-color: var(--color-2);
}

.cell[data-value="4"] {
	background-color: var(--color-4);
}

.cell[data-value="8"] {
	background-color: var(--color-8);
}

.cell[data-value="16"] {
	background-color: var(--color-16);
}

.cell[data-value="32"] {
	background-color: var(--color-32);
}

.cell[data-value="64"] {
	background-color: var(--color-64);
}

.cell[data-value="128"] {
	background-color: var(--color-128);
}

.cell[data-value="256"] {
	background-color: var(--color-256);
}

.cell[data-value="512"] {
	background-color: var(--color-512);
}

.cell[data-value="1024"] {
	background-color: var(--color-1024);
}

.cell[data-value="2048"] {
	background-color: var(--color-2048);
}

.cell[data-value="4096"],
.cell[data-value="8192"] {
	background-color: var(--color-greater-then-2048);
}

.cell[data-value="2"],
.cell[data-value="4"],
.cell[data-value="8"] {
	font-size: 14cqw;
}

.cell[data-value="16"],
.cell[data-value="32"],
.cell[data-value="64"] {
	font-size: 12cqw;
}

.cell[data-value="128"],
.cell[data-value="256"],
.cell[data-value="512"] {
	font-size: 11cqw;
}

.cell[data-value="1024"],
.cell[data-value="2048"],
.cell[data-value="4096"],
.cell[data-value="8192"] {
	box-shadow: 0px 0px 47px 9px rgb(114, 33, 159);
	color: var(--white);
	font-weight: 700;
}

.cell[data-spawned="true"] {
	animation: spawn 150ms forwards;
}

@keyframes spawn {
	0% {
		scale: 0;
	}
	90% {
		scale: 1.1;
	}
	100% {
		scale: 1;
	}
}
