.egg-pixel-cat {
  animation-duration: 21s;
}

.egg-pixel-cat > span {
  display: none !important;
}

.egg-pixel-cat.is-talking {
  animation-play-state: paused;
}

.egg-pixel-cat.is-talking > span {
  display: block !important;
  left: 50%;
  bottom: 100%;
  width: 240px;
  min-height: 54px;
  padding: 10px 12px;
  border: 2px solid #17233d;
  background: #fff;
  color: #17233d;
  box-shadow: 5px 5px 0 rgba(12, 25, 46, .2);
  opacity: 1;
  animation: none;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1.45;
}

.egg-pixel-cat.is-talking > span::after {
  content: "";
  position: absolute;
  left: 54%;
  bottom: -10px;
  width: 14px;
  height: 14px;
  border-right: 2px solid #17233d;
  border-bottom: 2px solid #17233d;
  background: #fff;
  transform: rotate(45deg);
}

.egg-pixel-cat.is-talking .egg-cat-body {
  transform-origin: center bottom;
  animation: pixelCatTalkLook 1s steps(2, end) infinite;
}

.egg-pixel-cat.is-talking .egg-cat-tail {
  animation-duration: 1.15s;
}

.egg-pixel-cat.is-talking .egg-cat-pupil {
  animation: pixelCatLookAtYou 1.8s steps(2, end) infinite;
}

.egg-pixel-cat.is-talking .egg-cat-mouth {
  animation: pixelCatMouth .5s steps(2, end) infinite;
}

.egg-pixel-cat.route-target {
  animation-name: pixelCatTargetTour;
}

.egg-pixel-cat.is-screen-playing {
  animation-play-state: paused;
}

.egg-pixel-cat.is-screen-playing .egg-cat-front-paw {
  transform-box: fill-box;
  transform-origin: center top;
  animation: pixelCatScreenTap .3s steps(2, end) infinite;
}

.egg-cat-caption {
  position: fixed;
  z-index: 1300;
  top: 22px;
  left: 50%;
  width: min(520px, calc(100% - 32px));
  overflow: hidden;
  padding: 13px 17px 16px;
  border: 1px solid #58ddd4;
  border-radius: 12px;
  background: rgba(5, 17, 32, .97);
  color: #f4fffe;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .38), 0 0 0 3px rgba(63, 215, 205, .1);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -18px);
  transition: opacity .2s ease, transform .2s ease;
}

.egg-cat-caption.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.egg-cat-caption b {
  color: #66e8df;
  font: 700 10px "Space Mono", monospace;
  letter-spacing: .12em;
}

.egg-cat-caption p {
  margin: 5px 0 0;
  color: #fff;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.45;
}

.egg-cat-caption i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #58ddd4, #7268ff);
  transform-origin: left;
}

.egg-cat-caption.is-visible i {
  animation: catCaptionTime 3s linear both;
}

.egg-cat-play-target {
  outline: 2px dashed rgba(67, 216, 206, .8) !important;
  outline-offset: 4px;
  animation: catTargetWiggle .55s steps(2, end) infinite !important;
}

@keyframes pixelCatTargetTour {
  0% { transform: translate(-170px, 76vh); }
  12% { transform: translate(var(--target-x), var(--target-y)); }
  35% { transform: translate(var(--target-x), var(--target-y)); }
  46% { transform: translate(52vw, 70vh); }
  57% { transform: translate(52vw, 70vh); }
  68% { transform: translate(73vw, 30vh); }
  78% { transform: translate(73vw, 30vh); }
  86% { transform: translate(calc(100vw + 170px), 14vh); }
  86.01% { transform: translate(-170px, 15vh); }
  100% { transform: translate(calc(100vw + 170px), 8vh); }
}

@keyframes pixelCatScreenTap {
  50% { transform: rotate(-58deg) translate(-7px, -10px); }
}

@keyframes pixelCatTalkLook {
  0%, 100% { transform: translateY(3px) scale(.98, 1.02); }
  50% { transform: translateY(1px) scale(1, 1); }
}

@keyframes pixelCatLookAtYou {
  50% { transform: scaleY(.25); }
}

@keyframes pixelCatMouth {
  50% { transform: translateY(2px); }
}

@keyframes catTargetWiggle {
  50% { transform: rotate(.45deg) translateY(-1px); }
}

@keyframes catCaptionTime {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .egg-pixel-cat,
  .egg-pixel-cat *,
  .egg-cat-caption,
  .egg-cat-caption * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}