@charset "UTF-8";

/* Needs add occasional gestures; the existing transform still owns growth. */
.pet-visual[data-ambient="hungry"][data-animation="idle"] { animation: state-hungry 10.8s ease-in-out infinite; }
.pet-visual[data-ambient="happy"][data-animation="idle"] { animation: state-happy 12.8s ease-in-out infinite; }
.pet-visual[data-ambient="sad"][data-animation="idle"] { animation: state-sad 11.8s ease-in-out infinite; }
.pet-visual > .pet-dust {
  position: absolute; z-index: 4; pointer-events: none;
  width: var(--sprite-width); height: var(--sprite-height); left: var(--sprite-left); bottom: 8%;
  transform: translateY(var(--sprite-baseline));
  mask-image: var(--dust-mask); -webkit-mask-image: var(--dust-mask);
  mask-mode: alpha; mask-size: 100% 100%; mask-repeat: no-repeat;
}
.pet-dust svg { display: block; width: 100%; height: 100%; }
.dust-layer { transition: opacity 1.4s ease; }
.dust-layer-0 { opacity: var(--dust-0, 0); }
.dust-layer-1 { opacity: var(--dust-1, 0); }
.dust-layer-2 { opacity: var(--dust-2, 0); }
.dust-layer-3 { opacity: var(--dust-3, 0); }
.pet-visual > .belly-rumble {
  position: absolute; z-index: 5; left: 29%; top: 56%; width: 42%; pointer-events: none;
  color: #927753; opacity: 0; text-align: center; line-height: 1.1;
}
.belly-rumble > svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.belly-rumble > span { display: block; margin-top: -7%; font-size: clamp(10px, 2.7vw, 12px); font-weight: 600; letter-spacing: .1em; text-shadow: 0 1px 3px #fff8df; }
.pet-visual[data-ambient="hungry"] > .belly-rumble { animation: state-rumble 10.8s ease-in-out infinite; }
[data-state-motion-paused="true"] .pet-visual[data-ambient],
[data-state-motion-paused="true"] .belly-rumble { animation-play-state: paused; }
@keyframes state-hungry {
  0%, 10%, 29%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  14%, 18%, 22% { translate: -1.2px .6px; rotate: -.6deg; scale: 1.012 .993; }
  16%, 20%, 24% { translate: 1.2px .6px; rotate: .6deg; scale: .993 1.006; }
}
@keyframes state-rumble {
  0%, 10%, 29%, 100% { opacity: 0; translate: 0 2px; scale: .94; }
  14%, 24% { opacity: .86; translate: 0 0; scale: 1; }
  18%, 22% { scale: 1.05; }
}
@keyframes state-happy {
  0%, 10%, 23%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  12% { translate: 0 2px; scale: 1.035 .965; }
  15% { translate: 0 -11px; rotate: -2deg; scale: .98 1.035; }
  18% { translate: 0 0; rotate: 1deg; scale: 1.03 .97; }
  21% { translate: 0 -1px; rotate: 0deg; scale: 1; }
}
@keyframes state-sad {
  0%, 8%, 85%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  25%, 59% { translate: 0 4px; rotate: -2.4deg; scale: 1.012 .952; }
  67% { translate: 0 3px; rotate: -1.8deg; scale: 1.007 .963; }
}
@media (prefers-reduced-motion: reduce) {
  .pet-visual[data-ambient="hungry"], .pet-visual[data-ambient="happy"], .pet-visual[data-ambient="sad"] { animation: none !important; }
  .pet-visual > .belly-rumble { animation: none !important; opacity: 0; }
  .dust-layer { transition: none; }
}

/* Load after style.css. Keep sprite geometry and growth on .pet-visual;
   interaction displacement belongs to this separate, full-size wrapper. */
.room .pet-interaction-pose {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  pointer-events: none;
  transform-origin: 50% 92%;
  transform: translate(var(--interact-x, 0px), var(--interact-y, 0px))
    rotate(var(--interact-lean, 0deg))
    scale(var(--interact-scale-x, 1), var(--interact-scale-y, 1));
  transition: transform .13s ease-out;
}

/* The grounded anchor moves into the existing painted bed. Its original
   translate(-50%, -92%) is intentionally preserved. */
.textured-room .pet-anchor {
  transition: left .7s cubic-bezier(.25, .7, .25, 1),
    top .7s cubic-bezier(.25, .7, .25, 1),
    width .7s ease, height .7s ease;
}
.room[data-scene="sleep"] .bed-rest-pose {
  rotate: 0deg;
  transition: rotate .7s cubic-bezier(.25, .7, .25, 1);
}
.room[data-scene="sleep"][data-sleep-resting="true"] .bed-rest-pose {
  rotate: 30deg;
}
/* A permanent bedroom wrapper must not enlarge awake babies. */
.room[data-scene="sleep"][data-sleep-resting="false"] .bed-rest-pose .pet-visual.stage-baby {
  transform: scale(.72, .64);
}
.room[data-scene="sleep"][data-sleep-resting="false"] .bed-rest-pose .pet-visual.stage-young {
  transform: scale(.84, .82);
}
.room[data-scene="sleep"][data-sleep-resting="false"] .bed-rest-pose .pet-visual.stage-grown {
  transform: scale(.94, .96);
}
.room[data-scene="sleep"][data-sleep-resting="false"] .bed-rest-pose .pet-visual.stage-mature {
  transform: scale(1, 1.08);
}

/* Preserve the original quilt cutout and its cover projection. Using opacity
   for this one hidden element lets the same DOM node fade in after settling. */
.room .bed-quilt {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-out, visibility 0s linear .25s;
}
.room .bed-quilt[hidden] {
  display: block !important;
  opacity: 0;
  visibility: hidden;
}
.room[data-scene="sleep"][data-sleep-resting="true"] .bed-quilt {
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease-out .3s, visibility 0s;
}

/* Keep the room shade present so clicking the lamp fades the whole room,
   pet and existing quilt together; higher interface controls stay readable. */
.room.textured-room::after,
.room.textured-room.is-dark::after,
.room.textured-room.lights-off::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  z-index: 5;
  background: rgba(7, 13, 28, .72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.room.textured-room.lights-off::after {
  opacity: 1;
}

/* Crossfades share the original sprite position and baseline. Freeze the old
   image's --sprite-* properties before updating the visual's expression. */
.room .pet-image {
  opacity: 1;
  transition: opacity .16s ease-out;
}
.room .pet-visual > .gaze-eyes {
  position: absolute;
  z-index: 2;
  width: var(--sprite-width);
  height: var(--sprite-height);
  left: var(--sprite-left);
  bottom: 8%;
  transform: translateY(var(--sprite-baseline));
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.room .gaze-eyes[data-active="true"] { opacity: 1; visibility: visible; }
.gaze-pupil { transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)); transition: transform .10s ease-out; }
.room[data-time-of-day="night"] .gaze-eyes { filter: brightness(.86) saturate(.9); }
.room[data-play-kind="ball"] .gaze-pupil { transition: none; }
.room[data-ball-dropped="true"] .scene-object[data-tool="toy"][data-item="ball"] { visibility: hidden; }
.room[data-play-kind="ball"] { touch-action: manipulation; }
.ball-catch-cue { position: absolute; width: 66px; height: 18px; border: 2px solid #fff7ca; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 9px #fff4b5aa, inset 0 0 5px #fff4b577; }
.ball-catch-cue[hidden] { display: none; }
.room .pet-visual.sleeping { animation: sleep-breathe 4.6s ease-in-out infinite; transform-origin: 50% 92%; }
.sleep-zzz { position: absolute; z-index: 6; width: 30px; height: 40px; pointer-events: none; visibility: hidden; }
.sleep-zzz[data-active="true"] { visibility: visible; }
.sleep-zzz span { position: absolute; left: 0; bottom: 0; font: 600 14px Georgia,serif; color: #bfd4e0; text-shadow: 0 1px 3px #324a5c; opacity: 0; animation: sleep-letter 3.6s ease-out infinite; }
.sleep-zzz span:nth-child(2) { font-size: 17px; animation-delay: 1.2s; }
.sleep-zzz span:nth-child(3) { font-size: 20px; animation-delay: 2.4s; }
.sleep-zzz[data-active="false"] span { animation: none; }
@keyframes sleep-breathe { 0%, 100% { scale: 1; } 42% { scale: 1.022 1.038; } 68% { scale: 1.008 1.015; } }
@keyframes sleep-letter { 0% { opacity: 0; translate: 0 0; scale: .7; } 20% { opacity: .7; } 75% { opacity: .45; } 100% { opacity: 0; translate: 18px -46px; scale: 1.1; } }
.room .pet-visual > .pet-image.old-expression {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}
.room .pet-visual > .pet-image.old-expression.is-fading {
  opacity: 0;
}

/* A soft silhouette glow follows the body; no large selection box is drawn. */
.room .pet-target .pet-visual {
  transition: transform .8s ease, filter .16s ease-out;
}
.room[data-hover-target="mouth"] .pet-target .pet-visual,
.room[data-hover-target="pet"] .pet-target .pet-visual,
.room .pet-target.drag-glow .pet-visual {
  filter: drop-shadow(0 0 3px #fff6cfaa) drop-shadow(0 0 8px #fff6b666);
}
.room .pet-target.target-accept .pet-visual {
  filter: drop-shadow(0 0 4px #fff9dbcc) drop-shadow(0 0 11px #ebefad99);
}
.room .rug-target {
  z-index: 2;
  border: 1px solid #faf9cf80;
  background: radial-gradient(ellipse, #fff8cc44 0%, #f9edb422 55%, transparent 76%);
  box-shadow: 0 0 12px 2px #fff5bc44;
  opacity: 0;
  transition: opacity .16s ease-out;
}
.room[data-hover-target="rug"] .rug-target,
.room .rug-target.drag-glow {
  opacity: .65;
}
.room .rug-target.target-accept {
  opacity: .9;
}

/* The source lifts slightly; the existing ghost still follows the pointer. */
.room .scene-object {
  transition: opacity .16s ease-out, translate .16s ease-out,
    rotate .16s ease-out, scale .16s ease-out;
}
.room .scene-object.dragging {
  translate: 0 -5px;
  rotate: -5deg;
  scale: 1.025;
  opacity: .4;
}
.room .scene-object.pouring { opacity: 0; }
.drag-ghost {
  transition: filter .13s ease-out;
}
.drag-ghost.drag-glow {
  filter: drop-shadow(0 3px 3px #483b2533) drop-shadow(0 0 5px #fff4c377);
}

/* Position left/top at the starting object's centre. Independent translate
   keeps that centre stable while JS animates transform and opacity. */
.care-flight {
  position: fixed;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  translate: -50% -50%;
  transform-origin: 50% 55%;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px #483b2533);
}
.care-flight > .art-prop,
.care-flight > .art-icon,
.care-flight > .food-art,
.care-flight > .object-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.care-flight .care-waterdrop {
  position: absolute;
  left: calc(63% + var(--drop-index, 0) * 5px);
  top: 69%;
  width: 4px;
  height: 8px;
  border: 1px solid #e6faffbb;
  border-radius: 60% 60% 55% 55%;
  background: #a4d4e6bb;
  opacity: 0;
  pointer-events: none;
}
.care-flight.is-pouring .care-waterdrop {
  animation: care-waterdrip .48s ease-in infinite;
  animation-delay: calc(var(--drop-index, 0) * .09s);
}
@keyframes care-waterdrip {
  0% { opacity: 0; translate: 0 0; }
  18% { opacity: .85; }
  82% { opacity: .65; }
  100% { opacity: 0; translate: 4px 32px; }
}

.room .foam-puff {
  opacity: 1;
  transition: opacity .16s ease-out;
}
.room .foam-puff[hidden] {
  display: block !important;
  opacity: 0;
  visibility: hidden;
}

/* RAF already calculates continuous positions. Avoid a second interpolation
   that would leave the ball or block behind its physical contact point. */
.textured-room[data-play-kind] .pet-anchor,
.textured-room[data-play-kind] .activity-ball,
.textured-room[data-play-kind] .build-block {
  transition: none;
}
.textured-room[data-play-kind] .pet-interaction-pose {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .room .pet-interaction-pose,
  .textured-room .pet-anchor,
  .room[data-scene="sleep"] .bed-rest-pose,
  .room .bed-quilt,
  .room.textured-room::after,
  .room .pet-image,
  .room .pet-target .pet-visual,
  .room .rug-target,
  .room .scene-object,
  .drag-ghost,
  .room .foam-puff {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .gaze-pupil { transition: none; }
  .room .pet-visual.sleeping { animation: none; }
  .sleep-zzz span { animation: none; opacity: .5; }
  .sleep-zzz span:nth-child(2) { translate: 8px -12px; }
  .sleep-zzz span:nth-child(3) { translate: 16px -26px; }
  .room .scene-object.dragging {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }
  .care-flight.is-pouring .care-waterdrop {
    animation: none;
    opacity: .65;
    translate: 0 7px;
  }
}