/* ============================================================
   CHOTU PAKHI — pixel pet companion (garden-ui friendly)
   Presentation only: one fixed layer, nothing else touched.
   ============================================================ */

.pet-companion {
  position: fixed;
  left: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: none;
  align-items: flex-end;
  gap: 6px;
  max-width: min(74vw, 260px);
  font-family: var(--font-body, system-ui, sans-serif);
  -webkit-tap-highlight-color: transparent;
}

.pet-companion.is-ready {
  display: flex;
  animation: pet-arrive 460ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

@keyframes pet-arrive {
  from { opacity: 0; transform: translateY(18px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- sprite ---- */
.pet-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: end center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  cursor: pointer;
  touch-action: none;
  transition: transform 140ms ease;
}

.pet-stage:active { transform: scale(0.96); }

.pet-stage:focus-visible {
  outline: 2px solid var(--clr-lavender, #c084fc);
  outline-offset: 4px;
  border-radius: 14px;
}

.pet-companion.is-dragging .pet-stage { cursor: grabbing; transform: none; }

#petCanvas {
  width: 96px;   /* 32 x 3 — integer scale keeps the pixels square */
  height: 114px; /* 38 x 3 */
  image-rendering: pixelated;   /* Chrome ignores crisp-edges — pixelated is the one that works */
  /* no CSS filter here: it makes Chrome resample the pixel grid */
  pointer-events: none;
}

/* ---- speech bubble ---- */
.pet-bubble {
  position: absolute;
  left: 100px;
  bottom: 44px;
  width: max-content;
  max-width: min(238px, 60vw);
  z-index: 2;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-accent, rgba(192, 132, 252, 0.22));
  background: linear-gradient(160deg, #1b1529 0%, #120e1c 100%);
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(6px) scale(0.94);
  transform-origin: 12% 100%;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1.2, 0.36, 1);
}

.pet-bubble::after {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 18px;
  width: 10px;
  height: 10px;
  background: #171123;
  border-left: 1px solid var(--border-accent, rgba(192, 132, 252, 0.22));
  border-bottom: 1px solid var(--border-accent, rgba(192, 132, 252, 0.22));
  transform: rotate(45deg);
}

.pet-bubble.is-flipped {
  left: auto;
  right: 100px;
  transform-origin: 88% 100%;
}

.pet-bubble.is-flipped::after {
  left: auto;
  right: -6px;
  border-left: 0;
  border-bottom: 0;
  border-right: 1px solid var(--border-accent, rgba(192, 132, 252, 0.22));
  border-top: 1px solid var(--border-accent, rgba(192, 132, 252, 0.22));
}

.pet-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- hearts / sparkles on tap ---- */
.pet-heart {
  position: absolute;
  bottom: 66px;
  font-size: 13px;
  color: var(--clr-lavender, #c084fc);
  pointer-events: none;
  animation: pet-float 1600ms ease-out forwards;
}

@keyframes pet-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.7); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-56px) scale(1.05); }
}

/* ---- small phones: keep the pet out of the way of the main CTAs ---- */
@media (max-width: 420px) {
  .pet-companion {
    left: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: 62vw;
  }
  .pet-stage { border-radius: 0; }
  #petCanvas { width: 64px; height: 76px; }  /* 32 x 2, 38 x 2 */
  .pet-bubble {
    left: 68px;
    bottom: 48px;
    max-width: min(192px, 52vw);
    font-size: 11.5px;
    padding: 7px 9px;
  }
  .pet-bubble.is-flipped { right: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-companion.is-ready { animation: none; }
  .pet-stage { transition: none; }
  .pet-heart { display: none; }
  .pet-bubble { transition: opacity 120ms linear; }
  .pet-bubble.is-visible { transform: none; }
}

@media print {
  .pet-companion { display: none !important; }
}