/* Block: screen — one full game screen; only screen--active is shown */

.screen {
  position: absolute;
  inset: 0;
  display: none;
}

.screen--active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Screen shake when a monster is defeated */
.screen--shake {
  animation: screen-shake 0.4s steps(1, end);
}

@keyframes screen-shake {
  0%,
  50% {
    transform: translate(-3px, 0);
  }

  12%,
  62% {
    transform: translate(3px, 1px);
  }

  25%,
  75% {
    transform: translate(-2px, -1px);
  }

  37%,
  87% {
    transform: translate(2px, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}