:root {
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --sky: #9ad9df;
  --cream: #fff9df;
  --ink: #4e3f2f;
  --leaf: #5b9366;
  --sun: #ffd768;
  --ui: rgba(255, 250, 225, 0.91);
  --ui-border: rgba(255, 255, 255, 0.8);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html,
body,
#app,
.world {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
}

body {
  position: fixed;
  inset: 0;
  background: var(--sky);
  overscroll-behavior: none;
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
}

button { font: inherit; }
.is-hidden { display: none !important; }

.world {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #a9dfe1, #dbe9c7);
}

.map-viewport,
.scene-viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.map-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.map-viewport::-webkit-scrollbar { display: none; }

.map-canvas {
  position: relative;
  width: max(100%, calc(100dvh * 1.77778));
  height: 100%;
  min-height: 100%;
  background: #a8d8d8 url("assets/backgrounds-v070/world-map.png") center / cover no-repeat;
  overflow: hidden;
}

.map-canvas::after,
.scene-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%),
    radial-gradient(ellipse at center, transparent 52%, rgba(63,83,57,.08));
  z-index: 3;
}

.scene-viewport {
  background: #b7dcd0;
  animation: scene-in 520ms cubic-bezier(.2,.85,.3,1) both;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  background-color: #b7dcd0;
  background-image: var(--scene-bg);
  background-position: var(--scene-position, center);
  background-size: var(--scene-size, cover);
  background-repeat: no-repeat;
  overflow: hidden;
  touch-action: none;
}

.world[data-scene="firefly"] .scene-canvas::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(21,48,78,.48),rgba(25,43,60,.58));
  mix-blend-mode:multiply;
}
.world[data-scene="firefly"] .scene-item .sprite-visual { filter:drop-shadow(0 0 1.1vmin rgba(255,224,97,.48)) drop-shadow(0 .6vmin .45vmin rgba(31,36,38,.28)); }
.firefly-speck { position:absolute; z-index:5; left:var(--x); top:var(--y); width:clamp(6px,1.1vmin,12px); aspect-ratio:1; border-radius:50%; background:#ffe681; box-shadow:0 0 8px 3px rgba(255,224,105,.78); pointer-events:none; animation:firefly-drift 3.2s var(--delay) ease-in-out infinite alternate; }

.portal,
.scene-item,
.garden-bed,
.weather-choice,
.lamp-control {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
  outline: none;
  cursor: pointer;
}

.portal {
  left: var(--x);
  top: var(--y);
  width: clamp(82px, var(--portal-size, 14vmin), 172px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: var(--z, 8);
}

.portal::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 7%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,231,124,.5), rgba(255,247,192,.2) 44%, rgba(68,75,42,.16) 62%, transparent 72%);
  filter: blur(.5px);
  transform: scale(var(--portal-depth));
  animation: ground-glow 2.8s ease-in-out infinite;
}

.portal:nth-child(3n+1)::before { animation-delay: -.8s; }
.portal:nth-child(3n+2)::before { animation-delay: -1.6s; }

.portal-sprite,
.sprite-visual,
.pouch-sprite,
.bed-sprite {
  position: absolute;
  inset: 0;
  background-image: var(--atlas);
  background-size: var(--atlas-size);
  background-position: var(--sprite-x) var(--sprite-y);
  background-repeat: no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 .6vmin .45vmin rgba(71,54,29,.2));
}

.portal-sprite {
  inset: 4%;
  transform-origin: 50% 80%;
  animation: portal-friend 3.1s ease-in-out infinite;
}

.portal::after {
  content:"";
  position:absolute;
  left:72%;
  top:20%;
  width:5px;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,240,151,.9);
  box-shadow:-3.2vmin 1.4vmin 0 -1px rgba(255,245,184,.72),-1.4vmin -1.8vmin 0 -1px rgba(255,238,133,.62);
  animation:portal-sparkle 2.4s ease-in-out infinite;
  pointer-events:none;
}

.portal:active .portal-sprite { transform:scale(.9); }
.scene-item {
  left: var(--x);
  top: var(--y);
  width: var(--item-size, clamp(76px, 13vmin, 148px));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: var(--layer, 12);
}

.scene-item[data-atlas="main"] { --item-size: clamp(118px, 22vmin, 238px); }
.scene-item[data-atlas="monkey"] { --item-size: clamp(126px, 22vmin, 240px); }
.scene-item[data-atlas="farm"] { --item-size: clamp(98px, 17vmin, 188px); }
.scene-item[data-atlas="plants"] { --item-size: clamp(78px, 13.5vmin, 150px); }
.scene-item[data-atlas="props"] { --item-size: clamp(72px, 11.5vmin, 128px); }

.scene-item .sprite-visual {
  inset: -5%;
  transform-origin: 50% 82%;
  will-change: transform, filter;
}

.sprite-shadow {
  position:absolute;
  left:16%;
  right:16%;
  bottom:5%;
  height:17%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(54,61,36,.28),rgba(54,61,36,.1) 52%,transparent 72%);
  filter:blur(1.5px);
  pointer-events:none;
  transform-origin:center;
  transition:transform .18s ease,opacity .18s ease;
}

.scene-item::after,
.garden-bed::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,158,.66), transparent 67%);
  opacity: 0;
  transform: scale(.5);
  pointer-events: none;
}

.scene-item.is-reacting .sprite-visual { animation: happy-pop 620ms cubic-bezier(.2,1.5,.35,1); }
.scene-item.is-reacting::after,
.garden-bed.is-reacting::after { animation: touch-glow 650ms ease-out; }
.scene-item.is-dragging { z-index: 70 !important; }
.scene-item.is-dragging .sprite-visual { transform: scale(1.12) rotate(-3deg); filter: drop-shadow(0 1.5vmin 1vmin rgba(61,43,22,.34)); }
.scene-item.is-running .sprite-visual { animation: run-cycle 230ms linear infinite; }
.scene-item.is-flying .sprite-visual { animation: fly-loop 1500ms ease-in-out; }
.scene-item.is-airborne .sprite-shadow { opacity:.24; transform:scale(.58); }
.scene-item.is-airborne[data-id="butterfly"] .sprite-visual { animation:butterfly-flap 210ms ease-in-out infinite alternate; transform-origin:50% 55%; }
.scene-item.is-airborne[data-id="bee"] .sprite-visual { animation:bee-flight 120ms ease-in-out infinite alternate; }
.scene-item.is-airborne[data-id="bird"] .sprite-visual { animation:bird-flight 310ms ease-in-out infinite alternate; }
.scene-item.is-swimming .sprite-visual { animation: swim-loop 620ms ease-in-out infinite alternate; }
.scene-item.is-nibbling .sprite-visual { animation: nibble 190ms ease-in-out 6; }
.scene-item.is-pouncing .sprite-visual { animation: pounce 950ms cubic-bezier(.2,.8,.3,1); }
.scene-item.is-waddling .sprite-visual { animation: waddle 300ms ease-in-out infinite alternate; }
.scene-item.is-cat-curious .sprite-visual { animation:cat-curious 520ms ease-in-out infinite alternate; }
.scene-item.is-cat-pouncing .sprite-shadow { transform:scale(.72); opacity:.42; }
.scene-item.is-cat-pouncing .sprite-visual { animation:cat-pounce-body 440ms ease-in-out infinite alternate; }
.scene-item.is-hopping .sprite-shadow { animation:hop-shadow 420ms ease-in-out infinite alternate; }
.scene-item.is-hopping .sprite-visual { animation:hop-body 420ms cubic-bezier(.25,.8,.35,1) infinite alternate; }
.scene-item.is-stomping .sprite-visual { animation:stomp-body 360ms ease-in-out infinite alternate; }
.scene-item.is-pecking .sprite-visual { animation:peck-body 260ms ease-in-out infinite alternate; transform-origin:55% 78%; }
.scene-item.is-crawling .sprite-visual { animation:crawl-body 560ms ease-in-out infinite alternate; }
.scene-item.is-swaying .sprite-visual { animation:sway-body 520ms ease-in-out infinite alternate; }
.scene-item.is-sniffing .sprite-visual { animation:sniff-body 360ms ease-in-out infinite alternate; transform-origin:50% 86%; }
.scene-item.is-eating .sprite-visual { animation:eat-body 260ms ease-in-out infinite alternate; transform-origin:50% 88%; }
.scene-item.is-dancing .sprite-visual { animation:dance-body 320ms ease-in-out infinite alternate; }
.scene-item.is-playing-instrument[data-instrument="maraca"] .sprite-visual,
.scene-item.is-playing-instrument[data-instrument="tambourine"] .sprite-visual { animation:instrument-shake 120ms ease-in-out 6 alternate; }
.scene-item.is-playing-instrument[data-instrument="drum"] .sprite-visual { animation:instrument-thump 220ms ease-out 3; }
.scene-item.is-playing-instrument[data-instrument="xylophone"] .sprite-visual { animation:instrument-chime 260ms ease-in-out 3 alternate; }
.scene-item.is-rolling .sprite-visual { animation:ball-roll 360ms linear 5; }
.scene-item.is-collecting .sprite-visual { animation:collect-fruit 720ms ease-in forwards; }
.scene-item.is-tool-active[data-id="watering_can"] .sprite-visual { animation:watering-pour 330ms ease-in-out 2 alternate; transform-origin:72% 78%; }
.scene-item.is-tool-active[data-id="seed_bag"] .sprite-visual { animation:seed-shake 140ms ease-in-out 6 alternate; }
.scene-item.is-sleeping .sprite-visual { animation: sleep-breathe 2.2s ease-in-out infinite; }
.scene-item.is-waking .sprite-visual { animation: wake-stretch 950ms ease-in-out; }

.feeding-prop {
  position:absolute;
  z-index:85;
  width:clamp(52px,8vmin,90px);
  aspect-ratio:1;
  pointer-events:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 .6vmin .45vmin rgba(71,54,29,.22));
}
.feeding-prop-visual { position:absolute; inset:0; background-image:var(--atlas); background-size:var(--atlas-size); background-position:var(--sprite-x) var(--sprite-y); background-repeat:no-repeat; }

.garden-bed {
  left: var(--x);
  top: var(--y);
  width: clamp(86px, 14vmin, 156px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 10;
  border-radius: 46%;
  background: radial-gradient(ellipse at 50% 65%, rgba(111,71,40,.72) 0 38%, rgba(77,118,56,.18) 39% 55%, transparent 57%);
}

.garden-bed .bed-sprite { inset: -4%; transform-origin: 50% 90%; }
.garden-bed.is-growing .bed-sprite { animation: grow-up 900ms cubic-bezier(.18,1.35,.35,1); }

.weather-choice {
  top: 76%;
  left: var(--x);
  width: clamp(70px, 12vmin, 132px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(255,255,255,.74);
  border-radius: 50%;
  background: var(--weather-bg);
  box-shadow: 0 .7vmin 1.5vmin rgba(55,76,58,.18), inset 0 .3vmin .7vmin rgba(255,255,255,.55);
  z-index: 16;
}
.weather-choice svg { width:72%; height:72%; overflow:visible; }
.weather-choice .sun-rays { fill:none; stroke:#e9ad37; stroke-width:4; stroke-linecap:round; }
.weather-choice .sun-face { fill:#f6c94e; stroke:#e2a73a; stroke-width:2.5; }
.weather-choice .sun-smile { fill:none; stroke:#a86e2b; stroke-width:2.5; stroke-linecap:round; }
.weather-choice .cloud-back { fill:#d7e7e6; stroke:#97b8b9; stroke-width:2; }
.weather-choice .cloud-front { fill:#fffdf2; stroke:#a5c1c1; stroke-width:2; }
.weather-choice .rain-cloud { fill:#f8fcf4; stroke:#86aeb6; stroke-width:2.5; }
.weather-choice .rain-drops { fill:none; stroke:#4e9fc2; stroke-width:4; stroke-linecap:round; }
.weather-choice .rainbow-red,.weather-choice .rainbow-gold,.weather-choice .rainbow-green { fill:none; stroke-width:6; stroke-linecap:round; }
.weather-choice .rainbow-red { stroke:#e99391; }
.weather-choice .rainbow-gold { stroke:#edc75f; }
.weather-choice .rainbow-green { stroke:#7db68d; }
.weather-choice .rainbow-cloud { fill:#fffdf1; stroke:#a6c2bf; stroke-width:1.7; }
.weather-choice.is-active { outline: .7vmin solid rgba(255,224,103,.72); transform: translate(-50%,-50%) scale(1.08); }

.lamp-control {
  left: 50%;
  top: 21%;
  width: clamp(76px, 12vmin, 138px);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,222,125,.75), rgba(255,222,125,.12) 55%, transparent 68%);
  z-index: 8;
  animation: lamp-glow 2.5s ease-in-out infinite;
}

.top-controls {
  position: absolute;
  z-index: 100;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  gap: clamp(8px, 1.6vmin, 16px);
  pointer-events: none;
}

.round-control {
  position: relative;
  width: clamp(48px, 8.2vmin, 78px);
  aspect-ratio: 1;
  padding: clamp(9px, 1.55vmin, 15px);
  border: 3px solid var(--ui-border);
  border-radius: 50%;
  background: var(--ui);
  box-shadow: 0 .45vmin 1.1vmin rgba(66,58,39,.17), inset 0 .25vmin .55vmin rgba(255,255,255,.72);
  color: #665542;
  pointer-events: auto;
  cursor: pointer;
}
.round-control:active { transform: scale(.91); }
.round-control svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.home-control { margin-right: auto; }
.pouch-control { margin-left: auto; color: #8b6936; }
.sound-control .speaker { stroke: none; }
.sound-control .waves { fill: none; }
.sound-control .slash { display: none; fill: none; stroke: #b55b50; stroke-width: 6; }
.sound-control.is-muted .waves { display: none; }
.sound-control.is-muted .slash { display: block; }
.parent-control { opacity: .68; }
.parent-control svg { fill: none; }

.pouch-count {
  position: absolute;
  right: -5%;
  bottom: -4%;
  min-width: 42%;
  aspect-ratio: 1;
  border: 2px solid white;
  border-radius: 50%;
  background: #f2cc55;
  color: #61491d;
  font-size: clamp(11px, 2vmin, 18px);
  font-weight: 800;
  display: grid;
  place-items: center;
}
.pouch-count:empty { display: none; }

.pouch-panel {
  position: absolute;
  z-index: 95;
  top: max(70px, calc(env(safe-area-inset-top) + 62px));
  right: max(14px, env(safe-area-inset-right));
  width: min(72vw, 350px);
  min-height: 88px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px;
  border: 4px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background: rgba(255,249,219,.94);
  box-shadow: 0 1.2vmin 3vmin rgba(58,54,37,.22);
}
.pouch-slot { position: relative; aspect-ratio: 1; border-radius: 16px; background: rgba(223,230,181,.56); }
.pouch-slot.is-selected { outline:4px solid rgba(223,175,64,.72); background:rgba(255,232,143,.7); }
.pouch-slot .pouch-sprite { inset: 5%; }
.pouch-slot b { position:absolute; right:1px; bottom:0; min-width:22px; padding:2px 5px; border-radius:999px; background:#f0c84e; color:#4e401e; font-size:12px; text-align:center; }

.word-bubble {
  position: absolute;
  z-index: 110;
  top: max(82px, calc(env(safe-area-inset-top) + 72px));
  left: 50%;
  min-width: clamp(150px, 27vw, 290px);
  max-width: 72vw;
  padding: .45em 1.05em .5em;
  border: 4px solid rgba(255,255,255,.82);
  border-radius: 1.3em;
  background: rgba(255,250,225,.95);
  box-shadow: 0 .6vmin 1.7vmin rgba(65,54,34,.16);
  color: var(--ink);
  text-align: center;
  opacity: 0;
  transform: translate(-50%,-18px) scale(.9);
  pointer-events: none;
}
.word-bubble.show { animation: word-in 2.7s ease both; }
.word-bubble span { display:block; }
.word-zh { font-size: clamp(20px, 3.8vmin, 38px); font-weight: 750; letter-spacing: .05em; }
.word-en { margin-top:.08em; font-size: clamp(13px, 2vmin, 20px); font-weight: 650; opacity:.72; }

.effects { position:absolute; inset:0; z-index:80; overflow:hidden; pointer-events:none; }
.effect-dot { position:absolute; left:var(--fx); top:var(--fy); width:var(--fs,26px); aspect-ratio:1; border-radius:50%; background:var(--fc,#fff3a2); border:2px solid rgba(255,255,255,.62); animation: effect-rise var(--fd,1.5s) ease-out forwards; }
.effect-petal { border-radius:70% 20% 70% 20%; background:var(--fc,#ffc7cc); }
.effect-crumb { border:0; border-radius:42% 58% 48% 52%; box-shadow:0 1px 2px rgba(92,57,24,.2); }
.rain-layer { position:absolute; inset:0; z-index:5; overflow:hidden; pointer-events:none; background:linear-gradient(180deg,rgba(113,155,174,.06),rgba(84,129,147,.1)); }
.rain-drop { position:absolute; left:var(--rain-x); top:var(--rain-y); width:1.25px; height:var(--rain-length); border-radius:999px; background:linear-gradient(180deg,rgba(234,249,252,0),rgba(222,245,250,.9)); opacity:var(--rain-opacity); filter:drop-shadow(0 0 1px rgba(205,240,248,.45)); transform:rotate(8deg); animation:rain-drop-fall var(--rain-duration) var(--rain-delay) linear infinite; }
.rain-drop-far { width:.7px; height:calc(var(--rain-length) * .72); opacity:calc(var(--rain-opacity) * .58); filter:none; animation-duration:calc(var(--rain-duration) * 1.32); }
.rain-splash { position:absolute; left:var(--splash-x); top:var(--splash-y); width:clamp(10px,1.8vmin,22px); height:clamp(4px,.65vmin,8px); border:1.5px solid rgba(218,244,249,.72); border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(var(--splash-scale)); animation:rain-splash 1.55s var(--splash-delay) ease-out infinite; }
.rainbow-layer { position:absolute; z-index:4; left:18%; top:5%; width:64%; aspect-ratio:2; border-radius:50% 50% 0 0 / 100% 100% 0 0; border:clamp(14px,3vmin,32px) solid rgba(239,116,103,.5); border-bottom:0; box-shadow:0 -12px 0 rgba(244,187,87,.48),0 -24px 0 rgba(106,187,134,.45),0 -36px 0 rgba(104,156,210,.42); opacity:.74; pointer-events:none; }

.start-gate {
  position:absolute;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,250,204,.86),rgba(255,250,204,.12) 42%,transparent 58%),
    linear-gradient(180deg,rgba(158,216,221,.9),rgba(218,232,194,.94));
  backdrop-filter:blur(7px);
}
.start-gate.is-leaving { animation: gate-out 650ms cubic-bezier(.3,.7,.2,1) forwards; pointer-events:none; }
.gate-halo { position:absolute; width:min(82vmin,760px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,233,141,.48),transparent 66%); animation:halo-breathe 4s ease-in-out infinite; }
.gate-friends { position:absolute; left:50%; top:49%; width:min(86vw,700px); height:min(42vh,370px); transform:translate(-50%,-50%); }
.gate-sprite { position:absolute; width:34%; aspect-ratio:1; background-repeat:no-repeat; filter:drop-shadow(0 1.3vmin 1vmin rgba(76,58,30,.2)); animation:friend-float 2.6s ease-in-out infinite; }
.gate-duck { left:0; top:18%; background-image:url("assets/sprites-v070/main-storybook-atlas.png"); background-size:600% 300%; background-position:0 0; }
.gate-dog { left:33%; top:0; background-image:url("assets/sprites-v070/main-storybook-atlas.png"); background-size:600% 300%; background-position:0 50%; animation-delay:-.7s; }
.gate-cat { right:0; top:18%; background-image:url("assets/sprites-v070/main-storybook-atlas.png"); background-size:600% 300%; background-position:0 100%; animation-delay:-1.4s; }
.start-button { position:relative; z-index:4; margin-top:min(52vh,420px); width:clamp(96px,17vmin,168px); aspect-ratio:1; padding:clamp(18px,3.2vmin,34px); border:clamp(5px,.8vmin,9px) solid rgba(255,255,255,.86); border-radius:50%; background:#ffd862; color:#76532a; box-shadow:0 1.2vmin 0 rgba(174,126,45,.22),0 2vmin 4vmin rgba(83,67,37,.22),inset 0 .8vmin 1.2vmin rgba(255,255,255,.64); cursor:pointer; animation:start-breathe 1.8s ease-in-out infinite; }
.start-button svg { width:100%; height:100%; fill:currentColor; stroke:currentColor; stroke-width:5; stroke-linecap:round; }
.start-button .start-wave { fill:none; }
.start-button:active { transform:translateY(7%) scale(.94); }
.tap-ripple { position:absolute; z-index:3; left:50%; top:calc(50% + min(26vh,210px)); width:clamp(96px,17vmin,168px); aspect-ratio:1; border:4px solid rgba(255,226,111,.62); border-radius:50%; transform:translate(-50%,-50%); animation:tap-ripple 1.8s ease-out infinite; }

.parent-panel { position:absolute; inset:0; z-index:400; display:grid; place-items:center; padding:24px; background:rgba(49,60,48,.46); backdrop-filter:blur(10px); touch-action:auto; }
.parent-card { position:relative; width:min(92vw,540px); max-height:88vh; overflow:auto; padding:32px; border:5px solid rgba(255,255,255,.78); border-radius:30px; background:#fff9df; box-shadow:0 3vmin 8vmin rgba(42,44,35,.3); color:#504333; user-select:text; }
.parent-card h1 { margin:0 50px 14px 0; font-size:clamp(26px,5vmin,42px); }
.parent-card p { margin:10px 0; line-height:1.75; font-size:clamp(15px,2.5vmin,19px); }
.parent-close { position:absolute; top:18px; right:18px; width:44px; height:44px; border:0; border-radius:50%; background:#eadfaf; color:#5d513a; font-size:32px; line-height:1; }
.parent-action { width:100%; margin-top:18px; padding:15px 20px; border:0; border-radius:18px; background:#d9a84d; color:white; font-weight:750; font-size:16px; }

.qa-controls { position:fixed; right:0; bottom:0; width:20px; height:10px; overflow:hidden; opacity:.001; z-index:999; }
.qa-controls[hidden] { display:none !important; }
.qa-controls button { position:absolute; width:9px; height:9px; padding:0; border:0; }
#qaMultiButton { left:0; top:0; }
#qaStressButton { left:11px; top:0; }
#qaResult { display:none; }

@keyframes scene-in { from { opacity:0; transform:scale(1.035); } to { opacity:1; transform:none; } }
@keyframes ground-glow { 50% { transform:scale(var(--portal-glow-depth)); opacity:.68; } }
@keyframes portal-friend { 0%,100%{transform:scale(var(--portal-depth)) translateY(0)} 50% { transform:scale(var(--portal-depth)) translateY(-3%) rotate(1.2deg); } }
@keyframes portal-sparkle { 0%,100%{opacity:.22;transform:scale(.75)} 50%{opacity:1;transform:scale(1.18)} }
@keyframes happy-pop { 0%,100%{transform:none} 38%{transform:translateY(-16%) scale(1.12) rotate(-3deg)} 70%{transform:translateY(-4%) scale(.98) rotate(2deg)} }
@keyframes touch-glow { 0%{opacity:.9;transform:scale(.45)} 100%{opacity:0;transform:scale(1.4)} }
@keyframes run-cycle { 0%,100%{transform:translateY(2%) rotate(-1.5deg) scaleX(var(--motion-facing,1))} 50%{transform:translateY(-5%) rotate(1.5deg) scaleX(var(--motion-facing,1))} }
@keyframes fly-loop { 0%,100%{transform:none} 35%{transform:translate(18%,-26%) rotate(8deg)} 70%{transform:translate(-15%,-14%) rotate(-5deg)} }
@keyframes butterfly-flap { from{transform:translateY(2%) scaleX(.46) rotate(-2deg)} to{transform:translateY(-4%) scaleX(1) rotate(3deg)} }
@keyframes bee-flight { from{transform:translateY(1%) rotate(-3deg)} to{transform:translateY(-5%) rotate(4deg)} }
@keyframes bird-flight { from{transform:translateY(1%) rotate(-4deg) scaleY(.96)} to{transform:translateY(-7%) rotate(4deg) scaleY(1.04)} }
@keyframes swim-loop { from{transform:translateY(1%) rotate(-2deg) scaleX(var(--motion-facing,1))} to{transform:translateY(-3%) rotate(2deg) scaleX(var(--motion-facing,1))} }
@keyframes nibble { 50%{transform:translateY(5%) rotate(2deg) scale(.97)} }
@keyframes pounce { 0%,100%{transform:none} 30%{transform:translate(-8%,5%) scale(.92)} 60%{transform:translate(22%,-18%) rotate(8deg) scale(1.06)} }
@keyframes waddle { from{transform:rotate(-5deg) translateY(2%) scaleX(var(--motion-facing,1))} to{transform:rotate(5deg) translateY(-3%) scaleX(var(--motion-facing,1))} }
@keyframes cat-curious { from{transform:translateY(1%) rotate(-1deg)} to{transform:translateY(-2%) rotate(1.5deg)} }
@keyframes cat-pounce-body { from{transform:translateY(3%) scale(.96)} to{transform:translateY(-5%) rotate(3deg) scale(1.02)} }
@keyframes hop-shadow { from{transform:scale(1);opacity:.52} to{transform:scale(.66);opacity:.26} }
@keyframes hop-body { from{transform:translateY(3%) scaleY(.96)} to{transform:translateY(-7%) scaleY(1.02)} }
@keyframes stomp-body { from{transform:translateY(0) rotate(-1deg)} to{transform:translateY(3%) rotate(1deg)} }
@keyframes peck-body { from{transform:rotate(-2deg) translateY(0)} to{transform:rotate(8deg) translateY(4%)} }
@keyframes crawl-body { from{transform:translateX(-2%) rotate(-1deg)} to{transform:translateX(3%) rotate(1deg)} }
@keyframes sway-body { from{transform:rotate(-3deg) translateY(1%)} to{transform:rotate(3deg) translateY(-2%)} }
@keyframes sniff-body { from{transform:rotate(-1deg) translateY(0)} to{transform:rotate(3deg) translateY(4%) scale(.98)} }
@keyframes eat-body { from{transform:rotate(-1deg) translateY(0) scale(1)} to{transform:rotate(2deg) translateY(3%) scale(.985)} }
@keyframes dance-body { from{transform:rotate(-6deg) translateY(1%)} to{transform:rotate(6deg) translateY(-5%)} }
@keyframes instrument-shake { from{transform:rotate(-7deg) scale(.98)} to{transform:rotate(7deg) scale(1.04)} }
@keyframes instrument-thump { 0%,100%{transform:none} 45%{transform:translateY(6%) scale(.94)} }
@keyframes instrument-chime { from{transform:translateY(1%) rotate(-2deg)} to{transform:translateY(-6%) rotate(2deg)} }
@keyframes ball-roll { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes collect-fruit { from{transform:rotate(0) scale(1);opacity:1} to{transform:rotate(260deg) scale(.3);opacity:.25} }
@keyframes watering-pour { from{transform:rotate(0)} to{transform:rotate(-24deg) translateY(-3%)} }
@keyframes seed-shake { from{transform:rotate(-5deg) translateX(-2%)} to{transform:rotate(5deg) translateX(2%)} }
@keyframes sleep-breathe { 50%{transform:scale(1.025) translateY(2%)} }
@keyframes wake-stretch { 0%{transform:scale(.9) translateY(7%)} 55%{transform:scale(1.08) translateY(-8%)} 100%{transform:none} }
@keyframes grow-up { 0%{transform:scale(.3) translateY(30%);opacity:.4} 70%{transform:scale(1.12) translateY(-5%)} 100%{transform:none;opacity:1} }
@keyframes lamp-glow { 50%{transform:translate(-50%,-50%) scale(1.12);opacity:.75} }
@keyframes word-in { 0%{opacity:0;transform:translate(-50%,-18px) scale(.9)} 12%,78%{opacity:1;transform:translate(-50%,0) scale(1)} 100%{opacity:0;transform:translate(-50%,-10px) scale(.96)} }
@keyframes effect-rise { 0%{opacity:0;transform:translate(-50%,-20%) scale(.4)} 18%{opacity:.92} 100%{opacity:0;transform:translate(calc(-50% + var(--drift,20px)),-220%) scale(1.25) rotate(80deg)} }
@keyframes rain-drop-fall { 0%{transform:translate3d(0,-7vh,0) rotate(7deg);opacity:0} 12%{opacity:var(--rain-opacity)} 86%{opacity:var(--rain-opacity)} 100%{transform:translate3d(-2.4vw,46vh,0) rotate(7deg);opacity:0} }
@keyframes rain-splash { 0%,72%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--splash-scale) * .35))} 78%{opacity:.78} 100%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--splash-scale) * 1.45))} }
@keyframes gate-out { to{opacity:0;transform:scale(1.08);visibility:hidden} }
@keyframes halo-breathe { 50%{transform:scale(1.08);opacity:.72} }
@keyframes friend-float { 50%{transform:translateY(-5%) rotate(2deg)} }
@keyframes start-breathe { 50%{transform:scale(1.06);box-shadow:0 1.2vmin 0 rgba(174,126,45,.18),0 2vmin 5vmin rgba(255,217,98,.48),inset 0 .8vmin 1.2vmin rgba(255,255,255,.68)} }
@keyframes tap-ripple { from{opacity:.85;transform:translate(-50%,-50%) scale(.82)} to{opacity:0;transform:translate(-50%,-50%) scale(1.5)} }
@keyframes firefly-drift { 0%{opacity:.25;transform:translate(-50%,-50%) scale(.7)} 55%{opacity:1;transform:translate(calc(-50% + var(--drift)),-120%) scale(1.12)} 100%{opacity:.45;transform:translate(calc(-50% - var(--drift)),-20%) scale(.82)} }

@media (orientation: portrait) {
  .map-canvas { width:max(100%, calc(100dvh * 1.77778)); }
  .portal { width:clamp(82px,15.5vmin,142px); }
  .scene-canvas { background-position:var(--scene-position-portrait,var(--scene-position,center)); background-size:var(--scene-size-portrait,cover); }
  .scene-item[data-atlas="main"] { --item-size:clamp(112px,27vmin,220px); }
  .scene-item[data-atlas="monkey"] { --item-size:clamp(122px,29vmin,220px); }
  .scene-item[data-atlas="farm"] { --item-size:clamp(88px,21vmin,164px); }
  .scene-item[data-atlas="animals"] { --item-size:clamp(72px,18vmin,132px); }
  .garden-bed { width:clamp(78px,20vmin,136px); }
  .weather-choice { top:80%; }
  .gate-friends { top:45%; height:min(36vh,320px); width:min(98vw,660px); }
  .start-button { margin-top:min(39vh,330px); }
  .tap-ripple { top:calc(50% + min(19.5vh,165px)); }
}

@media (max-height: 520px) {
  .top-controls { top:7px; }
  .round-control { width:46px; }
  .word-bubble { top:62px; }
  .start-button { margin-top:49vh; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}