html, body {
	overflow-y: auto;
}

body {
	margin: auto;
	--game-width: min(100vw, 20rem);
	width: var(--game-width);

	font-family: -apple-system, system-ui, sans-serif;
}

#guesses {
	list-style: none;
	padding: 0;
	margin-bottom: 10em;

	--slot-count: 4;
	--slot-gap: .5rem;
	--slot-size: calc(
		(
			(var(--game-width) - var(--slot-gap))
			/
			var(--slot-count)
		)
		- var(--slot-gap)
		+ 1px
	);
}

.guess {
	display: flex;
	gap: var(--slot-gap);
	padding: calc(var(--slot-gap) / 2);
}

.letter-slot {
	display: block;
	width: var(--slot-size);
	height: var(--slot-size);

	font-size: calc(.5 * var(--slot-size));
	font-weight: bold;
	line-height: var(--slot-size);
	text-align: center;

	background-color: #aaa;
}

.letter-slot.some {
	background: #ab2;
}

.letter-slot.found {
	background: #1a2;
	color: white;
}

#keyboard {
	position: fixed;
	bottom: .5em;
	left: 50%;
	transform: translateX(-50%);

	border: .15em solid #555;
	box-shadow: 0 .1em .3em #555;
	background: #fafafa;

	--keyboard-gap: .5em;
}

.keyboard-row {
	display: flex;
	justify-content: center;
	gap: var(--keyboard-gap);
	margin: var(--keyboard-gap);
}

.key {
	font-size: 1rem;
	line-height: 1rem;
	text-align: center;
	min-width: 1.5rem;
	padding: .5em;

	font-weight: bold;

	border: none;
	background: #bbb;

	--accent-color: #f50;
}

.key.none {
	background: white;
	color: #888;
}

.key.some {
	background: #ab2;
}

.key.found {
	background: #1a2;
	color: white;
}

.key:hover, .key:focus {
	outline: .2em solid var(--accent-color);
	box-shadow: 0 .1em .4em .2em var(--accent-color);
}

.key:not(:focus-visible):not(:hover) {
	outline: none;
	box-shadow: none;
}

.key:active {
	filter: brightness(.8);
	box-shadow: none;
}