:root {
	--bg: White;
	--ink: Black;
	--muted: DimGray;
	--hairline: Gainsboro;
	--panel: WhiteSmoke;
	--shadow: LightGray;
	--correct: LimeGreen;
	--wrong: Red;

	--radius: 16px;
	--radius-sm: 12px;
	--space: 16px;

	--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial,
		sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font);
	background: var(--bg);
	color: var(--ink);
	min-height: 100vh;
	display: grid;
	place-items: center;
}

.app {
	width: min(720px, 94vw);
	padding: 18px 0 28px;
}

.top {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 10px 14px;
	border-bottom: 1px solid var(--hairline);
}

.stats {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.stat {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	background: var(--panel);
	min-width: 92px;
	justify-content: space-between;
}

.label {
	font-size: 0.72rem;
	color: var(--muted);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.value {
	font-size: 1rem;
	font-weight: 800;
}

.game {
	display: grid;
	gap: 18px;
	padding: 22px 10px 0;
}

.card {
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	background: White;
	padding: 26px 18px 18px;
}

.prompt {
	text-align: center;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: clamp(2.4rem, 7vw, 4rem);
	line-height: 1.05;
	margin: 8px 0 10px;
}

.hint {
	text-align: center;
	color: var(--muted);
	font-size: 0.95rem;
	margin: 0;
}

.buttons {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.colorBtn {
	cursor: pointer;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	padding: 14px 12px;
	font-weight: 900;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	box-shadow: 0 1px 0 var(--shadow);
	transform: translateY(0);
	transition: transform 80ms ease, filter 120ms ease;
}

.colorBtn:hover {
	transform: translateY(-1px);
	filter: brightness(1.03);
}

.colorBtn:active {
	transform: translateY(1px);
}

.overlay {
	position: fixed;
	inset: 0;
	background: WhiteSmoke;
	display: grid;
	place-items: center;
}

.hidden {
	display: none;
}

.modal {
	width: min(520px, 92vw);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	background: White;
	padding: 20px 18px;
	text-align: center;
}

.modal h2 {
	margin: 6px 0 6px;
	font-size: 1.4rem;
}

.modal p {
	margin: 0 0 14px;
	color: var(--muted);
}

.reStart {
	cursor: pointer;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--bg);
	border-radius: 999px;
	padding: 10px 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.reStart:hover {
	filter: brightness(1.05);
}

.card.correct {
	outline: 3px solid var(--correct);
	outline-offset: 2px;
}

.card.wrong {
	outline: 3px solid var(--wrong);
	outline-offset: 2px;
}

@media (max-width: 520px) {
	body {
		min-height: 100dvh;
		display: block;
	}

	.app {
		width: 100%;
		height: 100dvh;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	.top {
		flex: 0 0 auto;
		padding: 12px 10px;
		gap: 8px;
		position: sticky;
	}

	.game {
		flex: 1;
		height: 100%;
		display: grid;
		grid-template-rows: 1fr 1fr;
		gap: 10px;
		padding: 10px;
		min-height: 0;
	}

	.card {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 14px 12px;
	}

	.prompt {
		font-size: clamp(2.2rem, 10vw, 3.6rem);
		margin: 0 0 10px;
	}

	.hint {
		margin: 0;
		font-size: 0.95rem;
	}

	.buttons {
		height: 100%;
		align-content: stretch;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 10px;
	}

	.colorBtn {
		height: 100%;
		padding: 10px;
		font-size: 1rem;
		border-radius: var(--radius-sm);
	}

	.stats {
		width: 100%;
		justify-content: space-between;
	}

	.stat {
		min-width: 0;
		flex: 1 1 auto;
	}
}