:root { color-scheme:dark;font-family:"Trebuchet MS","Segoe UI",sans-serif;background:#29263e; }
* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden; }
button { font:inherit;cursor:pointer;touch-action:manipulation; }
button[hidden],div[hidden] { display:none !important; }
button:focus-visible { outline:3px solid #ffe2a1;outline-offset:4px; }
.game { width:100vw;height:100dvh;min-height:360px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#68576e,#29263e 75%); }
.stage { position:relative;width:min(100vw,159.88vh);max-height:100dvh;aspect-ratio:1586/992;overflow:hidden;isolation:isolate;box-shadow:0 0 90px #15182760; }
.worlds { position:absolute;inset:0;width:200%;height:100%;display:flex;transition:transform 2s cubic-bezier(.65,0,.25,1); }
.game.at-pond .worlds { transform:translateX(-50%); }
.world { position:relative;flex:0 0 50%;width:50%;height:100%;overflow:hidden; }
.backdrop { width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;user-select:none; }
.meadow-sleep { position:absolute;inset:0;opacity:0;z-index:1;transition:opacity 2.8s ease-in-out;mask-image:linear-gradient(to right,#000 0%,#000 38%,transparent 51%);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 38%,transparent 51%); }
.game.final-night .meadow-sleep { opacity:1; }
.world::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#25223732,transparent 22%,transparent 77%,#29213821); }
.light-pool { position:absolute;top:8%;left:64%;width:34%;height:50%;background:radial-gradient(ellipse,#ffd98228,transparent 65%);mix-blend-mode:screen;pointer-events:none;animation:light-pulse 7s ease-in-out infinite; }
@keyframes light-pulse { 50%{opacity:.64;transform:scale(1.045)} }
.mira-hit { position:absolute;left:8%;top:23%;width:28%;height:52%;border:0;background:transparent;z-index:2; }
.sprite { position:absolute;display:block;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;z-index:3; }
.sprite img { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;transition:opacity .95s ease,transform 1.2s ease; }
.sprite .sleep-state { opacity:0; }
.sprite.done .sleep-state { opacity:1; }
.sprite.done .awake-state { opacity:0; }
.sprite-shadow { position:absolute;left:14%;right:13%;bottom:4%;height:13%;border-radius:50%;background:#231c1a78;filter:blur(15px); }
.flower { left:41%;top:47%;width:22%;aspect-ratio:1145/1374; }
.flower-body { position:relative;display:block;width:100%;height:100%;transform-origin:50% 92%;filter:drop-shadow(5px 9px 8px #251d1b7a);animation:flower-idle 6.5s ease-in-out infinite; }
@keyframes flower-idle { 50%{transform:rotate(1.5deg)} }
.flower.waking .flower-body { animation:flower-wake 1.4s ease-in-out 2; }
@keyframes flower-wake { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-7deg)} 67%{transform:rotate(6deg)} }
.flower.done .flower-body { animation:flower-breathe 6s ease-in-out infinite; }
@keyframes flower-breathe { 50%{transform:rotate(.6deg) scale(.992)} }
.choices { position:absolute;inset:0;z-index:4;pointer-events:none; }
.art-choice { position:absolute;padding:0;border:0;background:transparent;pointer-events:auto;filter:drop-shadow(4px 8px 6px #241d1e96);animation:choice-glow 3s ease-in-out infinite; }
.art-choice img { width:100%;height:100%;object-fit:contain;pointer-events:none; }
@keyframes choice-glow { 50%{filter:brightness(1.18) drop-shadow(4px 8px 8px #241d1e9c)} }
.leaf-choice { bottom:3%;width:14%;aspect-ratio:3/2; }
.leaf-a { left:34%;transform:rotate(-19deg); }.leaf-b { left:63%;transform:scaleX(-1) rotate(-13deg);animation-delay:1s; }
.leaf-choice.fly { animation:leaf-fly .95s ease-in forwards; }
@keyframes leaf-fly { to{bottom:30%;left:49%;transform:rotate(30deg) scale(.62);opacity:0} }
.rabbit { left:76.5%;top:24%;width:22%;aspect-ratio:1145/1374;transition:left 1s ease,top 1s ease,width 1s ease; }
.rabbit.reclining { left:72.5%;top:44%;width:27%;aspect-ratio:1536/1024; }
.rabbit .rest-state { opacity:0; }
.rabbit.reclining:not(.done) .rest-state { opacity:1; }
.rabbit.reclining .awake-state { opacity:0; }
.rabbit-body { position:relative;display:block;width:100%;height:100%;filter:drop-shadow(5px 8px 7px #211b1b89);transform-origin:50% 90%;animation:rabbit-idle 5.8s ease-in-out infinite; }
@keyframes rabbit-idle { 50%{transform:translateY(-2px) rotate(.8deg)} }
.rabbit.petted .rabbit-body { animation:rabbit-nuzzle .65s ease-in-out 2; }
@keyframes rabbit-nuzzle { 50%{transform:rotate(5deg) translateY(4px)} }
.rabbit.reclining .rabbit-body { animation:rabbit-settle 1.7s ease-in-out; }
@keyframes rabbit-settle { 0%{transform:translateY(-8px) rotate(-2deg)} 58%{transform:translateY(5px) rotate(1deg)} 100%{transform:translateY(0) rotate(0)} }
.rabbit.done .rabbit-body { animation:breathing 5s ease-in-out infinite; }
@keyframes breathing { 50%{transform:scale(.993)} }
.rabbit-blanket-leaves { position:absolute;inset:0;z-index:6;pointer-events:none; }
.blanket-leaf { position:absolute;width:12%;aspect-ratio:3/2;object-fit:contain;filter:drop-shadow(4px 7px 6px #211b1b85);opacity:0; }
.blanket-leaf.one { left:73%;top:27%;transform:rotate(-35deg); }.blanket-leaf.two { left:86%;top:22%;transform:scaleX(-1) rotate(24deg); }
.rabbit-blanket-leaves.falling .one { animation:blanket-fall-one 1.35s ease-in-out forwards; }
.rabbit-blanket-leaves.falling .two { animation:blanket-fall-two 1.35s .14s ease-in-out forwards; }
@keyframes blanket-fall-one { 0%{opacity:0;top:27%;transform:translateX(-8px) rotate(-35deg)} 25%{opacity:1} 100%{opacity:1;top:59%;transform:translateX(17px) rotate(12deg)} }
@keyframes blanket-fall-two { 0%{opacity:0;top:22%;transform:scaleX(-1) translateX(8px) rotate(24deg)} 25%{opacity:1} 100%{opacity:1;top:55%;transform:scaleX(-1) translateX(-13px) rotate(-11deg)} }
.pillow-choices { z-index:5; }.pillow-choice { bottom:8%;width:14%;aspect-ratio:1536/1024; }.pillow-a { left:69%; }.pillow-b { left:84%;filter:hue-rotate(-43deg) saturate(.85) drop-shadow(4px 8px 6px #241d1e96);animation-delay:1.1s; }
.pillow-selected { position:absolute;z-index:3;left:81%;top:62%;width:14%;aspect-ratio:1536/1024;transform:rotate(-7deg);filter:drop-shadow(5px 7px 8px #1a1719aa); }.pillow-selected img { width:100%;height:100%;object-fit:contain; }.pillow-selected.peach { filter:hue-rotate(-43deg) saturate(.85) drop-shadow(5px 7px 8px #1a1719aa); }
.firefly { position:absolute;z-index:5;display:grid;place-items:center;width:6.5%;aspect-ratio:1;border:0;border-radius:50%;background:radial-gradient(circle,#ffe49b88 0%,#ffe3a544 30%,transparent 69%);filter:drop-shadow(0 0 9px #ffd777);animation:firefly-float 3.8s ease-in-out infinite;transition:left 1.5s ease-in-out,top 1.5s ease-in-out,opacity 1.4s,transform 1.4s; }
.firefly.f0 { left:62%;top:20%; }.firefly.f1 { left:67%;top:14%;animation-delay:.6s; }.firefly.f2 { left:70%;top:24%;animation-delay:1.4s; }.firefly.f3 { left:76%;top:27%;animation-delay:2.1s; }
@keyframes firefly-float { 50%{transform:translateY(-9px);filter:brightness(1.2) drop-shadow(0 0 13px #ffe4a0)} }
.firefly-core { width:24%;height:24%;border-radius:50%;background:#fff0b8;box-shadow:0 0 11px 5px #ffdd84b9; }
.firefly-wings { position:absolute;top:20%;width:45%;height:22%;border-radius:50%;border:1px solid #fff7d6a9;transform:rotate(-22deg);box-shadow:25px 9px 0 -2px #d8d4be66; }
.firefly.gathered { left:73.8% !important;top:9% !important;transform:scale(.26);opacity:.12;animation:none;pointer-events:none; }
.lantern-bloom { position:absolute;left:70%;top:3%;width:15%;height:26%;pointer-events:none;background:radial-gradient(circle,#ffdd9055,transparent 70%);mix-blend-mode:screen;opacity:.2;transition:opacity 2s; }.lantern-bloom.lit { opacity:1; }

/* Pond inhabitants sit in open areas of the second illustrated plate. */
.hedgehog { left:7%;top:50%;width:23%;aspect-ratio:1234/1274; }
.hedgehog-body { display:block;position:relative;width:100%;height:100%;filter:drop-shadow(5px 8px 8px #181414ab);transform-origin:50% 88%;animation:hedge-idle 6s ease-in-out infinite; }
@keyframes hedge-idle { 50%{transform:rotate(-1.4deg)} }
.hedgehog.done .hedgehog-body { animation:breathing 5s ease-in-out infinite; }
.hedgehog-leaves .hedge-leaf { width:12%;aspect-ratio:3/2; }.h0 { left:3%;bottom:10%;transform:rotate(-20deg) }.h1 { left:23%;bottom:6%;transform:rotate(15deg) }.h2 { left:33%;bottom:13%;transform:rotate(-15deg) }
.hedge-leaf.used { opacity:0;pointer-events:none;transition:opacity .9s,transform .9s ease-in-out; }
.hedge-leaf.h0.used { transform:translate(125%,-62%) rotate(30deg) scale(.62); }
.hedge-leaf.h1.used { transform:translate(-65%,-74%) rotate(-25deg) scale(.62); }
.hedge-leaf.h2.used { transform:translate(-120%,-65%) rotate(20deg) scale(.62); }
.bird { left:84%;top:4%;width:12%;aspect-ratio:1312/1199; }
.bird-body { position:relative;display:block;width:100%;height:100%;filter:drop-shadow(3px 5px 5px #1e1a2299);transform-origin:50% 90%;animation:bird-idle 4.8s ease-in-out infinite; }
@keyframes bird-idle { 50%{transform:rotate(2.5deg)} }
.bird.done .bird-body { animation:breathing 5s ease-in-out infinite; }
.melody-choice { position:absolute;top:25%;width:6.5%;aspect-ratio:1;border:1px solid #ffe5af9e;border-radius:50%;background:#554767c7;color:#ffeac5;font-size:clamp(25px,4vw,54px);pointer-events:auto;box-shadow:0 5px 20px #221c2e80;animation:choice-glow 3s ease-in-out infinite; }.melody-a { left:78%; }.melody-b { left:88%;animation-delay:1s; }
.snail { left:69%;top:67%;width:22%;aspect-ratio:1536/1024;transition:left 2.4s ease-in-out; }.snail.moved { left:64%; }.snail-body { display:block;position:relative;width:100%;height:100%;filter:drop-shadow(4px 8px 7px #211c1c99);transform-origin:50% 90%;animation:snail-idle 6.5s ease-in-out infinite; }
@keyframes snail-idle { 50%{transform:translateX(-3px)} }.snail.done .snail-body { animation:breathing 6s ease-in-out infinite; }
.dew { position:absolute;width:6%;aspect-ratio:1;border:0;background:transparent;pointer-events:auto; }.d0 { left:59%;top:75%; }.d1 { left:86%;top:69%; }
.dew span { display:block;width:62%;height:73%;margin:auto;border-radius:60% 60% 65% 65%;transform:rotate(30deg);background:radial-gradient(circle at 28% 25%,#fff9df,#afd6cf 37%,#6a9ba687 78%);box-shadow:0 0 14px #e7f6dfad;animation:dew-idle 3s ease-in-out infinite; }.dew.used { opacity:0;pointer-events:none;transition:opacity .6s; }
@keyframes dew-idle { 50%{transform:rotate(30deg) scale(1.13)} }
.snail-canopy { position:absolute;z-index:5;left:81%;top:72%;width:15%;aspect-ratio:3/2;border:0;background:transparent;filter:drop-shadow(3px 6px 6px #1e1a1b99);animation:choice-glow 3s ease-in-out infinite; }.snail-canopy img { width:100%;height:100%;object-fit:contain; }.snail-canopy.covered { left:65%;top:71%;transform:rotate(-22deg);animation:none;pointer-events:none;transition:left 1.3s,top 1.3s,transform 1.3s; }
.water-area { position:absolute;z-index:2;left:33%;top:53%;width:35%;height:22%;border:0;background:transparent; }.ripples { position:absolute;inset:0;z-index:3;pointer-events:none; }.ripple { position:absolute;width:10px;height:10px;border:2px solid #fff2c4c9;border-radius:50%;transform:translate(-50%,-50%);animation:ripple 1.6s ease-out forwards; }.ripple::after { content:"";position:absolute;inset:-11px;border:1px solid #e4d2c3b3;border-radius:50%; }
@keyframes ripple { to{width:110px;height:45px;opacity:0} }
.star-touch { position:absolute;z-index:4;left:38%;top:3%;width:8%;height:12%;border:0;background:transparent;color:#fff1ca;font-size:27px;text-shadow:0 0 12px #ffe8a9;opacity:.45; }.star-touch.twinkle { animation:star-twinkle 1.2s ease-in-out; }
@keyframes star-twinkle { 50%{opacity:1;transform:scale(1.35)} }

.hud { position:absolute;z-index:10;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;padding:clamp(12px,2vw,29px);pointer-events:none;color:#fff2dc;text-shadow:0 2px 11px #17172cab; }
.title { display:flex;gap:8px;font-size:clamp(13px,1.6vw,23px);font-weight:700;line-height:1.15;white-space:nowrap; }.title small { display:block;font-size:.7em;font-weight:500; }.title-star { color:#f9dba2;font-size:1.4em; }
.progress { display:flex;align-items:center;gap:3px;padding:6px 9px;border:1px solid #ffeac68a;border-radius:99px;background:#332d46a6;backdrop-filter:blur(8px); }
.progress span:not(.divider) { display:grid;place-items:center;width:clamp(24px,2.7vw,38px);height:clamp(24px,2.7vw,38px);border-radius:50%;color:#f8dfaa;opacity:.4;font-size:clamp(17px,2vw,28px);transition:opacity .7s,background .7s; }.progress span.done { opacity:1;background:#f0d18d3d; }.progress .divider { width:1px;height:24px;background:#fff0cf7a;margin:0 5px; }
.hud-actions { display:flex;gap:8px;pointer-events:auto; }.hud-actions button { display:grid;place-items:center;width:clamp(39px,4vw,55px);height:clamp(39px,4vw,55px);border:1px solid #fff0c690;border-radius:50%;background:#342d46a8;color:#fff5df;font-size:clamp(19px,2.4vw,29px);backdrop-filter:blur(7px); }
.caption { position:absolute;z-index:11;bottom:2.5%;left:50%;transform:translateX(-50%);max-width:78%;min-width:280px;min-height:48px;padding:12px 25px;border:1px solid #fff1d1a3;border-radius:99px;background:#302b42d5;color:#fff3dd;backdrop-filter:blur(8px);box-shadow:0 8px 25px #1a1b2a70;text-align:center;font-size:clamp(13px,1.5vw,21px);line-height:1.35;font-weight:700; }
.travel { position:absolute;z-index:12;right:3%;bottom:13%;min-height:48px;padding:10px 20px;border:1px solid #ffedc9c9;border-radius:99px;background:#786785df;color:#fff5e6;font-size:clamp(13px,1.4vw,19px);font-weight:700;box-shadow:0 6px 20px #211a2773; }.travel span { margin-left:8px;font-size:1.3em; }.travel.back { left:3%;right:auto; }.travel.back span { margin:0 8px 0 0; }
.overlay { position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:#211f36a9;backdrop-filter:blur(8px); }.overlay.ending { background:#1e1c35a6;animation:overlay-in 1.5s ease; }
@keyframes overlay-in { from{opacity:0}to{opacity:1} }
.card { width:min(91vw,520px);padding:clamp(24px,3.8vw,45px);border:1px solid #f7e9cda8;border-radius:30px;background:linear-gradient(145deg,#fff5e7,#efdcd7);box-shadow:0 22px 75px #191a2d9c,inset 0 0 0 6px #ffffff63;color:#5f5267;text-align:center; }.moon { display:block;color:#bd9c77;font-size:49px;line-height:1; }.eyebrow { display:block;margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9d7c87;font-weight:700; }.card h1,.card h2 { margin:14px 0 17px;font-size:clamp(28px,3vw,39px);line-height:1.18; }.card p { margin:0 auto 24px;max-width:420px;font-size:clamp(15px,1.5vw,18px);line-height:1.5; }.card small { display:block;margin-top:19px;color:#8f7886; }
.main-button { min-height:53px;padding:11px 26px;border:0;border-radius:99px;background:#8d759c;color:#fff7ed;font-size:16px;font-weight:700;box-shadow:0 5px 0 #6d5b7b; }.main-button span { margin-left:11px;color:#ffe2ae;font-size:1.3em; }.sub-button { display:block;margin:18px auto 0;padding:8px 15px;border:0;background:transparent;color:#8c6d89;text-decoration:underline; }
.game.paused .worlds,.game.paused .world * { animation-play-state:paused !important;transition-duration:0s !important; }
.game.final-night .world::before { content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:#2834514a;animation:night-fall 4s ease both; }.game.final-night .meadow::before { background:#2c31504f; }
@keyframes night-fall { from{opacity:0}to{opacity:1} }
@media (max-width:680px) and (orientation:portrait) { .stage { width:160vh;max-width:none;transform:translateX(-8%); }.hud { padding:10px; }.title { font-size:11px; }.title-star { display:none; }.progress { padding:3px;gap:0;margin-left:auto;margin-right:5px; }.progress span:not(.divider) { width:20px;height:24px;font-size:16px; }.progress .divider { margin:0 2px;height:17px; }.hud-actions { gap:3px; }.hud-actions button { width:32px;height:32px;font-size:17px; }.caption { max-width:88vw;min-width:0;padding:8px 12px;min-height:37px;font-size:11px; }.travel { bottom:12%;font-size:11px;min-height:36px;padding:7px 12px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important;transition-duration:.01ms !important; } }