*{box-sizing:border-box}body{margin:0;background:#f8faf5;color:#233f37;font-family:ui-rounded,'Segoe UI',sans-serif}button,a{-webkit-tap-highlight-color:transparent}main{max-width:1120px;padding:28px 38px 20px;margin:auto}header{display:flex;align-items:center;justify-content:space-between}.brand{font-size:19px;letter-spacing:-.6px;font-weight:800;text-decoration:none;color:inherit}.brand span{margin-right:8px}.tag{font-size:14px;color:#65746c}.intro{text-align:center;margin:22px 0 20px}.eyebrow{letter-spacing:2.7px;font-size:11px;font-weight:800;color:#6b8572}h1{font-family:Georgia,serif;font-size:54px;font-weight:500;letter-spacing:-2px;margin:8px 0} .intro>p:last-child{color:#65746c;font-size:16px;margin:10px 0}#garden{height:clamp(300px,48vh,440px);position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(#c6e9ed,#e7f3e0 62%);isolation:isolate;touch-action:none;border:1px solid #d3e4d1}.sun{position:absolute;right:11%;top:20px;color:#f7c959;font-size:85px;line-height:1}.cloud{position:absolute;color:#fff9;font-size:100px;line-height:1}.cloud-one{left:15%;top:10px}.cloud-two{left:55%;top:38px;font-size:76px}.hills{position:absolute;left:-10%;width:130%;height:280px;top:160px;border-radius:50% 65% 0 0;background:#a9cd8f;transform:rotate(-5deg)}.lawn{position:absolute;left:-20%;width:140%;height:310px;top:220px;border-radius:50% 45% 0 0;background:linear-gradient(#c6dfa2,#d5e9b8)}.garden-label{position:absolute;left:25px;top:23px;font-size:12px;color:#3c665b;background:#fff7;padding:9px 12px;border-radius:20px}.garden-label span{color:#ae852d}.flowers{position:absolute;inset:0;color:#fff4ce;pointer-events:none}.flowers span{position:absolute;font-size:27px;left:10%;top:73%;text-shadow:0 2px #e0c675}.flowers span:nth-child(2){left:86%;top:69%;font-size:35px}.flowers span:nth-child(3){left:78%;top:87%;color:#fcfaf1}.flowers span:nth-child(4){left:22%;top:90%;font-size:20px}.flowers span:nth-child(5){left:92%;top:88%;font-size:19px}.flowers span:nth-child(6){left:32%;top:62%;font-size:18px}.puppy{position:absolute;width:180px;height:188px;transform:translate(-50%,-80%);z-index:3;will-change:left,top}.pet-target{width:100%;height:100%;border:0;padding:0;background:transparent;cursor:grab;touch-action:none;border-radius:50%}.dog{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 2px #626d2310)}.tail{transform-origin:178px 196px;animation:wag .65s ease-in-out infinite alternate}.head{transform-origin:122px 140px;animation:tilt 3s ease-in-out infinite alternate}.speech{position:absolute;left:50%;bottom:106%;transform:translateX(-50%);white-space:nowrap;border-radius:18px;padding:12px 17px;background:#fff;box-shadow:0 4px 0 #456c4810;font-size:15px;font-weight:600}.speech:after{content:'';position:absolute;bottom:-7px;left:48%;border-left:8px solid transparent;border-right:8px solid transparent;border-top:9px solid white}#ball{position:absolute;z-index:4;width:34px;height:34px;margin:-17px;background:radial-gradient(circle at 30% 25%,#ff9781,#ef574a 55%,#bc392e);border:0;border-radius:50%;box-shadow:0 6px 4px #60733735,inset -3px -3px 0 #a4342220;cursor:grab;touch-action:none}#ball:active{cursor:grabbing}.garden-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#4d6b40;font-size:13px;pointer-events:none}.controls{display:flex;justify-content:center;gap:12px;margin:23px 0 0}.action{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 23px;background:#fff;border:1px solid #dae2d7;border-radius:14px;color:#2a493c;font:600 15px 'Segoe UI',sans-serif;cursor:pointer;transition:transform .15s,box-shadow .15s;min-height:48px}.action:hover{transform:translateY(-2px);box-shadow:0 4px 10px #38544212}.action:active{transform:translateY(1px)}.action.primary{background:#284f40;color:#fff;border-color:#284f40}.action>span{font-size:23px;line-height:18px}.tiny-ball{width:16px;height:16px;border-radius:50%;background:#f47a67;box-shadow:inset -3px -3px #d75948}.status{text-align:center;font-size:14px;color:#627763;min-height:21px;margin:16px 0 27px}footer{border-top:1px solid #e2e7dd;padding-top:18px;font-size:12px;color:#7b897c;display:flex;justify-content:space-between}.heart{position:absolute;z-index:6;font-size:27px;color:#eb7184;pointer-events:none;animation:float 1.1s ease-out forwards}.running .dog-body{animation:run .22s ease-in-out infinite alternate}.happy .head{animation:tilt .25s ease-in-out infinite alternate}.happy .tail,.running .tail{animation-duration:.12s}.happy .eye{transform:scaleY(.6);transform-box:fill-box;transform-origin:center}button:focus-visible,a:focus-visible{outline:3px solid #176c9a;outline-offset:5px}@keyframes wag{from{transform:rotate(-12deg)}to{transform:rotate(17deg)}}@keyframes tilt{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}@keyframes run{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-10px) rotate(3deg)}}@keyframes float{to{transform:translateY(-80px) rotate(15deg);opacity:0}}@media(max-width:600px){main{padding:20px 16px}.tag{display:none}.intro{margin:28px 0 22px}h1{font-size:44px}.intro>p:last-child{font-size:14px}#garden{height:360px}.puppy{width:145px;height:152px}.controls{gap:8px}.action{padding:12px 10px;font-size:13px;flex:1;gap:5px}.action>span{font-size:19px}.garden-label{left:15px;font-size:11px}.sun{right:6%;top:55px;font-size:65px}.cloud-one{left:8%;top:55px}.cloud-two{left:50%;top:85px}footer{font-size:11px}footer span{display:none}.speech{font-size:13px;padding:11px 13px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.heart{opacity:0}}

.dog-name{position:absolute;top:95%;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:#3b573c}@media(max-width:600px){.puppy{width:120px;height:125px}.speech{font-size:12px;max-width:132px;white-space:normal;text-align:center;padding:9px 10px}h1{font-size:38px}}
.voice-controls{display:flex;justify-content:center;gap:8px;margin-top:10px;flex-wrap:wrap}.voice-controls .action{min-height:40px;padding:8px 14px;font-size:13px}.sound-toggle{background:#eef3ea}.sound-toggle:disabled{opacity:.7;cursor:default}
.puppy-pass{margin:10px auto 0;background:#fff5df;border-color:#ead5a3}
.stop-play{margin:10px auto;background:#b73338;color:white;border:2px solid #982329;font-size:19px;min-width:180px;min-height:52px}.stopped *{animation-play-state:paused!important}.puppy{width:160px;height:167px}@media(max-width:600px){.puppy{width:96px;height:100px}.speech{max-width:96px;min-width:80px;padding:7px 5px;font-size:11px}h1{font-size:32px}}
.play-ball{position:absolute;z-index:4;width:34px;height:34px;margin:-17px;border:0;border-radius:50%;box-shadow:0 6px 4px #60733735;cursor:grab;touch-action:none}#ball-1{background:radial-gradient(circle at 30% 25%,#a7e987,#44a360 55%,#227544)}#ball-2{background:radial-gradient(circle at 30% 25%,#a1dfff,#438dde 55%,#24559c)}
.game-controls{display:flex;justify-content:center;gap:12px;margin-top:10px}.game-controls .action{margin:0}.intro{margin:15px 0}#garden{height:clamp(300px,42vh,400px)}.voice-controls{margin-top:10px}@media(max-width:600px){.stop-play{min-width:130px}.game-controls{gap:8px}}
.garden-hint{margin:0;bottom:5px;font-size:12px}
#garden{height:390px}.puppy{width:120px;height:125px}.speech{font-size:12px;padding:7px 10px;bottom:103%}.intro{margin:10px 0}.intro h1{font-size:40px;margin:5px 0}.intro .eyebrow{margin:7px 0}.controls{margin-top:12px}.voice-controls .action{padding:8px 10px}.game-controls{position:sticky;bottom:8px;z-index:10;background:#f8faf5ee;border-radius:16px;padding:7px;width:fit-content;margin:8px auto}#ball-3{background:radial-gradient(circle at 30% 25%,#ffc1dc,#e668a0 55%,#a42f69)}#ball-4{background:radial-gradient(circle at 30% 25%,#ffe49a,#efa23e 55%,#b96a22)}#ball-5{background:radial-gradient(circle at 30% 25%,#d6bdff,#9970df 55%,#61459c)}@media(max-width:600px){#garden{height:410px}.puppy{width:90px;height:94px}.speech{font-size:11px;max-width:91px;min-width:75px}main{padding:14px 10px}.intro h1{font-size:32px}.voice-controls{gap:6px}.voice-controls .action{flex:0 1 30%;font-size:12px;padding:8px 5px}.sun{top:10px}}
.puppy{width:105px;height:110px}@media(max-width:600px){.puppy{width:90px;height:94px}}
.hills{top:80px}.lawn{top:130px}
.intro>p.byline{display:inline-flex;align-items:center;gap:6px;color:#3c665b;background:#e7f3e0;border:1px solid #cfe3c9;border-radius:999px;padding:7px 15px;margin:14px 0 0;font-size:13px;font-weight:600;letter-spacing:.2px}.intro>p.byline strong{color:#284f40;font-weight:800}footer strong{color:#3b573c;font-weight:800}@media(max-width:600px){.intro>p.byline{font-size:12px;padding:6px 12px;margin:10px 0 0}}
.food-bowl{position:absolute;z-index:5;transform:translate(-50%,-50%);width:43px;height:21px;border-radius:5px 5px 15px 15px;background:#5f9fbe;border:3px solid #e5f4f8;border-top:6px solid #776048;box-shadow:0 3px 2px #315b3420;text-align:center;color:#b18b58}.food-bowl span{position:relative;top:-16px;letter-spacing:1px;font-size:17px}.food-bowl[hidden]{display:none}.eating .head{animation:nibble .4s ease-in-out infinite alternate;transform-origin:122px 140px}@keyframes nibble{from{transform:translateY(4px) rotate(-5deg)}to{transform:translateY(16px) rotate(5deg)}}.controls{flex-wrap:wrap}@media(max-width:600px){.controls .action{flex:1 1 40%}.food-bowl{width:32px;height:18px}}
.asleep .tail,.asleep .head{animation:none!important}.asleep .head{transform:rotate(10deg) translateY(8px)}.asleep .dog-body{transform:translateY(17px) scaleY(.82);transform-origin:center bottom;animation:none!important}.asleep .eye{transform:scaleY(.12);transform-box:fill-box;transform-origin:center}.asleep .head>circle,.asleep .tongue{visibility:hidden}.asleep .speech{background:#e9effb;color:#566986;letter-spacing:2px}.asleep .speech:after{border-top-color:#e9effb}#sleep[aria-pressed=true]{background:#e9effb;border-color:#b6c8e6;color:#324f7d}.sleeping .dog{filter:drop-shadow(0 3px 2px #626d2310)}
/* A cozy indoor home around the existing play surface. */
body{background:#fcf8f2;color:#594638}.brand{color:#65503e}.eyebrow{color:#967650}.intro>p:last-child{color:#8b7967}
#garden.puppy-room{background:repeating-linear-gradient(90deg,#f7e9d5 0,#f7e9d5 23px,#f3e2c9 24px,#f3e2c9 26px);border:1px solid #dfccb4;box-shadow:inset 0 0 35px #bb895318}
.room-floor{position:absolute;top:103px;bottom:0;left:0;right:0;border-top:10px solid #fdf4e6;box-shadow:0 -3px 0 #c6aa87;background:repeating-linear-gradient(0deg,transparent 0,transparent 45px,#ba8e6233 46px,#ba8e6233 48px),linear-gradient(110deg,#dcb88e,#efcfaa 60%,#dcb58a)}
.room-rug{position:absolute;left:10%;right:10%;top:124px;bottom:12px;border-radius:48% 48% 35% 35%;background:repeating-radial-gradient(ellipse at center,#f2dcae 0,#f2dcae 12px,#ead09d 13px,#ead09d 15px);border:10px solid #debb86;box-shadow:0 6px 0 #b78c5b24,inset 0 0 0 4px #fae8c4}
.room-window{position:absolute;right:8%;top:12px;width:95px;height:73px;border:7px solid #fff9ee;border-radius:45px 45px 4px 4px;background:linear-gradient(#b8dde6,#e5f4f5);box-shadow:0 4px 0 #bda17b44;overflow:hidden}.room-window:before{content:'';position:absolute;width:5px;height:100%;left:47%;background:#fff9ee}.room-window:after{content:'';position:absolute;left:0;right:0;height:5px;top:49%;background:#fff9ee}.room-window span{position:absolute;right:8px;top:3px;font-size:28px;color:#ecc56c}
.room-shelf{position:absolute;top:31px;left:42%;width:150px;display:flex;justify-content:space-around;border-bottom:8px solid #bd9367;border-radius:4px;font-size:25px;line-height:35px;box-shadow:0 3px 0 #946b4322}
.room-cushion{position:absolute;top:72%;width:62px;height:45px;border-radius:18px;border:4px solid #d89c90;background:#efb5a6;box-shadow:0 4px 0 #aa785733;color:#fff0df;text-align:center;line-height:35px;font-size:24px;transform:rotate(-12deg)}.cushion-left{left:2%}.cushion-right{right:2%;transform:rotate(13deg);background:#b5c7c2;border-color:#92b0a7;font-size:21px}
.puppy-room .garden-label{background:#fff7e9d9;color:#8c6c4d;top:20px}.puppy-room .garden-hint{color:#886749}.puppy-room .dog-name{color:#725237}.game-controls{background:#fcf8f2ee}.status{color:#87745e}
@media(max-width:600px){.room-window{width:63px;height:59px;right:5%;top:20px}.room-shelf{width:90px;left:39%;top:36px;font-size:19px;line-height:25px}.puppy-room .garden-label{font-size:10px;left:10px;top:12px;padding:7px 9px}.room-cushion{width:33px;height:32px;font-size:16px;line-height:23px;border-width:3px}.room-rug{left:5%;right:5%;border-width:7px}.cushion-left{left:0}.cushion-right{right:0}}
/* Lit 3D puppy models replace the drawing without changing hit targets. */
.puppy-3d{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 3px 2px #63451c18)}.has-3d .pet-target>.dog{display:none}.puppy{width:124px;height:130px}.has-3d .pet-target{overflow:visible}.asleep .puppy-3d{filter:drop-shadow(0 2px 2px #63451c18)}
#ball,#ball-1,#ball-2,#ball-3,#ball-4,#ball-5{background:radial-gradient(circle at 30% 25%,#ffaaa0,#e34c43 55%,#a92626);box-shadow:0 6px 4px #73502f35,inset -3px -3px 0 #a4342220}
@media(max-width:600px){.puppy{width:96px;height:101px}}