@font-face {
  font-family: 'omori';
  src: url('/omori.ttf');
}

   
   body {
    background-color: black; 
   }
   
 .game {
  width: 640px;
  height: 480px;
  outline: #000000 solid 0.1px;
  background-color: black;
  background-image: url("/downright_insanity/omori/bg/battleback_ow_download.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
      color: white;
    image-rendering: pixelated;
    font-family: 'omori';
    text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}

.game::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 /* background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); For phobia monsters */
  z-index: 99;
  mix-blend-mode: darken;
}

game img {
 position: absolute; 
}

.enemy {
  position: absolute;
  z-index: 0; 
  width: 640px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-bottomLeft {
 position: absolute; 
 transform: translate(13px, 305px);
  z-index: 3;
}

.window-bottomRight {
 position: absolute; 
 transform: translate(512px, 305px);
  z-index: 3;
}

.window-topLeft {
 position: absolute; 
 transform: translate(13px, 5px);
  z-index: 3;
}

.window-topRight {
 position: absolute; 
 transform: translate(512px, 5px);
  z-index: 3;
}

.charWindow {
  z-index: 7;
  position: relative;
}

.emotionText {
  position: absolute;
  z-index: 8;
  left: 8px;
  bottom: 147px;
}

.emotionBG {
  position: absolute;
  z-index: 4;
  left: 7px;
  bottom: 52px;
}

.portrait {
  position: absolute;
  z-index: 5;
  left: 3px;
  bottom: 50px;
}

.HP {
  position: absolute;
  z-index: 9;
  left: 30px;
  top: 124px;
  width: 74px;
  text-align: right;
}

.JP {
  position: absolute;
  z-index: 9;
  left: 30px;
  top: 143px;
  width: 74px;
  text-align: right;
}

.fightrun {
  position: absolute;
  bottom: -100px;
  left: 21.7%;
  animation: fightRunShow 0.5s cubic-bezier(.17,.84,.44,1) forwards; 
  animation-delay: 0.6s;
  z-index: 1;
}

.fight {
position: absolute;z-index: -1;
}

.run {
position: absolute;z-index: -1;top: 45px;
}

.mask2 {
  mask-image: url(/downright_insanity/omori/ui/mask.png);
  mask-size: 18%;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  mask-position: -20%;
  animation: maskAnimation 6s linear infinite;
  bottom: 10px;
  right: 47px;
}

.energyGauge {
  width: 362px;
  height: 49px;
  position:absolute;
  top: -50px;
}

.energyValue {
 position:absolute;
 left: 90.2%;
 font-size: 30px;
 bottom: 8.5px;
 text-shadow: 0px 0px 2px white, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black; 
}

#cursor {
 bottom: -31px; position: absolute; left: 64px; 
}

@keyframes maskAnimation {
  0% {
    mask-position: -25%;
  }
  100% {
    mask-position: 125%;
  }
}

@keyframes fightRunShow {
  from {
    bottom: -100px;
  }
  to {
   bottom: 94px;
  }
}

         div.hand {
   position: absolute;
    animation: loyk 0.35s infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    align-self: self-end;

}

@keyframes loyk {
    0% {
        transform: translateX(0px)
    }
    
    100% {
     transform: translateX(5px)
    }
}

.command {
 position: absolute;
  left: 21.8%;
  top: -1px;
  z-index: 1;
  font-size: 25.5px;
  width: 343px;
  height: 90px;
  background-color: black;
  border: solid 3px white;
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: white;
  outline: solid 0.1px black;
  border-top: 0;
  margin-top: 1px;
  padding-left: 10px;
  letter-spacing: -0.6px; 
  text-align: left;
}

.commandText {
  opacity: 0;
  animation: fadeInText 0s forwards; 
  animation-delay: 0.6s;
  position: absolute;
  top: -3px;
}

@keyframes fadeInText {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeOverlay {
  position: fixed;
  background-color: black;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  display: block;
  pointer-events: none;
  mix-blend-mode: darken;
  animation: fadeOut 1s forwards; 
}

.fadeOverlay2 {
 position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999998;
  display: block;
  pointer-events: none;
  background-image: url("/hidden/noise.gif");
  opacity: 0.8;
  mix-blend-mode: overlay;
}

@keyframes fadeOut {
  from {
    opacity: 1; 
  }
  to {
    opacity: 0; 
  }
}

.centered {
 position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}