style.css

/* Basic Styling */
html {
	--bg-color: hsl(60 17% 98%);

	box-sizing: border-box;
	font-family: "Montserrat", "Open Sans", system-ui, Helvetica, Arial, sans-serif;
	color: hsl(223 21% 27%);
	background-color: var(--bg-color);
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html,
body {
	inline-size: 100vw;
	block-size: 100vh;
	margin: 0;
	padding: 0;
}

header {
	padding: 2em;

	font-size: 70%;
	text-align: center;
}

	header h1 {
		border-radius: 0.25em;

		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: uppercase;

		color: white;
	}

		header h1>* {
			--color: hsl(219 20% 70%);

			display: inline-block;
			min-inline-size: 1.5em;
			padding: 0.2em 0.3em;

			border-radius: inherit;

			color: var(--color);
			background-color: var(--color);
		}

		header h1>span:first-of-type {
			margin-inline-end: 0.2em;

			color: inherit;
			background-color: hsl(97 42% 52%);
		}

		header h1>span:last-of-type {
			margin-inline-start: 0.2em;

			color: inherit;
			background-color: hsl(44, 89%, 58%);
		}

main {
	max-inline-size: 560px;
	margin-inline: auto;
}

#give-up {
	visibility: hidden;

	block-size: 2.5em;
	padding: 0.1em 0.5em;
	margin-inline-start: 2em;
	margin-block-end: 1.3em;

	border-radius: 0.5em;
	border: 2px solid transparent;

	color: hsl(339 24% 58%);
	background: #f2e4e7;

	font-size: 90%;
	font-weight: 700;

	transition: border-color 0.2s;

	cursor: pointer;
}

#give-up:where(:hover, :active, :focus) {
	border-style: dotted;
	border-color: hsl(339 24% 70%);
}

#give-up.visible {
	visibility: revert;
}

[mv-app="game"] [mv-list="usedLetters"] {
	--size: 4em;

	margin-inline: auto;
	margin-block-end: 3em;
	inline-size: min-content;

	display: grid;
	grid-template-columns: repeat(5, var(--size));
	grid-template-rows: repeat(6, var(--size));
	gap: 0.3em;

	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4.3em" height="4.3em"><defs><clipPath id="clip"><rect width="4em" height="4em" rx="0.4em" /></clipPath></defs><rect width="4em" height="4em" rx="0.4em" fill="transparent" stroke="%239aa6b499" stroke-width="0.2em" clip-path="url(%23clip)" /></svg>');
}

[mv-app="game"] [mv-list="usedLetters"]>[mv-list-item] {
	inline-size: 100%;
	margin: 0;

	grid-row: var(--row, auto);

	display: grid;
	place-content: center;

	background-color: var(--bg, transparent);

	border-radius: 0.2em;
	border-color: #9aa6b499;

	aspect-ratio: 1;

	color: var(--color, inherit);
	font-size: 200%;
	font-weight: 700;
	text-transform: uppercase;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
	transition-property: color, background-color;
}

[mv-app="game"] > .mv-ui.mv-message.mv-deleted {
	display: none;
}

#keyboard [mv-list="keys"] {
	margin-inline: auto;
	inline-size: min-content;

	display: grid;
	grid-template-columns: repeat(10, 3em);
	grid-template-rows: repeat(3, auto);
	gap: 0.35em;
}

	#keyboard [mv-list="keys"] > button {
		padding: 0;

		position: relative;
		inset-inline-start: calc(var(--on, 1) * 1.25em);

		inline-size: 100%;
		aspect-ratio: 1;

		grid-row: var(--row, auto);
		grid-column: var(--column, auto);

		border: none;
		border-radius: 0.3em;

		color: var(--color, hsl(221 13% 41%));
		background-color: var(--bg, hsl(222 32% 90%));

		font-size: 120%;
		font-weight: 600;
		text-transform: uppercase;

		cursor: pointer;
	}

	#keyboard [mv-list="keys"]>button[style*="--row: 1"] {
		--on: 0;
	}

	:where([mv-app="game"] [mv-list="usedLetters"], #keyboard [mv-list="keys"])>:where(button, [mv-list-item]).absent {
		--bg: hsl(219 20% 70%);
	}

	:where([mv-app="game"] [mv-list="usedLetters"], #keyboard [mv-list="keys"])>:where(button, [mv-list-item]).elsewhere {
		--bg: hsl(44, 89%, 58%);
	}

	:where([mv-app="game"] [mv-list="usedLetters"], #keyboard [mv-list="keys"])>:where(button, [mv-list-item]).correct {
		--bg: hsl(97 42% 52%);
	}

	:where([mv-app="game"] [mv-list="usedLetters"], #keyboard [mv-list="keys"])>:where(button, [mv-list-item]):where(.absent, .elsewhere, .correct) {
		--color: whitesmoke;
	}

	#keyboard [mv-list="keys"]>button:not(.absent, .elsewhere, .correct):hover {
		--bg: hsl(223 27% 82%);
	}

[mv-app="popup"] {
	visibility: hidden;
	opacity: 0;

	min-inline-size: 15em;
	padding: 0.7em 1em;
	padding-block-start: 1.2em;

	text-align: center;

	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 30%;
	transform: translate(-50%, -30%);

	border-radius: 0.5em;

	background-color: whitesmoke;
	box-shadow: 0 0 0 10000px rgb(255 255 255 / 50%), 0 0 40px rgb(0 0 0 / 40%);

	font-size: 150%;
}

[mv-app="popup"].visible {
	visibility: revert;
	opacity: revert;

	transition: opacity 0.15s;
}

	[mv-app="popup"]>[property="message"] {
		padding: 1em 1.7em;

		text-transform: uppercase;

		border-radius: 5px;
		background: hsl(222 48% 95%);
		border: 2px dashed hsl(221 20% 82%);
	}

	[mv-app="popup"]>[property="message"]::before {
		content: "Your guess is:";

		position: absolute;
		inset-block-start: 1.35em;
		inset-inline-start: 1.5em;

		font-size: 75%;
		font-weight: 200;

		text-transform: initial;
	}

	[mv-app="popup"].game-over.lost>[property="message"]::before {
		content: "🥺 You lost! The hidden word was:";
	}

	[mv-app="popup"].game-over.won>[property="message"] {
		font-size: 150%;
		font-weight: bold;
	}

	[mv-app="popup"].game-over.won>[property="message"]::before {
		content: "";
	}

	[mv-app="popup"]>button {
		margin-block-end: 0.7em;
		padding: 0.7em 0.7em;

		border: none;
		border-radius: 0.3em;

		color: whitesmoke;
		background: hsl(120 34% 51%);
		box-shadow: 0 4px 0 hsl(120 68% 33%);

		font-family: inherit;
		font-size: 70%;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;

		transition: background-color 0.2s;

		cursor: pointer;
	}

	[mv-app="popup"]>button:where(:hover, :active) {
		background-color: hsl(120 34% 58%);
	}

#attribution {
	margin-block-start: 5em;

	font-size: 80%;
	font-weight: 300;
	text-align: center;
	line-height: 1.5;
}

#attribution a {
	color: inherit;
	font-weight: 500;
}

#ribbon {
	position: absolute;
	inset: 0;
	inset-inline-end: initial;
	inset-block-end: initial;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	align-items: center;
	justify-content: center;
	padding: .4em 4.8em;
	font-size: 85%;
	background: hsl(350 80% 55%);
	color: hsl(41 61% 90%);
	transform: rotate(90deg) translateX(70%) rotate(-90deg) rotate(-45deg) translateY(-100%);
	transform-origin: 0 0;
	box-shadow: 0 0.1em 0 0.1em hsl(0 0% 0% / 0.15);
}

	#ribbon img {
		inline-size: 3.5em;
	}

	#ribbon img:not(:hover) {
		filter: grayscale(100%) brightness(400%);
	}

@media (max-width: 415px) {
	header {
		margin-block-start: 2.2em;
		font-size: 60%;
	}

	main {
		font-size: 80%;
	}

	[mv-app="game"] [mv-list="usedLetters"] {
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3.425em" height="3.425em"><defs><clipPath id="clip"><rect width="3.23em" height="3.23em" rx="0.3em" /></clipPath></defs><rect width="3.23em" height="3.23em" rx="0.3em" fill="transparent" stroke="%239aa6b499" stroke-width="0.15em" clip-path="url(%23clip)" /></svg>');
	}

	#keyboard {
		font-size: 85%;
	}

	[mv-app="popup"] {
		font-size: 100%;
	}

	#attribution {
		margin-block-start: 2em;
	}

	#ribbon {
		gap: 0.3em;
		inset-inline-end: 0;
		padding: 0.7em 3em;
		flex-direction: revert;
		transform: revert;
	}

	#ribbon a {
		display: flex;
		align-self: stretch;
	}
}

@media (max-width: 360px) {
	#keyboard {
		font-size: 80%;
	}
}