.game-app,
.cast-container {
  position: absolute;
  height: 100%;
  width: 100%;
}

.combat-text {
  white-space: pre-line;
  background-color: var(--ui-bg);
  position: absolute;
  bottom: 0;
  left: 0;
  height: 200px;
  padding: 60px;
  width: 1920px;
}

.player-hit .combat-text {
  background-color: rgba(113, 31, 69, 0.64);
}

/* .player-hit .menu-layer { */
.player-hit .room-background,
.player-hit.game-app,
.enemy-hit .cast-container {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

.enemy-evade .cast-container {
  animation: miss 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

.game-app.player-seduced {
  animation: seduce-hue 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
.player-seduced .room-background {
  animation: seduce-zoomIn 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
.enemy-seduced .cast-container {
  animation: seduce-zoomOut 0.82s cubic-bezier(.36,.07,.19,.97) both,
              seduce-hue 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
.player-seduced .cast-container {
  animation: seduce-zoomOut 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
.game-app.player-item.heal {
  animation: heal-hue 0.82s cubic-bezier(.36,.07,.19,.97) both;
}


@keyframes shake {
  10%, 90% {transform: translate(-4px, 0);}
  20%, 80% {transform: translate(6px, 0);}
  30%, 50%, 70% {transform: translate(-8px, 0);}
  40%, 60% {transform: translate(8px, 0);}
}

@keyframes miss {
  50% {transform: translate(400px, 0);}
}

@keyframes heal-hue {
  0% {filter:  hue-rotate(45deg);}
  50% {filter: sepia(1) saturate(4)  hue-rotate(45deg);}
  100% {filter: hue-rotate(0)}
}
@keyframes seduce-hue {
  50% {filter: sepia(1) saturate(4);}
}
@keyframes seduce-zoomOut {
  50% {transform: scale(.9,.9);}
}
@keyframes seduce-zoomIn {
  50% {transform: scale(1.1,1.1);}
}