style.css

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

	--green-hs: 115 29%;
	--green-color: hsl(var(--green-hs) 43%);

	--yellow-color: hsl(49 51% 47%);

	--gray-color: hsl(200 2% 48%);
	--light-gray-color: hsl(214 9% 84%);
	--dark-gray-color: hsl(223 21% 27%);

	box-sizing: border-box;

	font-family: "Montserrat", "Open Sans", system-ui, Helvetica, Arial, sans-serif;

	color: var(--dark-gray-color);
	background-color: var(--bg-color);
}

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

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

/* Credit: https://stackoverflow.com/questions/59732074/disable-double-tap-zoom-on-safari-ios-13 */
body {
	touch-action: manipulation;
}

header {
	inline-size: fit-content;
	margin-block-start: 1.3em;
	margin-inline: auto;
	padding: 2em;
	padding-block-end: 0.8em;

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

	header h1 {
		margin: 0;
		padding-inline-start: .32em;

		display: flex;
		align-items: center;

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

	header h1>img {
		display: block;
		inline-size: 3.1em;
		block-size: 100%;

		filter: grayscale(100%) brightness(400%);
	}

	header h1>span {
		padding: .2em .4em;
		padding-inline-start: 0;

		color: white;
		background-color: var(--yellow-color);

		text-transform: uppercase;
	}

header,
#attribution {
	position: relative;
	z-index: 1;
}

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

#toolbar {
	margin: 1.2em 2em;
	margin-inline-start: auto;

	inline-size: fit-content;
}

	#toolbar > .toast {
		position: absolute;
		inset: auto;
		inset-inline-start: 50%;
		transform: translate(-50%, -0.65em);

		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

		pointer-events: none;
	}

	#toolbar > .toast > p {
		margin: 0;
		padding: 1em 1.2em;

		border-radius: 0.25em;

		color: whitesmoke;
		background-color: black;

		font-weight: 600;
	}

	#toolbar > .toast:not(.visible) {
		opacity: 0;

		transition: opacity 150ms;
	}

	#toolbar > .toast.visible {
		opacity: 1;

		transition: opacity 200ms ease-out;
	}

#mode-switch {
	inline-size: fit-content;
	margin-inline: auto;
	margin-block-start: 0.5em;

	display: flex;
	gap: 0.5em;
	align-items: center;

	font-size: 80%;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

	/* Credit: https://github.com/designftw/website/blob/bd8213164494c82a36287335a168dba0c9356bfc/lectures/gd/talk.css#L97 */
	#mode-switch > input {
		--off-c: var(--yellow-color);
		--on-c: var(--green-color);
		--color: var(--off-c);
		--duration: 0.4s;
		--size: 2.8em;

		position: relative;

		-webkit-appearance: none;

		inline-size: var(--size);
		min-block-size: 1.1em;
		padding: 1px;
		margin: 0;

		background: linear-gradient(to right, var(--off-c) 50%, var(--on-c) 0);
		background-size: 200% 100%;
		background-position: 0;

		background-color: var(--off-c);
		color: whitesmoke;

		font-size: 160%;
		font-family: inherit;

		border-radius: 1em;
		outline: none;
		overflow: hidden;

		box-shadow: 0 0 0.5em rgb(0 0 0 / 0.1) inset, 0 0 0 1px rgb(0 0 0 / 0.2) inset;

		transition: var(--duration) background-position;
	}

	#mode-switch > input:checked {
		--color: var(--on-c);
		background-position-x: var(--size);
	}

	#mode-switch > input::before,
	#mode-switch > input::after {
		transition: var(--duration) left;
	}

	#mode-switch > input::before {
		content: "";

		position: relative;
		left: 0;
		z-index: 1;

		display: block;
		block-size: 1em;
		aspect-ratio: 1;

		border-radius: 1em;
		background: whitesmoke;

		box-shadow: 0 0.05em 0.1em rgb(0 0 0 / 0.2), 0 0 0 1px rgb(0 0 0 / 0.2), 0 0 0 1px var(--color);
	}

	#mode-switch > input:checked::before {
		left: calc(var(--size) - 1em - 2px);
	}

	#mode-switch > input::after {
		content: "ON          OFF";
		white-space: pre;

		position: absolute;
		left: calc(-1 * var(--size));
		top: 0.1em;

		padding: 0 0.7em;

		font-size: 60%;
		line-height: 1.6;
	}

	#mode-switch > input:checked::after {
		left: 0;
	}

#show-stats {
	--bg: var(--light-gray-color);

	padding: 0.2em;

	border-radius: 0.5em;
	border: 2px dotted var(--border-color, transparent);

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

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

	transition: border-color 0.2s;

	cursor: pointer;
}

#show-stats::after {
	content: url(stats-chart.svg);

	display: inline-block;
	block-size: 1.8em;
	aspect-ratio: 1;
}

#show-stats:where(:hover, :active, :focus) {
	--border-color: var(--gray-color);
}

[mv-app="game"] {
	position: relative;
}

[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(field.svg);
	background-repeat: no-repeat;
	background-size: 100%;
}

@keyframes fly-up {
	to {
		background-position-y: -5em, -3em, -10em;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

[mv-app="game"].won::before {
	content: "You won! 🎊";

	display: grid;
	place-items: center;

	position: absolute;
	inset: 0;

	margin-inline: -100vh;
	margin-block: -40vh -20vh;

	font-size: min(10vw, 5em);
	font-weight: 900;
	text-transform: uppercase;

	color: hsl(350 80% 55%);
	text-shadow: 0.03em 0.03em 0.03em var(--dark-gray-color);

	z-index: 1;
	pointer-events: none;

	--balloon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="20">🎈</text></svg>');
	background: var(--balloon) 0 0 / 5em, var(--balloon) 1em 0 / 3em, var(--balloon) 2em 0 / 10em;

	animation: fade-in 0.3s linear, fly-up 1.5s 2 linear, fade-out 0.5s 2.5s linear forwards;
}

[mv-app="game"] [mv-list="usedLetters"]>[mv-list-item] {
	display: contents;
}

[mv-app="game"] [mv-list="usedLetters"] [property="letter"] {
	inline-size: 100%;
	aspect-ratio: 1;
	margin: 0;

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

	display: grid;
	place-content: center;

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

	border: .1em solid transparent;

	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-list="usedLetters"] [property="letter"]:not(.idle) {
	animation: bounce 0.2s ease-in-out;
}

@keyframes bounce {
	50% {
		transform: scale(1.1);
	}
}

/* Credit: https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */
[mv-app="game"] [mv-list="usedLetters"] [property="letter"].shake {
	animation: shake 650ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}

[mv-app="game"] [mv-list="usedLetters"] [property="letter"]:not(.absent, .elsewhere, .correct) {
	border-color: hsl(0 0% 20%);
}

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

[mv-app="game"].backdrop::after {
	content: "";

	position: fixed;
	inset: 0;

	background-color: rgb(255 255 255 / 70%);
	transition: background-color 0.2s;
}

#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: 0.8;

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

		border: none;
		border-radius: 0.3em;

		color: var(--color, hsl(221 13% 35%));
		background-color: var(--bg, var(--light-gray-color));

		font-size: 120%;
		font-weight: 600;
		line-height: 1;
		text-transform: uppercase;
	}

	#keyboard [mv-list="keys"]>button:not(:disabled) {
		cursor: pointer;
	}

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

	#keyboard [mv-list="keys"]>button:where(#bs, #enter) {
		inset-inline-start: 1em;
		inline-size: 160%;
		aspect-ratio: initial;

		font-size: 150%;
		line-height: 1;
	}

	#keyboard [mv-list="keys"]>button#enter {
		inline-size: 150%;
		inset-inline-start: initial;

		font-size: 100%;
	}

	#keyboard [mv-list="keys"]>button#bs::after {
		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234e5565" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="m12 14 2-2m0 0 2-2m-2 2-2-2m2 2 2 2M3 12l6 6a2 2 0 0 0 2 1h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 1l-6 6z"/></svg>');

		display: inline-block;
		block-size: 1.5em;
		aspect-ratio: 1;
		margin-inline-start: -0.2em;
		margin-block-start: 0.1em;
	}

	:where([mv-app="game"] [mv-list="usedLetters"], #keyboard [mv-list="keys"]) :where(button, [property="letter"]).absent {
		--bg: var(--gray-color);
	}

	:where([mv-app="game"] [mv-list="usedLetters"], #keyboard [mv-list="keys"]) :where(button, [property="letter"]).elsewhere {
		--bg: var(--yellow-color);
	}

	:where([mv-app="game"] [mv-list="usedLetters"], #keyboard [mv-list="keys"]) :where(button, [property="letter"]).correct {
		--bg: var(--green-color);
	}

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

	#keyboard [mv-list="keys"]>button:not(:disabled, .absent, .elsewhere, .correct):where(:hover, :active, :focus) {
		--bg: hsl(214 9% 75%);
	}

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

	min-inline-size: 20em;
	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.35em;

	background-color: whitesmoke;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	font-size: 150%;

	z-index: 2;
}

@keyframes dialog-appear {
	from {
		transform: translate(-50%, -10vh);
		opacity: 0;
	}
}
:where([mv-app="popup"], [mv-app="statistics"]).visible {
	visibility: revert;
	opacity: revert;

	will-change: transform;
	animation: dialog-appear .5s backwards;
}

[mv-app="statistics"].visible.won {
	animation-delay: 3.3s;
}

	[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"] {
		margin-block: 0.4em;

		font-size: 150%;
		font-weight: bold;
	}

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

	[mv-app="popup"]>article {
		inline-size: fit-content;
		margin-inline: auto;

		display: grid;
		grid-template-columns: 1fr 1fr;
		place-items: center;
		column-gap: 3em;

		font-size: 80%;
	}

		[mv-app="popup"]>article>h2 {
			margin: 0;

			font-size: inherit;
			font-weight: 300;
		}

		[mv-app="popup"]>article>[mv-list] {
			inline-size: fit-content;
			margin: 0.5em auto 0.8em;

			grid-row: 2;

			display: grid;
			grid-template-columns: repeat(5, min-content);
			gap: 0.03em;

			font-size: 100%;
		}

.info {
	margin: 2.8em 0 2em;

	font-weight: 200;
}

	:where([mv-app="popup"], .info)>button {
		display: block;
		margin-block: 0.7em;
		margin-inline: auto;
		padding: 0.7em 0.7em;

		border: none;
		border-radius: 0.3em;

		color: whitesmoke;
		background-color: var(--green-color);

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

		transition: background-color 0.2s;

		cursor: pointer;
	}

	:where([mv-app="popup"], .info)>button:where(:hover, :active, :focus) {
		--green-color: hsl(var(--green-hs) 50%);
	}

	.info>button {
		margin-block-start: 3em;
	}

[mv-app="statistics"]>article + article {
	margin-block-start: 1.35em;
}

[mv-app="statistics"]>article>h2 {
	margin: 0;

	font-size: 70%;
	font-weight: 600;

	text-transform: uppercase;
	letter-spacing: 0.03em;
}

[mv-app="statistics"]>button {
	position: absolute;
	inset-inline-end: 0.5em;
	inset-block-start: 0.5em;

	padding: 0;

	border: none;
	background-color: transparent;

	opacity: 0.5;
	transition: opacity 0.2s;

	font-size: 105%;

	cursor: pointer;
}

[mv-app="statistics"]>button::after {
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="m290 256 95-95a24 24 0 0 0-34-34l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"/></svg>');

	display: block;
	inline-size: 1.2em;
	aspect-ratio: 1;
}

[mv-app="statistics"]>button:where(:hover, :active, :focus) {
	opacity: 1;
}

[mv-app="statistics"]>.stats {
	inline-size: fit-content;
	margin-block-start: 0.4em;
	margin-inline: auto;

	display: grid;
	grid-template-columns: repeat(4, min-content);
	gap: 0.2em 1em;
	justify-items: center;

	font-weight: 500;
}

[mv-app="statistics"]>.stats>h2 {
	grid-column: span 4;
}

[mv-app="statistics"]>.stats>span {
	display: flex;
	gap: 0.1em;
	flex-direction: column;
	align-items: center;

	font-size: 130%;
}

[mv-app="statistics"]>.stats>span::after {
	content: attr(title);

	font-size: 40%;
	font-weight: 200;
	line-height: 1.1;
}

[mv-app="statistics"]>.stats>span:nth-of-type(2)::after {
	white-space: nowrap;
}

[mv-app="statistics"]>.guess-distribution>p {
	font-size: 70%;
	font-weight: 200;
}

[mv-app="statistics"] [mv-list="guessCount"] {
	margin: 1em auto;
	padding: 0;
	inline-size: 90%;

	list-style: none;

	counter-reset: distribution;
}

[mv-app="statistics"] [mv-list="guessCount"]>[mv-list-item] {
	--color: var(--green-color);
	--inset: 0.5em;

	margin-block: 0.25em;
	padding: 0.25em;

	text-align: left;
	font-size: 50%;
	font-variant-numeric: tabular-nums;

	background-image: linear-gradient(to right, var(--color, hsl(221 13% 41%)), var(--color, hsl(221 13% 41%)));
	background-size: max(1.25em, calc(var(--value) / var(--max, 1) * 100%)) 100%;
	background-repeat: no-repeat;
}

[mv-app="statistics"] [mv-list="guessCount"]>[mv-list-item]::before {
	margin-inline-start: -1.5em;

	counter-increment: distribution;
	content: counter(distribution);
}

[mv-app="statistics"] [mv-list="guessCount"]>[mv-list-item]>span {
	position: absolute;
	inset-inline-end: calc(100% - var(--value) / var(--max, 1) * 100% + var(--inset, -0.95em));

	color: whitesmoke;

	font-weight: 700;
}

[mv-app="statistics"]>.next-mavordle {
	position: relative;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.15em 1em;
	place-items: center;
}

	[mv-app="statistics"]>.next-mavordle>.timer {
		margin: 0;

		font-size: 150%;
		font-weight: 100;
		letter-spacing: 0.01em;
		font-variant-numeric: tabular-nums;
	}

	[mv-app="statistics"]>.next-mavordle>button {
			--color: hsl(220 13% 41%);

			grid-area: 1 / 2 / 3 / 3;

			display: flex;

			padding: 0.5em 1em;
			padding-block-start: 0.6em;

			border: none;
			border-radius: 0.3em;

			color: whitesmoke;
			background-color: var(--green-color);

			text-transform: uppercase;
			line-height: 1;
			font-family: inherit;
			font-size: 85%;
			font-weight: 700;

			transition: background-color 200ms;
		}

		[mv-app="statistics"]>.next-mavordle>button:where(:hover, :active, :focus-visible) {
			--green-color: hsl(var(--green-hs) 50%);

			cursor: pointer;
		}

		[mv-app="statistics"]>.next-mavordle>button::before {
			content: "";

			position: absolute;
			inset: 50% auto auto 50%;
			transform: translate(-50%, -50%);

			inline-size: 0.1em;
			block-size: 100%;

			background-color: var(--dark-gray-color);

		}

		[mv-app="statistics"]>.next-mavordle>button::after {
			content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="%23f5f5f5" d="M384 336a63.78 63.78 0 0 0-46.12 19.7l-148-83.27a63.85 63.85 0 0 0 0-32.86l148-83.27a63.8 63.8 0 1 0-15.73-27.87l-148 83.27a64 64 0 1 0 0 88.6l148 83.27A64 64 0 1 0 384 336z"/></svg>');

			inline-size: 1em;
			margin-inline-start: 0.2em;
		}

#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, :active, :focus) {
		filter: grayscale(100%) brightness(400%);
	}

/* Credit: https://piccalil.li/quick-tip/visually-hidden/ */
.visually-hidden {
	block-size: auto;
	inline-size: 1px;
	margin: 0;
	padding: 0;

	position: absolute;

	border: 0;

	clip: rect(0 0 0 0);

	overflow: hidden;
	white-space: nowrap;
}

@media (max-width: 415px) {
	header {
		font-size: 80%;
	}

	#mode-switch > input {
		--size: 2.8em;
	}

	#mode-switch > input::after {
		padding-inline: 0.5em;
	}

	main {
		font-size: 80%;
	}

	#keyboard {
		font-size: 85%;
	}

	[mv-app="popup"],
	[mv-app="statistics"] {
		font-size: 120%;
	}

	[mv-app="popup"]>article>[mv-list] {
		font-size: 130%;
	}

	[mv-app="popup"]>article>button {
		border-width: 1px;

		font-size: 95%;
	}

	[mv-app="popup"]>article>button::before {
		font-size: 8px;
	}

	[mv-app="statistics"]>button {
		font-size: 150%;
	}

	[mv-app="statistics"] [mv-list="guessCount"]>[mv-list-item] {
		font-size: 70%;
	}

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

	#ribbon {
		display: none;
	}
}

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

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