:root {
	color-scheme: dark;
	--bg: #0b0d12;
	--bg-2: #11141b;
	--panel: #161a23;
	--panel-2: #1c212c;
	--line: #262c39;
	--line-2: #343b4b;
	--text: #e9ecf2;
	--muted: #8b93a7;
	--green: #34c374;
	--green-hi: #4fe08f;
	--yellow: #e5b53e;
	--absent: #232833;
	--absent-text: #6e7689;
	--red: #ef5b6b;
	--key: #2e3442;
	--key-hi: #3a4253;
	--cols: 2;
	--radius: 6px;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (min-width: 640px) {
	:root { --cols: 3; }
}
@media (min-width: 1180px) {
	:root { --cols: 6; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
	margin: 0;
	background:
		radial-gradient(1200px 500px at 50% -200px, #1a2133 0%, transparent 70%),
		var(--bg);
	color: var(--text);
	display: flex;
	flex-direction: column;
	height: 100dvh;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg .fill { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------ header */

.topbar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px 8px;
	padding-top: max(10px, env(safe-area-inset-top));
	border-bottom: 1px solid var(--line);
	background: rgba(11, 13, 18, 0.7);
	backdrop-filter: blur(8px);
}

.brand { text-align: center; line-height: 1; }

.logo {
	margin: 0;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -0.03em;
}
.logo .six { color: var(--green-hi); }
.logo .seven { color: var(--yellow); }

.subtitle {
	margin-top: 4px;
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.icon-btn {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--panel-2); border-color: var(--line-2); }

.staging-banner {
	flex: none;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 16px;
	background: repeating-linear-gradient(-45deg, #3b2a0c 0 12px, #33240a 12px 24px);
	color: #f5cf73;
	border-bottom: 1px solid #5a4214;
}

/* ------------------------------------------------------------ boards */

main {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 10px 16px 16px;
}

.status {
	display: flex;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}
.status .dot { opacity: 0.5; }

.boards {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: 10px;
	max-width: 1400px;
	margin: 0 auto;
}
@media (min-width: 640px) and (max-width: 1179px) {
	.boards { max-width: 820px; }
}

.board {
	position: relative;
	container-type: inline-size;
	display: grid;
	gap: 3px;
	padding: 6px;
	border-radius: 10px;
	background: var(--bg-2);
	border: 1px solid var(--line);
	transition: border-color 0.4s, box-shadow 0.4s;
}
.board.solved {
	border-color: rgba(52, 195, 116, 0.55);
	box-shadow: 0 0 0 1px rgba(52, 195, 116, 0.15), 0 0 24px -6px rgba(52, 195, 116, 0.35);
}
.board.failed { border-color: rgba(239, 91, 107, 0.45); }

.badge {
	position: absolute;
	top: -8px;
	right: 8px;
	font-size: 11px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--green);
	color: #06210f;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
}
.board.solved .badge { opacity: 1; transform: scale(1); }

.row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 3px;
}
.row.after { opacity: 0.25; }

.tile {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 4px;
	border: 1px solid var(--line);
	background: transparent;
	font-weight: 800;
	font-size: clamp(10px, 8.2cqw, 26px);
	text-transform: uppercase;
	user-select: none;
}
.row.current .tile { border-color: var(--line-2); background: rgba(255, 255, 255, 0.015); }
.tile.filled { border-color: #5b6479 !important; animation: pop 0.1s ease-out; }
.tile.c { background: var(--green); border-color: var(--green); color: #fff; }
.tile.p { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.tile.a { background: var(--absent); border-color: var(--absent); color: var(--absent-text); }
.tile.flip { animation: flip 0.45s ease-in-out backwards; animation-delay: calc(var(--i) * 90ms); }

@keyframes pop {
	from { transform: scale(0.88); }
	to { transform: scale(1); }
}
@keyframes flip {
	0% { transform: rotateX(0); background: transparent; border-color: var(--line-2); color: var(--text); }
	49% { background: transparent; border-color: var(--line-2); color: var(--text); }
	50% { transform: rotateX(-90deg); }
	100% { transform: rotateX(0); }
}
.row.shake { animation: shake 0.4s; }
@keyframes shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(3px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60% { transform: translateX(5px); }
}

/* ------------------------------------------------------------ keyboard */

.kbd-wrap {
	flex: none;
	border-top: 1px solid var(--line);
	background: rgba(11, 13, 18, 0.92);
	padding: 8px 8px max(8px, env(safe-area-inset-bottom));
}

.result-bar {
	display: flex;
	gap: 8px;
	justify-content: center;
	max-width: 560px;
	margin: 0 auto 8px;
}
.result-bar .btn { flex: 1; }

.keyboard { max-width: 560px; margin: 0 auto; display: grid; gap: 6px; }
.krow { display: flex; gap: 5px; justify-content: center; }
.krow:nth-child(2) { padding: 0 5%; }

.key {
	position: relative;
	flex: 1;
	height: 54px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: var(--key);
	overflow: hidden;
	cursor: pointer;
	font-weight: 700;
	font-size: 15px;
	touch-action: manipulation;
	transition: filter 0.1s;
}
.key:hover { filter: brightness(1.12); }
.key:active { filter: brightness(1.3); }
.key.wide { flex: 1.6; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--key-hi); }
.key.wide svg { width: 24px; height: 24px; }

.cells {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	gap: 1px;
}
.cell { background: transparent; }
.key.touched .cell { background: var(--key); }
.cell.c { background: var(--green) !important; }
.cell.p { background: var(--yellow) !important; }
.cell.a { background: #1d212b !important; }
.cell.done { background: #161a22 !important; }
.key .label {
	position: relative;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.key.dead .label { color: #555d6f; text-shadow: none; }

/* ------------------------------------------------------------ buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	border: 1px solid var(--line-2);
	background: var(--panel-2);
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s, transform 0.1s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn.primary {
	border-color: transparent;
	background: linear-gradient(135deg, var(--green) 0%, #2aa864 100%);
	color: #04170b;
	box-shadow: 0 6px 20px -8px rgba(52, 195, 116, 0.7);
}
.btn.big { height: 50px; font-size: 16px; width: 100%; }
.btn svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ dialogs */

.modal {
	width: min(440px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 24px 22px 22px;
	border: 1px solid var(--line-2);
	border-radius: 18px;
	background: linear-gradient(180deg, #181c26 0%, #13161e 100%);
	color: var(--text);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
	overflow-y: auto;
}
.modal[open] { animation: rise 0.25s ease-out; }
.modal::backdrop { background: rgba(4, 5, 8, 0.72); backdrop-filter: blur(3px); }
@keyframes rise {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

.modal h2 { margin: 0 0 12px; font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.modal p { line-height: 1.5; color: #c8cdd9; margin: 0 0 12px; font-size: 15px; }
.modal strong { color: var(--text); }
.muted { color: var(--muted) !important; }
.center { text-align: center; }

.close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.close:hover { background: var(--panel-2); color: var(--text); }

.example { margin: 16px 0; padding: 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.ex-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 280px; margin-bottom: 12px; }
.ex-row .t { aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; font-weight: 800; background: var(--absent); color: var(--absent-text); }
.ex-row .t.c { background: var(--green); color: #fff; }
.ex-row .t.p { background: var(--yellow); color: #fff; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: #c8cdd9; }
.legend li { display: flex; align-items: center; gap: 8px; }
.sw { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.sw.c { background: var(--green); }
.sw.p { background: var(--yellow); }
.sw.a { background: var(--absent); border: 1px solid var(--line-2); }

#end-hero { text-align: center; }
#win-img {
	display: block;
	width: min(240px, 60vw);
	height: auto;
	margin: -4px auto 10px;
	border-radius: 14px;
	filter: drop-shadow(0 12px 30px rgba(229, 181, 62, 0.35));
	animation: bounce-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#win-img[hidden] { display: none; }
@keyframes bounce-in {
	from { transform: scale(0.3) rotate(-12deg); opacity: 0; }
	to { transform: none; opacity: 1; }
}
#end-title { font-size: 26px; margin-bottom: 4px; }

.answers { display: grid; gap: 6px; margin: 14px 0 6px; }
.answer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.answer-word { display: flex; gap: 3px; }
.mini { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; font-size: 13px; font-weight: 800; }
.answer.ok .mini { background: var(--green); color: #fff; }
.answer.miss .mini { background: #3a1e25; color: #ffb3bd; border: 1px solid #5c2a34; }
.answer-meta { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.answer.miss .answer-meta { color: var(--red); }

.stats-title { margin: 18px 0 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; }
#end-hero[hidden] + .stats-title { margin-top: 0; }
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { text-align: center; padding: 10px 4px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.stat .num { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }

.dist { margin-top: 16px; display: grid; gap: 4px; }
.dist-title { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.dist-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.dist-n { width: 18px; text-align: right; color: var(--muted); font-weight: 700; }
.bar-track { flex: 1; }
.bar { min-width: 24px; padding: 2px 7px; border-radius: 4px; background: var(--key); text-align: right; font-weight: 700; font-size: 12px; }
.bar.mine { background: var(--green); color: #04170b; }

.end-actions { margin-top: 18px; display: grid; gap: 12px; }
.next { display: flex; justify-content: center; align-items: baseline; gap: 8px; font-size: 14px; }
#countdown { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 18px; }

/* ------------------------------------------------------------ toast, confetti */

.toast {
	position: fixed;
	left: 50%;
	top: 76px;
	transform: translate(-50%, -8px);
	padding: 10px 16px;
	border-radius: 10px;
	background: #f1f3f7;
	color: #0b0d12;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	z-index: 10;
	white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1000; }

@media (max-width: 380px) {
	main { padding-left: 10px; padding-right: 10px; }
	.boards { gap: 7px; }
	.board { padding: 4px; gap: 2px; }
	.row { gap: 2px; }
	.key { height: 50px; font-size: 14px; }
	.krow { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}