*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#302317;font-family:ui-rounded,'Trebuchet MS',sans-serif;color:#593015}button{font:inherit;cursor:pointer;touch-action:manipulation}button:active{transform:scale(.96)}[hidden]{display:none!important}#app{position:relative;width:100%;height:100dvh;max-width:600px;margin:auto;overflow:hidden;background:#abcdd7;touch-action:none}canvas{width:100%;height:100%;display:block}#shade{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #4c2b111a}.screen{position:absolute;inset:0}#menu{background:#f7c77c url(assets/cover.webp) center top/cover no-repeat}#menu:after{content:'';position:absolute;inset:58% 0 0;background:linear-gradient(transparent,#56320b65 40%,#35220ee8);pointer-events:none}.introTag{position:absolute;top:28%;left:0;right:0;text-align:center;color:#fff9df;letter-spacing:2px;font-size:10px;text-shadow:0 2px 5px #5b310a}.menuBottom{position:absolute;bottom:max(90px,calc(env(safe-area-inset-bottom) + 80px));left:7%;right:7%;text-align:center;z-index:1}.record{color:#fff5db;font-size:11px;letter-spacing:1px;margin:0 0 15px}.record b{font-size:19px;margin-left:8px}.primary{width:100%;border:2px solid #fff1bd;border-radius:24px;background:linear-gradient(#fff1c8,#ffc464);box-shadow:0 5px 0 #a85d22,0 8px 22px #4b230b44,inset 0 0 0 3px #dda15b;color:#71330d;padding:18px 10px;font-weight:950;font-size:22px;letter-spacing:.5px}.menuBottom p{font-size:12px;color:#fff3d5;text-shadow:0 1px 4px #382310;margin:15px -10px 8px}.demo{font-size:9px;letter-spacing:2px;color:#f1d7aa}.icon{height:48px;min-width:48px;border-radius:17px;border:2px solid #e5b574;background:linear-gradient(#fff9e6,#ffe0a0);color:#6a3719;box-shadow:0 3px 0 #a86832;font-size:24px;font-weight:bold;display:flex;align-items:center;justify-content:center}.music{position:absolute;bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));right:22px;z-index:20;width:48px;flex-direction:column;line-height:1}.music span{position:absolute;top:55px;color:#fff4dc;text-shadow:0 1px 3px #482a14;font-size:8px;white-space:nowrap;letter-spacing:.7px}.sound{position:absolute;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));left:18px;border:1px solid #e7c39366;border-radius:20px;background:#4c301ab8;color:#ffe9bd;padding:9px 12px;font-size:9px;letter-spacing:1px;z-index:20}#hud{position:absolute;inset:0;pointer-events:none;padding:max(18px,env(safe-area-inset-top)) 14px 0}.stats{display:flex;gap:8px;align-items:center}.pill{border:2px solid #d7aa70;background:linear-gradient(#fff9ec,#ffedcc);border-radius:17px;padding:9px 14px;box-shadow:0 3px 8px #57330e25;display:flex;gap:9px;align-items:center}.pill:first-child{flex:1}.pill b{font-size:25px}.pill small{font-size:14px}.fish{font-size:24px}.stats button{pointer-events:auto}.weight{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff5dfed;border-radius:15px;margin-top:9px;border:1px solid #dbba8b;box-shadow:0 3px 10px #51331320}.weight>div{flex:1}.weightTitle{font-size:8px;font-weight:900;letter-spacing:1px;display:flex;justify-content:space-between;margin-bottom:5px}.weightTitle b{font-size:7px;letter-spacing:.5px;color:#a16c35}.track{height:9px;border-radius:8px;background:#d9bb8f;overflow:hidden;box-shadow:inset 0 1px 3px #7a542c40}.track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f8c647,#f18a1b);border-radius:8px;transition:width .2s}.zone{margin:12px auto;width:fit-content;font-size:9px;font-weight:bold;letter-spacing:1.5px;color:#fff6dc;background:#4f3c28a8;padding:7px 12px;border-radius:20px}#tip{position:absolute;bottom:120px;left:5%;right:5%;text-align:center;color:#fff8e7;background:#42321caa;padding:12px 7px;border-radius:16px;font-size:12px;transition:opacity 1s}#popup{position:absolute;top:calc(100% + 2px);left:0;right:0;text-align:center;font-size:22px;line-height:26px;color:#fff0bb;font-weight:900;text-shadow:0 3px 0 #a06123;opacity:0}.overlay{background:#34271988;backdrop-filter:blur(7px);display:grid;place-items:center;z-index:10;padding:24px}.card{width:100%;background:#fff3d9;border:2px solid #d4a267;border-radius:28px;padding:30px 23px;text-align:center;box-shadow:0 15px 60px #35200c55}.eyebrow{font-size:9px;letter-spacing:2px;color:#a07847}h1{font-size:36px;margin:12px 0}.card p{line-height:1.5;font-size:14px;color:#926b47}.secondary{border:0;background:transparent;color:#936c45;padding:19px 0 0;font-size:13px}.resultRow{display:flex;justify-content:space-around;margin:22px 0}.resultRow b{display:block;font-size:30px}.resultRow span{font-size:10px;letter-spacing:1px}#loading{position:absolute;inset:0;background:#fff0d2;display:grid;place-items:center;z-index:30;font-size:17px} @media(min-width:650px){#app{box-shadow:0 0 100px #0009}.menuBottom{bottom:95px}}
#menu{animation:arrival .9s ease-out both}#menu .primary{animation:beckon 2.8s ease-in-out infinite}#menu:before{content:'✦';position:absolute;top:49%;right:24%;color:#ffe9a1;font-size:22px;filter:drop-shadow(0 0 8px #fff0a0);animation:spark 3s ease-in-out infinite}.introTag{animation:breathe 4s ease-in-out infinite}@keyframes arrival{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}@keyframes beckon{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}@keyframes spark{0%,100%{opacity:.2;transform:translateY(0) scale(.6)}50%{opacity:1;transform:translateY(-14px) scale(1)}}@keyframes breathe{50%{opacity:.65}}@media(prefers-reduced-motion:reduce){#menu,#menu:before,#menu .primary,.introTag{animation:none}}

.notices{position:relative;display:flow-root}.notices .zone{margin-bottom:0}#popup{pointer-events:none;z-index:2}
.inspectLink{display:block;margin:7px auto 10px;border:0;background:none;color:#fff2d4;text-decoration:underline;text-underline-offset:4px;font-size:12px;padding:6px}.modelTitle{position:absolute;top:max(32px,env(safe-area-inset-top));left:0;right:0;text-align:center;font-size:27px;font-weight:900;letter-spacing:2px;color:#694525}.modelTitle small{display:block;font-size:8px;letter-spacing:1.4px;margin-top:9px;color:#967652}.weightButtons{display:flex;gap:8px;justify-content:center}.weightButtons button{border:1px solid #c8a46d;border-radius:20px;background:#f9edda;color:#7a5430;padding:12px 18px;font-size:13px}.weightButtons button.selected{background:#e8b15b;color:#4a2c10;box-shadow:0 2px 0 #98662e}#modelControls{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:105px}#modelControls button{pointer-events:auto}#modelBack{font-weight:bold;padding:20px 10px;color:#694525}
.motionButtons{display:flex;gap:7px;margin-top:12px}.motionButtons button{border:1px solid #c8a46d;border-radius:14px;background:#fff6e7;color:#71502d;padding:9px 11px;font-size:11px}

.viewButtons{display:flex;justify-content:center;gap:6px;margin-bottom:9px}.viewButtons button{border:1px solid #c8a77c;border-radius:18px;background:#fff5df;color:#69472d;padding:7px 11px;font:inherit;font-size:12px}.motionButtons{flex-wrap:wrap;max-width:340px;margin-inline:auto}

#modelControls{padding-bottom:70px}.weightButtons button{padding:8px 14px}.motionButtons{display:grid;grid-template-columns:repeat(3,1fr);width:min(320px,88vw);gap:6px;margin-top:8px}#modelBack{padding:14px 10px}

#game{filter:contrast(1.055) saturate(1.07)}

#overlay.gameOver{background:#604321 url('assets/game-over-blue.webp') center center/cover no-repeat;backdrop-filter:none;padding:0;align-items:stretch;animation:gameOverReveal .32s ease-out;z-index:15}
.gameOver .card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;max-width:none;height:100%;padding:20px 24px max(22px,env(safe-area-inset-bottom));border:0;border-radius:0;background:linear-gradient(180deg,#24170688 0%,transparent 24%,transparent 61%,#fff0cbef 78%,#f8e2b5 100%);box-shadow:none;text-align:center}
.gameOver #overEyebrow{position:absolute;top:4%;left:0;right:0;color:#ffedb4;font-size:10px;letter-spacing:2px;text-shadow:0 2px 8px #321c0e}
.gameOver #overTitle{position:absolute;top:7%;left:10px;right:10px;margin:0;color:#fff0b9;font-size:clamp(25px,6.4vw,39px);text-shadow:0 3px 12px #38200c;font-family:Georgia,serif}
.gameOver #overText{position:absolute;top:14%;left:0;right:0;margin:0;color:#fff5d8;font-size:16px;text-shadow:0 2px 8px #321c0e}
.gameOver #results{margin:0 0 10px}.gameOver .resultRow{margin:0;display:flex;justify-content:center;gap:12px}.gameOver .resultRow>div{flex:1;padding:9px 4px;background:#fff7e9c9;border:1px solid #cda864;border-radius:18px}.gameOver .resultRow b{font-size:29px;color:#593719}.gameOver .resultRow span{font-size:9px;color:#805b32}.gameOver #resume{margin:0 auto 6px;width:100%;max-width:380px}.gameOver #home{padding:9px;color:#694522;margin:0}
@keyframes gameOverReveal{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:scale(1)}}
@media(max-height:650px){.gameOver .card{padding-bottom:10px}.gameOver .resultRow>div{padding:5px}.gameOver .resultRow b{font-size:23px}.gameOver #resume{padding:12px}.gameOver #overText{top:16%;font-size:13px}}

#loading{background:radial-gradient(ellipse at 50% 35%,#fffaf0,#f3d5a0);padding:28px;text-align:center;color:#694522}.loaderCard{width:min(310px,100%)}.loaderCard strong{display:block;margin-top:24px;font-size:23px}.loaderCard p{min-height:34px;margin:12px 0;color:#927044;font-size:14px}.loaderCard small{display:block;margin-top:16px;font-size:11px;color:#927044}.catLoader{position:relative;width:124px;height:124px;margin:auto;border:2px solid #c99b4c38;border-radius:50%;box-shadow:0 0 45px #edbd6c35}.catLoader:before{content:'';position:absolute;inset:-3px;border:3px solid transparent;border-top-color:#b98030;border-right-color:#deb05e;border-radius:50%;animation:catOrbit 1.8s linear infinite}.loaderCat{position:absolute;inset:0;display:grid;place-items:center;font-size:47px;animation:catBreath 1.9s ease-in-out infinite}.catLoader i{position:absolute;font-style:normal;font-size:18px;animation:pawPulse 1.4s ease-in-out infinite}.catLoader i:nth-of-type(1){left:-5px;top:34px}.catLoader i:nth-of-type(2){right:3px;top:10px;animation-delay:.25s}.catLoader i:nth-of-type(3){right:23px;bottom:-7px;animation-delay:.5s}.loadingTrack{height:5px;border-radius:8px;background:#d9b67b55;overflow:hidden}.loadingTrack span{display:block;width:38%;height:100%;border-radius:8px;background:linear-gradient(90deg,#edc77e,#b78035);animation:loadSweep 1.7s ease-in-out infinite}
#menu{background:none;isolation:isolate;animation:arrival .8s ease-out both}#menu .introLife{position:absolute;inset:0;overflow:hidden;z-index:-1;background:#f7c77c url(assets/cover.webp) center top/cover no-repeat;animation:coverDrift 14s ease-in-out infinite alternate;pointer-events:none}#menu .primary{animation:none}.introPlant{position:absolute;bottom:19%;width:110px;height:180px;opacity:.50;transform-origin:50% 100%;background:radial-gradient(ellipse at 35% 28%,#b8bd6555 0 12%,transparent 14%),radial-gradient(ellipse at 65% 45%,#78914a66 0 14%,transparent 16%),radial-gradient(ellipse at 25% 65%,#9baf5955 0 14%,transparent 16%);animation:plantSway 6s ease-in-out infinite}.plantLeft{left:-35px}.plantRight{right:-38px;bottom:26%;animation-delay:-2.8s;transform:scaleX(-1)}.introMote{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe6a1;box-shadow:0 0 12px 3px #ffedb055;opacity:0;animation:moteFloat 9s ease-in-out infinite}.m1{left:15%;top:62%}.m2{left:79%;top:49%;animation-delay:-3s}.m3{left:65%;top:66%;animation-delay:-6s}.m4{left:28%;top:42%;animation-delay:-1.5s}
@keyframes catOrbit{to{transform:rotate(360deg)}}@keyframes catBreath{50%{transform:translateY(-3px) scale(1.035)}}@keyframes pawPulse{50%{opacity:.3;transform:scale(.85)}}@keyframes loadSweep{0%{transform:translateX(-105%)}100%{transform:translateX(370%)}}@keyframes coverDrift{from{transform:scale(1.025) translateX(-.3%)}to{transform:scale(1.05) translateX(.3%)}}@keyframes plantSway{0%,100%{rotate:-3deg}50%{rotate:4deg}}@keyframes moteFloat{0%,100%{opacity:0;transform:translate(0,0)}30%,65%{opacity:.65}90%{transform:translate(24px,-75px)}}
@media(prefers-reduced-motion:reduce){#menu,#menu .introLife,.introPlant,.introMote,.catLoader:before,.loaderCat,.catLoader i,.loadingTrack span{animation:none}.loadingTrack span{width:65%}}

.flyingTreat{position:absolute;color:#e7b25f;width:35px;filter:drop-shadow(0 3px 4px #57300e44);opacity:.85;animation:treatFlight 7s ease-in-out infinite;pointer-events:none}.flyingTreat svg{display:block;width:100%;height:auto}.treat1{left:12%;top:36%;--drift:55px;--lift:-22px;rotate:-12deg}.treat2{right:13%;top:47%;width:29px;--drift:-48px;--lift:16px;animation-duration:8.3s;animation-delay:-2s;rotate:14deg}.treat3{left:22%;top:57%;width:22px;--drift:38px;--lift:-15px;animation-delay:-4s;animation-duration:6.8s}.treat4{right:25%;top:29%;width:24px;--drift:-35px;--lift:-25px;animation-delay:-1s;animation-duration:9s}.treat5{left:6%;top:65%;width:27px;--drift:52px;--lift:-14px;animation-delay:-3s;animation-duration:8s}
@keyframes treatFlight{0%,100%{transform:translate(0,0) rotate(-7deg)}50%{transform:translate(var(--drift),var(--lift)) rotate(9deg)}}
.catPreviewButton{display:block;width:min(310px,92%);min-height:48px;margin:10px auto 6px;padding:10px 18px;border:1px solid #f5d39a;border-radius:17px;background:linear-gradient(#fff6e8f2,#f2d6a5ed);box-shadow:0 3px 0 #94632d,0 5px 15px #2b1b1326;color:#674320;font:inherit;font-size:15px;font-weight:800;text-align:center;cursor:pointer;position:relative;z-index:2}.catPreviewButton span{display:block;margin-top:3px;font-size:10px;font-weight:500;letter-spacing:.3px}.catPreviewButton:active{transform:translateY(2px);box-shadow:0 1px 0 #94632d}.catPreviewButton:focus-visible{outline:3px solid #fff1b1;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.flyingTreat{animation:none}}
@media(max-height:700px){.catPreviewButton{min-height:44px;padding:7px 12px;margin-top:7px;font-size:14px}.catPreviewButton span{font-size:9px}.menuBottom .inspectLink{margin:3px auto;padding:4px}}

#menu .menuBottom{bottom:max(70px,calc(env(safe-area-inset-bottom) + 64px));left:9%;right:9%}#menu .menuBottom p{margin:8px 0 4px;font-size:10px}#menu .menuBottom .record{margin-bottom:8px;font-size:10px}#menu .menuBottom .demo{font-size:8px}#menu .catPreviewButton{margin-top:8px;margin-bottom:4px;min-height:46px;padding:8px 15px}#menu:after{inset:73% 0 0;background:linear-gradient(transparent,#35220eaf)}#menu .introLife{background-position:center 25%;animation:none}
.flyingPaw{position:absolute;pointer-events:none;font-size:21px;color:#ffe8ac;filter:sepia(1) saturate(.7) drop-shadow(0 2px 3px #41291655);opacity:.55;animation:pawDrift 9s ease-in-out infinite}.paw1{left:8%;top:26%;--dx:28px;--dy:-25px}.paw2{right:9%;top:39%;--dx:-22px;--dy:18px;animation-delay:-3s}.paw3{left:13%;top:56%;--dx:20px;--dy:-30px;animation-delay:-5s}.paw4{right:12%;top:61%;--dx:-30px;--dy:-24px;animation-delay:-1s}.paw5{left:26%;top:18%;--dx:17px;--dy:18px;animation-delay:-6s;font-size:15px}.paw6{right:25%;top:24%;--dx:-25px;--dy:15px;animation-delay:-2s;font-size:16px}.paw7{left:5%;top:70%;--dx:26px;--dy:-20px;animation-delay:-4s;font-size:16px}.paw8{right:6%;top:15%;--dx:-18px;--dy:26px;animation-delay:-7s;font-size:17px}@keyframes pawDrift{0%,100%{transform:translate(0,0) rotate(-9deg);opacity:.35}50%{transform:translate(var(--dx),var(--dy)) rotate(12deg);opacity:.65}}
@media(max-height:650px){#menu .menuBottom{bottom:64px}#menu .menuBottom p,#menu .menuBottom .demo{display:none}#menu .primary{padding:12px}#menu .catPreviewButton{min-height:44px;padding:6px 12px}.catPreviewButton span{display:none}}
@media(prefers-reduced-motion:reduce){.flyingPaw{animation:none}}