.korok-runner{
  display:none;
  position:absolute;
  z-index:3;
  left:50%;
  bottom:.5rem;
  width:100vw;
  height:9rem;
  transform:translateX(-50%);
  overflow:hidden;
  pointer-events:none;
}

html[data-theme="funky"] .korok-runner{
  display:block;
}

.korok-runner__canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:144px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  pointer-events:none;
}

.korok-character{
  position:absolute;
  left:4rem;
  bottom:0.5rem;
  width:86px;
  height:101px;
  z-index:5;
  pointer-events:none;
  overflow:hidden;
  transform-origin:50% 100%;
  animation:none;
  will-change:transform;
}

.korok-character__sprite{
  display:block;
  width:72px;
  height:72px;

  background-image:url("../img/Korok-Runner/korok-run-1.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  pointer-events:none;
  user-select:none;
}

@keyframes korok-runner-jump{
  0%{transform:translateY(0);}
  18%{transform:translateY(-18px);}
  45%{transform:translateY(-45px);}
  65%{transform:translateY(-52px);}
  82%{transform:translateY(-22px);}
  100%{transform:translateY(0);}
}

.korok-character.is-jumping{
  z-index:6;
}

@media (max-width:680px){
  .korok-character{
    left:3rem;
    bottom:1.5rem;
    width:72px;
    height:84px;
  }
}

@media (prefers-reduced-motion:reduce){
  .korok-runner{
    display:none!important;
  }

  .korok-character{
    animation:none!important;
  }
}