.enter-code-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	width: 85dvw;
	max-width: 1200px;
	height: 90dvh;

	padding: 20px;
	border: clamp(3px, 0.6dvh, 10px) solid gray;
	border-radius: 40px;

	overflow: hidden;

	background-color: gainsboro;

	transition: opacity 200ms ease-out;
}

@media (min-aspect-ratio: 3/2) {
	.enter-code-container {
		width: 90dvw;
		max-width: 1200px;
		height: 85dvh;
		max-height: 700px;
	}

	.enter-code-digits {
		translate: 0 0 !important;
	}

	.enter-code-digits > h2 {
		display: none;
	}

	.join-game-button {
		translate: 0 0 !important;
	}
}

.enter-code {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	gap: 2dvh;

	width: 100%;
	height: 100%;

	border-radius: 20px;

	background: #f0f0f0;

	overflow-y: auto;

	white-space: nowrap;
}

.enter-code-digits {
	display: flex;
	justify-content: space-evenly;
	align-items: center;

	position: relative;

	width: 100%;

	cursor: pointer;

	translate: 0 20px;
}

.enter-code-digits > h2 {
	position: absolute;
	top: calc(-1 * min(10dvmin, 6rem) / 2 - 5dvh);

	font-size: min(10dvh, 6rem);
}

.enter-code-digit {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 20%;
	max-height: 30dvh;

	aspect-ratio: 2/3;

	border-radius: 15px;

	background: white;

	border: 0px solid rgb(0, 149, 179);

	font-size: min(10dvw, 8rem);
	font-weight: bold;

	transition: background-color 200ms ease-in-out, border-width 200ms ease-in;
}

@media (hover) {
	.enter-code-digit:hover {
		background-color: gainsboro;
	}
}

.enter-code-digit.active {
	background-color: rgba(0, 213, 255, 0.25);

	border-width: 3px;
}

.enter-code-digit:empty::after {
	content: '-';
}

.join-game-button {
	width: 90%;
	height: 40%;

	border-radius: 15px;

	color: white;

	color: white;
	background-color: rgb(33, 150, 243);

	border: none;

	text-align: center;
	text-decoration: none;
	font-size: min(16dvh, 12rem);
	font-weight: bold;

	overflow: hidden;

	cursor: pointer;

	translate: 0 20px;

	transition: background-color 200ms ease-in-out, filter 200ms ease-in-out;
}

.join-game-button[disabled] {
	filter: grayscale(1);
	cursor: not-allowed;
}

@media (hover) {
	.join-game-button:not([disabled]):hover {
		background-color: rgb(32, 137, 223);
	}
}

.join-game-button:not([disabled]):active {
	transition: background-color 25ms ease-out;
	background-color: rgb(25, 118, 210);
}

@media (max-height: 1300px) {
	.enter-code-digits > h2 {
		font-size: min(8dvmax, 3.5rem);
	}

	.join-game-button {
		font-size: min(12dvh, 10rem);
	}
}

@media (max-aspect-ratio: 23/20) {
	.join-game-button > i {
		display: none;
	}
}

@media (max-aspect-ratio: 24/25) {
	.join-game-button > i {
		display: inline-block;
	}

	.join-game-button > p {
		display: none !important;
	}
}