.site-pet {
  --pet-x: 0px;
  --pet-y: 0px;
  --eye-x: 0px;
  --eye-y: 0px;
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  width: 120px;
  height: 166px;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(var(--pet-x), var(--pet-y), 0);
  transition: opacity .2s ease, visibility .2s ease;
  contain: layout paint;
}

.site-pet.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.site-pet-character {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 142px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: 50% 88%;
  filter: none;
}

.site-pet-character:active,
.site-pet.is-dragging .site-pet-character { cursor: grabbing; }

.site-pet-character:focus-visible {
  outline: 3px solid rgba(255,229,127,.7);
  outline-offset: 2px;
  border-radius: 44px;
}

.site-pet-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pet-ground-shadow {
  fill: rgba(0,0,0,.28);
  transform-origin: center;
}

.pet-body { transform-origin: 60px 112px; }
.pet-body-shape { fill: url(#pet-body-gradient); stroke: rgba(255,244,205,.62); stroke-width: 1.5; }
.pet-body-panel { fill: url(#pet-accent-gradient); opacity: .94; }
.pet-body-stripe { fill: none; stroke: rgba(255,255,255,.26); stroke-width: 4; stroke-linecap: round; }

.pet-kernels { filter: drop-shadow(0 3px 2px rgba(82,44,5,.22)); transform-origin: 60px 38px; }
.pet-kernels circle { fill: url(#pet-kernel-gradient); stroke: rgba(255,255,255,.8); stroke-width: 1.2; }

.pet-arms path,
.pet-legs path {
  fill: none;
  stroke: #8f5ce2;
  stroke-width: 6;
  stroke-linecap: round;
}
.pet-arms circle,
.pet-legs ellipse { fill: #8f5ce2; }
.pet-arm { transform-box: fill-box; transform-origin: center; }

.pet-eyes-normal ellipse { fill: #fffdf4; stroke: rgba(115,67,15,.18); stroke-width: 1; }
.pet-pupils {
  fill: #2c1b18;
  transform: translate(var(--eye-x), var(--eye-y));
  transition: transform .08s linear;
}
.pet-pupil-shine { fill: #fff; }
.pet-eyes-stars { opacity: 0; fill: #fff6a8; transform-origin: 60px 59px; }
.pet-eye-lids { opacity: 0; }
.pet-eye-lids path { fill: none; stroke: #5b351e; stroke-width: 3.5; stroke-linecap: round; }
.pet-blush { fill: #ff775f; opacity: .35; }
.pet-mouth {
  fill: none;
  stroke: #64351d;
  stroke-width: 3.4;
  stroke-linecap: round;
}
.pet-mouth-sad,
.pet-mouth-wow { opacity: 0; }
.pet-mouth-wow { fill: #64351d; stroke: none; }

.pet-coins {
  opacity: 0;
  transform-origin: 60px 64px;
}
.pet-coins circle { fill: #ffd85f; stroke: #fff3a8; stroke-width: 1; }
.pet-coins text {
  fill: #8a5200;
  font-size: 7px;
  font-weight: 900;
  text-anchor: middle;
}

.site-pet-speech {
  position: absolute;
  right: 84px;
  bottom: 122px;
  width: max-content;
  max-width: 168px;
  padding: 8px 11px;
  border: 1px solid rgba(255,225,184,.17);
  border-radius: 13px 13px 3px 13px;
  background: rgba(22,20,27,.94);
  color: rgba(255,255,255,.86);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px) scale(.94);
  transform-origin: right bottom;
  transition: opacity .16s ease, transform .16s ease;
  backdrop-filter: blur(10px);
}

.site-pet.show-speech .site-pet-speech {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.site-pet.speech-right .site-pet-speech {
  right: auto;
  left: 84px;
  border-radius: 13px 13px 13px 3px;
  transform-origin: left bottom;
}

.site-pet-drag-hint {
  position: absolute;
  left: 50%;
  bottom: -2px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15,15,19,.74);
  color: rgba(255,255,255,.48);
  font-size: 8px;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 3px;
  transition: opacity .16s ease, translate .16s ease;
  pointer-events: none;
}

.site-pet-character:hover .site-pet-drag-hint {
  opacity: 1;
  translate: -50% 0;
}

.site-pet-zzz {
  position: absolute;
  z-index: 3;
  right: 3px;
  top: 6px;
  color: #d7c8ff;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
}
.site-pet-zzz span { position: absolute; opacity: 0; }
.site-pet-zzz span:nth-child(1) { right: 2px; top: 22px; font-size: 12px; }
.site-pet-zzz span:nth-child(2) { right: -5px; top: 8px; font-size: 10px; }
.site-pet-zzz span:nth-child(3) { right: -10px; top: -5px; font-size: 8px; }

.site-pet:not(.is-dragging):not(.is-sleeping):not(.is-celebrating) .pet-body {
  animation: pet-breathe 2.8s ease-in-out infinite;
}
.site-pet:not(.is-dragging):not(.is-sleeping):not(.is-celebrating) .pet-kernels {
  animation: pet-kernel-bob 3.2s ease-in-out infinite;
}
.site-pet:not(.is-dragging):not(.is-sleeping):not(.is-celebrating) .pet-eyes-normal {
  transform-origin: 60px 60px;
  animation: pet-blink 5.2s infinite;
}

.site-pet.is-hovering .pet-body { animation: pet-hover 1s ease-in-out infinite alternate !important; }
.site-pet.is-hovering .pet-arm-right { animation: pet-wave .55s ease-in-out infinite alternate; }
.site-pet.is-reacting .site-pet-character { animation: pet-click-pop .46s cubic-bezier(.2,.85,.25,1); }
.site-pet.is-reacting .pet-mouth-happy { stroke-width: 4; }

.site-pet.is-dragging {
  transition: none;
}
.site-pet.is-dragging .site-pet-character {
  animation: pet-drag-swing .65s ease-in-out infinite alternate;
}
.site-pet.is-dragging .pet-ground-shadow { opacity: .12; scale: .72; }
.site-pet.is-dragging .pet-legs { animation: pet-feet-dangle .42s ease-in-out infinite alternate; transform-origin: 60px 110px; }
.site-pet.is-dragging .pet-arm-left { rotate: -24deg; }
.site-pet.is-dragging .pet-arm-right { rotate: 24deg; }

.site-pet.is-billing .pet-eyes-normal { opacity: .16; }
.site-pet.is-billing .pet-eyes-stars {
  opacity: 1;
  animation: pet-star-eyes .72s ease-in-out infinite alternate;
}
.site-pet.is-billing .pet-body { animation: pet-billing-bounce .7s ease-in-out infinite alternate !important; }
.site-pet.is-billing .pet-blush { opacity: .62; }

.site-pet.is-sad .pet-mouth-happy,
.site-pet.is-sad .pet-mouth-wow { opacity: 0; }
.site-pet.is-sad .pet-mouth-sad { opacity: 1; }
.site-pet.is-sad .pet-pupils { transform: translate(0, 3px); }
.site-pet.is-sad .pet-body,
.site-pet.is-sad .pet-kernels { animation: pet-sad-droop .7s ease-in-out both !important; }
.site-pet.is-sad .pet-arm-left { rotate: 16deg; }
.site-pet.is-sad .pet-arm-right { rotate: -16deg; }

.site-pet.is-expecting .pet-mouth-happy { opacity: 0; }
.site-pet.is-expecting .pet-mouth-wow { opacity: 1; }
.site-pet.is-expecting .pet-body { animation: pet-expect .46s ease-in-out infinite alternate !important; }

.site-pet.is-celebrating .site-pet-character { animation: pet-celebrate-jump .72s cubic-bezier(.2,.9,.25,1) 3; }
.site-pet.is-celebrating .pet-coins {
  opacity: 1;
  animation: pet-coins-orbit .9s linear infinite;
}
.site-pet.is-celebrating .pet-eyes-stars { opacity: 1; }
.site-pet.is-celebrating .pet-eyes-normal { opacity: .12; }
.site-pet.is-celebrating .pet-arm-left { animation: pet-cheer-left .35s ease-in-out infinite alternate; }
.site-pet.is-celebrating .pet-arm-right { animation: pet-cheer-right .35s ease-in-out infinite alternate; }

.site-pet.is-sleeping .pet-eyes-normal,
.site-pet.is-sleeping .pet-eyes-stars { opacity: 0; }
.site-pet.is-sleeping .pet-eye-lids { opacity: 1; }
.site-pet.is-sleeping .pet-mouth-happy { opacity: .45; }
.site-pet.is-sleeping .pet-body { animation: pet-sleep-breathe 3.4s ease-in-out infinite; }
.site-pet.is-sleeping .site-pet-zzz { opacity: 1; }
.site-pet.is-sleeping .site-pet-zzz span { animation: pet-zzz 2.4s ease-out infinite; }
.site-pet.is-sleeping .site-pet-zzz span:nth-child(2) { animation-delay: .7s; }
.site-pet.is-sleeping .site-pet-zzz span:nth-child(3) { animation-delay: 1.4s; }

@keyframes pet-breathe { 0%,100% { scale: 1 1; } 50% { scale: 1.015 .985; } }
@keyframes pet-kernel-bob { 0%,100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -2px; rotate: 1deg; } }
@keyframes pet-blink { 0%,44%,48%,100% { scale: 1 1; } 46% { scale: 1 .08; } }
@keyframes pet-hover { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes pet-wave { from { rotate: 0deg; } to { rotate: -24deg; } }
@keyframes pet-click-pop { 0% { scale: 1; } 35% { scale: 1.08 .9; } 66% { scale: .97 1.04; } 100% { scale: 1; } }
@keyframes pet-drag-swing { from { rotate: -4deg; translate: 0 -5px; } to { rotate: 4deg; translate: 0 -8px; } }
@keyframes pet-feet-dangle { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes pet-star-eyes { from { scale: .92; filter: brightness(1); } to { scale: 1.08; filter: brightness(1.25); } }
@keyframes pet-billing-bounce { from { translate: 0 0; } to { translate: 0 -4px; } }
@keyframes pet-sad-droop { from { translate: 0 0; scale: 1; } to { translate: 0 5px; scale: 1.02 .94; } }
@keyframes pet-expect { from { translate: 0 0; } to { translate: 0 -2px; scale: 1.015; } }
@keyframes pet-celebrate-jump {
  0%,100% { translate: 0 0; scale: 1; }
  35% { translate: 0 -22px; scale: .96 1.05; }
  62% { translate: 0 0; scale: 1.08 .88; }
}
@keyframes pet-coins-orbit { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes pet-cheer-left { from { rotate: 0deg; } to { rotate: -34deg; } }
@keyframes pet-cheer-right { from { rotate: 0deg; } to { rotate: 34deg; } }
@keyframes pet-sleep-breathe { 0%,100% { scale: 1 1; } 50% { scale: 1.025 .97; } }
@keyframes pet-zzz {
  0% { opacity: 0; translate: 0 4px; }
  28%,68% { opacity: .85; }
  100% { opacity: 0; translate: 6px -10px; }
}

@media (max-width: 1180px), (max-height: 610px) {
  .site-pet { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-pet *,
  .site-pet *::before,
  .site-pet *::after { animation: none !important; transition-duration: .01ms !important; }
}