#cat {
  position: fixed;
  bottom: 16px;
  left: -60px;
  font-size: 11px;
  z-index: 9997;
  cursor: default;
  user-select: none;
  white-space: pre;
  line-height: 1.3;
  font-family: monospace;
  color: white;
  opacity: 0.75;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8),
               0 0 16px rgba(255, 255, 255, 0.4);
  transition: opacity 0.3s ease;
}

.cat-frame {
  display: none;
}

.cat-frame.active {
  display: block;
}

.cat-idle {
  display: none;
}

.cat-idle.active {
  display: block;
  animation: idle-float 2s ease-in-out infinite;
}

/* Walking to right */
#cat.walking {
  animation: cat-bounce 0.25s steps(1) infinite;
}

/* Walking to left */
#cat.walking.flip {
  animation: cat-bounce-flip 0.25s steps(1) infinite;
}

#cat.flip {
  transform: scaleX(-1);
}

@keyframes cat-bounce {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0px); }
}

@keyframes cat-bounce-flip {
  0%   { transform: scaleX(-1) translateY(0px); }
  50%  { transform: scaleX(-1) translateY(-2px); }
  100% { transform: scaleX(-1) translateY(0px); }
}

@keyframes idle-float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0px); }
}

/* tablet */
@media (max-width: 768px) {
  #cat {
    font-size: 8px;
    bottom: 12px;
    opacity: 0.5;
  }
}

/* Phone */
@media (max-width: 480px) {
  #cat {
    display: none;
  }
}