:root {
	--bg: #f4f1e8;
	--ink: #1f2a24;
	--muted: #5e6a61;
	--panel: #1f2a24;
	--panel-ink: #f4f1e8;
	--cell: #cfd8c9;
	--cell-hover: #dbe3d5;
	--open: #fbfaf6;
	--line: #b7c2b1;
	--accent: #d9534f;
	--size: 2rem;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #141a16;
		--ink: #e8ece6;
		--muted: #9aa69d;
		--panel: #26312b;
		--panel-ink: #e8ece6;
		--cell: #3a4740;
		--cell-hover: #46554c;
		--open: #1d2420;
		--line: #2c3631;
		color-scheme: dark;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
	max-width: 64rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

header {
	text-align: center;
}

h1 {
	font-size: clamp(2rem, 6vw, 3rem);
	margin: 0;
	letter-spacing: -0.03em;
}

.tagline,
.best,
.help {
	color: var(--muted);
}

.tagline {
	margin: 0.25rem 0 0;
}

.levels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.levels button {
	font: inherit;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.levels button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

.panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--panel);
	color: var(--panel-ink);
	border-radius: 1rem;
	padding: 0.5rem 1rem;
	min-width: min(20rem, 100%);
	font-variant-numeric: tabular-nums;
	font-size: 1.25rem;
}

.face {
	font-size: 1.75rem;
	background: none;
	border: none;
	cursor: pointer;
	line-height: 1;
	padding: 0.25rem;
}

.board-wrap {
	max-width: 100%;
	overflow-x: auto;
	padding: 0.25rem;
}

.board {
	display: grid;
	grid-template-columns: repeat(var(--cols), var(--size));
	gap: 2px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.cell {
	width: var(--size);
	height: var(--size);
	border: none;
	border-radius: 0.35rem;
	background: var(--cell);
	color: var(--ink);
	font: 700 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
	cursor: pointer;
	padding: 0;
}

.cell:hover:not(.open) {
	background: var(--cell-hover);
}

.cell:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 1px;
}

.cell.open {
	background: var(--open);
	cursor: default;
}

.cell.boom {
	background: var(--accent);
}

.cell.wrong {
	text-decoration: line-through;
}

.n1 { color: #2563eb; }
.n2 { color: #15803d; }
.n3 { color: #dc2626; }
.n4 { color: #7c3aed; }
.n5 { color: #b45309; }
.n6 { color: #0e7490; }
.n7 { color: #111827; }
.n8 { color: #6b7280; }

@media (prefers-color-scheme: dark) {
	.n1 { color: #60a5fa; }
	.n2 { color: #4ade80; }
	.n3 { color: #f87171; }
	.n4 { color: #c4b5fd; }
	.n5 { color: #fbbf24; }
	.n6 { color: #22d3ee; }
	.n7 { color: #f3f4f6; }
	.n8 { color: #9ca3af; }
}

.message {
	min-height: 1.5rem;
	margin: 0;
	font-weight: 600;
	text-align: center;
}

.help {
	max-width: 32rem;
}

.help summary {
	cursor: pointer;
	text-align: center;
}

kbd {
	font-family: ui-monospace, monospace;
	border: 1px solid var(--line);
	border-radius: 0.25rem;
	padding: 0 0.25rem;
}

@media (max-width: 40rem) {
	:root {
		--size: 1.75rem;
	}
}

.share {
	font: inherit;
	font-weight: 600;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	border: none;
	background: var(--ink);
	color: var(--bg);
	cursor: pointer;
}