.critters {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 132px;
  z-index: 30;
  pointer-events: none;
}

.critters,
.critters *,
.critters *::before,
.critters *::after {
  pointer-events: none;
}

.critters.is-hidden,
.critters .is-hidden {
  display: none;
}

.pet-pixel {
  --pet-a: max(10px, calc(var(--sidebar-w) + 6px));
  --pet-b: max(calc(var(--pet-a) + 40px), calc(100vw - var(--panel-w) - 62px));
  --pet-ink: var(--tx2);
  --pet-hood: var(--ac);
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 40px;
  height: 40px;
  color: var(--pet-ink);
  animation: pet-patrol 14s linear infinite;
  will-change: transform;
}

.pet-body {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(var(--lean, 0deg));
  transform-origin: 50% 100%;
  transition: transform 0.45s var(--ease);
}

.pet-body svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: pet-turn 14s step-end infinite;
  shape-rendering: crispEdges;
}

.pet-hood {
  fill: var(--pet-hood);
}

.pet-suit {
  fill: var(--sf2);
}

.pet-face {
  fill: var(--bg);
}

.pet-foot {
  fill: var(--tx3);
}

.pet-eye-bar {
  fill: var(--tx);
}

.pet-glint {
  fill: var(--pet-hood);
}

.pet-figure {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pet-bob 2.4s var(--ease) infinite;
}

.pet-leg-a,
.pet-leg-b,
.pet-arm,
.pet-eye {
  transform-box: fill-box;
}

.pet-leg-a {
  transform-origin: 50% 0;
  animation: pet-step-a 0.7s var(--ease) infinite;
}

.pet-leg-b {
  transform-origin: 50% 0;
  animation: pet-step-b 0.7s var(--ease) infinite;
}

.pet-arm {
  transform-origin: 50% 14%;
  animation: pet-swing 0.7s var(--ease) infinite;
}

.pet-eye {
  transform-origin: 50% 50%;
  animation: pet-blink 4.4s var(--ease) infinite;
}

.pet-pixel::before,
.pet-pixel::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ac);
  opacity: 0;
  transform: scale(0.4);
}

.pet-pixel::before {
  left: -4px;
}

.pet-pixel::after {
  right: -4px;
}

.pet-zzz,
.pet-alert {
  position: absolute;
  top: -10px;
  font-family: var(--mono);
  font-weight: 700;
  opacity: 0;
}

.pet-zzz {
  left: 26px;
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--tx3);
  transform: translateY(4px);
}

.pet-alert {
  left: -2px;
  font-size: 14px;
  color: var(--dn);
  transform: scale(0.7);
}

.critters.is-idle .pet-figure {
  animation: pet-bob 2.4s var(--ease) infinite;
}

.critters.is-cheer .pet-pixel {
  --pet-ink: var(--ac);
}

.critters.is-cheer .pet-figure {
  animation: pet-hop 0.42s var(--ease) 6 alternate;
}

.critters.is-cheer .pet-leg-a,
.critters.is-cheer .pet-leg-b {
  animation-duration: 0.36s;
}

.critters.is-cheer .pet-pixel::before,
.critters.is-cheer .pet-pixel::after {
  animation: pet-spark 0.66s var(--ease) 6 alternate;
}

.critters.is-cheer .pet-pixel::after {
  animation-delay: 0.2s;
}

.critters.is-cheer .bot-beam {
  animation: bot-beam 1.1s var(--ease) 2;
}

.critters.is-panic .pet-pixel {
  --pet-ink: var(--dn);
  animation-duration: 7s;
}

.critters.is-panic .pet-figure {
  animation: pet-shake 0.16s linear infinite;
}

.critters.is-panic .pet-leg-a,
.critters.is-panic .pet-leg-b {
  animation-duration: 0.28s;
}

.critters.is-panic .pet-eye {
  animation-duration: 1.1s;
}

.critters.is-panic .pet-alert {
  animation: pet-alert 0.62s var(--ease) infinite;
}

.critters.is-sleep .pet-pixel {
  animation: none;
  transform: translateX(var(--pet-a));
}

.critters.is-sleep .pet-figure {
  animation: pet-breathe 5s var(--ease) infinite;
}

.critters.is-sleep .pet-leg-a,
.critters.is-sleep .pet-leg-b,
.critters.is-sleep .pet-arm {
  animation: none;
}

.critters.is-sleep .pet-eye {
  animation: none;
  transform: scaleY(0.12);
}

.critters.is-sleep .pet-zzz {
  animation: pet-zzz 2.6s var(--ease) infinite;
}

.critters.is-scan .bot-beam {
  animation: bot-beam 1.5s var(--ease) 2;
}

.critters.is-scan .bot-pupil {
  animation: bot-scan 1.5s var(--ease) 2;
}

.critters.is-scan .bot-bubble:not(:empty) {
  animation: bot-bubble 0.5s var(--ease) 4;
}

.pet-bot {
  position: absolute;
  right: 20px;
  bottom: 14px;
  width: 58px;
  height: 46px;
  color: var(--tx2);
}

.bot-body {
  display: block;
  width: 100%;
  height: 100%;
}

.bot-body svg {
  width: 100%;
  height: 100%;
  animation: bot-bob 2.4s var(--ease) infinite;
}

.bot-hull {
  fill: var(--sf2);
}

.bot-plate {
  fill: var(--bg);
}

.bot-socket {
  fill: var(--sf2);
}

.bot-pupil {
  fill: var(--ac);
  transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
  transition: transform 0.2s var(--ease);
}

.bot-glow {
  fill: var(--tx);
}

.bot-signal {
  fill: var(--ac2);
  animation: bot-blink 4s var(--ease) infinite;
}

.bot-pod {
  fill: var(--sf2);
}

.bot-flame {
  fill: var(--ac);
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: bot-flame 0.5s linear infinite;
}

.bot-engines .bot-thruster:nth-child(2) .bot-flame {
  animation-duration: 0.62s;
}

.bot-engines .bot-thruster:nth-child(3) .bot-flame {
  animation-duration: 0.44s;
}

.bot-beam {
  fill: var(--ac);
  opacity: 0;
}

.bot-bubble {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 24px;
  padding: 6px 10px;
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  background: var(--sf2);
  color: var(--tx2);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}

.bot-bubble:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

.bot-bubble::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -4px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  border-bottom-right-radius: 2px;
  background: var(--sf2);
  transform: rotate(45deg);
}

@keyframes pet-patrol {
  0%,
  6% {
    transform: translateX(var(--pet-a));
  }

  47%,
  53% {
    transform: translateX(var(--pet-b));
  }

  94%,
  100% {
    transform: translateX(var(--pet-a));
  }
}

@keyframes pet-turn {
  0%,
  49.9% {
    transform: scaleX(1);
  }

  50%,
  100% {
    transform: scaleX(-1);
  }
}

@keyframes pet-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1.5px);
  }
}

@keyframes pet-step-a {
  0%,
  100% {
    transform: rotate(-7deg);
  }

  50% {
    transform: rotate(7deg);
  }
}

@keyframes pet-step-b {
  0%,
  100% {
    transform: rotate(7deg);
  }

  50% {
    transform: rotate(-7deg);
  }
}

@keyframes pet-swing {
  0%,
  100% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(-5deg);
  }
}

@keyframes pet-blink {
  0%,
  88%,
  100% {
    transform: scaleY(1);
  }

  92% {
    transform: scaleY(0.15);
  }
}

@keyframes pet-hop {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes pet-shake {
  0%,
  100% {
    transform: translateX(-0.8px);
  }

  50% {
    transform: translateX(0.8px);
  }
}

@keyframes pet-breathe {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(1.2px);
  }
}

@keyframes pet-spark {
  0% {
    opacity: 0;
    transform: translateY(2px) scale(0.4);
  }

  100% {
    opacity: 1;
    transform: translateY(-14px) scale(1);
  }
}

@keyframes pet-zzz {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@keyframes pet-alert {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bot-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes bot-blink {
  0%,
  88%,
  96%,
  100% {
    opacity: 1;
  }

  92% {
    opacity: 0.12;
  }
}

@keyframes bot-flame {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleY(0.7);
  }

  50% {
    opacity: 0.9;
    transform: scaleY(1.1);
  }
}

@keyframes bot-beam {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 0.22;
  }

  100% {
    opacity: 0;
  }
}

@keyframes bot-scan {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-4px, 0);
  }

  75% {
    transform: translate(4px, 0);
  }
}

@keyframes bot-bubble {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}