/**
 * TETRIVCI - Responsive Styles
 * Mobile breakpoints and orientation handling
 */

@media (max-width: 768px) {
	#overlay {
		left: 8px;
		right: 8px;
		width: auto;
	}

	#overlay .small {
		font-size: 11px;
	}

	#usernameBox {
		right: 8px;
		bottom: 50px;
		min-width: 150px;
	}

	#playerNameBox {
		right: 8px;
		bottom: 50px;
		font-size: 11px;
	}
}

@media (max-width: 768px) and (orientation: landscape) {
	#centerMessage > #centerText {
		font-size: 18px;
		padding: 18px 20px;
		width: 86vw;
		min-width: unset;
	}

	#startMenu .menuCard {
		padding: 20px 22px;
		gap: var(--spacing-md);
		width: 86vw;
		margin-top: 6vh;
	}
}