/* Pixel kitty v3 — higher quality look + feel */

.kitty {
  --dir: 1;
  --mood: 1;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 72px;
  height: 64px;
  cursor: grab;
  transform: translate3d(24px, 0, 0) scaleX(1);
  will-change: transform;
  touch-action: manipulation;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.kitty:active {
  cursor: grabbing;
}

.kitty:focus-visible .kitty__aura {
  opacity: 1;
}

.kitty__aura {
  position: absolute;
  inset: -10px -6px 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  transform: scaleX(calc(1 / var(--dir, 1)));
}

.kitty.is-pet .kitty__aura,
.kitty.is-happy .kitty__aura {
  opacity: 1;
  animation: aura-pulse 0.9s ease-in-out infinite;
}

@keyframes aura-pulse {
  0%,
  100% {
    transform: scaleX(calc(1 / var(--dir, 1))) scale(0.92);
    opacity: 0.55;
  }
  50% {
    transform: scaleX(calc(1 / var(--dir, 1))) scale(1.08);
    opacity: 1;
  }
}

.kitty__shadow {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 40px;
  height: 10px;
  transform: translateX(-50%) scaleX(calc(1 / var(--dir, 1)));
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 72%);
  pointer-events: none;
  transition: width 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.25s;
}

.kitty.is-paused .kitty__shadow {
  width: 46px;
}
.kitty.is-jump .kitty__shadow,
.kitty.is-flee .kitty__shadow {
  width: 22px;
  opacity: 0.3;
}
.kitty.is-pet .kitty__shadow {
  width: 48px;
  opacity: 0.7;
}

.kitty__body {
  position: absolute;
  inset: 0 0 6px;
  transform-origin: center bottom;
}

.kitty__sprite {
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  filter: drop-shadow(0 6px 12px rgba(139, 92, 246, 0.5));
  transition: filter 0.25s;
}

/* Base sit / idle frame — more detailed */
.kitty__sprite {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' shape-rendering='crispEdges'%3E%3C!-- ears --%3E%3Crect x='5' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23f9a8d4'/%3E%3Crect x='16' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='17' y='2' width='1' height='1' fill='%23f9a8d4'/%3E%3C!-- head/body --%3E%3Crect x='4' y='4' width='16' height='10' fill='%23a855f7'/%3E%3Crect x='5' y='5' width='14' height='8' fill='%23b56bfa'/%3E%3C!-- eyes --%3E%3Crect x='6' y='6' width='4' height='4' fill='%23faf5ff'/%3E%3Crect x='14' y='6' width='4' height='4' fill='%23faf5ff'/%3E%3Crect x='7' y='7' width='2' height='2' fill='%231e1b4b'/%3E%3Crect x='15' y='7' width='2' height='2' fill='%231e1b4b'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='16' y='7' width='1' height='1' fill='%23ffffff'/%3E%3C!-- blush + nose --%3E%3Crect x='5' y='10' width='2' height='1' fill='%23f9a8d4' opacity='0.9'/%3E%3Crect x='17' y='10' width='2' height='1' fill='%23f9a8d4' opacity='0.9'/%3E%3Crect x='11' y='10' width='2' height='1' fill='%23f472b6'/%3E%3Crect x='10' y='11' width='4' height='1' fill='%23e9d5ff'/%3E%3C!-- whiskers area --%3E%3Crect x='3' y='7' width='1' height='4' fill='%23d8b4fe'/%3E%3Crect x='20' y='7' width='1' height='4' fill='%23d8b4fe'/%3E%3Crect x='2' y='8' width='1' height='2' fill='%23f9a8d4'/%3E%3C!-- legs sit --%3E%3Crect x='6' y='14' width='5' height='4' fill='%238b5cf6'/%3E%3Crect x='13' y='14' width='5' height='4' fill='%238b5cf6'/%3E%3Crect x='6' y='17' width='4' height='1' fill='%23ede9fe'/%3E%3Crect x='14' y='17' width='4' height='1' fill='%23ede9fe'/%3E%3C!-- tail curl --%3E%3Crect x='19' y='13' width='3' height='2' fill='%23c084fc'/%3E%3Crect x='21' y='11' width='2' height='2' fill='%23c084fc'/%3E%3C/svg%3E");
}

.kitty.is-walk .kitty__body {
  animation: body-bob 0.38s ease-in-out infinite;
}

.kitty.is-walk .kitty__sprite {
  animation: walk-swap 0.38s steps(1) infinite;
}

.kitty.is-flee .kitty__body {
  animation: body-bob 0.2s ease-in-out infinite;
}

.kitty.is-flee .kitty__sprite {
  animation: walk-swap 0.2s steps(1) infinite;
  filter: drop-shadow(0 6px 14px rgba(244, 114, 182, 0.55));
}

.kitty.is-paused .kitty__body {
  animation: breathe 2s ease-in-out infinite;
}

.kitty.is-pet .kitty__body {
  animation: cuddle 0.45s ease-in-out infinite;
}

.kitty.is-jump .kitty__body {
  animation: leap 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.kitty.is-happy .kitty__sprite {
  filter: drop-shadow(0 0 12px rgba(232, 121, 249, 0.75)) drop-shadow(0 6px 12px rgba(139, 92, 246, 0.45));
}

.kitty.is-chase .kitty__sprite {
  filter: drop-shadow(0 0 16px rgba(244, 114, 182, 0.8)) drop-shadow(0 6px 12px rgba(139, 92, 246, 0.5));
}

.kitty.is-chase .kitty__aura {
  opacity: 1;
  animation: aura-pulse 0.45s ease-in-out infinite;
}

/* Walk frames via keyframes swapping background */
@keyframes walk-swap {
  0%,
  49.9% {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' shape-rendering='crispEdges'%3E%3Crect x='5' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23f9a8d4'/%3E%3Crect x='16' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='17' y='2' width='1' height='1' fill='%23f9a8d4'/%3E%3Crect x='4' y='4' width='16' height='9' fill='%23a855f7'/%3E%3Crect x='5' y='5' width='14' height='7' fill='%23b56bfa'/%3E%3Crect x='6' y='6' width='4' height='4' fill='%23faf5ff'/%3E%3Crect x='14' y='6' width='4' height='4' fill='%23faf5ff'/%3E%3Crect x='7' y='7' width='2' height='2' fill='%231e1b4b'/%3E%3Crect x='15' y='7' width='2' height='2' fill='%231e1b4b'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='16' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='11' y='10' width='2' height='1' fill='%23f472b6'/%3E%3Crect x='3' y='7' width='1' height='4' fill='%23d8b4fe'/%3E%3Crect x='20' y='7' width='1' height='4' fill='%23d8b4fe'/%3E%3Crect x='6' y='13' width='4' height='5' fill='%238b5cf6'/%3E%3Crect x='14' y='13' width='4' height='4' fill='%238b5cf6'/%3E%3Crect x='5' y='17' width='3' height='1' fill='%23ede9fe'/%3E%3Crect x='15' y='16' width='3' height='1' fill='%23ede9fe'/%3E%3Crect x='19' y='12' width='3' height='2' fill='%23c084fc'/%3E%3Crect x='21' y='10' width='2' height='2' fill='%23c084fc'/%3E%3C/svg%3E");
  }
  50%,
  100% {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' shape-rendering='crispEdges'%3E%3Crect x='5' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23f9a8d4'/%3E%3Crect x='16' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='17' y='2' width='1' height='1' fill='%23f9a8d4'/%3E%3Crect x='4' y='4' width='16' height='9' fill='%23a855f7'/%3E%3Crect x='5' y='5' width='14' height='7' fill='%23b56bfa'/%3E%3Crect x='6' y='6' width='4' height='4' fill='%23faf5ff'/%3E%3Crect x='14' y='6' width='4' height='4' fill='%23faf5ff'/%3E%3Crect x='7' y='7' width='2' height='2' fill='%231e1b4b'/%3E%3Crect x='15' y='7' width='2' height='2' fill='%231e1b4b'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='16' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='11' y='10' width='2' height='1' fill='%23f472b6'/%3E%3Crect x='3' y='7' width='1' height='4' fill='%23d8b4fe'/%3E%3Crect x='20' y='7' width='1' height='4' fill='%23d8b4fe'/%3E%3Crect x='6' y='13' width='4' height='4' fill='%238b5cf6'/%3E%3Crect x='14' y='13' width='4' height='5' fill='%238b5cf6'/%3E%3Crect x='5' y='16' width='3' height='1' fill='%23ede9fe'/%3E%3Crect x='15' y='17' width='3' height='1' fill='%23ede9fe'/%3E%3Crect x='19' y='11' width='3' height='2' fill='%23c084fc'/%3E%3Crect x='21' y='9' width='2' height='2' fill='%23c084fc'/%3E%3C/svg%3E");
  }
}

@keyframes body-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-3px) scaleY(0.97);
  }
}

@keyframes cuddle {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(-8deg) scale(1.1);
  }
}

@keyframes leap {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  20% {
    transform: translateY(2px) scale(1.08, 0.88);
  }
  55% {
    transform: translateY(-34px) scale(0.95, 1.08);
  }
  80% {
    transform: translateY(-6px) scale(1.05, 0.92);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

.kitty.is-blink .kitty__sprite {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' shape-rendering='crispEdges'%3E%3Crect x='5' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='16' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='4' y='4' width='16' height='10' fill='%23a855f7'/%3E%3Crect x='6' y='8' width='4' height='1' fill='%23faf5ff'/%3E%3Crect x='14' y='8' width='4' height='1' fill='%23faf5ff'/%3E%3Crect x='11' y='10' width='2' height='1' fill='%23f472b6'/%3E%3Crect x='6' y='14' width='5' height='4' fill='%238b5cf6'/%3E%3Crect x='13' y='14' width='5' height='4' fill='%238b5cf6'/%3E%3Crect x='19' y='13' width='3' height='2' fill='%23c084fc'/%3E%3C/svg%3E");
}

.kitty__speech {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) scaleX(calc(1 / var(--dir, 1))) translateY(6px);
  padding: 0.4rem 0.65rem;
  border-radius: 0.75rem;
  background: linear-gradient(165deg, #3b1d63, #1f1235 70%);
  border: 1px solid rgba(192, 132, 252, 0.55);
  color: #faf5ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.kitty__speech::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #2a1748;
}

.kitty .kitty__speech.is-on {
  opacity: 1;
  transform: translateX(-50%) scaleX(calc(1 / var(--dir, 1))) translateY(0);
}

.kitty__hint {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2.4rem);
  transform: translateX(-50%) scaleX(calc(1 / var(--dir, 1)));
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  color: rgba(233, 213, 255, 0.55);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.kitty.is-hint .kitty__hint {
  opacity: 1;
}

.kitty__spark {
  position: absolute;
  font-size: 0.6rem;
  color: #f5d0fe;
  pointer-events: none;
  transform: scaleX(calc(1 / var(--dir, 1)));
  animation: spark 1.8s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(245, 208, 254, 0.8);
}

.kitty__spark--1 {
  top: -2px;
  left: 2px;
}
.kitty__spark--2 {
  top: 8px;
  right: 0;
  animation-delay: 0.6s;
}
.kitty__spark--3 {
  top: -4px;
  right: 14px;
  animation-delay: 1.1s;
  font-size: 0.45rem;
}

@keyframes spark {
  0%,
  100% {
    opacity: 0.15;
    transform: scaleX(calc(1 / var(--dir, 1))) scale(0.6) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scaleX(calc(1 / var(--dir, 1))) scale(1.2) rotate(12deg);
  }
}

.kitty-fx {
  position: fixed;
  z-index: 96;
  pointer-events: none;
  font-size: 0.95rem;
  animation: kitty-fx 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  text-shadow: 0 0 10px rgba(232, 121, 249, 0.7);
}

@keyframes kitty-fx {
  0% {
    opacity: 0;
    transform: translate(0, 8px) scale(0.4);
  }
  20% {
    opacity: 1;
    transform: translate(0, 0) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), -64px) scale(1);
  }
}

.kitty-paw {
  position: fixed;
  z-index: 85;
  width: 10px;
  height: 8px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.25);
  pointer-events: none;
  animation: paw-fade 1.1s ease-out forwards;
}

@keyframes paw-fade {
  0% {
    opacity: 0.7;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* About mascot */
.about__mascot {
  position: absolute;
  right: 0.45rem;
  bottom: 0.4rem;
  z-index: 5;
  width: 4rem;
  height: 3.6rem;
  filter: drop-shadow(0 10px 18px rgba(139, 92, 246, 0.55));
  animation: mascot-bob 2.8s ease-in-out infinite;
  pointer-events: none;
}

.about__mascot .kitty__sprite {
  position: absolute;
  inset: 0;
  animation: breathe 2s ease-in-out infinite;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' shape-rendering='crispEdges'%3E%3Crect x='5' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23f9a8d4'/%3E%3Crect x='16' y='1' width='3' height='3' fill='%23c084fc'/%3E%3Crect x='17' y='2' width='1' height='1' fill='%23f9a8d4'/%3E%3Crect x='4' y='4' width='16' height='10' fill='%23a855f7'/%3E%3Crect x='5' y='5' width='14' height='8' fill='%23b56bfa'/%3E%3Crect x='6' y='6' width='4' height='4' fill='%23faf5ff'/%3E%3Crect x='14' y='6' width='4' height='4' fill='%23faf5ff'/%3E%3Crect x='7' y='7' width='2' height='2' fill='%231e1b4b'/%3E%3Crect x='15' y='7' width='2' height='2' fill='%231e1b4b'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='16' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='5' y='10' width='2' height='1' fill='%23f9a8d4'/%3E%3Crect x='17' y='10' width='2' height='1' fill='%23f9a8d4'/%3E%3Crect x='11' y='10' width='2' height='1' fill='%23f472b6'/%3E%3Crect x='6' y='14' width='5' height='4' fill='%238b5cf6'/%3E%3Crect x='13' y='14' width='5' height='4' fill='%238b5cf6'/%3E%3Crect x='19' y='13' width='3' height='2' fill='%23c084fc'/%3E%3Crect x='21' y='11' width='2' height='2' fill='%23c084fc'/%3E%3C/svg%3E");
}

@keyframes mascot-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (max-width: 700px) {
  .kitty {
    width: 58px;
    height: 52px;
  }

  .kitty__hint {
    display: none;
  }

  .about__mascot {
    width: 3.2rem;
    height: 2.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kitty,
  .about__mascot,
  .kitty-fx,
  .kitty-paw {
    display: none !important;
  }
}