source ⟩ hypertext ⟩ public ⟩ matrix ⟩ 2048.css

:root {
	--background: #021;
	--accent: var(--text);
}

body {
	background-image: url("/matrix/garden.webp");
	background-position: center;
	background-size: cover;
}

main {
	max-inline-size: calc(70ch - 2em);
}

main > header,
main > footer.page-footer {
	margin-block: 0 1rem;
	padding-block: 0.5rem;

	color: white;
	text-align: center;

	background-color: #0008;
	backdrop-filter: blur(0.5rem);
	border-radius: 1rem;
	box-shadow: 0 0.5em 1em black;
}

main > header {
	line-height: 1.1;
}

main > footer.page-footer {
	margin-block: 1rem 0;
}

main > header > h1 {
	margin-block: 0;
}

main > header > small.citation {
	font-style: italic;
}

nav.languages {
	margin-block-end: 0;
	font-size: smaller;
}

#grid {
	--gap: min(1rem, 3vw);

	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	gap: var(--gap);

	padding: calc(2 * var(--gap));
	padding-bottom: calc(4 * var(--gap));

	text-align: center;

	background-image: url("/matrix/wood.webp");
	border-radius: calc(2 * var(--gap));
	box-shadow: 0 calc(-2 * var(--gap)) 0 inset #0006, 0 0.5em 1em black;
}

.message {
	display: none;
}

.tile {
	display: flex;
	justify-content: center;
	align-items: center;

	padding-block-end: 0.5rem;

	aspect-ratio: 1 / 1;

	font-size: min(2.25rem, 8.5vw);

	background-size: 100% 100%;
	border-radius: var(--gap);
}

#grid.stopped > .tile:not(.maximum, button.tile.reset, [data-value="0"]) {
	opacity: 0.5;
}

.tile[data-value="0"] {
	background-color: #0004;
	background-image: none;
	box-shadow: 0.25em 0.5em 0.75em inset #000c, 0em -0.25em 0.5em inset #fa23;
}

.tile[data-value="2"] {
	color: #210;
	text-shadow: -1px -1px #925014, 1px 1px #f9e3d6;

	background-image: url("/matrix/birch.webp");
	box-shadow: inset -5px -5px 10px #925014, inset 3px 3px 5px #f9e3d6;
}

.tile[data-value="4"] {
	color: #111;
	text-shadow: -1px -1px #29323d, 1px 1px #eaf4fa;

	background-image: url("/matrix/silver.webp");
	box-shadow: inset -5px -5px 10px #29323d, inset 3px 3px 5px #eaf4fa;
}

.tile[data-value="4"] {
	color: #111;
	text-shadow: -1px -1px #29323d, 1px 1px #eaf4fa;

	background-image: url("/matrix/silver.webp");
	box-shadow: inset -5px -5px 10px #29323d, inset 3px 3px 5px #eaf4fa;
}

.tile[data-value="8"] {
	color: #332f2a;
	text-shadow: -1px -1px #afa293, 1px 1px #fff;

	background-image: url("/matrix/pearl.webp");
	box-shadow: inset -5px -5px 10px #afa293, inset 3px 3px 5px #fff;
}

.tile[data-value="16"] {
	color: #fee;
	text-shadow: -1px -1px #3f0812, 1px 1px #fff8;

	background-image: url("/matrix/ruby.webp");
	box-shadow: inset -5px -5px 10px #3f0812, inset 3px 3px 5px #fee;
}

.tile[data-value="32"] {
	color: #d8f4fb;
	text-shadow: -1px -1px #00011f, 1px 1px #e8f9fc88;

	background-image: url("/matrix/sapphire.webp");
	box-shadow: inset -5px -5px 10px #00011f, inset 3px 3px 5px #e8f9fc;
}

.tile[data-value="64"] {
	color: #efcbef;
	text-shadow: -1px -1px #330a47, 1px 1px #e1bfe088;

	background-image: url("/matrix/amethyst.webp");
	box-shadow: inset -5px -5px 10px #330a47, inset 3px 3px 5px #e1bfe0;
}

.tile[data-value="128"] {
	color: #321e00;
	text-shadow: -1px -1px #321e0088, 1px 1px #fff;

	background-image: url("/matrix/gold.webp");
	box-shadow: inset -5px -5px 10px #321e00, inset 3px 3px 5px #fff;
}

.tile[data-value="256"] {
	color: #f2ffe7;
	text-shadow: -1px -1px #022e0d, 1px 1px #e1f7e088;

	background-image: url("/matrix/emerald.webp");
	box-shadow: inset -5px -5px 10px #022e0d, inset 3px 3px 5px #e1f7e0;
}

.tile[data-value="512"] {
	color: #0a1219;
	text-shadow: -1px -1px #1a223688, 1px 1px #ffffff;

	background-image: url("/matrix/diamond.webp");
	box-shadow: inset -5px -5px 10px #1a2236, inset 3px 3px 5px #ffffff;
}

.tile[data-value="1024"] {
	color: #391e38;
	text-shadow: -1px -1px #391e3888, 1px 1px #fff8;

	background-image: url("/matrix/platinum.webp");
	box-shadow: inset -5px -5px 10px #715675, inset 3px 3px 5px #ffffff;
}

.tile[data-value="2048"] {
	color: #341349;
	text-shadow: -1px -1px #6775db, 1px 1px #f7f5fc;

	background-image: url("/matrix/iridescent.webp");
	box-shadow: inset -5px -5px 10px #6775db, inset 3px 3px 5px #f7f5fc;
}

.tile[data-value="4096"] {
	color: #ffea00;
	text-shadow: -1px -1px black, 1px 1px #fff8;

	background-image: url("/matrix/lava.webp");
	box-shadow: inset -5px -5px 10px black, inset 3px 3px 5px #e03317;
}

.tile[data-value="8192"] {
	color: #ddf5ff;
	text-shadow: -1px -1px #003e50, 1px 1px #76c0e0dd;

	background-image: url("/matrix/water.webp");
	box-shadow: inset -5px -5px 10px #003e50, inset 3px 3px 5px #76c0e0;
}

.tile[data-long="true"] {
	color: #0f6;
	font-size: calc(min(2rem, 7.5vw) * 5 / var(--chars));
	text-shadow: -1px -1px black, 1px 1px #aefe9588;

	background-image: url("/matrix/matrix.webp");
	box-shadow: inset -5px -5px 10px black, inset 3px 3px 5px #aefe9588;

	filter: hue-rotate(calc(222.5deg * calc(var(--exp) - 14)));
}

button.tile.reset {
	display: flex;
	flex-direction: column;

	padding-block-end: 0;

	color: #ffc;

	border: none;
}

button.tile.reset small {
	font-size: 0.4em;
}

button.tile.reset strong {
	color: inherit;
	line-height: 1;
}