/* The pet-house door is painted into the room artwork; only its touch target
   and the menu it opens are layered over the scene. */
.home-world {
  background-image:
    linear-gradient(rgba(42,25,13,.05),rgba(42,25,13,.18)),
    url('/peblet-home-interior-pet-door.webp');
}

.pet-house-hub {
  left: 53%;
  top: 35%;
  bottom: auto;
  width: 16%;
  height: 20%;
}

.pet-house-hotspot {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 42% 42% 12% 12% / 34% 34% 12% 12%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pet-house-hotspot:focus-visible {
  outline: 4px solid rgba(255,240,168,.95);
  outline-offset: 3px;
  background: rgba(255,244,199,.08);
}

/* The painted doorway carries the pet's state: a quiet glow for progress,
   a friendly rustle when something is ready, and warm light while occupied. */
.pet-house-hotspot::before,.pet-house-hotspot::after{content:"";position:absolute;pointer-events:none;opacity:0}
.pet-house-hotspot::before{inset:5% 7% 2%;border-radius:44% 44% 12% 12% / 35% 35% 12% 12%;background:radial-gradient(ellipse at 50% 62%,rgba(255,238,164,.67),rgba(255,181,72,.2) 46%,transparent 72%);mix-blend-mode:screen;transform-origin:50% 100%}
.pet-house-hotspot::after{left:46%;top:52%;width:10%;aspect-ratio:1;border-radius:50%;background:#ffe38b;box-shadow:0 0 12px rgba(255,215,93,.86);transform:scale(.55)}
.pet-house-hotspot[data-mode="progress"]::after{opacity:.38;animation:petDoorProgress 5.4s ease-in-out infinite}
.pet-house-hotspot[data-mode="ready"]::before,.pet-house-hotspot[data-mode="adopt"]::before{opacity:.58;animation:petDoorReady 2.8s ease-in-out infinite}
.pet-house-hotspot[data-mode="ready"]::after,.pet-house-hotspot[data-mode="adopt"]::after{opacity:.9;animation:petDoorKnock 2.8s ease-in-out infinite}
.pet-house-hub.is-open .pet-house-hotspot::before{opacity:.86;animation:petDoorOpen .62s ease-out}
.pet-house-hub.pet-is-sleeping .pet-house-hotspot::before{opacity:.46;animation:petDoorSleep 3.4s ease-in-out infinite}
.pet-house-hub.pet-is-sleeping .pet-house-hotspot::after{opacity:.35}

@keyframes petDoorProgress{0%,76%,100%{opacity:.2;transform:scale(.72)}84%{opacity:.68;transform:scale(1.15)}92%{opacity:.34;transform:scale(.9)}}
@keyframes petDoorReady{0%,100%{opacity:.34;transform:scale(.94)}50%{opacity:.8;transform:scale(1.04)}}
@keyframes petDoorKnock{0%,72%,100%{transform:scale(.62) rotate(0)}79%{transform:scale(1.05) rotate(-8deg)}86%{transform:scale(.82) rotate(8deg)}93%{transform:scale(.96) rotate(-3deg)}}
@keyframes petDoorOpen{0%{opacity:.2;transform:scale(.88)}58%{opacity:1;transform:scale(1.08)}100%{opacity:.72;transform:scale(1)}}
@keyframes petDoorSleep{0%,100%{opacity:.28;transform:scale(.96)}50%{opacity:.55;transform:scale(1.025)}}

.pet-house-hub .pet-house-menu {
  left: -35%;
  width: min(320px,78vw);
}

@media (min-width: 821px) {
  .pet-house-hub .pet-house-menu { bottom: 45%; }
}

.pet-house-summary {
  position: relative;
  z-index: 2;
  margin: 0 0 9px;
  padding: 6px 9px;
  border-radius: 11px;
  background: rgba(112,69,37,.1);
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

/* The pet travels to the doorway at its measured screen position. The custom
   properties are set at tap time so portrait and landscape use the same path. */
.home-pet.is-going-home {
  animation: petEnterPaintedHouse .8s cubic-bezier(.35,.04,.2,1) forwards !important;
}

.home-pet.is-in-house {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--pet-house-x,0),var(--pet-house-y,0)) scale(.18);
  animation: none !important;
}

.home-pet.is-coming-home {
  animation: petLeavePaintedHouse .8s cubic-bezier(.18,.82,.2,1) both !important;
}

.pet-house-zzz {
  position: absolute;
  z-index: 7;
  left: 48%;
  top: -8%;
  width: 70%;
  height: 58%;
  pointer-events: none;
  filter: drop-shadow(0 3px 1px rgba(69,43,26,.34));
}

.pet-house-zzz[hidden] { display: none !important; }
.pet-house-zzz i {
  position: absolute;
  left: 5%;
  bottom: 0;
  color: #fff5c8;
  font-family: "Trebuchet MS",sans-serif;
  font-size: clamp(25px,4vw,48px);
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 2px 0 #704a31,0 0 9px rgba(255,238,166,.9);
  animation: petHouseZzz 2.2s ease-in-out infinite;
}
.pet-house-zzz i:nth-child(2) { left: 32%; bottom: 28%; font-size: clamp(20px,3.1vw,38px); animation-delay: -.75s; }
.pet-house-zzz i:nth-child(3) { left: 59%; bottom: 57%; font-size: clamp(16px,2.5vw,30px); animation-delay: -1.5s; }

/* The character itself now performs a clear action; the larger heart trails
   the movement instead of being the only feedback. */
.home-pet.is-patted { animation: petPatBig 1.05s cubic-bezier(.18,.85,.22,1.2) !important; }
.home-pet.is-fetching { animation: petFetchBig 1.6s cubic-bezier(.24,.78,.24,1) !important; }
.home-pet.is-eating { animation: petEatBig 1.8s cubic-bezier(.2,.8,.2,1) !important; }
.pet-reaction {
  left: 60%;
  top: -5%;
  font-size: clamp(48px,8vmin,86px);
  text-shadow: -23px 20px 0 rgba(245,123,145,.75),26px 29px 0 rgba(255,170,185,.68);
}
.pet-reaction::before,.pet-reaction::after { content:"♥";position:absolute;color:#ff9daf; }
.pet-reaction::before { left:-34px;top:25px;font-size:.48em;transform:rotate(-18deg); }
.pet-reaction::after { right:-31px;top:37px;font-size:.4em;transform:rotate(17deg); }
.home-pet.show-reaction .pet-reaction { animation: petHeartBig 1.15s cubic-bezier(.18,.72,.22,1) !important; }

/* The controls live in the pet-house menu, but play happens on the room floor
   after that menu closes. These scene props are visual-only copies, so there
   is still just one interactive ball and one interactive bowl. */
.pet-scene-ball,
.pet-scene-meal {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

.pet-scene-ball[hidden],
.pet-scene-meal[hidden] { display: none !important; }

.pet-scene-ball {
  left: 31%;
  bottom: 13%;
  width: clamp(44px,9%,56px);
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  opacity: 0;
  transform-origin: 50% 75%;
}

.pet-scene-ball i {
  position: absolute;
  inset: 7%;
  border: 3px solid #6a4730;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%,#fff5ae 0 10%,#ef8f73 11% 39%,#5aa99c 40% 67%,#eecf63 68% 100%);
  box-shadow: inset -5px -6px 6px rgba(76,40,31,.18),0 6px 5px rgba(48,28,17,.28);
}

.pet-scene-ball.is-playing { animation: petSceneBallRun 1.6s cubic-bezier(.2,.75,.25,1) both; }
.pet-scene-ball.is-playing i { animation: petSceneBallSpin .42s linear infinite; }

.pet-scene-meal {
  left: 40%;
  bottom: 5%;
  width: 18%;
  height: 15%;
  min-width: 58px;
  min-height: 48px;
  opacity: 0;
}

.pet-scene-dish {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 12%;
  height: 50%;
  border: 4px solid #71452e;
  border-radius: 22% 22% 48% 48% / 28% 28% 70% 70%;
  background: linear-gradient(#7fc2b5 0 28%,#4d8d85 29% 72%,#356d68 73%);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.32),0 5px 0 #4c3024,0 8px 8px rgba(45,27,17,.28);
}

.pet-scene-dish::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: -17%;
  height: 36%;
  border: 3px solid #71452e;
  border-radius: 50%;
  background: #a8ddd2;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5);
}

.pet-scene-dish i {
  position: absolute;
  z-index: 2;
  top: -9%;
  width: 18%;
  height: 27%;
  border-radius: 50%;
  background: #d68a4c;
  opacity: 0;
  transform: translateY(-20px);
}

.pet-scene-dish i:nth-child(1) { left: 18%; }
.pet-scene-dish i:nth-child(2) { left: 43%; background: #80a74d; }
.pet-scene-dish i:nth-child(3) { right: 17%; background: #e5bc55; }
.pet-scene-meal.is-serving { animation: petSceneMealSet 1.8s ease-out both; }
.pet-scene-meal.is-serving .pet-scene-dish { animation: petSceneDishNudge 1.8s ease-out both; }
.pet-scene-meal.is-serving .pet-scene-dish i { animation: petSceneFoodDrop .62s cubic-bezier(.18,.82,.25,1.15) forwards; }
.pet-scene-meal.is-serving .pet-scene-dish i:nth-child(2) { animation-delay: .08s; }
.pet-scene-meal.is-serving .pet-scene-dish i:nth-child(3) { animation-delay: .16s; }

/* Closed-menu feedback stays attached to the illustrated pet-house doorway. */
.pet-action-status {
  position: absolute;
  z-index: 21;
  left: -42%;
  bottom: 66%;
  width: min(320px,82vw);
  padding: 11px 14px;
  border: 3px solid #704525;
  border-radius: 18px 18px 18px 6px;
  background: rgba(255,250,224,.97);
  box-shadow: 0 9px 20px rgba(47,28,16,.32),inset 0 2px rgba(255,255,255,.72);
  color: #533722;
  font-size: clamp(14px,1.6vw,17px);
  font-weight: 950;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.97);
  transform-origin: 28px 100%;
  transition: opacity .18s ease-out,transform .22s ease-out;
}

.pet-action-status::after {
  content: "";
  position: absolute;
  left: 21px;
  bottom: -12px;
  width: 20px;
  height: 20px;
  border-right: 3px solid #704525;
  border-bottom: 3px solid #704525;
  background: #fff6dc;
  transform: rotate(45deg);
}

.pet-action-status:empty { padding: 0; border: 0; }
.pet-action-status.show { opacity: 1; transform: translateY(0) scale(1); }

/* Friendship copy must remain readable when "Play pals" is reached. */
.pet-house-menu .pet-bond { gap: 10px; }
.pet-house-menu .pet-bond > span { font-size: 38px; }
.pet-house-menu .pet-bond > div { width: 100%; padding: 10px 13px 11px; border-radius: 18px; transform: none; }
.pet-house-menu .pet-bond strong { font-size: clamp(16px,2vw,20px); line-height: 1.1; }
.pet-house-menu .pet-bond small { display: block !important; margin-top: 3px; font-size: clamp(13px,1.6vw,16px); line-height: 1.3; }

/* A torn toy is paid from one of the two real accounts. */
.rainy-balances { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px auto; }
.rainy-balances > span { display:grid;gap:3px;padding:12px 14px;border:3px solid #8db3a5;border-radius:17px;background:#f7f8e8;font-size:14px;font-weight:1000; }
.rainy-balances strong { font-size:20px; }
.rainy-balances b { font:inherit; }
.rainy-shortfall { margin:0 0 10px!important;padding:9px 12px;border-radius:13px;background:#ffe1dd;color:#994553!important;font-size:14px;font-weight:1000; }
.rainy-actions button strong,.rainy-actions button small { display:block; }
.rainy-actions button strong { font-size:15px; }
.rainy-actions button small { margin-top:3px;font-size:12px; }

@keyframes petEnterPaintedHouse {
  0% { opacity:1;transform:translate(0,0) scale(1); }
  22% { opacity:1;transform:translate(0,-22px) scale(1.08,.92) rotate(-5deg); }
  52% { opacity:1;transform:translate(var(--pet-house-mid-x),var(--pet-house-mid-y)) scale(.72) rotate(5deg); }
  100% { opacity:0;transform:translate(var(--pet-house-x),var(--pet-house-y)) scale(.18); }
}
@keyframes petLeavePaintedHouse {
  0% { opacity:0;transform:translate(var(--pet-house-x),var(--pet-house-y)) scale(.18); }
  58% { opacity:1;transform:translate(var(--pet-house-exit-x),var(--pet-house-exit-y)) scale(.78) rotate(-4deg); }
  82% { opacity:1;transform:translate(0,-18px) scale(1.08,.92) rotate(3deg); }
  100% { opacity:1;transform:translate(0,0) scale(1); }
}
@keyframes petHouseZzz {
  0% { opacity:0;transform:translate(0,12px) scale(.7) rotate(-8deg); }
  28%,68% { opacity:1; }
  100% { opacity:0;transform:translate(23px,-32px) scale(1.15) rotate(7deg); }
}
@keyframes petPatBig {
  0%,100% { transform:translateY(0) rotate(0) scale(1); }
  18% { transform:translateY(7px) rotate(-5deg) scale(1.13,.82); }
  38% { transform:translateY(-31px) rotate(7deg) scale(.92,1.13); }
  58% { transform:translateY(0) rotate(-5deg) scale(1.08,.9); }
  76% { transform:translateY(-15px) rotate(4deg) scale(.96,1.06); }
}
@keyframes petFetchBig {
  0%,100% { transform:translate(0,0) rotate(0) scale(1); }
  14% { transform:translate(-8%,5%) rotate(-7deg) scale(1.08,.9); }
  39% { transform:translate(103%,-8%) rotate(9deg) scale(.9,1.08); }
  55% { transform:translate(116%,10%) rotate(-8deg) scale(1.06,.9); }
  72% { transform:translate(56%,-20%) rotate(-12deg) scale(.93,1.08); }
  88% { transform:translate(15%,0) rotate(6deg); }
}
@keyframes petEatBig {
  0%,100% { transform:translate(0,0) rotate(0) scale(1); }
  20% { transform:translate(72%,-19%) rotate(5deg) scale(.92,1.06); }
  34% { transform:translate(119%,18%) rotate(-4deg) scale(.88); }
  45%,65% { transform:translate(122%,31%) rotate(4deg) scale(.9,.77); }
  55%,75% { transform:translate(122%,20%) rotate(-3deg) scale(.88,.86); }
  88% { transform:translate(35%,-12%) rotate(-5deg) scale(.97,1.04); }
}
@keyframes petHeartBig {
  0% { opacity:0;transform:translate(-8px,18px) scale(.28) rotate(-15deg); }
  22% { opacity:1;transform:translate(7px,0) scale(1.25) rotate(9deg); }
  53% { opacity:1;transform:translate(-9px,-38px) scale(1) rotate(-7deg); }
  100% { opacity:0;transform:translate(14px,-76px) scale(.72) rotate(13deg); }
}
@keyframes petSceneBallRun {
  0% { opacity:0;transform:translate(-18px,-8px) scale(.76); }
  12% { opacity:1;transform:translate(0,-22px) scale(1); }
  42% { opacity:1;transform:translate(155%,-44px) scale(.94); }
  67% { opacity:1;transform:translate(85%,-3px) scale(1.04,.92); }
  88% { opacity:1;transform:translate(16%,-15px) scale(.98); }
  100% { opacity:0;transform:translate(0,0) scale(.86); }
}
@keyframes petSceneBallSpin { to { transform:rotate(360deg); } }
@keyframes petSceneMealSet {
  0% { opacity:0;transform:translateY(-13px) scale(.9); }
  16%,88% { opacity:1;transform:translateY(0) scale(1); }
  100% { opacity:0;transform:translateY(2px) scale(.97); }
}
@keyframes petSceneDishNudge {
  0%,100% { transform:translateY(0) rotate(0); }
  40% { transform:translateY(-5px) rotate(-2deg); }
  62% { transform:translateY(0) rotate(2deg); }
}
@keyframes petSceneFoodDrop {
  0% { opacity:0;transform:translateY(-22px) scale(.7); }
  72%,100% { opacity:1;transform:translateY(0) scale(1); }
}

@media (max-width: 820px) {
  .pet-house-hub {
    left: 26%;
    top: 73%;
    bottom: auto;
    width: 19%;
    height: 25%;
  }
  .pet-house-hub .pet-house-menu { left: 0; width: min(330px,84vw); }
  .pet-action-status { left: -28%; bottom: 72%; width: min(300px,80vw); }
}

@media (max-width: 560px) {
  .pet-house-hub {
    left: 0;
    top: 74%;
    width: 34%;
    height: 24%;
  }
  .pet-house-hub .pet-house-menu { left: 2%; width: min(315px,94vw); }
  .pet-action-status { left: 3%; bottom: 76%; width: min(280px,88vw); }
  .rainy-balances { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-house-hotspot,.home-pet,.pet-reaction,.pet-house-zzz i,.pet-scene-ball,.pet-scene-ball i,.pet-scene-meal,.pet-scene-dish,.pet-scene-dish i,.pet-action-status { animation:none!important;transition:none!important; }
  .home-pet.show-reaction .pet-reaction { opacity:1;transform:translateY(-35px) scale(1); }
  .pet-house-zzz i { opacity:1;transform:none; }
  .pet-scene-ball.is-playing,.pet-scene-meal.is-serving { opacity:1;transform:none; }
  .pet-scene-meal.is-serving .pet-scene-dish i { opacity:1;transform:none; }
}

[data-motion="reduced"] .pet-house-hotspot,
[data-motion="reduced"] .home-pet,
[data-motion="reduced"] .pet-reaction,
[data-motion="reduced"] .pet-house-zzz i,
[data-motion="reduced"] .pet-scene-ball,
[data-motion="reduced"] .pet-scene-ball i,
[data-motion="reduced"] .pet-scene-meal,
[data-motion="reduced"] .pet-scene-dish,
[data-motion="reduced"] .pet-scene-dish i,
[data-motion="reduced"] .pet-action-status { animation:none!important;transition:none!important; }
[data-motion="reduced"] .home-pet.show-reaction .pet-reaction { opacity:1;transform:translateY(-35px) scale(1); }
[data-motion="reduced"] .pet-house-zzz i { opacity:1;transform:none; }
[data-motion="reduced"] .pet-scene-ball.is-playing,
[data-motion="reduced"] .pet-scene-meal.is-serving { opacity:1;transform:none; }
[data-motion="reduced"] .pet-scene-meal.is-serving .pet-scene-dish i { opacity:1;transform:none; }

/* Let a mouse gently look around the room without moving any touch target far
   enough to lose the painted object. Touch devices keep the exact centred art. */
.home-world {
  --look-x: 0;
  --look-y: 0;
  background-position:center,calc(50% + var(--look-x) * -8px) calc(50% + var(--look-y) * -5px);
  background-size:auto,cover;
  background-repeat:no-repeat;
  transition:background-position .22s ease-out;
}

/* The main wooden door is navigation drawn directly onto the background. */
.home-painted-door {
  position:absolute;
  z-index:2;
  left:29%;
  top:5%;
  width:34%;
  height:49%;
  min-width:44px;
  min-height:44px;
  border-radius:48% 48% 12% 12% / 25% 25% 10% 10%;
  background:transparent;
  color:transparent;
  text-decoration:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.home-painted-door::before,.home-painted-door::after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity .18s,transform .24s}
.home-painted-door::before{inset:4%;border-radius:inherit;background:radial-gradient(circle at 22% 56%,rgba(255,238,147,.76),transparent 14%),linear-gradient(90deg,rgba(255,229,139,.18),transparent 35%);box-shadow:inset 0 0 22px rgba(255,227,137,.28)}
.home-painted-door::after{left:17%;top:49%;width:11%;aspect-ratio:1;border-radius:50%;background:#ffe08b;box-shadow:0 0 14px #ffd164;transform:rotate(-12deg) scale(.7)}
.home-painted-door:hover::before,.home-painted-door:focus-visible::before{opacity:.48}.home-painted-door:hover::after,.home-painted-door:focus-visible::after{opacity:.78;transform:rotate(12deg) scale(1)}
.home-painted-door:active::before{opacity:.85}.home-painted-door:focus-visible{outline:4px solid rgba(255,240,168,.95);outline-offset:3px}
.home-painted-door.is-opening::before{animation:homeDoorWarm .44s ease-out;opacity:.9}.home-painted-door.is-opening::after{animation:homeHandleTurn .44s ease-out;opacity:1}

.home-window-wonder{left:66%;top:9%;width:24%;height:32%;border-radius:50%}
.home-mushroom-wonder{left:10%;top:26%;width:18%;height:23%;border-radius:50% 50% 35% 35%}
.home-fire-wonder{left:0;top:45%;width:25%;height:34%;border-radius:44% 44% 28% 20%}

.home-window-wonder::after{content:"";inset:4%;border-radius:50%;background:linear-gradient(112deg,transparent 13%,rgba(255,249,187,.86) 42%,rgba(255,255,236,.35) 56%,transparent 78%);mix-blend-mode:screen;transform:translateX(-44%) rotate(-8deg)}
.home-window-wonder::before{content:"◆";z-index:2;left:16%;top:57%;color:#fff2a5;font-size:clamp(9px,1.4vw,18px);text-shadow:0 0 8px #ffe26b}
.home-window-wonder.is-active::after{animation:homeWindowSun 1.15s ease-out}.home-window-wonder.is-active::before{animation:homeWindowBird 1.2s cubic-bezier(.2,.72,.25,1)}

.home-mushroom-wonder::after{content:"";inset:5%;border-radius:50%;background:radial-gradient(circle,rgba(255,243,151,.94),rgba(255,174,68,.4) 42%,transparent 70%);mix-blend-mode:screen;transform-origin:50% 88%}
.home-mushroom-wonder::before{content:"✦";z-index:2;left:48%;top:35%;color:#fff0a0;font-size:17px;text-shadow:-18px 17px #ffd472,18px 11px #fff3bb}
.home-mushroom-wonder.is-active::after{animation:homeMushroomGlow 1.1s ease-out}.home-mushroom-wonder.is-active::before{animation:homeMushroomSpark 1.15s ease-out}

.home-fire-wonder::after{content:"";inset:18% 17% 10%;border-radius:50% 50% 38% 38%;background:radial-gradient(ellipse at 50% 68%,rgba(255,239,133,.98),rgba(255,132,39,.7) 31%,rgba(225,65,21,.2) 59%,transparent 73%);mix-blend-mode:screen;transform-origin:50% 90%}
.home-fire-wonder::before{content:"✦";z-index:2;left:50%;top:55%;color:#fff0a2;font-size:15px;text-shadow:-23px 18px #ffbd5d,20px 8px #fff3b4,8px -8px #ffb24f}
.home-fire-wonder.is-active::after{animation:homeFireDance 1.2s ease-out}.home-fire-wonder.is-active::before{animation:homeEmbersRise 1.25s ease-out}

@keyframes homeWindowSun{0%{opacity:0;transform:translateX(-46%) rotate(-8deg)}45%{opacity:.95}100%{opacity:0;transform:translateX(46%) rotate(-8deg)}}
@keyframes homeWindowBird{0%{opacity:0;transform:translate(-8px,14px) rotate(-14deg)}25%{opacity:1}100%{opacity:0;transform:translate(98px,-34px) rotate(24deg)}}
@keyframes homeMushroomGlow{0%,100%{opacity:0;transform:scale(.65,.72)}42%{opacity:1;transform:scale(1.12,.92)}70%{opacity:.75;transform:scale(.95,1.06)}}
@keyframes homeMushroomSpark{0%,100%{opacity:0;transform:scale(.5)}35%,65%{opacity:1;transform:translateY(-11px) scale(1.15)}}
@keyframes homeFireDance{0%,100%{opacity:0;transform:scale(.72,.55)}28%{opacity:.95;transform:scale(1.08,1.16)}58%{opacity:.7;transform:scale(.92,1.04)}}
@keyframes homeEmbersRise{0%{opacity:0;transform:translateY(20px) scale(.6)}22%{opacity:1}100%{opacity:0;transform:translate(12px,-74px) scale(1.15) rotate(72deg)}}
@keyframes homeDoorWarm{0%{opacity:.15;transform:scale(.98)}55%{opacity:.92;transform:scale(1.02)}100%{opacity:.6;transform:scale(1)}}
@keyframes homeHandleTurn{0%{transform:rotate(-12deg) scale(.7)}65%,100%{transform:rotate(28deg) scale(1.08)}}

@media(max-width:820px){
  .home-painted-door{left:0;top:20%;width:29%;height:66%}
  .home-window-wonder{left:34%;top:22%;width:27%;height:43%}
  .home-mushroom-wonder{display:block;left:18%;top:30%;width:10%;height:18%}
  .home-fire-wonder{display:none}
}

@media(prefers-reduced-motion:reduce){.home-world{background-position:center,center;transition:none}.home-painted-door::before,.home-painted-door::after{animation:none!important;transition:none}}
[data-motion="reduced"] .home-world{background-position:center,center;transition:none}
[data-motion="reduced"] .home-painted-door::before,[data-motion="reduced"] .home-painted-door::after{animation:none!important;transition:none}
[data-motion="reduced"] .character-stage .peblet-rig,[data-motion="reduced"] .peblet-preview{animation:none!important}
[data-motion="reduced"] .option,[data-motion="reduced"] .saved-message{transition:none}
@media(prefers-reduced-motion:reduce){.pet-house-hotspot::before,.pet-house-hotspot::after{animation:none!important}.pet-house-hotspot[data-mode="ready"]::before,.pet-house-hotspot[data-mode="adopt"]::before,.pet-house-hub.pet-is-sleeping .pet-house-hotspot::before{opacity:.52}}
[data-motion="reduced"] .pet-house-hotspot::before,[data-motion="reduced"] .pet-house-hotspot::after{animation:none!important}
[data-motion="reduced"] .pet-house-hotspot[data-mode="ready"]::before,[data-motion="reduced"] .pet-house-hotspot[data-mode="adopt"]::before,[data-motion="reduced"] .pet-house-hub.pet-is-sleeping .pet-house-hotspot::before{opacity:.52}

/* The room artwork is projected in JavaScript from its native 1536 × 1024
   coordinate plane. These controls therefore follow the painted door,
   fireplace and pet-house door at every iPad and desktop aspect ratio. */
.home-painted-door,.home-window-wonder,.home-mushroom-wonder,.home-fire-wonder,.pet-house-hub{box-sizing:border-box}
.home-fire-wonder{display:block}

/* The shared two-dimensional drag layer moves the outer actors around the
   room. Inner rigs keep breathing, facial, pet and accessory animation. */
.character-stage{--home-peblet-x:54%;--home-pet-x:17.5%}
.character-stage.has-pet{--home-peblet-x:64%}
.character-stage .peblet-stack{
  left:var(--home-peblet-x)!important;
  bottom:8%!important;
  margin-left:0!important;
  --character-base-x:-50%;
  translate:calc(-50% + var(--character-drag-x,0px)) var(--character-drag-y,0px);
  transform:none!important;
  touch-action:none;
  user-select:none;
  cursor:grab;
  -webkit-tap-highlight-color:transparent;
}
.character-stage .home-pet{
  left:var(--home-pet-x)!important;
  bottom:15%!important;
  --character-base-x:-50%;
  translate:calc(-50% + var(--character-drag-x,0px)) var(--character-drag-y,0px);
  touch-action:none;
  user-select:none;
  cursor:grab;
  -webkit-tap-highlight-color:transparent;
}
.character-stage[data-visible-pet-count="2"] .home-pet{width:27%!important;height:34%!important}
.character-stage[data-visible-pet-count="3"] .home-pet{width:23%!important;height:31%!important}
.character-stage .home-pet[data-pet-slot="0"]{z-index:8}.character-stage .home-pet[data-pet-slot="1"]{z-index:7}.character-stage .home-pet[data-pet-slot="2"]{z-index:6}
.character-stage .peblet-stack.is-character-dragging,.character-stage .home-pet.is-character-dragging{cursor:grabbing}
.character-stage .peblet-stack:focus,.character-stage .home-pet:focus{outline:none!important}
.character-stage .peblet-stack:focus-visible .peblet-preview{filter:var(--peblet-colour-filter,brightness(1)) drop-shadow(0 0 10px rgba(255,240,168,.98)) drop-shadow(0 10px 6px rgba(49,29,16,.3))}.character-stage .home-pet:focus-visible img{filter:drop-shadow(0 0 10px rgba(255,240,168,.98)) drop-shadow(0 10px 6px rgba(49,29,16,.3))}
.character-stage .peblet-stack img,.character-stage .home-pet img{-webkit-user-drag:none}