#messageBox {
  width: 250px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border: 1px solid #000;
  border-radius: 5px;
  text-align: center;
  align-items: center; /* Center items horizontally */
  justify-content: center;
  display: none;
}

#messageBoxMultiplayer {
  width: 250px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border: 1px solid #000;
  border-radius: 5px;
  text-align: center;
  align-items: center; /* Center items horizontally */
  justify-content: center;
  display: none;
}

#messageText {
  font-family: 'Roboto', Courier, monospace;
  font-size: large;
  font-weight: bold;
  color: #333;
}

.button {
  background-color: #04AA6D; /* Main green color */
  color: white;
  padding: 13px 20px;
  border: 1px black;
  border-radius: 5px;
  font-size: larger;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center; /* center the content vertically */
  text-align: center;
  gap: 0.8vw;
  font-family: 'Roboto', Courier, monospace;
  transition-duration: 0s;
}

.button:hover {
  background-color: #00ce82; /* Lighter green on hover */
}

.button:active {
  background-color: #038a56; /* Darker green on active/click */
}

.button i {
  font-size: 20px; /* Icon size */
}

.button.disabled {
  background-color: #cccccc; /* Gray color for disabled button */
  color: #868686; /* Darker text color for contrast */
  cursor: not-allowed; /* Cursor to indicate non-clickable */
}

.button.disabled i {
  color: #868686; /* Icon color for disabled state */
}

.redButton {
  background-color: #d9534f; /* Red color */
}

.redButton:hover {
  background-color: #c9302c; /* Lighter red on hover */
}

.redButton:active {
  background-color: #ac2925; /* Darker red on active/click */
}

.redButton i {
  font-size: 20px; /* Icon size */
}

.newGameButton {
  width: 65%;
}

#buttonEndGame {
  display: none;
}

/* Styles for portrait orientation */
@media screen and (orientation: portrait) {
  #messageBox {
    width: 70vw;
  }
  #messageBoxMultiplayer {
    width: 70vw;
  }
  #messageText {
    font-size: 6vw;
  }
  .button {
    font-size: 5vw;
    gap: 2vw;
    padding: 1vh 20px;
  }
  .newGameButton {
    width: 90%;
  }
  .button i {
    font-size: 5vw; /* Icon size */
  }
}