/* CSS for decorative alien sprites - NOT game entities */
#alien-sprite-instructions-container-side {
    position: absolute;
    rotate: 55deg;
    z-index: -100;
    right: -15px;
    top: 70%;
    transform: translateY(-30%);
    opacity: 0.9;
    transition: translate 0.25s ease;
  }

  #alien-sprite-instructions-container-side:hover {
    translate: 2px 2px;
  }

  #alien-sprite-instructions-container-top {
    position: absolute;
    z-index: -100;
    right: 100px;
    top: -25px;
    opacity: 0.9;
    transition: translate 0.25s ease;
  }

  #alien-sprite-instructions-container-top:hover {
    translate: 0 -2px;
  }

  #alien-sprite-top-left {
    position: absolute;
    z-index: -100;
    rotate: 180deg;
    top: -29px;
    left: 5%;
    opacity: 0.9;
    transition: translate 0.25s ease;
  }

  #alien-sprite-top-left:hover {
    translate: 0 2px;
  }

  #alien-sprite-bottom-left {
    position: absolute;
    z-index: -100;
    bottom: 0;
    left: 15%;
    animation: moveAlienTitle 45s linear infinite, rotateAlienTitle 5s ease-in infinite;
    animation-delay: 0s;
    opacity: 0.9;
  }

  @keyframes moveAlienTitle {
    0% {
      bottom: -50%;
    }
    25% {
      bottom: 0%;
    }
    50% {
      bottom: 50%;
    }
    75% {
      bottom: 100%;
    }
    100% {
      bottom: 200%;
    }
  }

  @keyframes rotateAlienTitle {
    0% {
      rotate: 10deg;
    }
    25% {
      rotate: -5deg;
    }
    50% {
      rotate: 5deg;
    }
    75% {
      rotate: -10deg;
    }
    100% {
      rotate: 10deg;
    }
  }

  .alien-sprite-game-over {
    position: absolute;
    z-index: -100;
    left: -33%;
    top: -33%;
    opacity: 0.9;
    display: inline;
    rotate: 135deg;
    animation: gameOverChasing 5s linear forwards;
  }

  .player-sprite-game-over {
    position: absolute;
    z-index: -100;
    left: -33%;
    top: -33%;
    opacity: 0.9;
    display: inline;
    rotate: 135deg;
    animation: gameOverChasing 5.5s linear forwards;
  }

  @keyframes gameOverChasing {
    0% {
      left: -33%;
      top: -33%;
    }
    100% {
      left: 133%;
      top: 133%;
    }
  }

  .player-sprite-victory {
    position: absolute;
    z-index: -100;
    bottom: -33%;
    right: 20%;
    opacity: 0.9;
    display: inline;
    animation: victoryChasing 2.5s ease-in forwards;
  }

  .alien-sprite-victory {
    position: absolute;
    z-index: -100;
    bottom: -33%;
    right: 20%;
    opacity: 0.9;
    display: inline;
    animation: victoryChasing 3s linear forwards, victoryRotating 0.8s linear infinite;
  }


  @keyframes victoryChasing {
    0% {
      bottom: -33%;
    }
    100% {
      bottom: 133%;
    }
  }

  @keyframes victoryRotating {
    0% {
      rotate: 0deg;
    }
    100% {
      rotate: 360deg;
    }
  }