:root {
  background: #fff;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }

body { min-height: 100vh; min-height: 100svh; }

#garden { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background: #fff; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#world { position: absolute; inset: 0; cursor: default; }

#cat-wrap {
  --size: clamp(132px, min(25vw, 42svh), 310px);
  position: absolute; left: 50%; bottom: 1%; width: var(--size); height: var(--size);
  transform: translateX(-50%); outline: none; cursor: grab; touch-action: none;
  will-change: left, bottom, transform;
}

@media (max-width: 600px) {
  #cat-wrap { --size: clamp(124px, min(38vw, 42svh), 190px); }
}

#cat { position: absolute; inset: 0; pointer-events: none; transform-origin: center; }
#cat .cat-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; visibility: hidden; image-rendering: auto; -webkit-user-drag: none; user-select: none; }
#cat .cat-frame.active { opacity: 1; visibility: visible; }
#heart { position: absolute; top: 0; right: 16%; color: #e96757; font-size: 34px; opacity: 0; transform: translateY(15px) rotate(10deg); pointer-events: none; }
#heart.pop { animation: heart 900ms ease-out; }
@keyframes heart { 0% { opacity: 0; transform: translateY(18px) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(1.15) rotate(-12deg); } }

#target { position: absolute; width: 32px; height: 12px; border: 2px solid currentColor; border-radius: 50%; opacity: 0; transform: translate(-50%,-50%); pointer-events: none; }
#target.interested { color: rgba(238,105,66,.78); }
#target.uninterested { color: rgba(126,145,156,.78); }
#target.inactive { width: 24px; height: 9px; color: rgba(190,193,188,.76); }
#target.show { animation: target .7s ease-out; }
#target.inactive.show { animation: target-inactive .38s ease-out; }
@keyframes target { from { opacity: 1; transform: translate(-50%,-50%) scale(.3); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.8); } }
@keyframes target-inactive { from { opacity: .8; transform: translate(-50%,-50%) scale(.5); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.25); } }