/* Visitors */
.critter {
  position: absolute;
  left: 0;
  bottom: 4px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: none;
  will-change: transform;
}
.critter-body {
  display: block;
  font-size: 46px;
  line-height: 1;
  transform: scaleX(var(--flip, 1));
  /* a hard drop shadow, painted once with the emoji (moves with it, never re-rendered) */
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
  animation: waddle 0.42s ease-in-out infinite alternate;
}
.critter.snail .critter-body,
.critter.turtle .critter-body {
  animation-duration: 1.2s;
}
@keyframes waddle {
  from { translate: 0 0; rotate: -6deg; }
  to { translate: 0 -6px; rotate: 6deg; }
}
.critter-say {
  position: absolute;
  bottom: calc(100% + 6px);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 12px;
  background: #fff;
  color: #0d0d0d;
  border: 2px solid #0d0d0d;
  box-shadow: 3px 3px 0 #0d0d0d;
  font: 700 11px/1.2 var(--mono);
  opacity: 0;
  transform: translateY(8px) scale(0.8);
  transition: opacity 0.2s, transform 0.35s var(--bounce);
  pointer-events: none;
}
.critter-say.on {
  opacity: 1;
  transform: none;
}