/*
 * The illustration is the interface. This final layer deliberately removes the
 * dashboard treatment from the village and keeps every semantic control aligned
 * with the painted object it belongs to.
 */
.game-shell {
  height: 100svh;
  min-height: 0;
  overflow: clip;
}

.village {
  --scene-ratio: 1.78533475;
  height: calc(100svh - 76px);
  min-height: 0 !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #668f5d;
}

.village-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc((100svh - 76px) * var(--scene-ratio)));
  aspect-ratio: 1680 / 941;
  transform: translate(-50%, -50%);
  transform-origin: center;
  isolation: isolate;
  overflow: clip;
}

.village-art,
.village-light,
.ambient-village {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.village-art {
  z-index: 0;
  background: url('/peblet-village-storybook.webp') center / 100% 100% no-repeat;
  transform: translate(calc(var(--look-x, 0) * -8px), calc(var(--look-y, 0) * -5px)) scale(1.012);
  transition: transform .55s ease, filter .4s ease;
}

.village-light { display: none !important; }
.ambient-village { z-index: 2; }

.village.is-dusk .village-art {
  filter: brightness(.7) saturate(.86) hue-rotate(7deg);
}

/* Magic hour changes the objects already painted into the landscape. Daytime
   visitors settle down, door lights warm up, and the existing fireflies take
   over; no full-screen colour panel is placed over the artwork. */
.sunbeam,.butterfly{transition:opacity .75s ease}
.village.is-dusk .sunbeam,.village.is-dusk .butterfly{opacity:0!important;animation-play-state:paused!important}
.village.is-dusk .hotspot-glow{width:13px;height:13px;opacity:.92;background:#ffe4a1;border-color:#fff2bc;box-shadow:0 0 9px 5px rgba(255,208,103,.38),0 0 25px 9px rgba(255,181,75,.42);animation:magicDoorGlow 3.2s ease-in-out infinite}
.village.is-dusk .firefly{animation-duration:5.4s}.village.is-dusk .f2{animation-duration:6.1s}.village.is-dusk .f4{animation-duration:4.8s}.village.is-dusk .f5{animation-duration:6.6s}

/* Once a child has found a wonder, the painted object keeps a tiny piece of
   life. Long still sections stop the scene from becoming visually noisy. */
.wonder-pond[aria-pressed="true"]::before{content:"";position:absolute;left:34%;top:49%;width:34%;aspect-ratio:2.2;border:2px solid rgba(173,235,247,.7);border-radius:50%;opacity:0;pointer-events:none;animation:foundPondBreath 9s ease-out infinite}
.wonder-tree[aria-pressed="true"]::before{animation:foundTreeBreath 10.5s ease-in-out infinite}
.wonder-mushrooms[aria-pressed="true"]::after{animation:foundMushroomBreath 8.8s ease-in-out infinite}
.wonder-mailbox[aria-pressed="true"]::before{animation:foundMailboxBreath 11s ease-in-out infinite}

@keyframes magicDoorGlow{0%,100%{opacity:.64;transform:translate(-50%,-50%) scale(.8)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes foundPondBreath{0%,78%,100%{opacity:0;transform:scale(.65)}82%{opacity:.7;transform:scale(.85)}92%{opacity:0;transform:scale(1.35)}}
@keyframes foundTreeBreath{0%,76%,100%{opacity:0;translate:0 0;rotate:0deg}81%{opacity:.7;translate:0 -3px;rotate:-3deg}88%{opacity:.48;translate:5px 7px;rotate:4deg}95%{opacity:0;translate:12px 24px;rotate:16deg}}
@keyframes foundMushroomBreath{0%,72%,100%{opacity:0;scale:.88}80%{opacity:.34;scale:1.03}89%{opacity:.58;scale:1.08}96%{opacity:0;scale:.96}}
@keyframes foundMailboxBreath{0%,78%,100%{opacity:0;translate:0 0;rotate:0deg}83%{opacity:.78;translate:0 -4px;rotate:-4deg}90%{opacity:.58;translate:5px -12px;rotate:5deg}97%{opacity:0;translate:10px -20px;rotate:9deg}}

/* Keep the page title and announcements for assistive technology, not as cards. */
.sky-copy,
.village-message {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

.goal-quest,
.wonder-meter { display: none !important; }

/* The sky itself toggles magic hour. A name appears only for keyboard focus. */
.village-controls {
  position: absolute;
  z-index: 6;
  left: 35%;
  top: 0;
  width: 30%;
  height: 20%;
  display: block;
  pointer-events: none;
}

.magic-hour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 45%;
  background: transparent;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.magic-hour > span { display: none; }

.magic-hour > b {
  position: absolute;
  left: 50%;
  top: 35%;
  width: max-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(43, 69, 49, .92);
  color: #fff;
  font-size: 9px;
  opacity: 0;
  transform: translate(-50%, 5px);
  pointer-events: none;
}

.magic-hour:focus-visible {
  outline: 4px solid #fff0a8;
  outline-offset: -8px;
}

.magic-hour:focus-visible > b {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Invisible destinations sit on the painted buildings. */
.place-hotspot,
.place-hotspot.bank,
.place-hotspot.cafe,
.place-hotspot.post,
.place-hotspot.home-building {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 42% !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: #fff !important;
  cursor: pointer !important;
  filter: none !important;
  transform: none !important;
  touch-action: manipulation;
  overflow: visible;
}

/* The ferry is a painted prop, not a menu card. It becomes the doorway to the
   second world once the child's first money plan is complete. */
.place-hotspot.sky-ferry-link {
  left: 79% !important;
  top: 2% !important;
  width: 14% !important;
  height: 27% !important;
  z-index: 11 !important;
  border-radius: 45% !important;
}
.sky-ferry-link > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 5px rgba(38,66,62,.28));transform-origin:50% 58%;animation:villageFerryFloat 4.8s ease-in-out infinite;transition:filter .2s,opacity .2s}
.sky-ferry-link::after{display:none!important}
.sky-ferry-link .sky-ferry-name{position:absolute;left:50%;bottom:1%;width:max-content;padding:6px 10px;border-radius:999px;background:rgba(42,69,65,.94);color:#fff;font-size:10px;font-weight:1000;opacity:0;transform:translate(-50%,6px);transition:.18s;pointer-events:none}
.sky-ferry-link:hover .sky-ferry-name,.sky-ferry-link:focus-visible .sky-ferry-name{opacity:1;transform:translate(-50%,0)}
.sky-ferry-link.is-locked > img{filter:grayscale(.52) brightness(.8) drop-shadow(0 8px 5px rgba(38,66,62,.25));opacity:.84}
.sky-ferry-link.is-locked::before{opacity:.55;background:radial-gradient(circle,rgba(195,220,220,.2),transparent 70%)}
@keyframes villageFerryFloat{50%{transform:translateY(-6px) rotate(1deg)}}

.place-hotspot.cafe {
  left: 1% !important;
  top: 35% !important;
  width: 31% !important;
  height: 31% !important;
}

.place-hotspot.bank {
  left: 38% !important;
  top: 27% !important;
  width: 25% !important;
  height: 37% !important;
}

.place-hotspot.home-building {
  left: 55% !important;
  top: 2% !important;
  width: 23% !important;
  height: 26% !important;
}

.place-hotspot.post {
  left: 67% !important;
  top: 35% !important;
  width: 25% !important;
  height: 32% !important;
}

.place-hotspot::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 14%;
  border: 0 !important;
  border-radius: 48%;
  background: radial-gradient(circle, rgba(255, 238, 158, 0), transparent 70%);
  box-shadow: none !important;
  opacity: 0;
  transition: opacity .18s, background .18s;
  pointer-events: none;
}

.place-hotspot:hover::before,
.place-hotspot:focus-visible::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 240, 168, .2), transparent 70%);
}

.place-hotspot:hover,
.place-hotspot:focus-visible {
  transform: none !important;
  filter: none !important;
}

.place-hotspot:focus-visible { outline: none; }

.place-hotspot:focus-visible::before {
  box-shadow: inset 0 0 0 4px rgba(255, 245, 185, .96), 0 0 24px rgba(255, 225, 118, .75) !important;
}

.place-card {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 4%;
  width: max-content;
  min-width: 0;
  min-height: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 4px rgba(25, 44, 29, .96), 0 0 9px rgba(25, 44, 29, .75);
  opacity: 0;
  transform: translate(-50%, 7px);
  transition: opacity .16s, transform .16s;
  pointer-events: none;
}

.place-card > i,
.place-card small,
.place-card em,
.place-card > b,
.shift-count,
.job-badge { display: none !important; }

.place-card strong {
  font-size: clamp(17px, 1.6vw, 24px);
  white-space: nowrap;
}

.place-hotspot:hover .place-card,
.place-hotspot:focus-visible .place-card {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hotspot-glow {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 55%;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #fff1a9;
  box-shadow: 0 0 8px 3px rgba(255, 225, 123, .72);
  opacity: .5;
  transform: translate(-50%, -50%);
  animation: doorGlimmer 3.8s ease-in-out infinite;
}

.place-hotspot.cafe .hotspot-glow { left: 58%; top: 63%; }
.place-hotspot.bank .hotspot-glow { left: 50%; top: 57%; }
.place-hotspot.post .hotspot-glow { left: 50%; top: 58%; }
.place-hotspot.home-building .hotspot-glow { left: 50%; top: 54%; }

/* A clipped repeat of the art moves with the object, so the scenery reacts. */
.place-hotspot::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: url('/peblet-village-storybook.webp');
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateZ(0);
  pointer-events: none;
}

.place-hotspot.cafe::after {
  border-radius: 44% 35% 35% 42%;
  background-size: 322.58% 322.58%;
  background-position: 1.45% 50.72%;
  -webkit-mask-image: radial-gradient(ellipse 68% 66% at 53% 53%, #000 63%, transparent 78%);
  mask-image: radial-gradient(ellipse 68% 66% at 53% 53%, #000 63%, transparent 78%);
}

.place-hotspot.bank::after {
  border-radius: 50%;
  background-size: 400% 270.27%;
  background-position: 50.67% 42.86%;
  -webkit-mask-image: radial-gradient(circle at 50% 54%, #000 54%, transparent 73%);
  mask-image: radial-gradient(circle at 50% 54%, #000 54%, transparent 73%);
}

.place-hotspot.home-building::after {
  border-radius: 46%;
  background-size: 434.78% 384.62%;
  background-position: 71.43% 2.7%;
  -webkit-mask-image: radial-gradient(ellipse 66% 67% at 50% 47%, #000 56%, transparent 76%);
  mask-image: radial-gradient(ellipse 66% 67% at 50% 47%, #000 56%, transparent 76%);
}

.place-hotspot.post::after {
  border-radius: 40%;
  background-size: 400% 312.5%;
  background-position: 89.33% 51.47%;
  -webkit-mask-image: radial-gradient(ellipse 67% 68% at 50% 52%, #000 60%, transparent 78%);
  mask-image: radial-gradient(ellipse 67% 68% at 50% 52%, #000 60%, transparent 78%);
}

.place-hotspot.entering::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 236, 143, .68), rgba(255, 208, 96, .1) 47%, transparent 72%);
  animation: doorwayGlow .6s ease-out;
}

.place-hotspot.entering::after { opacity: 1; }
.place-hotspot.bank.entering::after { animation: bankDoorReact .62s cubic-bezier(.2, .78, .22, 1); }
.place-hotspot.cafe.entering::after { animation: cafeReact .62s cubic-bezier(.2, .78, .22, 1); }
.place-hotspot.post.entering::after { animation: postReact .62s cubic-bezier(.2, .78, .22, 1); }
.place-hotspot.home-building.entering::after { animation: homeReact .62s cubic-bezier(.2, .78, .22, 1); }
.place-hotspot.entering .hotspot-glow { animation: enterFlash .6s ease-out; }

.village:has(.place-hotspot.entering) .village-art {
  filter: brightness(1.08) saturate(1.06);
  transform: scale(1.035);
}

.village:has(.bank.entering) .village-art { transform-origin: 50% 47%; }
.village:has(.cafe.entering) .village-art { transform-origin: 17% 52%; }
.village:has(.post.entering) .village-art { transform-origin: 80% 52%; }
.village:has(.home-building.entering) .village-art { transform-origin: 66% 15%; }

/* Natural wonders are large transparent targets over the painted scenery. */
.wonder-button {
  position: absolute;
  z-index: 8;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 44%;
  background: transparent;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  animation: none;
  touch-action: manipulation;
  overflow: visible;
}

.wonder-button > span,
.wonder-button > small,
.wonder-button[aria-pressed='true']::after { display: none; }

.wonder-button[aria-pressed='true'] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  filter: none !important;
}

.wonder-button:focus-visible {
  outline: 4px solid rgba(255, 243, 174, .96);
  outline-offset: -6px;
}

.wonder-pond { left: 0 !important; right: auto !important; top: 68% !important; width: 31% !important; height: 32% !important; }
.wonder-tree { left: 0 !important; right: auto !important; top: 0 !important; width: 34% !important; height: 35% !important; }
.wonder-mushrooms { left: 83% !important; right: auto !important; top: 78% !important; width: 17% !important; height: 22% !important; }
.wonder-mailbox { left: 89% !important; right: auto !important; top: 42% !important; width: 10% !important; height: 31% !important; z-index: 10; }

.pond-ripple {
  position: absolute;
  left: var(--ripple-x, 45%);
  top: var(--ripple-y, 55%);
  width: 74px;
  height: 30px;
  border: 3px solid rgba(188, 243, 255, .95);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
  animation: pondRipple .95s ease-out forwards;
}

.pond-ripple:nth-of-type(2) { animation-delay: .13s; }
.pond-ripple:nth-of-type(3) { animation-delay: .26s; }

.wonder-tree::before,
.wonder-tree::after,
.wonder-mushrooms::after,
.wonder-mailbox::before,
.wonder-mailbox::after {
  position: absolute;
  display: block !important;
  pointer-events: none;
  opacity: 0;
}

.wonder-tree::after,
.wonder-mushrooms::after,
.wonder-mailbox::after {
  content: '' !important;
  inset: 0;
  background-image: url('/peblet-village-storybook.webp');
  background-repeat: no-repeat;
}

.wonder-tree::after {
  background-size: 294.12% 285.71%;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 64% 66% at 45% 42%, #000 56%, transparent 75%);
  mask-image: radial-gradient(ellipse 64% 66% at 45% 42%, #000 56%, transparent 75%);
}

.wonder-tree::before {
  content: '🍃  🍃  🍂  🍃';
  z-index: 2;
  left: 26%;
  top: 35%;
  color: #a9d565;
  font-size: 21px;
  letter-spacing: 15px;
  filter: drop-shadow(0 3px 3px rgba(43, 65, 37, .35));
}

.village[data-wonder-active='tree'] .wonder-tree::after {
  opacity: 1;
  animation: treeRustle .9s ease-out;
}

.village[data-wonder-active='tree'] .wonder-tree::before { animation: leavesFall 1.15s ease-out; }

.wonder-mushrooms::after {
  background-size: 588.24% 454.55%;
  background-position: 100% 97.5%;
  border-radius: 48%;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 58% 55%, #000 47%, transparent 73%);
  mask-image: radial-gradient(ellipse 72% 70% at 58% 55%, #000 47%, transparent 73%);
}

.village[data-wonder-active='mushrooms'] .wonder-mushrooms::after {
  opacity: 1;
  filter: brightness(1.5) saturate(1.45) drop-shadow(0 0 18px #ffd066);
  animation: mushroomWake 1s ease-out;
}

.wonder-mailbox::after {
  background-size: 1000% 322.58%;
  background-position: 98.89% 60.87%;
  border-radius: 44%;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 55% 52%, #000 48%, transparent 73%);
  mask-image: radial-gradient(ellipse 70% 62% at 55% 52%, #000 48%, transparent 73%);
}

.wonder-mailbox::before {
  content: '✉';
  z-index: 2;
  left: 28%;
  top: 44%;
  color: #fff7df;
  font-size: 27px;
  filter: drop-shadow(0 3px 3px rgba(57, 42, 29, .35));
}

.village[data-wonder-active='mailbox'] .wonder-mailbox::after {
  opacity: 1;
  animation: mailboxWake .75s ease-out;
}

.village[data-wonder-active='mailbox'] .wonder-mailbox::before { animation: mailFly 1s cubic-bezier(.18, .78, .25, 1); }

.village-scene::after {
  content: '';
  position: absolute;
  z-index: 20;
  inset: 0;
  background:
    radial-gradient(circle at 18% 32%, #fff8b8 0 2px, transparent 3px),
    radial-gradient(circle at 48% 24%, #fff8b8 0 2px, transparent 3px),
    radial-gradient(circle at 72% 46%, #fff8b8 0 2px, transparent 3px),
    radial-gradient(circle at 87% 71%, #fff8b8 0 2px, transparent 3px);
  background-size: 110px 95px, 140px 120px, 130px 110px, 160px 140px;
  opacity: 0;
  pointer-events: none;
}

.village-scene.all-wonders-awake::after { animation: wholeVillageSparkle 1.4s ease-out; }

/* Peblets live inside the landscape rather than in a character toolbar. */
.village-friends {
  position: absolute !important;
  z-index: 12 !important;
  inset: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  display: block !important;
  transform: none !important;
  pointer-events: none !important;
}

.village-friend,
.village-player {
  position: absolute;
  width: 8.5% !important;
  height: 18% !important;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 7px 5px rgba(32, 58, 38, .28));
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 100%;
  animation: sceneFriendIdle 4.2s ease-in-out infinite !important;
  touch-action: manipulation;
}

.village-player {
  --player-foot-shift: 0%;
  left: 48%;
  top: auto;
  bottom: 11%;
  width: 10.5% !important;
  height: auto !important;
  aspect-ratio: 1;
  overflow: visible;
  animation-delay: -1.9s !important;
}

.village-player::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 22%;
  right: 22%;
  bottom: -1%;
  height: 7%;
  border-radius: 50%;
  background: rgba(29, 55, 34, .32);
  filter: blur(3px);
  pointer-events: none;
}

.village-player-stack {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  transform: none;
  pointer-events: none;
}

.village-friend > img,
.village-player-stack > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: none !important;
  animation: none !important;
}

.village-friend:hover,
.village-friend:focus-visible {
  z-index: 6;
  outline: none;
  transform: none;
  filter: drop-shadow(0 0 12px rgba(255, 239, 151, .9)) drop-shadow(0 8px 5px rgba(32, 58, 38, .28));
}

.village-friend:focus-visible::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: 94%;
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(43, 69, 49, .92);
  color: #fff;
  font-size: 9px;
  transform: translateX(-50%);
}

.village-friend:has(.friend-speech)::after { display: none; }

.village-player > strong {
  position: absolute;
  left: 50%;
  bottom: -3px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
  font-size: 9px;
  text-shadow: 0 2px 4px rgba(30, 53, 34, .94), 0 0 7px rgba(30, 53, 34, .8);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .15s;
}

.village-player:hover > strong,
.village-player:focus-visible > strong { opacity: 1; }

.friend-speech {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 91%;
  width: max-content;
  max-width: 290px;
  padding: 13px 15px 10px;
  border: 3px solid rgba(255, 255, 255, .88);
  border-radius: 20px 20px 20px 5px;
  background: rgba(57, 76, 54, .93);
  box-shadow: 0 5px 14px rgba(28, 48, 31, .2);
  color: #fff;
  font-size: clamp(15px,1.55vw,18px);
  font-weight: 900;
  line-height: 1.38;
  text-align: left;
  transform: translate(-50%, 6px) scale(.92);
  transform-origin: 30% 100%;
  opacity: 0;
  pointer-events: none;
  animation: speechArrive .28s ease-out forwards;
}
.friend-speech-copy { display:block; }
.friend-speech-close { display:block;margin-top:7px;color:#ffedb1;font-size:12px;font-weight:1000;text-align:right; }

.village-friend.friend-reacting {
  z-index: 7;
  animation: friendReact .68s cubic-bezier(.2, .85, .24, 1.2) !important;
}

@keyframes doorGlimmer {
  0%, 72%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.65); }
  82% { opacity: .85; transform: translate(-50%, -50%) scale(1.65); }
}

@keyframes doorwayGlow {
  0% { transform: scale(.35); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes enterFlash {
  0% { opacity: .8; transform: translate(-50%, -50%) scale(.7); }
  65% { opacity: 1; transform: translate(-50%, -50%) scale(5.5); box-shadow: 0 0 24px 12px rgba(255, 239, 164, .88); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

@keyframes bankDoorReact {
  0% { transform: scale(1) rotate(0); filter: brightness(1); }
  35% { transform: scale(.99) rotate(-1.5deg); filter: brightness(1.2); }
  72% { transform: scale(1.045) rotate(1deg); filter: brightness(1.35) saturate(1.12); }
  100% { transform: scale(1.08); filter: brightness(1.45); }
}

@keyframes cafeReact {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  35% { transform: translateY(4px) scale(.99); }
  68% { transform: translateY(-8px) scale(1.035); filter: brightness(1.25) saturate(1.12); }
  100% { transform: translateY(-2px) scale(1.06); filter: brightness(1.38); }
}

@keyframes postReact {
  0% { transform: translateY(0) rotate(0); filter: brightness(1); }
  30% { transform: translateY(4px) rotate(-1deg); }
  65% { transform: translateY(-9px) rotate(1.5deg); filter: brightness(1.23) saturate(1.15); }
  100% { transform: translateY(-2px) scale(1.055); filter: brightness(1.38); }
}

@keyframes homeReact {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(.985) rotate(-.7deg); }
  72% { transform: scale(1.045) rotate(.7deg); filter: brightness(1.3) saturate(1.1); }
  100% { transform: scale(1.07); filter: brightness(1.42); }
}

@keyframes pondRipple {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.16); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}

@keyframes treeRustle {
  0%, 100% { transform: rotate(0); filter: brightness(1); }
  22% { transform: rotate(-1.8deg) translateX(-3px); }
  42% { transform: rotate(1.5deg) translateX(3px); filter: brightness(1.12) saturate(1.15); }
  63% { transform: rotate(-1deg) translateX(-2px); }
  82% { transform: rotate(.6deg); }
}

@keyframes leavesFall {
  0% { opacity: 0; transform: translateY(-25px) rotate(-10deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(55px, 140px) rotate(200deg); }
}

@keyframes mushroomWake {
  0% { transform: translateY(7px) scale(.75); opacity: 0; }
  35% { transform: translateY(-7px) scale(1.08); opacity: 1; }
  65% { transform: translateY(2px) scale(.98); }
  100% { transform: translateY(-2px) scale(1.04); opacity: 0; }
}

@keyframes mailboxWake {
  0% { transform: rotate(0); opacity: 0; }
  25% { transform: rotate(-5deg); opacity: 1; }
  55% { transform: rotate(5deg); }
  100% { transform: rotate(0); opacity: 0; }
}

@keyframes mailFly {
  0% { opacity: 0; transform: translate(0, 20px) rotate(-15deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-220px, -125px) rotate(24deg) scale(1.25); }
}

@keyframes wholeVillageSparkle {
  0%, 100% { opacity: 0; transform: scale(.98); }
  35% { opacity: .95; }
  65% { opacity: .55; transform: scale(1.04); }
}

@keyframes sceneFriendIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018, .985); }
}

@keyframes friendReact {
  0%, 100% { transform: scale(1); }
  28% { transform: scale(1.1, .88); }
  55% { transform: scale(.96, 1.06); }
  78% { transform: scale(1.03, .97); }
}

@keyframes speechArrive {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.92); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (max-width: 900px) and (orientation: portrait) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .topbar {
    height: 68px;
    position: relative;
  }

  .village {
    height: calc(100svh - 68px);
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .village::-webkit-scrollbar { display: none; }

  .village-scene {
    position: relative;
    left: 0;
    top: 0;
    width: max(900px, calc((100svh - 68px) * var(--scene-ratio)));
    height: 100%;
    min-height: 0;
    transform: none;
  }

  .place-card { display: none !important; }

  .place-hotspot.sky-ferry-link{left:79%!important;top:2%!important;width:14%!important;height:27%!important}

  .hotspot-glow {
    width: 7px;
    height: 7px;
  }

  .village-friend,
  .village-player {
    min-width: 68px;
    min-height: 68px;
  }

  .friend-speech {
    max-width: 260px;
    font-size: 15px;
  }

  .sunbeam { opacity: .55; }
}

@media (max-height: 560px) and (max-width: 760px) {
  .brand img { width: 126px; }
  .topbar { height: 60px; }
  .village { height: calc(100svh - 60px); }
  .village-scene { width: max(820px, calc((100svh - 60px) * var(--scene-ratio))); }
}

@media (prefers-reduced-motion: reduce) {
  .village-art,
  .place-hotspot::before,
  .place-hotspot::after,
  .hotspot-glow,
  .pond-ripple,
  .wonder-tree::before,
  .wonder-tree::after,
  .wonder-mushrooms::after,
  .wonder-mailbox::before,
  .wonder-mailbox::after,
  .village-scene::after,
  .village-friend,
  .friend-speech {
    animation: none !important;
    transition: none !important;
  }

  .sky-ferry-link > img{animation:none!important;transition:none!important}

  .place-hotspot.entering::before,
  .village[data-wonder-active='tree'] .wonder-tree::before,
  .village[data-wonder-active='tree'] .wonder-tree::after,
  .village[data-wonder-active='mushrooms'] .wonder-mushrooms::after,
  .village[data-wonder-active='mailbox'] .wonder-mailbox::before,
  .village[data-wonder-active='mailbox'] .wonder-mailbox::after { opacity: .65; }

  .friend-speech {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .pond-ripple {
    opacity: .8;
    transform: translate(-50%, -50%) scale(1);
  }

  .village:has(.place-hotspot.entering) .village-art {
    transform: none;
    filter: brightness(1.08);
  }
}

@media(prefers-reduced-motion:reduce){.village.is-dusk .hotspot-glow,.wonder-pond[aria-pressed="true"]::before,.wonder-tree[aria-pressed="true"]::before,.wonder-mushrooms[aria-pressed="true"]::after,.wonder-mailbox[aria-pressed="true"]::before{animation:none!important}.village.is-dusk .hotspot-glow{opacity:.88}.wonder-mushrooms[aria-pressed="true"]::after{opacity:.22}}
[data-motion="reduced"] .village.is-dusk .hotspot-glow,[data-motion="reduced"] .wonder-pond[aria-pressed="true"]::before,[data-motion="reduced"] .wonder-tree[aria-pressed="true"]::before,[data-motion="reduced"] .wonder-mushrooms[aria-pressed="true"]::after,[data-motion="reduced"] .wonder-mailbox[aria-pressed="true"]::before{animation:none!important}
[data-motion="reduced"] .village.is-dusk .hotspot-glow{opacity:.88}
[data-motion="reduced"] .wonder-mushrooms[aria-pressed="true"]::after{opacity:.22}
.pet-life-hotspot{position:absolute;z-index:12;right:21%;top:27%;display:grid;place-items:center;width:58px;height:58px;border:3px solid rgba(255,247,207,.9);border-radius:50%;background:rgba(72,112,79,.9);box-shadow:0 5px 0 rgba(42,70,48,.55),0 0 18px rgba(255,224,112,.45);color:#fff;text-decoration:none;transition:transform .18s}.pet-life-hotspot span{font-size:27px}.pet-life-hotspot strong{position:absolute;top:105%;width:max-content;max-width:120px;border-radius:999px;background:#fff8df;color:#4d5e45;padding:5px 9px;font-size:10px;opacity:0;transform:translateY(-4px);transition:.18s}.pet-life-hotspot:hover,.pet-life-hotspot:focus-visible{transform:translateY(-5px) scale(1.06);outline:4px solid #ffe082;outline-offset:3px}.pet-life-hotspot:hover strong,.pet-life-hotspot:focus-visible strong{opacity:1;transform:none}.village-care-project{position:absolute;z-index:6;right:16%;top:31%;font-size:clamp(34px,4.5vw,58px);filter:drop-shadow(0 6px 3px rgba(38,50,35,.35));animation:careProjectGrow .5s cubic-bezier(.2,.9,.3,1.3)}@keyframes careProjectGrow{from{transform:scale(.2);opacity:0}}@media(max-width:900px) and (orientation:portrait){.pet-life-hotspot{right:17%;top:49%;width:50px;height:50px}.village-care-project{right:11%;top:52%}}@media(prefers-reduced-motion:reduce){.pet-life-hotspot,.pet-life-hotspot strong,.village-care-project{transition:none!important;animation:none!important}}

.village-pan-cue{display:none}
/* Keep every painted doorway and the welcome mailbox inside tablet landscape. */
@media (min-width:700px) and (orientation:landscape) {
  .village-scene {
    width: min(100%, calc((100svh - 76px) * var(--scene-ratio)));
  }
}
@media (max-width:900px) and (orientation:portrait){.village-pan-cue:not([hidden]){position:fixed;z-index:19;left:50%;top:80px;display:flex;align-items:center;gap:10px;margin:0;color:#fff9d8;font-size:clamp(14px,2.2vw,17px);font-weight:1000;letter-spacing:.02em;line-height:1;white-space:nowrap;pointer-events:none;transform:translateX(-50%);text-shadow:0 2px 3px rgba(26,52,43,.95),0 0 11px rgba(26,52,43,.8)}}