@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&display=swap');
:root{--ink:#263d32;--paper:#fff5de;--blue:#39a9f5;--round:'Fredoka','Arial Rounded MT Bold',sans-serif;--body:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--blue);color:var(--ink);font-family:var(--body)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #ffdc66;outline-offset:5px}a{color:inherit}[hidden]{display:none!important}#app{height:100dvh;min-height:360px;position:relative;isolation:isolate}.topbar{position:absolute;z-index:10;top:0;left:0;right:0;padding:26px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}.topbar>*{pointer-events:auto}.wordmark{font-family:var(--round);font-size:57px;line-height:1;font-weight:700;letter-spacing:-3px;color:white;background:none;padding:0;transform:rotate(-4deg)}.wordmark span{font:12px var(--body);vertical-align:top;letter-spacing:0;margin-left:5px}.top-center{font-size:10px;font-weight:700;letter-spacing:1.6px;color:white}nav{display:flex;gap:10px;align-items:center}.nav-button,.icon-button{height:42px;border-radius:100px;background:var(--paper);display:flex;align-items:center;gap:9px;padding:0 17px;font-size:12px;font-weight:700}.icon-button{width:42px;padding:10px}.nav-button svg,.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.join{height:43px;display:flex;align-items:center;gap:20px;background:#ffdc66;color:#493b20;border-radius:7px 11px 8px 10px;padding:0 18px;text-decoration:none;font-size:12px;font-weight:700;box-shadow:2px 3px 0 #243e5830;transform:rotate(-2deg)}.join:hover{transform:rotate(1deg)}.world{position:absolute;inset:0 0 54px;overflow:hidden;touch-action:none;background:var(--blue)}#world{position:absolute;left:0;top:0;will-change:transform;user-select:none}.garden{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hotspot{position:absolute;background:transparent;padding:0;border-radius:35%;outline:none!important}.hotspot span{position:absolute;left:50%;top:0;transform:translate(-50%,-110%);background:var(--paper);padding:9px 13px;border-radius:8px;font:500 15px var(--round);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}.hotspot:hover span,.hotspot:focus-visible span{opacity:1}.hotspot:focus-visible{box-shadow:0 0 0 3px #ffdc66}.house{left:1%;top:35%;width:26%;height:35%}.mailbox{left:27%;top:30%;width:15%;height:30%}.bowl{left:10%;top:68%;width:12%;height:11%}.ball{left:22%;top:69%;width:7%;height:12%}.cat{left:64%;top:14%;width:14%;height:25%}.pack{left:84%;top:30%;width:16%;height:34%}.bone{position:absolute;padding:0;background:none;font-size:30px;line-height:1;transform:translate(-50%,-50%) rotate(var(--turn));filter:sepia(.2);transition:opacity .2s}.bone:hover{transform:translate(-50%,-50%) rotate(var(--turn)) scale(1.2)}.collected{visibility:hidden;pointer-events:none}#dog{position:absolute;left:60%;bottom:12%;width:26%;height:34%;transform:translateX(-50%);background:none;padding:0;outline:none;cursor:pointer;z-index:3}.sprite{display:block;position:absolute;inset:0}.sprite img{position:absolute;width:100%;height:100%;inset:0;object-fit:contain;pointer-events:none}.idle{width:90%;left:5%;transform-origin:50% 100%;animation:breathe 2.6s ease-in-out infinite}.walk{display:none}.walk img{visibility:hidden}#dog.walking .idle{display:none}#dog.walking .walk{display:block}#dog.facing-left .walk{transform:scaleX(-1)}.shadow{position:absolute;left:11%;right:11%;bottom:0;height:8%;border-radius:50%;background:#24522922}body.keyboard-nav #dog:focus .shadow{outline:3px solid #ffdf72;outline-offset:5px}#dog.happy .idle{animation:happy .24s ease-in-out 4 alternate}#hearts{position:absolute;inset:0;pointer-events:none}#hearts i{position:absolute;bottom:65%;color:#f33b5c;font:40px var(--round);animation:heart 1.1s ease-out forwards;left:var(--x)}#destination{position:absolute;top:86%;width:25px;height:12px;border:2px solid #fff6c9;border-radius:50%;opacity:0;transform:translateX(-50%)}#destination.show{animation:destination .7s ease-out}#speech{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:15px;background:var(--paper);box-shadow:3px 4px 0 #194a3330;border-radius:14px 14px 14px 3px;padding:12px 16px 12px 21px;max-width:90%;width:max-content;font:500 16px var(--round);transition:opacity .15s;z-index:5}#speech.hidden{opacity:0;pointer-events:none}#speech button{background:none;padding:0;font-size:21px;color:#778365}.gamebar{height:54px;position:absolute;bottom:0;inset-inline:0;background:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:20px;font-size:11px}.gamebar button{background:none;display:flex;align-items:center;gap:10px;font-size:12px}.bone-note,.chapter{font-size:9px;letter-spacing:1px;font-weight:700}.controls-hint{color:#6d775f}.mobile-hint{display:none}.pan-arrow{display:none;position:absolute;top:54%;z-index:6;background:var(--paper);width:38px;height:38px;border-radius:50%;font-size:24px;box-shadow:2px 3px 0 #284b3320}.pan-left{left:12px}.pan-right{right:12px}#map{position:absolute;z-index:20;right:25px;top:88px;width:370px;background:var(--paper);border:2px solid #526748;border-radius:13px;box-shadow:7px 9px 0 #33482f25;padding:23px;max-height:calc(100dvh - 160px);overflow:auto}.map-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.4px;font-weight:700}.map-top button{font-size:25px;background:none}h2{font:500 32px/1.05 var(--round);margin:12px 0 22px}.map-routes{display:grid;gap:8px}.map-routes button{text-align:left;background:#f0e6cb;border:1px solid #d6ccad;border-radius:7px;padding:11px 15px;display:grid;gap:3px}.map-routes strong{font:500 20px var(--round)}.map-routes small{font-size:11px;color:#65715b}
dialog{background:#faf3dd;color:var(--ink);border:2px solid #526748;border-radius:15px 19px 17px 12px;padding:38px;width:min(560px,calc(100% - 36px));max-height:85dvh;box-shadow:9px 12px 0 #253d3440;overflow:auto}dialog::backdrop{background:#1f372966;backdrop-filter:blur(5px)}.close{position:absolute;right:15px;top:10px;background:none;font-size:29px;color:#687259}.panel-kicker{font-size:10px;letter-spacing:2px;font-weight:700;color:#6c795e}.panel-title{font:600 45px/1.04 var(--round);letter-spacing:-1px;margin:13px 0 23px;color:#285fc1}dialog p{font-size:14px;line-height:1.7;color:#56634c}dialog p.lead{font:400 21px/1.4 var(--round);color:#374c37}dialog a:not(.action){text-decoration-color:#9bb092;text-underline-offset:3px}.panel-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.action{border:1px solid #294e8f;background:#2c61bc;color:#fff8df;border-radius:7px;padding:12px 17px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;cursor:pointer}.action.secondary{background:transparent;color:#3b5940;border-color:#a8b293}.small-note{font-size:10px!important;line-height:1.6!important;color:#80856e!important;margin-top:22px!important}.timeline{border-left:2px solid #c5cba6;padding-left:20px;margin:25px 0}.timeline p{position:relative;font-size:13px;margin:0 0 21px}.timeline p:before{content:'';position:absolute;left:-26px;top:6px;width:9px;height:9px;background:#6a8a5b;border:1px solid #faf3dd;border-radius:50%}.timeline strong{display:block;font:500 18px var(--round);color:#354c37;margin-bottom:4px}.contract{background:#eee6cb;border:1px dashed #b2b595;padding:13px;font:11px/1.7 monospace;word-break:break-all;border-radius:6px}.contract-label{font-size:10px;font-weight:700;letter-spacing:1px;margin:22px 0 8px}video{width:100%;border-radius:9px;display:block;margin-top:20px;background:#2359b5}.passport-art{width:120px;height:100px;display:block;margin:auto}.passport-score{text-align:center;font:600 29px var(--round);color:#345a40}.passport-stamps{display:flex;justify-content:center;gap:14px;margin:20px 0}.stamp{width:60px;height:60px;display:grid;place-items:center;border:2px dashed #c2c5a5;border-radius:50%;font-size:25px;color:#b6bc9b}.stamp.found{background:#e5d095;color:#7b6038;border:2px solid #9b824b;transform:rotate(-12deg)}#toast{position:absolute;z-index:50;bottom:80px;left:50%;transform:translate(-50%,20px);padding:13px 23px;background:#2b523a;color:#fff7df;border-radius:8px;opacity:0;pointer-events:none;transition:.25s;font-size:13px;text-align:center;max-width:90%;width:max-content}#toast.show{transform:translate(-50%,0);opacity:1}
@keyframes breathe{50%{transform:scaleY(1.012)}}@keyframes happy{to{transform:translateY(-5px) rotate(-2deg)}}@keyframes heart{to{transform:translateY(-80px);opacity:0}}@keyframes destination{0%{opacity:1}100%{opacity:0;scale:1.8}}
@media(max-width:950px){.top-center{display:none}.topbar{padding:22px}.controls-hint{display:none}.pan-arrow{display:block}}
@media(max-width:600px){.topbar{padding:20px 17px;gap:10px}.wordmark{font-size:39px}nav{gap:7px}.nav-button{padding:0 10px;height:36px}.nav-button span{display:none}.icon-button{width:36px;height:36px;padding:8px}.join{font-size:10px;height:36px;padding:0 11px;gap:8px}.gamebar{padding:0 15px;gap:10px}.chapter,.bone-note{display:none}.mobile-hint{display:inline;font-size:10px}#speech{font-size:14px;bottom:25px}#map{width:calc(100% - 34px);right:17px;top:77px}dialog{padding:30px 24px}.panel-title{font-size:39px}.hotspot span{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.wordmark{-webkit-text-stroke:5px #0965EF;paint-order:stroke fill}.world{background:linear-gradient(#0965EF 0 60%,#78BD46 60%)}.ball{left:22.13%;top:69.08%;width:5.98%;height:10.63%;z-index:2}.ball img{width:100%;height:100%;pointer-events:none}.ball span{z-index:4}

.ball{z-index:2}.bone{z-index:4;width:48px;height:28px}.bone svg{width:100%;height:100%}.gamebar svg{width:26px;height:17px}

/* Separate scene planes keep foliage in front of the character. */
.sky-layer,.cat-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cat-layer{z-index:1}.foreground-leaves{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.hotspot{z-index:2}.ball{z-index:2}.hotspot::after{content:'';position:absolute;right:6%;top:9%;width:11px;height:11px;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);background:#fff4be;filter:drop-shadow(0 0 3px #fff0a3);opacity:.75;animation:hint-glint 4.8s ease-in-out infinite;pointer-events:none}.hotspot:hover::after,.hotspot:focus-visible::after{opacity:1;scale:1.4}.mailbox::after{animation-delay:-1.1s}.bowl::after{animation-delay:-2.4s}.cat::after{animation-delay:-3.5s;right:24%;top:22%}.pack::after{animation-delay:-.7s}.house::after{right:25%;top:25%}.hotspot:focus-visible{box-shadow:none}.hotspot span{z-index:7;transition:opacity .15s,translate .15s}.hotspot:hover span{translate:0 -3px}
.cloud-a{animation:cloud-drift-a 60s linear infinite}.cloud-b{animation:cloud-drift-b 80s linear infinite}
.tree{transform-box:view-box;transform-origin:50% 385px;animation:wind 7.8s ease-in-out infinite alternate}.tree-a{transform-origin:130px 390px;animation-delay:-2.1s}.tree-b{transform-origin:390px 390px;animation-delay:-4.2s}.tree-c{transform-origin:730px 400px;animation-delay:-1.3s}.tree-d{transform-origin:1020px 400px;animation-delay:-3.2s}.tree-e{transform-origin:1550px 400px;animation-delay:-5.3s}
.cat-upper-lid{animation:cat-blink-top 6.3s infinite}.cat-lower-lid{animation:cat-blink-bottom 6.3s infinite}.cat-brow{animation:cat-blink-brow 6.3s infinite}.cat-band-tails{transform-origin:235px 350px;animation:ribbon-wind 4.7s ease-in-out infinite alternate}
#world:has(.cat:hover) .living-cat{filter:drop-shadow(0 0 3px #fff1be88)}
@keyframes hint-glint{0%,65%,100%{opacity:.45;transform:scale(.85)}78%{opacity:.9;transform:scale(1.15)}}
@keyframes cloud-drift-a{from{transform:translateX(0)}to{transform:translateX(2000px)}}
@keyframes cloud-drift-b{from{transform:translateX(0)}to{transform:translateX(2000px)}}
@keyframes wind{from{transform:rotate(-.65deg) skewX(-.3deg)}to{transform:rotate(.65deg) skewX(.35deg)}}
@keyframes ribbon-wind{to{transform:rotate(2deg)}}
@keyframes cat-blink-top{0%,47%,51%,100%{transform:translateY(0)}48.5%,49.2%{transform:translateY(var(--close-top,53px))}}
@keyframes cat-blink-bottom{0%,47%,51%,100%{transform:translateY(0)}48.5%,49.2%{transform:translateY(var(--close-bottom,-45px))}}
@keyframes cat-blink-brow{0%,47%,51%,100%{opacity:1}48%,50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sky-layer *,.cat-layer *,.hotspot::after{animation:none!important}}

.cat-lid-seam{opacity:0;animation:cat-lid-seam 6.3s infinite}@keyframes cat-lid-seam{0%,47.5%,50%,100%{opacity:0}48.4%,49.4%{opacity:1}}

.bone{z-index:2}.cat span{top:100%;transform:translate(-50%,0)}

.world{overflow:clip}

.top-center{text-shadow:0 0 2px #39a9f5,0 0 4px #39a9f5}

/* Scene 4: hand-drawn props, reference-faithful cat and visible interaction cues. */
.top-center{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.wordmark{display:flex;align-items:center;gap:2px}.wordmark span{font:600 .68em var(--round);letter-spacing:-2px;margin:0 2px 0 0;align-self:center}
.props-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.ball,.ball svg{z-index:2}.ball svg{width:100%;height:100%;display:block;pointer-events:none}
.mailbox{top:29%;height:34%}.mailbox span,.bowl span{opacity:1;font-size:12px;font-weight:500;padding:6px 10px;box-shadow:0 2px 0 #805a2b28}
.mailbox span{top:54%;transform:translate(-50%,0)}.bowl span{top:100%;transform:translate(-50%,0)}
.mailbox::after,.bowl::after{width:16px;height:16px;opacity:1;background:#fff5b1}.mailbox::after{right:11%;top:8%}.bowl::after{right:0;top:8%}
.mail-door{will-change:transform}
.mail-envelope{transform:translateY(0);transition:transform .4s .12s}
.mail-flag{transform-origin:584px 350px;transition:transform .4s}
.lore-open .mail-envelope{transform:translateY(0)}.lore-open .mail-flag{transform:rotate(-14deg)}
#world:has(.mailbox:hover) .lore-prop,#world:has(.mailbox:focus-visible) .lore-prop,#world:has(.bowl:hover) .treat-prop,#world:has(.bowl:focus-visible) .treat-prop{filter:drop-shadow(0 0 5px #fff4bfaa)}
.bowl-halo{animation:bowl-glow 3s ease-in-out infinite}
@keyframes bowl-glow{50%{opacity:.65}}
.golden-ball .ball-shell{fill:#ffc331}.golden-ball .ball-line{stroke:#fff2af}.golden-ball .ball{filter:drop-shadow(0 0 5px #ffe487)}
#passport-toggle.unlocked{color:#886008}#passport-toggle.unlocked .bone-note{font-size:10px;letter-spacing:.3px}
.reward-ball{width:92px;height:92px;border-radius:50%;margin:20px auto;background:#ffc331;box-shadow:0 0 0 7px #fff1be;position:relative;overflow:hidden;transform:rotate(-20deg)}.reward-ball:after{content:'';position:absolute;left:42px;top:-10px;width:68px;height:92px;border:7px solid #fff6cf;border-radius:50%}
.bone-confetti{position:absolute;left:var(--burst-x);top:20%;color:#fff4bd;font:40px var(--round);z-index:8;pointer-events:none;animation:bone-party 1.8s ease-out forwards}
@keyframes bone-party{0%{transform:translateY(-30px) rotate(0deg);opacity:0}15%{opacity:1}100%{transform:translateY(500px) rotate(220deg);opacity:0}}
@media(max-width:950px){.top-center{display:none}.mailbox span,.bowl span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.bowl-halo{animation:none}.mail-door,.mail-envelope,.mail-flag{transition:none}}

.sound-on{display:none}#sound-toggle[aria-pressed="true"] .sound-on{display:block}#sound-toggle[aria-pressed="true"] .sound-off{display:none}

/* All throws land on the same depth plane, behind the walking lane. */
.ball{left:23%;top:66%;width:4.6%;height:8.174%;z-index:2}
.house span{opacity:1;top:44%;left:72%;transform:translate(-50%,0);font-size:12px;font-weight:500;padding:6px 10px;box-shadow:0 2px 0 #805a2b28}



/* The standing shadow shares the artwork coordinates, so it sits under the paws. */
.idle-shadow{position:absolute;inset:0;width:90%;left:5%;height:100%;pointer-events:none}
#dog .shadow{display:none}
#dog.walking .shadow{display:block;left:16%;right:18%;bottom:1.6%;height:5%}
#dog.walking .idle-shadow{display:none}

body.keyboard-nav #dog:focus .idle-shadow ellipse{stroke:#ffdf72;stroke-width:8}



#dog[data-frame="0"] .walk img:nth-child(1),#dog[data-frame="1"] .walk img:nth-child(2),#dog[data-frame="2"] .walk img:nth-child(3),#dog[data-frame="3"] .walk img:nth-child(4){visibility:visible}