.lm-game-container {
	align-items: center;
	background: aliceblue;
	border-radius: 2.2rem;
	box-shadow: 0 6px 32px 0 rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	margin: 3.5rem auto 2.5rem auto;
	max-width: 600px;
	padding: 3rem 3rem 2.5rem 3rem;
}

.game-status-container {
	color: black;
	font-size: 3rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 1.8rem;
}

.numbers-container {
	align-items: center;
	display: flex;
	gap: 3.5rem;
	justify-content: center;
	margin-bottom: 2.2rem;
}

#left-number,
#right-number {
	color: black;
	background: turquoise;
	border-radius: 0.7em;
	font-size: 4.2rem;
	font-weight: 700;
	min-width: 3.2em;
	padding: 0.7em 1.6em;
	text-align: center;
}

#comparison-symbol {
	color: black;
	font-size: 3.2rem;
	min-width: 2em;
	text-align: center;
}

.buttons-container {
	display: flex;
	gap: 2rem;
	margin-bottom: 2.2rem;
}

.buttons-container button {
	background: palegreen;
	border: none;
	border-radius: 0.9em;
	box-shadow: 0 3px 12px 0 rgba(233, 150, 122, 0.12);
	color: black;
	cursor: pointer;
	font-size: 1.6rem;
	font-weight: 600;
	padding: 1em 2.5em;
	transition: background 0.2s, transform 0.1s;
}

.buttons-container button:disabled {
	background: aquamarine;
	color: black;
	cursor: not-allowed;
}

.buttons-container button:hover:not(:disabled),
.buttons-container button:focus:not(:disabled) {
	background: mediumspringgreen;
	filter: brightness(1.08);
	transform: translateY(-3px) scale(1.07);
}

.scores-container {
	align-items: center;
	color: black;
	display: flex;
	font-size: 1.8rem;
	gap: 1.2em;
	margin-top: 1.2rem;
}

#score-label,
#high-score-label {
	color: black;
	font-weight: 500;
}

#score-num,
#high-score-num {
	font-size: 1.5em;
	font-weight: 700;
	margin-left: 0.3em;
	margin-right: 1em;
}

/* Responsive styles for smaller screens */
@media screen and (max-width: 800px) {
	.lm-game-container {
		border-radius: 1rem;
		max-width: 98vw;
		padding: 0.7rem 0.2rem 0.5rem 0.2rem;
	}

	.game-status-container {
		font-size: 2.4rem;
		margin-bottom: 0.7rem;
	}

	.numbers-container {
		gap: 1.8rem;
		margin-bottom: 0.7rem;
	}

	#left-number,
	#right-number {
		font-size: 3rem;
		margin: 0.6rem;
		min-width: 1.2em;
		padding: 0.3em 0.7em;
	}

	#comparison-symbol {
		font-size: 2.4rem;
		min-width: 1em;
	}

	.buttons-container {
		gap: 3.4rem;
		margin-bottom: 0.7rem;
	}

	.buttons-container button {
		border-radius: 0.5em;
		font-size: 1.8rem;
		padding: 0.4em 1em;
	}

	#next-button {
		border-width: 1px;
	}

	.scores-container {
		font-size: 1.8rem;
		gap: 0.3em;
		margin-top: 0.3rem;
		margin-bottom: 0.6rem;
	}

	#score-num,
	#high-score-num {
		font-size: 1em;
		margin-left: 0.1em;
		margin-right: 0.3em;
	}
}