.modal {
  padding-inline: 0;
  padding-block: 0 1rem;

  top: 50%;
  left: 50%;
  translate: -50% -50%;

  border: none;
  border-radius: 10px;

  background-color: rgba(0, 0, 0, 0.6);
  color: rgb(233, 233, 233);
  backdrop-filter: blur(16px);
}

dialog.modal {
  pointer-events: none;
  width: 98vw;
}

dialog.modal[open] {
  pointer-events: inherit;
  animation: modalFadeIn 0.4s ease normal;
}

dialog.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: modalFadeIn 0.4s ease normal;
}

dialog.modal p {
  margin-bottom: 2rem;
}

#win-modal.modal {
  border: 3px solid rgb(58, 169, 69);
}

#lose-modal.modal {
  border: 3px solid rgb(246, 83, 86);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
  }
}

.modal-header-container {
  display: flex;
  align-items: center;
  justify-content: start;
  background-color: rgb(28, 89, 180);
}

#lose-modal.modal .modal-header-container {
  background-color: rgb(135, 27, 48);
}

#win-modal.modal .modal-header-container {
  background-color: rgb(54, 143, 70);
}

.modal-header {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.modal-header h3 {
  font-size: 1.2rem;
}

.modal-header-icon {
  font-size: 1.4rem;
  margin-right: 0.4rem;
}

.modal-body {
  padding: 1rem;
  font-size: 0.8rem;
}