/* A small, sunny paper-cut adventure. Character drawings stay untouched. */
.idle-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
:root{--ink:#263f43;--paper:#fff5df;--navy:#244755;--coral:#e34751;--gold:#ffda72;--soft-line:#d6cbb0}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.ui-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}use[href="#i-paw"]{fill:currentColor;stroke:none}
button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #fff4b5;outline-offset:5px}
.topbar{padding:25px 32px;gap:18px}.wordmark{font-size:57px;-webkit-text-stroke:5px #2583c6;filter:drop-shadow(0 3px 0 #1e74b080);transition:transform .2s}.wordmark:hover{transform:rotate(-7deg) translateY(-2px)}.wordmark:active{transform:rotate(-3deg) translateY(1px)}
.top-center{color:#205a77;text-shadow:none;font:600 12px var(--round);letter-spacing:.4px;top:34px;text-align:center}.top-center small{display:block;font:700 8px var(--body);letter-spacing:2.3px;margin-top:6px;opacity:.66}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ffe7a0;margin-right:7px;vertical-align:1px}
nav{gap:9px}.nav-button,.icon-button,.join{border:1.5px solid #244755;box-shadow:0 3px 0 #244755;font-family:var(--round);font-size:14px;font-weight:500;transition:transform .16s,box-shadow .16s,background .16s}.nav-button{height:42px;padding:0 18px}.icon-button{height:42px;width:42px}.join{height:43px;padding:0 20px;border-radius:12px;transform:rotate(-2deg);gap:22px;background:#ffda72}.join span{font-size:21px;line-height:1}.nav-button:hover,.icon-button:hover{transform:translateY(-2px);background:#fffbee;box-shadow:0 5px 0 #244755}.join:hover{transform:rotate(0) translateY(-2px);box-shadow:0 5px 0 #244755}.nav-button:active,.icon-button:active,.join:active{transform:translateY(3px);box-shadow:0 0 0 #244755}
.world{bottom:60px;background:linear-gradient(#52b6f3 0 62%,#8bc653 62%)}
.hotspot .object-label{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 7px 7px 11px;border:1.3px solid #34534b;border-radius:100px;background:#fff4d9;color:#304d44;font:500 12px var(--round);box-shadow:0 3px 0 #34534b;line-height:1;min-height:31px;transition:translate .18s,box-shadow .18s,background .18s;white-space:nowrap}.object-label .ui-icon{width:16px;height:16px;stroke-width:1.8}.object-label b{border-radius:50%;display:grid;place-items:center;width:19px;height:19px;background:#f6ce70;color:#4b4931;font:500 15px var(--round);margin-left:3px}.house .object-label{top:59%;left:75%}.mailbox .object-label{top:56%;left:49%}.bowl .object-label{top:98%;left:90%;background:#274f67;color:#fff5df;border-color:#193b4c;box-shadow:0 3px 0 #193b4c}.bowl .object-label b{background:#ffdc7b}.cat .object-label{top:100%;padding:8px 9px 8px 12px}.pack .object-label{top:48%;left:50%;transform:translate(-50%,0)}.hotspot:hover .object-label,.hotspot:focus-visible .object-label{translate:0 -4px;box-shadow:0 5px 0 #34534b}.hotspot:active .object-label{translate:0 0;box-shadow:0 1px 0 #34534b}.hotspot:focus-visible .object-label{outline:3px solid #fff3ac;outline-offset:4px}.hotspot::after{width:10px;height:10px;filter:none}.mailbox::after{width:13px;height:13px}.bowl::after{width:13px;height:13px}.house::after{top:17%;right:29%}
#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 2px 1px #29463b40)}
.pack-prop{transform-origin:1518px 430px;transition:transform .25s}#world:has(.pack:hover) .pack-prop{transform:rotate(-1.5deg)}.treat-prop{transform-origin:270px 731px;transition:transform .2s}#world:has(.bowl:hover) .treat-prop{transform:scale(1.025)}.ball{filter:drop-shadow(0 2px 0 #59883933)}.ball:hover{filter:drop-shadow(0 0 4px #fff3c1)}.bone{filter:drop-shadow(0 2px 0 #628f3d50)}
.breeze-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden}.breeze{opacity:0}.breeze-one{animation:garden-breeze 18s linear infinite}.breeze-two{animation:garden-breeze-low 24s linear -13s infinite}.drifting-leaf{opacity:0;animation:leaf-crossing 23s linear -7s infinite}
@keyframes garden-breeze{0%,8%{transform:translate(-200px,440px);opacity:0}14%,58%{opacity:.4}68%,100%{transform:translate(1800px,370px);opacity:0}}
@keyframes garden-breeze-low{0%,20%{transform:translate(-180px,690px);opacity:0}28%,68%{opacity:.35}82%,100%{transform:translate(1780px,650px);opacity:0}}
@keyframes leaf-crossing{0%,12%{transform:translate(-40px,530px) rotate(-20deg);opacity:0}14%{opacity:.8}35%{transform:translate(460px,670px) rotate(150deg)}58%{transform:translate(1030px,590px) rotate(330deg);opacity:.8}78%{transform:translate(1760px,720px) rotate(510deg);opacity:0}100%{opacity:0}}
#speech{background:#fff7e3;border:1.5px solid #365346;border-radius:18px 18px 18px 5px;box-shadow:0 4px 0 #365346;padding:12px 15px 12px 21px;font:500 16px var(--round);bottom:24px}#speech::before{content:'';width:8px;height:8px;background:#efbb57;border-radius:50%;flex:none}#speech button{color:#5d7065}#destination{border-color:#fffbe0;box-shadow:0 0 0 3px #5f914b30}
.gamebar{height:60px;padding:0 29px;border-top:2px solid #58714d;background:#fff4db;font-family:var(--round);z-index:9}.gamebar button{gap:9px;padding:7px 9px;margin-left:-9px;border-radius:10px;transition:background .15s}.gamebar button:hover{background:#f0dfb9}.gamebar strong{font:500 15px var(--round)}.gamebar .bone-note{font:500 10px var(--round);letter-spacing:.1px;max-width:96px;line-height:1.25;text-align:left}.quest-dots{display:flex;gap:3px;margin-right:3px}.quest-dots i{width:6px;height:6px;border:1px solid #9eae7d;border-radius:50%;background:#e4e5c8}.quest-dots i.found{background:#d0a230;border-color:#ad8325}.controls-hint{font-size:12px;display:flex;align-items:center;gap:4px;color:#61705d}kbd{display:inline-grid;place-items:center;min-width:20px;height:21px;border:1px solid #a9b294;border-bottom-width:3px;border-radius:5px;background:#fff9e7;font:12px var(--body)}kbd:last-of-type{margin-right:8px}.chapter{display:flex;align-items:center;gap:8px;font:500 10px var(--round);letter-spacing:1px}.chapter i{width:6px;height:6px;border-radius:50%;background:#6e9c4c}.chapter b{border-left:1px solid #d2c9ac;padding-left:8px;font-weight:500;color:#a49f80}.pan-arrow{width:40px;height:40px;border:1.5px solid #365346;box-shadow:0 3px 0 #365346;background:#fff4db;font-size:23px}.pan-arrow:active{translate:0 2px;box-shadow:0 1px 0 #365346}
/* A field guide, not an application menu. */
#map{background:#fff6df;border:2px solid #2e5055;border-radius:20px 8px 20px 20px;padding:25px;box-shadow:6px 7px 0 #254b5570;top:91px;width:380px;animation:guide-in .22s cubic-bezier(.2,.8,.2,1)}.map-top{font-size:9px;color:#58746b}.map-top button{color:var(--navy)}#map h2{font-size:33px;color:#254c5c;margin:8px 0 24px}.map-routes{gap:9px}.map-routes button{display:grid;grid-template-columns:36px 1fr;column-gap:10px;row-gap:2px;background:#f6e9ca;border:1px solid #d7c6a1;border-radius:12px;padding:12px;transition:background .16s,translate .16s}.map-routes .ui-icon{grid-row:span 2;width:26px;height:26px;align-self:center;color:#af793c}.map-routes strong{font-size:19px;color:#2b4e54}.map-routes small{font-size:11px}.map-routes button:hover{background:#ffdc7c;translate:-2px 0}.map-routes button:focus-visible{outline-color:#2c6f8a}
@keyframes guide-in{from{opacity:0;transform:translateY(-8px) rotate(1deg)}to{opacity:1;transform:none}}
/* Illustrated keepsakes for each part of the world. */
dialog{--accent:#376c70;background:#fff7e6;border:2px solid #294b50;border-radius:24px 9px 24px 24px;padding:37px 42px 26px;width:min(620px,calc(100% - 40px));max-height:min(88dvh,850px);box-shadow:7px 9px 0 #183f4a85,0 25px 80px #142e3a30;scrollbar-width:thin;scrollbar-color:#c5c2a2 transparent;overflow:auto}
dialog[open]{animation:keepsake-in .3s cubic-bezier(.16,.85,.3,1)}dialog::backdrop{background:#183e4b80;backdrop-filter:blur(6px)}@keyframes keepsake-in{from{opacity:0;transform:translateY(24px) rotate(-1deg) scale(.97)}to{opacity:1;transform:none}}
.close{position:absolute;right:16px;top:16px;width:33px;height:33px;border:1.4px solid #345557;border-radius:50%;background:#fff9e9;display:grid;place-items:center;color:#345557;z-index:2;transition:rotate .18s,background .18s}.close .ui-icon{width:15px;height:15px;stroke-width:2}.close:hover{rotate:90deg;background:#ffdc7b}.panel-topline{display:flex;align-items:center;justify-content:space-between;padding-right:32px;min-height:72px;margin-bottom:22px;border-bottom:1.5px dashed #c4c1a0;padding-bottom:17px;gap:10px}.panel-icon{display:grid;place-items:center;width:58px;height:58px;flex:none;border:1.8px solid var(--accent);border-radius:15px;background:#edeccf;color:var(--accent);transform:rotate(-6deg);box-shadow:2px 3px 0 #d6d8b8}.panel-icon .ui-icon{width:30px;height:30px;stroke-width:1.5}.panel-postmark{font:500 10px/1.6 var(--round);letter-spacing:1.7px;text-align:right;color:#788575}.panel-postmark strong{display:block;color:var(--accent);font-weight:500}.panel-kicker{display:block;font:500 11px var(--round);letter-spacing:1.3px;color:var(--accent)}.panel-title{font:600 49px/.98 var(--round);letter-spacing:-1.7px;color:var(--accent);margin:12px 0 23px}.panel-title br{display:block}dialog p{font:400 14px/1.7 var(--body);color:#516158}dialog p.lead{font:400 22px/1.35 var(--round);color:#314d4d;margin:20px 0}.panel-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #d9cfb2;margin-top:28px;padding-top:16px;color:#8b9179;font:500 9px var(--round);letter-spacing:1.5px}.panel-footer .ui-icon{width:17px;height:17px;opacity:.6}
.panel-actions{gap:10px;margin-top:25px}.action{min-height:44px;font:500 14px var(--round);border:1.5px solid #284a51;background:var(--accent);border-radius:10px;color:#fff8e6;padding:11px 17px;box-shadow:0 3px 0 #284a51;transition:translate .16s,box-shadow .16s}.action:hover{translate:0 -2px;box-shadow:0 5px 0 #284a51}.action:active{translate:0 3px;box-shadow:none}.action.secondary{color:#365550;background:#f4e9cb;border-color:#b4b998;box-shadow:0 3px 0 #b4b998}.small-note{font-size:10px!important;color:#7b8472!important;line-height:1.6!important}.panel-footer+p{margin-bottom:0}
dialog[data-kind="story"]{--accent:#a35a3d;background:repeating-linear-gradient(0deg,transparent 0 31px,#bdaf8120 31px 32px),#fff7e6}.timeline{border-left:2px dashed #b7ba9a;padding-left:25px;margin:29px 0}.timeline p{font-size:13px;line-height:1.6;margin:0 0 23px}.timeline p::before{left:-31px;width:10px;height:10px;top:6px;border:2px solid #fff7e6;background:#b3774e;box-shadow:0 0 0 1px #b3774e}.timeline strong{font:500 21px var(--round);color:#79513c;margin-bottom:6px}
dialog[data-kind="token"]{--accent:#2e6580;background:#f2f6e9}.token-tag{border:1.5px dashed #97b4a6;background:#e2ecd9;border-radius:15px;padding:18px 20px;margin:20px 0;display:flex;justify-content:space-between;align-items:center}.token-tag b{font:600 36px var(--round);letter-spacing:-1px;color:#2d657c}.token-tag small{font:500 9px/1.7 var(--round);letter-spacing:1.5px;color:#6b8376;text-align:right}.contract{background:#274e5b;color:#fff4d7;border:0;border-radius:10px;padding:16px 17px;font:12px/1.8 monospace;box-shadow:inset 0 2px 0 #16374130}.contract-label{font:500 10px var(--round);letter-spacing:1px;color:#568078}
dialog[data-kind="rewards"]{--accent:#ba5a42;background:#fff3df}.treat-steps{display:flex;gap:5px;margin:25px 0;padding:17px 10px;border-block:1.5px dashed #d7b697;align-items:center;justify-content:space-around}.treat-steps div{text-align:center;font:500 13px var(--round);color:#8f5f43}.treat-steps svg{display:block;width:25px;height:25px;margin:0 auto 8px}.treat-steps span{color:#cb9c72;font-size:17px}
dialog[data-kind="pack"]{--accent:#35755b;background:#edf3da}.pack-ticket{background:#fff7df;border:1.5px solid #91b493;border-radius:12px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0;position:relative}.pack-ticket span{font:600 18px var(--round);letter-spacing:.5px}.pack-ticket small{display:block;font:500 9px var(--round);letter-spacing:1.5px;color:#829479;margin-top:6px}.pack-ticket .ui-icon{width:41px;height:41px;color:#c79645}
dialog[data-kind="cinema"]{--accent:#ffe2a0;background:#244550;color:#fff6dc;border-color:#142e35;width:min(680px,calc(100% - 40px))}dialog[data-kind="cinema"] .panel-topline{border-color:#668076}dialog[data-kind="cinema"] .panel-icon{background:#345b61;box-shadow:2px 3px 0 #193a44}dialog[data-kind="cinema"] .panel-postmark,dialog[data-kind="cinema"] .panel-footer,dialog[data-kind="cinema"] .small-note{color:#bdcbb4!important}dialog[data-kind="cinema"] .panel-footer{border-color:#688076}dialog[data-kind="cinema"] .panel-title{font-size:45px}dialog[data-kind="cinema"] video{background:#18323c;border-radius:12px;border:8px solid #16363e;box-shadow:0 0 0 1px #5b7c78;margin-top:25px}
dialog[data-kind="passport"]{--accent:#737b43;background:#f9f3d8}.passport-stamps{gap:18px;margin:30px 0}.stamp{width:72px;height:72px;border:2px dashed #acb894;background:#f1ebcf;color:#b0b793}.stamp.found{background:#ffe296;border:2px solid #aa914b;color:#806a2e;box-shadow:inset 0 0 0 5px #ffedb5;transform:rotate(-7deg)}.stamp .ui-icon{width:34px;height:34px}.passport-score{font:500 24px var(--round)!important;color:#737b43!important}.reward-ball{margin:30px auto}
#toast{background:#244e58;border:1.5px solid #173d46;box-shadow:0 3px 0 #173d46;border-radius:13px;font:500 14px var(--round)}
@media(min-width:1550px){.topbar{padding:32px 42px}.top-center{top:43px}.object-label{font-size:14px!important}}
@media(max-width:1050px){.top-center{display:none}.controls-hint{display:none}.topbar{padding:23px}.gamebar{padding:0 20px}.hotspot .object-label{font-size:12px}}
@media(max-width:600px){.topbar{padding:17px 15px;gap:10px}.wordmark{font-size:39px;-webkit-text-stroke:4px #2583c6}nav{gap:7px}.nav-button,.icon-button{height:36px}.nav-button{padding:0 9px}.icon-button{width:36px;padding:8px}.join{height:36px;font-size:11px;padding:0 11px;gap:12px}.join span{font-size:17px}.world{bottom:58px}.gamebar{height:58px;padding:0 14px}.gamebar button{gap:7px}.gamebar .bone-note,.chapter{display:none}.quest-dots{gap:3px}.quest-dots i{width:5px;height:5px}.mobile-hint{font-size:10px;color:#6f7b64}.gamebar strong{font-size:14px}.gamebar svg{width:23px}.object-label .ui-icon{width:14px;height:14px}.hotspot .object-label{font-size:11px;gap:5px;min-height:29px;padding:6px 6px 6px 9px}.object-label b{width:17px;height:17px;font-size:13px}#map{top:74px;right:15px;width:calc(100% - 30px);max-height:calc(100dvh - 150px);padding:22px}#map h2{font-size:31px}.map-routes button{padding:10px}.map-routes strong{font-size:18px}#speech{font-size:14px;gap:10px;padding:11px 13px;bottom:23px}dialog{padding:25px 25px 21px;width:calc(100% - 28px);max-height:88dvh;border-radius:19px 8px 19px 19px;box-shadow:4px 5px 0 #183f4a85}.panel-topline{margin-bottom:22px;padding-right:20px}.panel-icon{width:48px;height:48px;border-radius:13px}.panel-icon .ui-icon{width:26px;height:26px}.panel-postmark{font-size:8px;letter-spacing:1px}.panel-title{font-size:40px;letter-spacing:-1px}.close{right:12px;top:12px;width:29px;height:29px}dialog p.lead{font-size:20px}dialog p{font-size:13px}.panel-actions{gap:9px}.action{font-size:13px;padding:10px 13px}.token-tag{padding:14px}.token-tag b{font-size:30px}.token-tag small{font-size:8px}.contract{font-size:11px;padding:13px}.timeline{padding-left:20px}.timeline p::before{left:-26px}.timeline strong{font-size:19px}.panel-footer{font-size:8px;letter-spacing:1px}.treat-steps div{font-size:12px}dialog[data-kind="cinema"]{width:calc(100% - 28px)}dialog[data-kind="cinema"] .panel-title{font-size:37px}}
@media(max-width:380px){.topbar{padding:16px 11px}.join{padding:0 9px;gap:6px}.wordmark{font-size:35px}.quest-dots{display:none}.mobile-hint{font-size:9px}.panel-title{font-size:35px}.panel-postmark{font-size:7px}}
@media(prefers-reduced-motion:reduce){.breeze-layer{display:none}dialog[open],#map{animation:none}.pack-prop,.treat-prop{transition:none}}

/* Idle behaviours use the original drawing and the same front paws. */
.sit{display:none;width:90%;left:5%;transform-origin:50% 100%}.sit-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#dog.sitting:not(.walking) .idle{display:none}#dog.sitting:not(.walking) .sit{display:block;animation:sit-down .32s ease-out,breathe 3.4s .32s ease-in-out infinite}
#dog.settling .idle{animation:prepare-sit .26s ease-in forwards}
#dog.sitting .idle-shadow ellipse{cx:635px;cy:1103px;rx:340px}
#dog.happy .idle{animation:puppy-hop .72s ease-out 2}
#dog.happy .sit{animation:sitting-wiggle .36s ease-in-out 4}
#dog-idle-tail,#sit-idle-tail{animation:none!important;transform:none!important}
#dog.happy .dog-ear-left{transform-origin:310px 248px;animation:ear-flop-left .36s ease-in-out 4}
#dog.happy .dog-ear-right{transform-origin:680px 245px;animation:ear-flop-right .36s ease-in-out 4}
#dog.happy .idle-tongue{animation:happy-pant .3s ease-in-out infinite!important}
#dog.happy .idle-pupil{animation:none;transform:translate(-2px,-8px)}
#dog.happy .idle-shadow{animation:hop-shadow .72s ease-out 2;transform-origin:55% 95%}
#dog.happy.sitting .idle-shadow{animation:none}
@keyframes prepare-sit{to{transform:translateY(3px) scaleY(.97)}}
@keyframes sit-down{from{transform:translateY(-3px) scaleY(1.02)}to{transform:none}}
@keyframes puppy-hop{0%,100%{transform:none}12%{transform:scale(1.025,.965)}38%{transform:translateY(-12px) rotate(-2deg)}62%{transform:translateY(-2px) rotate(1deg)}77%{transform:scale(1.025,.975)}}
@keyframes sitting-wiggle{0%,100%{transform:rotate(-.7deg)}50%{transform:translateY(-3px) rotate(.7deg)}}
@keyframes hop-shadow{0%,100%{opacity:1;transform:none}38%{opacity:.65;transform:scaleX(.9)}}

@keyframes ear-flop-left{0%,100%{transform:rotate(0)}45%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}}
@keyframes ear-flop-right{0%,100%{transform:rotate(0)}45%{transform:rotate(-4deg)}75%{transform:rotate(2deg)}}
@keyframes happy-pant{50%{transform:translateY(4px) scaleY(1.06) rotate(-2deg)}}
.sun-rays{transform-origin:0 0;animation:sun-breath 4.8s ease-in-out infinite}
@keyframes sun-breath{0%,100%{transform:scale(.96) rotate(-3deg);opacity:.7}50%{transform:scale(1.12) rotate(3deg);opacity:1}}
@keyframes wind{from{transform:rotate(-.9deg) skewX(-.35deg)}to{transform:rotate(.9deg) skewX(.4deg)}}
/* Content scrolls inside the paper, keeping its close control reachable. */
#panel{padding:0;overflow:hidden}#panel-content{padding:37px 42px 26px;max-height:calc(min(88dvh,850px) - 4px);overflow:auto;scrollbar-width:thin;scrollbar-color:#c5c2a2 transparent}
@media(max-width:600px){#panel-content{padding:25px 25px 21px}}
@media(prefers-reduced-motion:reduce){#dog .sprite,#dog .sprite *,#dog .idle-shadow,.sun-rays,.tree{animation:none!important;transition:none!important}}
/* Keep the whole short film, including playback controls, in the window. */
dialog[data-kind="cinema"] #panel-content{padding-top:26px}dialog[data-kind="cinema"] .panel-topline{min-height:51px;margin-bottom:17px;padding-bottom:13px}dialog[data-kind="cinema"] .panel-icon{width:42px;height:42px;border-radius:12px}dialog[data-kind="cinema"] .panel-icon svg{width:25px;height:25px}dialog[data-kind="cinema"] .panel-title{font-size:34px;line-height:1.1;margin:11px 0 16px}dialog[data-kind="cinema"] video{width:auto;max-width:100%;height:min(44dvh,440px);object-fit:contain;margin:0 auto;border-width:6px}dialog[data-kind="cinema"] .small-note{text-align:center;margin:16px auto 0!important;max-width:430px}dialog[data-kind="cinema"] .panel-footer{display:none}

/* Labels are active hit areas even where they extend outside the illustrated prop. */
.hotspot .object-label{pointer-events:auto}.hotspot .object-label>*{pointer-events:none}
#world:has(.pack:hover) .pack-prop,.pack-prop{transform:none;transition:none}
#dog.happy .dog-ear-left,#dog.happy .dog-ear-right{animation:none;transform:none}
.dog-happy-eyes{display:none}#dog.happy .dog-happy-eyes{display:block}#dog.happy #dog-idle-eyes,#dog.happy #sit-idle-eyes{display:none}

.pack .object-label{opacity:1}
/* Let labels escape their prop's stacking level while the dog still covers the prop itself. */
@media(max-width:950px){.hotspot:has(.object-label){z-index:auto}.hotspot .object-label{z-index:8}.hotspot:has(.object-label)::after{z-index:7}}