:root {
	--bg: #070a14;
	--fg: #eef3ff;
	--muted: #9fb0d3;
	--accent: #7db0ff;
	--good: #43d38c;
	--bad: #ff5c7a;
	--warn: #ffce5c;
	--cell: #11182a;
	--cell-alt: #0e1423;
	--given: #1c2846;
	--place: #234b2a;
	--backtrack: #4b2333;
	--hi-row: 0 180 255;
	--hi-col: 255 170 0;
	--hi-box: 160 120 255;
	--c1: 0 85% 66%;
	--c2: 25 90% 64%;
	--c3: 45 90% 60%;
	--c4: 90 70% 56%;
	--c5: 160 70% 60%;
	--c6: 195 80% 65%;
	--c7: 230 90% 70%;
	--c8: 275 80% 72%;
	--c9: 320 85% 68%;
}

/* themes */
body.theme-neon {
	--accent: #7db0ff;
	--muted: #9fb0d3;
	--cell: #11182a;
	--cell-alt: #0e1423;
	--given: #1c2846;
	--hi-row: 0 180 255;
	--hi-col: 255 170 0;
	--hi-box: 160 120 255;
}
body.theme-solar {
	--bg: #0a0a05;
	--fg: #fff9e8;
	--muted: #e3d6a0;
	--accent: #ffd166;
	--cell: #1b1608;
	--cell-alt: #151007;
	--given: #2a220b;
	--hi-row: 255 214 102;
	--hi-col: 255 120 0;
	--hi-box: 255 80 60;
}
body.theme-candy {
	--bg: #120514;
	--fg: #ffeaf6;
	--muted: #f7a7d0;
	--accent: #ff77c8;
	--cell: #1f0a22;
	--cell-alt: #1a081d;
	--given: #2b0e30;
	--hi-row: 255 119 200;
	--hi-col: 255 170 0;
	--hi-box: 120 220 255;
}
body.theme-matrix {
	--bg: #030a05;
	--fg: #eaffea;
	--muted: #9be09b;
	--accent: #2ce62c;
	--cell: #07140b;
	--cell-alt: #051008;
	--given: #0a1b0f;
	--hi-row: 80 255 140;
	--hi-col: 140 200 120;
	--hi-box: 40 160 80;
}
body.theme-mono {
	--bg: #0b0b0d;
	--fg: #f0f0f2;
	--muted: #b9b9c2;
	--accent: #d2d2d9;
	--cell: #141417;
	--cell-alt: #101015;
	--given: #1b1b22;
	--hi-row: 210 210 210;
	--hi-col: 160 160 160;
	--hi-box: 240 240 240;
}

/* base */
* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
body {
	margin: 0;
	color: var(--fg);
	background: radial-gradient(1200px 1000px at 10% 10%, #0d162b, #0b1223 40%, #09101f 70%, #070d1a);
	font: 16px/1.4 Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	overflow: auto; /* allow scrolling */
}
#bg,
#fx {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
}
#bg {
	filter: blur(0.5px) contrast(1.06) saturate(1.05);
}
#fx {
	pointer-events: none;
}

.app {
	position: relative;
	z-index: 1;
	max-width: 1120px;
	margin: 24px auto;
	padding: 18px 20px 30px;
	background: linear-gradient(180deg, rgba(18, 24, 40, 0.85), rgba(12, 16, 28, 0.88));
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 20px;
	backdrop-filter: blur(10px);
	box-shadow: 0 28px 120px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.title {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	align-items: center;
}
.logo {
	width: 72px;
	height: 72px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	background: conic-gradient(from 0deg, #79e2ff, #8fffbd, #fff179, #79e2ff);
	animation: spin 140s linear infinite;
	color: #0b0f19;
	font-weight: 900;
	font-size: 40px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.heading h1 {
	margin: 0;
}
.heading p {
	margin: 4px 0 0;
	color: var(--muted);
}

/* controls */
.controls {
	margin-top: 12px;
}
.controls .row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.controls .row.sliders {
	margin-top: 10px;
}
button,
select {
	background: linear-gradient(180deg, #1a2237, #121a2b);
	color: var(--fg);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 10px 14px;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
	transition: transform 0.08s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
button:hover,
select:hover {
	transform: translateY(-1px);
	border-color: rgba(255, 255, 255, 0.22);
}
button:active {
	transform: none;
}
label {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--muted);
}
input[type="range"] {
	cursor: pointer;
}
select,
option {
	color: var(--fg);
	background: #121a2b;
}

/* status */
.status {
	margin-top: 12px;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--muted);
	border: 1px solid rgba(255, 255, 255, 0.08);
	min-height: 38px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.status.good {
	color: var(--good);
	border-color: rgba(67, 211, 140, 0.35);
	box-shadow: 0 0 16px rgba(67, 211, 140, 0.15) inset;
}
.status.bad {
	color: var(--bad);
	border-color: rgba(255, 92, 122, 0.38);
	box-shadow: 0 0 16px rgba(255, 92, 122, 0.18) inset;
}
.status.warn {
	color: var(--warn);
	border-color: rgba(255, 206, 92, 0.35);
	box-shadow: 0 0 16px rgba(255, 206, 92, 0.18) inset;
}

/* grid + square sizing (no squish) */
.grid-wrap {
	margin-top: 18px;
	display: grid;
	place-items: center;
	position: relative;
}
.focus-hud {
	position: absolute;
	bottom: -28px;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
	opacity: 0.9;
}

.grid {
	--cell: clamp(42px, min(6.2vw, 8.8vh), 68px);
	--gap: 6px;
	--pad: 10px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(9, var(--cell));
	grid-auto-rows: var(--cell); /* rows exactly equal to cols */
	gap: var(--gap);
	padding: var(--pad);
	border-radius: 16px;
	background: linear-gradient(145deg, rgba(27, 32, 52, 0.85), rgba(16, 21, 36, 0.92));
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 40px 80px rgba(0, 0, 0, 0.45);
}

/* draw 3x3 seams as an overlay so the grid never deforms */
.grid::before {
	content: "";
	position: absolute;
	inset: var(--pad);
	width: calc(9 * var(--cell) + 8 * var(--gap));
	height: calc(9 * var(--cell) + 8 * var(--gap));
	pointer-events: none;
	border-radius: 16px;
	background: linear-gradient(
			90deg,
			transparent calc(3 * var(--cell) + 2 * var(--gap)),
			rgba(255, 255, 255, 0.14) 0,
			rgba(255, 255, 255, 0.14) calc(var(--gap) + 2px),
			transparent 0
		),
		linear-gradient(
			90deg,
			transparent calc(6 * var(--cell) + 5 * var(--gap)),
			rgba(255, 255, 255, 0.14) 0,
			rgba(255, 255, 255, 0.14) calc(var(--gap) + 2px),
			transparent 0
		),
		linear-gradient(
			0deg,
			transparent calc(3 * var(--cell) + 2 * var(--gap)),
			rgba(255, 255, 255, 0.14) 0,
			rgba(255, 255, 255, 0.14) calc(var(--gap) + 2px),
			transparent 0
		),
		linear-gradient(
			0deg,
			transparent calc(6 * var(--cell) + 5 * var(--gap)),
			rgba(255, 255, 255, 0.14) 0,
			rgba(255, 255, 255, 0.14) calc(var(--gap) + 2px),
			transparent 0
		);
}

.cell {
	position: relative;
	background: var(--cell);
	border-radius: 14px;
	overflow: hidden;
	transition: background 0.2s, transform 0.08s, box-shadow 0.2s;
	border: 1px solid rgba(255, 255, 255, 0.05);
}
.cell.alt {
	background: var(--cell-alt);
}
.cell.given {
	background: var(--given);
}
.cell.place {
	animation: pop 160ms ease;
	box-shadow: inset 0 0 26px rgba(67, 211, 140, 0.28), 0 0 20px rgba(67, 211, 140, 0.2);
}
.cell.backtrack {
	animation: fadeback 260ms ease;
	box-shadow: inset 0 0 26px rgba(255, 92, 122, 0.25);
}
.cell.invalid {
	outline: 2px solid var(--bad);
	box-shadow: 0 0 18px rgba(255, 92, 122, 0.3) inset;
}
.cell.invalid-hard {
	outline: 2px solid var(--bad);
	box-shadow: 0 0 26px rgba(255, 92, 122, 0.35) inset, 0 0 30px rgba(255, 92, 122, 0.25);
}

/* heatmap + highlight layers */
.hm {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity 0.12s, background-color 0.12s;
}
.hlo {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.05s;
}
.hlo.row {
	z-index: 1;
	box-shadow: 0 0 0 2px rgba(var(--hi-row) / 0.28) inset, 0 0 16px rgba(var(--hi-row) / 0.2) inset;
}
.hlo.col {
	z-index: 2;
	box-shadow: 0 0 0 2px rgba(var(--hi-col) / 0.28) inset, 0 0 16px rgba(var(--hi-col) / 0.2) inset;
}
.hlo.box {
	z-index: 3;
	box-shadow: 0 0 0 2px rgba(var(--hi-box) / 0.42) inset, 0 0 22px rgba(var(--hi-box) / 0.26) inset,
		0 0 20px rgba(var(--hi-box) / 0.2);
}
.cell.hi-row .hlo.row {
	opacity: 1;
}
.cell.hi-col .hlo.col {
	opacity: 1;
}
.cell.hi-box .hlo.box {
	opacity: 1;
}

/* solving shimmer */
.grid.solving .cell::after {
	content: "";
	position: absolute;
	inset: -60%;
	background: conic-gradient(from 0deg, transparent, rgba(118, 169, 255, 0.12), transparent);
	animation: sweep 5s linear infinite;
	opacity: 0.9;
	pointer-events: none;
}

/* rainbow digits + same-number glow */
.cell.n1 input.digit {
	color: hsl(var(--c1));
}
.cell.n2 input.digit {
	color: hsl(var(--c2));
}
.cell.n3 input.digit {
	color: hsl(var(--c3));
}
.cell.n4 input.digit {
	color: hsl(var(--c4));
}
.cell.n5 input.digit {
	color: hsl(var(--c5));
}
.cell.n6 input.digit {
	color: hsl(var(--c6));
}
.cell.n7 input.digit {
	color: hsl(var(--c7));
}
.cell.n8 input.digit {
	color: hsl(var(--c8));
}
.cell.n9 input.digit {
	color: hsl(var(--c9));
}
.cell.n1.hi-same {
	box-shadow: 0 0 0 2px hsl(var(--c1) / 0.35) inset, 0 0 22px hsl(var(--c1) / 0.22) inset,
		0 0 26px hsl(var(--c1) / 0.16);
}
.cell.n2.hi-same {
	box-shadow: 0 0 0 2px hsl(var(--c2) / 0.35) inset, 0 0 22px hsl(var(--c2) / 0.22) inset,
		0 0 26px hsl(var(--c2) / 0.16);
}
.cell.n3.hi-same {
	box-shadow: 0 0 0 2px hsl(var(--c3) / 0.35) inset, 0 0 22px hsl(var(--c3) / 0.22) inset,
		0 0 26px hsl(var(--c3) / 0.16);
}
.cell.n4.hi-same {
	box-shadow: 0 0 0 2px hsl(var(--c4) / 0.35) inset, 0 0 22px hsl(var(--c4) / 0.22) inset,
		0 0 26px hsl(var(--c4) / 0.16);
}
.cell.n5.hi-same {
	box-shadow: 0 0 0 2px hsl(var(--c5) / 0.35) inset, 0 0 22px hsl(var(--c5) / 0.22) inset,
		0 0 26px hsl(var(--c5) / 0.16);
}
.cell.n6.hi-same {
	box-shadow: 0 0 0 2px hsl(var(--c6) / 0.35) inset, 0 0 22px hsl(var(--c6) / 0.22) inset,
		0 0 26px hsl(var(--c6) / 0.16);
}
.cell.n7.hi-same {
	box-shadow: 0 0 0 2px hsl(var(--c7) / 0.35) inset, 0 0 22px hsl(var(--c7) / 0.22) inset,
		0 0 26px hsl(var(--c7) / 0.16);
}
.cell.n8.hi-same {
	box-shadow: 0 0 0 2px hsl(var(--c8) / 0.35) inset, 0 0 22px hsl(var(--c8) / 0.22) inset,
		0 0 26px hsl(var(--c8) / 0.16);
}
.cell.n9.hi-same {
	box-shadow: 0 0 0 2px hsl(var(--c9) / 0.35) inset, 0 0 22px hsl(var(--c9) / 0.22) inset,
		0 0 26px hsl(var(--c9) / 0.16);
}

/* input */
input.digit {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	color: var(--fg);
	font-size: 1.45rem;
	text-align: center;
	font-weight: 800;
	caret-color: transparent;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
input.digit::placeholder {
	color: rgba(255, 255, 255, 0.2);
}
input.digit:disabled {
	color: #c4d3ff;
}

/* footer */
.site-foot {
	margin-top: 22px;
}
.site-foot-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
	justify-content: flex-start;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--muted);
}
.site-foot a {
	color: var(--accent);
	text-decoration: none;
}
.site-foot a:hover {
	text-decoration: underline;
}
.site-foot .dot {
	opacity: 0.45;
}

/* animations */
@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}
@keyframes sweep {
	to {
		transform: rotate(1turn);
	}
}
@keyframes pop {
	0% {
		transform: scale(0.92);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes fadeback {
	0% {
		filter: saturate(1.6) brightness(1.2);
	}
	100% {
		filter: none;
	}
}
.shake {
	animation: shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shake {
	10%,
	90% {
		transform: translateX(-1px);
	}
	20%,
	80% {
		transform: translateX(2px);
	}
	30%,
	50%,
	70% {
		transform: translateX(-4px);
	}
	40%,
	60% {
		transform: translateX(4px);
	}
}

/* modal */
.modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
.modal.show {
	display: flex;
}
.modal-body {
	width: min(720px, calc(100vw - 32px));
	max-height: 80vh;
	overflow: auto;
	padding: 18px;
	background: linear-gradient(180deg, rgba(24, 30, 48, 0.95), rgba(12, 16, 28, 0.98));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	box-shadow: 0 30px 100px rgba(0, 0, 0, 0.6);
}
.modal-close {
	position: absolute;
	margin: -8px -6px 0 0;
	right: 18px;
	top: 18px;
	cursor: pointer;
	font-size: 22px;
	color: var(--muted);
}