/* BOTÕES DE NÚMERO DE JOGADORES */
.playersNumber {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.playersNumber h4 {
	font-size: 1.5rem;
	font-weight: 600;
}

.playersNumber ul {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(10, 1fr);
	width: 100%;
}

.playersNumber ul li button {
	border: none;
	border-radius: 0.5rem;
	color: white;
	background-color: #da6506;
	font-size: 1.5rem;
	font-weight: 600;

	padding: 1rem;
	cursor: pointer;

	width: 100%;
}

.playersNumber ul li button:hover {
	background-color: #f7a440;
}

.playersNumber ul li button.active {
	background-color: #f7a440;
}

/* CONTAINER DOS BOTÕES PRINCIPAIS */
#mainButtons {
	display: flex;
	justify-content: center;
	gap: 2rem;
	width: 100%;
}

/* BOTÕES PRINCIPAIS */
.chooseGameButton {
	flex: 1;
	width: 100%;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	color: white;
	font-size: 1.5rem;
	font-weight: 600;
	transition: all 0.3s ease;
}

.chooseGameButton:disabled {
	background-color: #b3b3b3;
	cursor: not-allowed;
}

.chooseGameButton p {
	font-size: 1rem;
	font-weight: 400;
}

#randomGameButton {
	padding: 3rem 1rem;
}

#AIGameButton {
	padding: 1rem;
}

#randomGameButton:not(:disabled) {
	background-color: #027df7;
}

#AIGameButton:not(:disabled) {
	background-color: #9b6fed;
}

#randomGameButton:hover:not(:disabled) {
	background-color: #1e7fc7;
}

#AIGameButton:hover:not(:disabled) {
	background-color: #8a52d3;
}

@media (max-width: 768px) {
	#mainButtons {
		flex-direction: column;
		gap: 1rem;
	}

	.chooseGameButton {
		font-size: 1rem;
	}

	.chooseGameButton p {
		font-size: 0.8rem;
	}
}

@media (max-width: 844px) {
	.playersNumber ul {
		grid-template-columns: repeat(5, 1fr);
	}
}