/* Root container class handling visibility */
.hidden {
	pointer-events: none; /* Prevent interaction when menu is hidden */
	visibility: hidden;
}

.visible {
	pointer-events: all; /* Enable interaction when menu is visible */
	visibility: visible;
}

/* Full-screen overlay to block game input */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Optional dimming effect */
	pointer-events: all; /* Capture all input */
	z-index: 9998; /* Ensure it's just below the menu but above the game */
}

/* The buy menu container */
.buy-menu {
	position: absolute;
	left: 50%; /* Center the menu horizontally */
	top: 50%; /* Center the menu vertically */
	transform: translate(-50%, -50%); /* Adjust for perfect centering */
	background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
	padding: 20px; /* Padding around the content */
	border-radius: 10px; /* Rounded corners */
	color: white; /* White text color */
	width: 300px; /* Fixed width for the menu */
	text-align: center; /* Center text inside the menu */
	z-index: 9999; /* Ensure the menu appears above the overlay */
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
	font-family: Arial, sans-serif; /* Set a clean font for readability */
}

/* Close button in the top right corner of the menu */
.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	background-color: red;
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
	z-index: 10000; /* Ensure it appears above other elements in the menu */
}

/* Style for the buy button */
.buy-button {
	background-color: green;
	color: white;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
	margin-top: 20px;
	z-index: 10000; /* Ensure it appears above other elements in the menu */
}

/* Hover effects for buttons */
.buy-button:hover {
	background-color: darkgreen;
}

.close-button:hover {
	background-color: darkred;
}