form.svelte-1uha8ag {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		flex: 1;
	}

	.game-form.svelte-1uha8ag {
		max-height: 85vh;
	}

	.disabled.svelte-1uha8ag {
		opacity: 0.3;
	}

	.how-to-play.svelte-1uha8ag {
		color: var(--color-text);
	}

	.how-to-play.svelte-1uha8ag::before {
		content: "i";
		display: inline-block;
		font-size: 0.8em;
		font-weight: 900;
		width: 1em;
		height: 1em;
		padding: 0.2em;
		line-height: 1;
		border: 1.5px solid var(--color-text);
		border-radius: 50%;
		text-align: center;
		margin: 0 0.5em 0 0;
		position: relative;
		top: -0.05em;
	}

	.grid.svelte-1uha8ag {
		--width: min(100vw, 40vh, 380px);
		max-width: var(--width);
		align-self: center;
		justify-self: center;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.grid.svelte-1uha8ag .row:where(.svelte-1uha8ag) {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-gap: 0.2rem;
		margin: 0 0 0.2rem 0;
	}

	.symbol-square.svelte-1uha8ag {
		aspect-ratio: 1;
		width: 50%;
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
		text-transform: lowercase;
		border: none;
		font-size: calc(0.08 * var(--width));
		border-radius: 2px;
		background: white;
		margin: 0;
		color: rgba(0, 0, 0, 0.7);
		margin-left: 25%;
		margin-top: 25%;
	}

	.number-square.svelte-1uha8ag {
		aspect-ratio: 1;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
		text-transform: lowercase;
		border: none;
		font-size: calc(0.08 * var(--width));
		border-radius: 2px;
		background: white;
		margin: 0;
		color: rgba(0, 0, 0, 0.7);
	}

	.selected.svelte-1uha8ag {
		outline: 2px solid var(--color-theme-1);
	}

	.controls.svelte-1uha8ag {
		text-align: center;
		justify-content: center;
		height: min(18vh, 10rem);
	}

	.keyboard.svelte-1uha8ag {
		--gap: 0.2rem;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--gap);
		height: 100%;
	}

	.keyboard.svelte-1uha8ag .row:where(.svelte-1uha8ag) {
		display: flex;
		justify-content: center;
		gap: 0.2rem;
		flex: 1;
	}

	.keyboard.svelte-1uha8ag button:where(.svelte-1uha8ag),
	.keyboard.svelte-1uha8ag button:where(.svelte-1uha8ag):disabled {
		--size: min(12vw, 10vh, 80px);
		background-color: white;
		color: black;
		width: var(--size);
		border: none;
		border-radius: 2px;
		font-size: calc(var(--size) * 0.5);
		margin: 0;
	}

	.keyboard.svelte-1uha8ag button:where(.svelte-1uha8ag):focus {
		background: var(--color-theme-2);
		color: white;
		outline: none;
	}

	.keyboard.svelte-1uha8ag button[data-key="enter"]:where(.svelte-1uha8ag),
	.keyboard.svelte-1uha8ag button[data-key="backspace"]:where(.svelte-1uha8ag) {
		--size: min(8vw, 4vh, 40px);
		position: absolute;
		bottom: 0;
		width: calc(1.5 * var(--size));
		height: calc(1 / 3 * (100% - 2 * var(--gap)));
		text-transform: uppercase;
		font-size: calc(0.3 * var(--size));
		padding-top: calc(0.15 * var(--size));
	}

	.keyboard.svelte-1uha8ag button[data-key="enter"]:where(.svelte-1uha8ag) {
		right: calc(50% + 3.5 * var(--size) + 0.8rem);
	}

	.keyboard.svelte-1uha8ag button[data-key="backspace"]:where(.svelte-1uha8ag) {
		left: calc(50% + 3.5 * var(--size) + 0.8rem);
	}

	.keyboard.svelte-1uha8ag button[data-key="enter"]:where(.svelte-1uha8ag):disabled {
		opacity: 0.5;
	}

	.successful-guess.svelte-1uha8ag {
		border: 0.2rem solid #afe1af;
		background-color: #d4f0d4;
	}

	.successful-guess.svelte-1uha8ag .successful-guess:where(.svelte-1uha8ag) {
		border: none;
		background-color: #d4f0d4;
	}

	.bad-guess.svelte-1uha8ag {
		border: 0.2rem solid #df9797;
		background-color: #f4cccc;
	}

	.bad-guess.svelte-1uha8ag .bad-guess:where(.svelte-1uha8ag) {
		border: none;
		background-color: #f4cccc;
	}

	@keyframes svelte-1uha8ag-wiggle {
		0% {
			transform: translateX(0);
		}
		10% {
			transform: translateX(-2px);
		}
		30% {
			transform: translateX(4px);
		}
		50% {
			transform: translateX(-6px);
		}
		70% {
			transform: translateX(+4px);
		}
		90% {
			transform: translateX(-2px);
		}
		100% {
			transform: translateX(0);
		}
	}

	.share-results-button.svelte-1uha8ag {
		margin-top: 2rem;
		padding: 0.5rem 1rem;
		font-size: 1rem;
		background-color: var(--color-theme-2);
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: border-radius 0.3s, color 0.3s;
	}

	.share-results-button.svelte-1uha8ag:hover {
		border-radius: 12px;
		color: #E0E0E0;
	}