:root {
  --pet-size: clamp(196px, 16vw, 220px);
  --pet-hot: #ff2a96;
  --pet-cyan: #72e7ea;
}

.pet {
  left: 0 !important; right: auto !important; top: 0 !important; bottom: auto !important;
  z-index: 20 !important;
  width: var(--pet-size) !important; height: var(--pet-size) !important; aspect-ratio: 1 / 1;
  box-sizing: border-box; padding: 0 !important; margin: 0; border: 0;
  background: transparent; box-shadow: none; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-drag: none;
  will-change: transform; transform: translate3d(0, 0, 0);
  transition: none !important; animation: none !important;
}

.pet::after {
  content: ""; position: absolute; z-index: -1; left: 25%; right: 25%; bottom: 5%;
  height: 7px; border-radius: 50%; background: rgba(48, 18, 35, 0.13);
  filter: blur(5px); opacity: 1;
}
.pet::before {
  content: ""; position: absolute; right: 13%; top: 23%; width: 3px; height: 3px;
  opacity: 0; background: var(--pet-hot); box-shadow: 8px 5px 0 var(--pet-cyan), -4px 12px 0 var(--pet-hot);
  pointer-events: none;
}
.pet:active, .pet.is-dragging { cursor: grabbing; }
.pet.is-dragging { z-index: 70 !important; cursor: none; }
.pet.is-dragging::after { opacity: 0; }

.pet img {
  display: block; width: 100% !important; height: 100% !important;
  object-fit: contain; object-position: 50% 100%; pointer-events: none;
  user-select: none; -webkit-user-drag: none; image-rendering: pixelated;
  filter: drop-shadow(0 6px 5px rgba(50, 17, 37, 0.18));
  animation: none; transform: none; transform-origin: 50% 100%;
}
.pet[data-action="idle"] img { transform: scale(1); }
.pet[data-action="blink"] img { transform: scale(1); }
.pet[data-action="happy"] img { transform: scale(1); }
.pet[data-action="angry"] img { transform: scale(1); }
.pet[data-action="sleep"] img { transform: scale(1); }
.pet[data-action="dragged"] img { transform: scale(1.14); }
.pet[data-action="walk_right"] img { transform: scale(1.10); }
.pet[data-action="walk_left"] img { transform: scale(1.04); }
.pet.is-signal img { animation: pet-signal 180ms steps(2, end) 1; }
.pet.is-signal::before { animation: pet-pixels 300ms steps(3, end) 1; }
@keyframes pet-signal {
  0%, 100% { filter: drop-shadow(0 6px 5px rgba(50,17,37,.18)); }
  35% { filter: drop-shadow(2px 0 var(--pet-hot)) drop-shadow(-2px 0 var(--pet-cyan)); }
  70% { filter: drop-shadow(1px 0 var(--pet-hot)) drop-shadow(-1px 0 var(--pet-cyan)); }
}
@keyframes pet-pixels {
  0% { opacity: 0; transform: translate(0, 2px); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: translate(5px, -5px); }
}