body[data-busy="true"] .chess-board {
  opacity: 0.78;
}

.chess-board {
  width: min(82vw, 560px);
  height: min(82vw, 560px);
  table-layout: fixed;
  box-shadow: 0 14px 32px rgba(35, 28, 22, 0.14);
}

.chess-board td {
  width: calc(min(82vw, 560px) / 8);
  height: calc(min(82vw, 560px) / 8);
  padding: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: filter 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.chess-board td.white {
  background: #f1ddbc;
}

.chess-board td.black {
  background: #8d654d;
}

.chess-board td:hover {
  filter: brightness(1.04);
}

.chess-board td.selected {
  box-shadow: inset 0 0 0 3px rgba(244, 232, 211, 0.95), inset 0 0 0 6px rgba(143, 91, 58, 0.85);
}

.piece {
  display: block;
  width: 78%;
  margin: 0 auto;
  pointer-events: none;
  transform: translateZ(0);
}

img.black-piece {
  filter: invert(12%) sepia(13%) saturate(746%) hue-rotate(347deg) brightness(92%) contrast(92%) drop-shadow(0 7px 12px rgba(0, 0, 0, 0.22));
}

img.white-piece {
  filter: invert(95%) sepia(15%) saturate(181%) hue-rotate(339deg) brightness(103%) contrast(95%) drop-shadow(0 7px 12px rgba(0, 0, 0, 0.18));
}

body[data-botwhite="true"] img.white-piece {
  filter: invert(12%) sepia(13%) saturate(746%) hue-rotate(347deg) brightness(92%) contrast(92%) drop-shadow(0 7px 12px rgba(0, 0, 0, 0.22));
}

body[data-botwhite="true"] img.black-piece {
  filter: invert(95%) sepia(15%) saturate(181%) hue-rotate(339deg) brightness(103%) contrast(95%) drop-shadow(0 7px 12px rgba(0, 0, 0, 0.18));
}

body[data-botwhite="false"] img.white-piece {
  filter: invert(95%) sepia(15%) saturate(181%) hue-rotate(339deg) brightness(103%) contrast(95%) drop-shadow(0 7px 12px rgba(0, 0, 0, 0.18));
}

body[data-botwhite="false"] img.black-piece {
  filter: invert(12%) sepia(13%) saturate(746%) hue-rotate(347deg) brightness(92%) contrast(92%) drop-shadow(0 7px 12px rgba(0, 0, 0, 0.22));
}

.promotion-form[hidden],
#move-controls[hidden] {
  display: none;
}

#toast-root {
  position: fixed;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: min(340px, calc(100vw - 36px));
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 251, 245, 0.97);
  border: 1px solid rgba(31, 34, 48, 0.06);
  box-shadow: 0 12px 30px rgba(48, 34, 18, 0.12);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  animation: toast-in 220ms ease forwards;
}

.toast.out {
  animation: toast-out 180ms ease forwards;
}

.toast-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(31, 34, 48, 0.06);
  font-weight: 800;
}

.toast-text {
  font-size: 0.95rem;
}

.toast-close {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

.toast-info {
  border-left: 4px solid #4d77ff;
}

.toast-success {
  border-left: 4px solid #1d8f58;
}

.toast-warning {
  border-left: 4px solid #b87411;
}

.toast-error {
  border-left: 4px solid #b33a3a;
}

.toast-mate {
  border-left: 4px solid #8b3d1e;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@media (max-width: 640px) {
  .chess-board {
    width: min(92vw, 420px);
    height: min(92vw, 420px);
  }

  .chess-board td {
    width: calc(min(92vw, 420px) / 8);
    height: calc(min(92vw, 420px) / 8);
  }

  .toast {
    min-width: min(300px, calc(100vw - 24px));
  }
}