.calia-wordle {
	box-sizing: border-box;
	min-height: 720px;
	padding: 24px 10px;
	background-color: #fd94ab;
	font-family: Georgia, 'Times New Roman', serif;
}

.calia-wordle * {
	box-sizing: border-box;
}

.calia-wordle .guesses {
	display: grid;
	gap: 8px;
	justify-content: center;
}

.calia-wordle .guess {
	display: grid;
	grid-template-columns: repeat(5, 56px);
	width: 280px;
	height: 52px;
	border: 1px solid black;
}

.calia-wordle .guessletter {
	display: grid;
	place-items: center;
	width: 56px;
	height: 52px;
	border: 1px solid black;
	font-size: 34px;
	font-weight: bold;
	line-height: 1;
}

.calia-wordle .msg {
	min-height: 54px;
	max-width: 620px;
	margin: 14px auto 20px;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
	overflow-wrap: anywhere;
}

.calia-wordle .msg a {
	font-size: 20px;
}

.calia-wordle .success {
	color: green;
}

.calia-wordle .failure {
	color: royalblue;
}

.calia-wordle .error {
	color: red;
}

.calia-wordle .keyboard {
	display: grid;
	gap: 10px;
	justify-content: center;
	user-select: none;
}

.calia-wordle .row {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.calia-wordle .staggered {
	margin-left: 30px;
}

.calia-wordle .key {
	appearance: none;
	display: grid;
	place-items: center;
	width: 54px;
	height: 64px;
	min-width: 54px;
	min-height: 64px;
	margin: 0;
	padding: 0;
	border: 1px solid black;
	border-radius: 0;
	background-color: azure;
	box-shadow: none;
	color: #111;
	cursor: pointer;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.calia-wordle .wide {
	width: 82px;
	min-width: 82px;
	font-size: 14px;
	text-transform: none;
}

.calia-wordle .key:active {
	background-color: lightgray;
}

.calia-wordle .miss {
	background-color: gold;
}

.calia-wordle .hit {
	background-color: lightgreen;
}

.calia-wordle .fail {
	background-color: darkgrey;
}

@media (width <= 700px) {
	.calia-wordle {
		min-height: 100vh;
		padding: 12px 0;
	}

	.calia-wordle .keyboard {
		width: 100%;
		gap: 0;
	}

	.calia-wordle .row {
		display: grid;
		gap: 0;
		width: 100%;
	}

	.calia-wordle .row:first-child {
		grid-template-columns: repeat(10, 1fr);
	}

	.calia-wordle .row:not(:first-child) {
		grid-template-columns: repeat(9, 1fr);
	}

	.calia-wordle .staggered {
		margin-left: 0;
	}

	.calia-wordle .key,
	.calia-wordle .wide {
		width: auto;
		min-width: 0;
		height: 58px;
		min-height: 58px;
	}
}