/*body {
  height: calc(100vh - 200px);
}*/

#rouxls {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 374px;
  height: 226px;
  background: url("/shrine/vg/deltarune/sprites/rouxls/rouxls_trans.gif");
  /*z-index: -1;*/
}

#rouxls-face {
  position: absolute;
  width: calc(27px*2);
  height: calc(29px*2);
  left: calc(116px/2);
  top: calc(96px/2);
  image-rendering: pixelated;
  user-select: none;
}

#rouxls-padding {
  height: 140px;
}

#dialog-container {
  transform-origin: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(100%, -50%);
  user-select: none;
}

#dialog-box {
    max-width: 360px;
    width: calc(100vw - 36px * 2);
    min-height: 88px;
    border: 3px solid white;
    color: #FFFFFF;
    padding: 8px;
    font-family: "Omori Normal";
    background: black;
    box-shadow: 0px 0px 0 1px black;
    font-size: 25px;
    font-size: 28px;
    letter-spacing: -0.4px;
    line-height: 28px;
    /*margin-bottom: 7px;
    margin-left: 1px;
    margin-right: 1px;*/
    padding-left: 14px;
    padding-right: 14px;
    /*transform-origin: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
    user-select: none;*/
    position: relative;
}

#dialog-box.next::before {
    content: "";
    background: url("./sprites/system/cursor.png");
    width: 29px;
    height: 15px;
    position: absolute;
    bottom: 6px;
    right: 20px;
    transform: translate(-50%, -50%);
    animation-name: cursor-bounce-dialog;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    image-rendering: crisp-edges;
}

@keyframes cursor-bounce-dialog {
  from {
    transform: translateX(-4px);
  }

  to {
    transform: translateX(4px);
  }
}

#dialog-box.tail::after {
    /*z-index: 1;*/
    content: "";
    background: url("./sprites/system/battle_speech_tail.png");
    width: 26px;
    height: 17px;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translate(-100%, -50%) rotate(-90deg);
    image-rendering: crisp-edges;
}

#choice-box {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(calc(-100% - 7px));
}

#choice-box {
  /*height: 88px;*/
  border: 3px solid white;
  color: #FFFFFF;
  padding: 8px;
  /*padding-top: 15px;*/
  font-family: "Omori Normal";
  background: black;
  box-shadow: 0px 0px 0 1px black;
  /*font-size: 25px;*/
  /*font-size: 28px;*/
  font-size: 25px;
  /*letter-spacing: -0.4px;*/
  line-height: 25px;
  /*adding-left: 14px;
  padding-right: 14px;*/
  /*transform-origin: center;
  position: relative;

  width: fit-content;
  position: relative;
  left: 100%;
  transform: translateX(-100%);*/
  width: fit-content;
}

.choice-item {
  padding-left: 32px;
  position: relative;
}

.action-hovered {
  color: yellow;
}

.action-hovered::before {
  content:"";
  background: url("./sprites/system/cursor.png");
  width: 29px;
  height: 15px;
  position: absolute;
  top: calc(50% + 1px);
  left: 12px;
  transform: translate(-50%, -50%);
  animation-name: cursor-bounce2;
  animation-duration: 500ms;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-composition: add;
  image-rendering: crisp-edges;
}

@keyframes cursor-bounce2 {
  from {
    transform: translate(-4px, 0);
  }

  to {
    transform: translate(calc(4px), 0);
  }
}

#tooltip {
  color: white;
  background: black;
  box-shadow: 0px 0px 0 1px black;
  border: 4px solid white;
  padding: 6px 8px;
  letter-spacing: -0.2px;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  max-width: var(--tooltip-width);
  z-index: 999;
}

#jeff {
  background: url("/shrine/vg/omori/battle/sprites/enemy/sprout_mole_neutral.gif");
  position: fixed;
  width: 140px;
  height: 200px;
  bottom: 0px;
  left: 194px;
  transform-origin: center bottom 0px;
  transform: scale(0.8);
  user-select: none;
}

#hero {
  position: fixed;
  bottom: 0px;
  left: 194px;
  transform-origin: center bottom 0px;
  transform: scale(1.2);
  image-rendering: crisp-edges;
  user-select: none;
}

/* TEXT ANIMATION */
.text-wave {
  animation-name: wave-anim;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-composition: add;
  animation-direction: reverse;
  position: relative;
  top: 0;
  left: 0;
}

@keyframes wave-anim {
  0% {top: -4px}
  50% {top: 4px}
  100% {top: -4px}
}

.text-shake {
  animation-name: shake-anim2;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-composition: add;
  animation-direction: reverse;

  position: relative;
  top: 0;
  left: 0;

  --amount: 2px;
}

.text-shake.text-wave {
  animation-name: wave-anim shake-anim2;
}

/* calc( 0px - var(--myvalue) */
@keyframes shake-anim2 {
  2% {
    left: 0px; top: var(--amount);
  }
  4% {
    left: 0px; top: var(--amount);
  }
  6% {
    left: var(--amount); top: var(--amount);
  }
  8% {
    left: var(--amount); top: var(--amount);
  }
  10% {
    left: var(--amount); top: var(--amount);
  }
  12% {
    left: var(--amount); top: var(--amount);
  }
  14% {
    left: 0px; top: 0px;
  }
  16% {
    left: var(--amount); top: 0px;
  }
  18% {
    left: 0px; top: var(--amount);
  }
  20% {
    left: 0px; top: var(--amount);
  }
  22% {
    left: var(--amount); top: var(--amount);
  }
  24% {
    left: 0px; top: var(--amount);
  }
  26% {
    left: 0px; top: 0px;
  }
  28% {
    left: var(--amount); top: 0px;
  }
  30% {
    left: var(--amount); top: 0px;
  }
  32% {
    left: 0px; top: var(--amount);
  }
  34% {
    left: 0px; top: var(--amount);
  }
  36% {
    left: 0px; top: 0px;
  }
  38% {
    left: var(--amount); top: var(--amount);
  }
  40% {
    left: var(--amount); top: 0px;
  }
  42% {
    left: 0px; top: var(--amount);
  }
  44% {
    left: 0px; top: var(--amount);
  }
  46% {
    left: 0px; top: 0px;
  }
  48% {
    left: 0px; top: var(--amount);
  }
  50% {
    left: 0px; top: var(--amount);
  }
  52% {
    left: var(--amount); top: var(--amount);
  }
  54% {
    left: 0px; top: 0px;
  }
  56% {
    left: 0px; top: 0px;
  }
  58% {
    left: 0px; top: 0px;
  }
  60% {
    left: 0px; top: var(--amount);
  }
  62% {
    left: 0px; top: 0px;
  }
  64% {
    left: var(--amount); top: 0px;
  }
  66% {
    left: 0px; top: var(--amount);
  }
  68% {
    left: 0px; top: 0px;
  }
  70% {
    left: var(--amount); top: var(--amount);
  }
  72% {
    left: var(--amount); top: 0px;
  }
  74% {
    left: 0px; top: var(--amount);
  }
  76% {
    left: 0px; top: var(--amount);
  }
  78% {
    left: var(--amount); top: 0px;
  }
  80% {
    left: var(--amount); top: 0px;
  }
  82% {
    left: 0px; top: 0px;
  }
  84% {
    left: var(--amount); top: 0px;
  }
  86% {
    left: 0px; top: 0px;
  }
  88% {
    left: 0px; top: 0px;
  }
  90% {
    left: var(--amount); top: var(--amount);
  }
  92% {
    left: var(--amount); top: var(--amount);
  }
  94% {
    left: var(--amount); top: 0px;
  }
  96% {
    left: var(--amount); top: 0px;
  }
  98% {
    left: 0px; top: var(--amount);
  }
  0%,
  100% {
    left: 0px; top: 0px;
  }
}

@media (max-width: 780px) {
  #dialog-box.tail::after {
    width: 26px;
    height: 17px;
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translate(-50%) rotate(-180deg);
    top: unset;
  }

  /*#dialog-box {
    position: absolute;
    right: unset;
    left: 16px;
    top: unset;
    transform: translate(0%, -90%);
  }*/
  #dialog-container {
    position: absolute;
    right: unset;
    left: 16px;
    top: unset;
    transform: translate(0%, -90%);
  }

  #rouxls-padding {
    height: 330px;
  }
}