/* UI reference: cream enamel, scalloped pastel stickers, cocoa lettering. */
:root{--cream:#fff9ef;--demo-ink:#785136;--ink:#785136;--soft-ink:#92765c;--pink:#ed7191;--sage:#769b5e;--nav-height:98px;--nav-bottom:calc(31px + env(safe-area-inset-bottom,0px));--nav-gap:5px;--sub-height:64px;--frost-bg:linear-gradient(145deg,#fffdf2f5,#ffeddcf0);--frost-edge:#fffef1;--glass-blur:blur(16px)}
html,body{background:#dfe7d5;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
.desktop-surround{background:radial-gradient(ellipse at 50% 30%,#f6f5e9,#dfe8d8 60%,#cbd9c2)}
.app{width:min(100%,460px);box-shadow:0 16px 70px #51674430}
/* Retain the uploaded original scene composition and photo files. */
.photo-bg,.scene-stage{inset:0}.bg-shading{background:linear-gradient(180deg,#fcf7e91c,transparent 35%,transparent 83%,#faf2df29)}
button{font-weight:700}button:focus-visible{outline:3px solid #c66a7c;outline-offset:3px}button:disabled{cursor:default}
.control-surface{border:2px solid #fffdf0;box-shadow:inset 0 0 0 2px #f8d9b583,0 3px 0 #b29d7320,0 5px 15px #634b2a20;color:var(--ink)}
.ui-art{display:block;object-fit:contain;pointer-events:none;user-select:none}
.brand-heading{top:calc(17px + env(safe-area-inset-top,0px));left:19px;right:15px;display:flex;align-items:center;flex-wrap:wrap;gap:0;text-shadow:none}
.brand-heading>.ui-art{width:39px;height:43px;margin-right:4px;filter:drop-shadow(0 2px 2px #b9856130)}
.brand-heading h1{font-size:31px;line-height:1.3;letter-spacing:-1.4px;font-weight:1000;color:#714329;text-shadow:2px 0 #fff9ef,-2px 0 #fff9ef,0 2px #fff9ef,0 -2px #fff9ef,3px 3px #fff9ef,-3px -2px #fff9ef,0 4px 2px #9f785840}
.brand-heading h1 b{font-size:27px;color:inherit;font-weight:950;letter-spacing:0;margin-left:5px}
.brand-heading p{display:block;margin:5px 0 0 0;padding:5px 10px 6px;font-weight:750;font-size:10px;letter-spacing:.75px;color:#865334;background:linear-gradient(#fffbed,#fff0cb);border:2px solid #fffef0;border-radius:24px;box-shadow:inset 0 0 0 1px #ead699,0 3px 8px #71562b20;white-space:nowrap}
.brand-heading em{font-style:normal;color:#f38a98;font-size:14px;vertical-align:middle;margin-left:3px}
.top-controls{top:calc(103px + env(safe-area-inset-top,0px));left:18px;right:16px;align-items:center;gap:9px}
.top-controls .pet-profile{width:193px;max-width:calc(100% - 97px);height:57px;padding:4px 12px 4px 5px;background:linear-gradient(140deg,#b5d79fef,#7fa86eea);border:2px solid #fffbed;border-radius:32px;box-shadow:inset 0 0 0 2px #dfedb7,0 3px 0 #6a8d4d62,0 5px 10px #455f4030;color:#fffdf3}
.pet-avatar{width:43px;height:43px;border:2px solid #fff7e2;box-shadow:0 0 0 2px #d2cda1;background:#fff4dc}
.pet-profile-copy strong{font-size:18px;text-shadow:0 1px 2px #537e5433;letter-spacing:1px}.pet-profile-copy small{display:block;font-size:10px;line-height:1.8;color:#fffef1;font-weight:650}.pet-profile>.tiny{margin-left:auto;width:16px;height:16px;color:#fffef4}
.header-actions{display:flex;align-items:center;gap:5px}.header-actions .settings-btn,.music-toggle{width:43px;height:46px;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;position:relative}
.header-actions .ui-art{width:100%;height:100%}.music-toggle[aria-pressed=false]{filter:saturate(.3);opacity:.75}.music-toggle[aria-pressed=false]:after{content:"";position:absolute;width:24px;height:2px;background:#ab6e63;transform:rotate(-45deg);border:1px solid #fff5e6}
.bond-card{top:calc(175px + env(safe-area-inset-top,0px));left:17px;width:calc(100% - 109px);max-width:none;padding:12px 15px 13px;border:2px solid #fffef5;border-radius:32px 29px 34px 29px;background:linear-gradient(140deg,#fffdf4f7,#ffe8dce8);box-shadow:inset 0 0 0 2px #ffe7d4,0 3px 0 #dcb78e59,0 6px 14px #7d542322;color:#9c674d}
.bond-card:before{content:"";position:absolute;left:7px;top:7px;width:25px;height:8px;background:#fffef6;border-radius:50%;rotate:-38deg;opacity:.85}
.bond-caption{gap:5px;white-space:nowrap;font-size:10px}.bond-caption strong{color:#e46082;font-size:13px;font-weight:850}.bond-caption span{font-size:9px;color:#9d6d50;font-weight:650}
.bond-track{height:10px;margin-top:9px;background:#ebc9be;border:1px solid #fffef5;border-radius:16px;box-shadow:inset 0 2px 3px #b8807130}.bond-fill{background:linear-gradient(#ff9db3,#ef7299);border:1px solid #ed5b85;box-shadow:inset 0 1px 1px #ffd6e2;transition:width 1.8s ease}
.pet-vitals{top:calc(251px + env(safe-area-inset-top,0px));left:15px;width:calc(100% - 101px);max-width:none;gap:2px}
.vital{position:relative;flex:1;height:67px;padding:0;border:0;background:none;box-shadow:none;color:#78533a;overflow:visible;display:block}
.vital>div{position:static;display:block}.vital .ui-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.vital output{position:absolute;right:7%;top:45%;font-size:18px;line-height:1;letter-spacing:-.5px;font-weight:850;text-shadow:0 1px #fff9ec}
.vital small{position:absolute;left:0;right:0;text-align:center;bottom:8%;font-size:10px;font-weight:800;color:#825940;text-shadow:0 1px #fffdf2}.vital:nth-child(2) output,.vital:nth-child(2) small{color:#60764c}.vital:nth-child(3) output,.vital:nth-child(3) small{color:#637638}
.day-night{top:calc(174px + env(safe-area-inset-top,0px));right:15px;width:65px;padding:3px;gap:0;border-radius:35px;background:linear-gradient(#fff0bd,#c0bce5);box-shadow:inset 0 0 0 2px #e9dba3,0 3px 9px #6a5f3830;border:2px solid #fffeef}
.time-option{position:relative;width:55px;height:60px;min-height:0;gap:0;border-radius:30px;background:none;color:#695882;padding:0;border:0}
.time-option .ui-art{position:absolute;inset:0;width:100%;height:100%;opacity:.75}.time-option span{position:absolute;bottom:11%;font-size:11px;color:#745232;text-shadow:0 1px #fff8da;font-weight:850}.time-option[data-time=night] span{color:#fffef2;text-shadow:0 1px #746998}
.time-option.selected{background:none;border:0;box-shadow:none;filter:drop-shadow(0 1px 3px #d1a547)}.time-option.selected .ui-art{opacity:1}.time-option:not(.selected){filter:saturate(.75)}
.feature-rail{top:calc(331px + env(safe-area-inset-top,0px));right:10px;gap:4px}
.feature-button{width:72px;height:77px;position:relative;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;color:#805436;gap:0;padding:0}
.feature-button:hover{background:none;transform:translateY(-2px)}.feature-button .ui-art{position:absolute;inset:0;width:100%;height:100%}.feature-button span{position:absolute;bottom:18%;left:0;right:0;line-height:1.2;text-align:center;font-size:13px;font-weight:850;text-shadow:0 1px #fffceb}
.feature-button[data-open=wish] span{color:#617e37}.feature-button[data-open=visit] span{font-size:11px}.notification-dot{right:8px;top:10px;width:8px;height:8px;border:1.5px solid #fffaf1}
.feature-button:active,.nav-action:active{scale:.95}.feature-button.is-visiting{filter:saturate(.6);animation:visitPulse 1s ease-in-out infinite}
.main-nav{width:calc(100% - 22px);height:var(--nav-height);gap:3px;bottom:var(--nav-bottom)}
.nav-action.control-surface{position:relative;display:block;padding:0;border:0;box-shadow:none;background:transparent;backdrop-filter:none;border-radius:0;color:#7c5139;transition:transform .18s}
.nav-action .ui-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.nav-action span{position:absolute;bottom:17%;left:0;right:0;font-size:18px;font-weight:850;line-height:1.2;letter-spacing:1px;text-shadow:0 1px 1px #fffcee}
.nav-action[data-nav=feed] span{color:#507045}.nav-action[data-nav=play] span{color:#7b5b32}.nav-action[data-nav=rest] span{color:#80568c}.nav-action.active{background:none;border:0;box-shadow:none;transform:translateY(-4px);filter:drop-shadow(0 4px 4px #956e4444)}
.secondary-row{bottom:calc(var(--nav-bottom) + var(--nav-height) + 8px);width:calc(100% - 35px);height:65px;background:linear-gradient(135deg,#fffdf4f5,#fff0dfee);border:2px solid #fffdf2;border-radius:23px;color:#775338;padding:5px;box-shadow:0 4px 18px #55371b30;gap:3px}
.sub-option{background:#fff9eea8;border:1px solid #ead7b6;color:#8c694b;border-radius:14px;min-width:0;padding:4px 2px;gap:3px;min-height:0}.sub-option.selected{background:#f5edbd;color:#756637;border:1px solid #cab77b;box-shadow:inset 0 0 0 1px #fffbe4}.sub-title{font-size:10px;text-shadow:none}.sub-icon{width:30px;height:25px}.sub-icon .menu-item-img{width:29px;height:24px}.scene-option .sub-icon{height:25px}
.garden-footer{position:absolute;z-index:8;bottom:0;left:-2%;width:104%;height:23px;pointer-events:none;background:linear-gradient(120deg,#c4dba2ee,#e2edc4ee,#b5d292ee);border-top:3px solid #fff9e4;border-radius:50% 50% 0 0 / 45% 45% 0 0;box-shadow:0 -3px 13px #c8df9840}
.garden-footer:before{content:"";position:absolute;inset:4px 15px auto;height:9px;border-top:2px dashed #fffdf0;border-radius:50%}.garden-footer .ui-art{position:absolute;width:34px;height:34px;left:calc(50% - 17px);top:-17px;filter:hue-rotate(20deg)}
.pet-menu{top:calc(166px + env(safe-area-inset-top,0px));left:17px;z-index:18;padding:9px;border-radius:21px;background:#fffaeef5;color:#80593c}.pet-option{color:#8b6544;background:#fff9ec;border:1px solid #e9d6bb;min-height:65px}.pet-option.selected{background:#e8efcf;color:#65783f;border-color:#afc27f;box-shadow:none}
.settings-panel{top:calc(159px + env(safe-area-inset-top,0px));right:16px;z-index:18;color:#795537;background:#fffaeff7;border-radius:24px}.setting-line{color:#805c42;border-color:#e9d7bb;min-height:44px}.setting-line strong{color:#73834a}.demo-note{color:#998264}.small-close{background:#efdfca;color:#846044}
.toast{color:#795537;background:#fff8e7f0;box-shadow:0 3px 15px #7a552d29;border:1px solid #fffdf3;border-radius:24px;bottom:calc(var(--nav-bottom) + var(--nav-height) + 85px);font-weight:650}
.model-loader,.empty-state{color:#805b43;background:#fff8edf5}.load-title,.load-detail{color:#805b43;text-shadow:none}.load-meter{background:#e3d1b3}.load-fill{background:linear-gradient(90deg,#e8c984,#a7c77a)}.load-retry{background:#dce8b7;color:#667843}
.flow-overlay{background:#55412530;backdrop-filter:blur(5px);padding-top:90px;padding-bottom:calc(130px + env(safe-area-inset-bottom,0px));align-items:center;z-index:30}
.flow-card{border-radius:30px;color:#785439;background:linear-gradient(150deg,#fffdf5fa,#fff0def7);max-height:calc(100dvh - 170px);overflow:auto;padding:20px 18px;border:2px solid #fffdf0;scrollbar-width:thin}
.flow-kicker{color:#94a570}.flow-title{color:#805438;font-size:23px}.flow-desc,.flow-footnote{color:#9a8066}.flow-step-pill{color:#a18565;background:#f1e5ce;border-color:#ecd5b2}.flow-step-pill.active{background:#e1ebc7;color:#68844d;border-color:#b7cb87}.flow-steps i{background:#d9c4a5}.photo-choice{color:#875c3e;background:#fffcf1;border:2px solid #f1dfc1}.photo-choice strong{color:#875c3e}.photo-choice span{color:#a78c6b}.photo-choice.selected{border-color:#aac17a;background:#f0f6df;box-shadow:0 0 0 2px #d5e6b5}.flow-btn{min-height:44px;border-radius:17px}.flow-btn.primary{color:#fffdf4;background:linear-gradient(#a5be7c,#809d58);border:1px solid #91ac68;box-shadow:inset 0 1px #dae8bc,0 3px #718a4b25}.flow-btn.secondary{color:#8d6948;background:#eee1c9}.quick-enter{width:100%;background:none;color:#81935d;font-size:12px;margin-top:10px;box-shadow:none}.sheet-labels,.sheet-note{color:#9b7958}.empty-copy{color:#a28a6d}
.demo-dialog{border:3px solid #fffcef;border-radius:30px;background:linear-gradient(140deg,#fffdf3,#fff2e2);color:#7e573a}.demo-dialog::backdrop{background:#4e492950;backdrop-filter:blur(7px)}.dialog-head{background:#fff9eff5;border-bottom:1px solid #eadabf;padding:20px 21px 15px}.dialog-head h2{color:#805638;font-size:22px}.dialog-head button{width:38px;height:38px;color:#9b7454;background:#f6e7ce;box-shadow:inset 0 0 0 2px #fffdf1;border:1px solid #e9d4b1}.dialog-eyebrow{color:#99a474;font-size:9px;letter-spacing:1.2px}.dialog-intro{color:#a08563}.dialog-body{padding:17px 19px 22px}.primary-demo-button{background:linear-gradient(#a6c384,#829d5d);border:1px solid #7c985b;color:#fffdef;min-height:44px;box-shadow:inset 0 1px #e6f0cf}
.store-map{overflow:visible;position:relative;border:3px solid #fffdf1;box-shadow:0 3px 14px #bca96830;border-radius:18px;margin:18px 0 23px;isolation:isolate}.store-map>img{filter:saturate(.16) brightness(1.04);border-radius:15px;width:100%;display:block}.nearest-hotspot{position:absolute;left:61%;top:28%;width:35%;height:16%;background:none;border:0;border-radius:12px;box-shadow:none;padding:0;animation:shopSway 3.3s ease-in-out infinite;transform-origin:50% 90%;filter:drop-shadow(0 2px 0 #fffce7) drop-shadow(0 1px 6px #fff8e6)}
.store-colored-picture{position:absolute;inset:0;display:block;background-image:url('./assets/store-map.png');background-size:285.714% 625%;background-position:93.85% 33.333%;border:1.5px solid #fff7cf;border-radius:10px;box-shadow:0 0 0 2px #a3b866}.nearest-hotspot b{position:absolute;top:-20px;left:-9%;right:-9%;padding:3px 2px;background:#faffdd;border:1px solid #a0b66a;border-radius:12px;white-space:nowrap;font-size:9px;color:#667b39;box-shadow:0 2px 5px #79793830}.nearest-hotspot:before,.nearest-hotspot:after{display:none}
.store-card{background:#fffbee;border:1px solid #e8dbb9;border-radius:21px}.store-badge{background:#e8efc6;color:#73864b}.store-friend{color:#81975c}.friend-row{background:#fffdf5;border:1px solid #ebddc3;border-radius:22px}.friend-row.pinned{background:#f5f6e5;border-color:#d5ddb6}.friend-location{color:#728853;background:#e9efd7;min-height:31px;border-radius:12px}.chat-button{background:#fff0df;border:1px solid #ead3b7;min-width:38px;min-height:38px;color:#be8469}.chat-compose button{background:#8da46b}.chat-bubble{background:#f4e9d6}.chat-bubble.sent{background:#e0ebc8}.wish-hero{background:linear-gradient(135deg,#edf3d8,#f9f4df);border:1px solid #dce5b9}.wish-hero>.ui-art{width:115px;height:125px}.wish-option{border-radius:20px;border-color:#e8dcbf}.wish-option:has(input:checked){background:#f3f7e4;border-color:#9caf6f}.wish-option input{accent-color:#90a66b}.wish-receipt .chosen-wish{border-radius:21px}.success-ring{border:3px solid #fffbed;box-shadow:0 3px 12px #7e955b20}
.demo-feedback{color:#b45c66;background:#fff9e8ec;border:1px solid #fffdf3;border-radius:20px;padding:6px 12px;text-shadow:0 1px white;top:44%;font-weight:800}.bond-heart,.floating-heart{color:#f0809e;text-shadow:1px 1px #fff5e6,-1px -1px #fff5e6,0 2px 3px #bf5b7344}
.visitor-bubbles{position:absolute;inset:0;z-index:6;pointer-events:none}.visitor-bubbles[hidden]{display:none}.visitor-bubbles span{position:absolute;top:48%;left:16%;padding:9px 12px;background:#fff9e6f2;border:2px solid #fffdf4;border-radius:20px 20px 5px 20px;color:#9d724b;font-size:12px;font-weight:750;box-shadow:0 3px 15px #634c2a30;animation:visitPulse 1.8s ease-in-out infinite}.visitor-bubbles span+span{top:55%;left:auto;right:20%;border-radius:20px 20px 20px 5px;animation-delay:.5s}
.app:not(.pet-created) .bond-card,.app:not(.pet-created) .pet-vitals{opacity:.65}.app:not(.pet-created) .feature-rail{visibility:hidden}
@keyframes shopSway{0%,100%{transform:scale(1.035) rotate(-1deg)}50%{transform:scale(1.085) rotate(1deg)}}@keyframes visitPulse{50%{transform:translateY(-3px)}}
@media(min-width:600px){.app{width:430px;height:min(calc(100dvh - 24px),932px);max-height:932px;border:2px solid #fff6e1;border-radius:30px}.brand-heading h1{font-size:33px}.brand-heading h1 b{font-size:29px}.brand-heading p{font-size:11px}.bond-caption strong{font-size:14px}.bond-caption span{font-size:10px}.main-nav{height:105px}}
@media(max-width:355px){.brand-heading{left:14px}.brand-heading h1{font-size:27px}.brand-heading h1 b{font-size:24px}.brand-heading>.ui-art{width:32px;height:37px}.brand-heading p{font-size:9px;padding:5px 7px;letter-spacing:.2px}.top-controls{left:14px;right:12px}.top-controls .pet-profile{width:175px;max-width:calc(100% - 86px)}.header-actions{gap:2px}.header-actions .settings-btn,.music-toggle{width:38px}.bond-card{left:13px;width:calc(100% - 94px);padding:12px 10px}.bond-caption strong{font-size:11px}.bond-caption span{font-size:8px}.pet-vitals{left:10px;width:calc(100% - 84px);gap:1px}.day-night{right:10px;width:59px}.time-option{width:49px}.feature-rail{right:6px}.feature-button{width:64px;height:69px}.nav-action span{font-size:16px}.vital output{font-size:16px}.pet-menu{left:12px}.pet-option{min-width:67px}}
@media(max-height:740px){:root{--nav-height:80px;--nav-bottom:calc(25px + env(safe-area-inset-bottom,0px))}.brand-heading{top:10px}.brand-heading h1{font-size:26px}.brand-heading h1 b{font-size:23px}.brand-heading>.ui-art{width:31px;height:34px}.brand-heading p{margin-top:3px;font-size:9px;padding:3px 8px}.top-controls{top:82px}.top-controls .pet-profile{height:48px}.pet-avatar{width:36px;height:36px}.pet-profile-copy strong{font-size:16px}.pet-profile-copy small{font-size:9px}.bond-card{top:144px;padding-top:10px;padding-bottom:11px}.pet-vitals{top:211px}.vital{height:61px}.day-night{top:143px}.time-option{height:54px}.feature-rail{top:281px;gap:0}.feature-button{width:62px;height:65px}.feature-button span{font-size:11px}.feature-button[data-open=visit] span{font-size:10px}.app:has(#secondary-row:not(.hidden)) .feature-rail{visibility:visible}.pet-menu{top:137px}.settings-panel{top:137px}.flow-overlay{padding-top:65px;padding-bottom:105px}.flow-card{max-height:calc(100dvh - 155px)}.nav-action span{font-size:16px}.garden-footer{height:18px}.garden-footer .ui-art{height:28px;width:28px;left:calc(50% - 14px)}}
@media(max-height:620px){.pet-vitals{top:200px}.vital{height:53px}.bond-card{top:139px;padding:8px 11px}.feature-rail{top:260px;gap:0}.feature-button{width:53px;height:55px}.feature-button span{font-size:10px}.feature-button[data-open=visit] span{font-size:9px}.day-night{top:139px}.time-option{height:48px}.brand-heading{top:8px}.visitor-bubbles span{top:42%}}
@media(prefers-reduced-motion:reduce){.nearest-hotspot,.feature-button.is-visiting,.visitor-bubbles span{animation:none}.bond-fill{transition:none}.nav-action,.feature-button{transition:none}}
/* Status sticker artwork keeps its own intrinsic proportions at every viewport. */
.pet-vitals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.pet-vitals .vital{height:auto;min-width:0}
.pet-vitals .vital .ui-art{position:relative;inset:auto;width:100%;height:auto;object-fit:contain}
/* Compact upper HUD: keep the pet silhouette and lower playfield clear. */
.brand-heading{top:calc(15px + env(safe-area-inset-top,0px));left:16px;right:16px;flex-wrap:nowrap;gap:3px;align-items:center}
.brand-heading>.ui-art{width:28px;height:30px;margin-right:0;flex-shrink:0}
.brand-heading h1{font-size:22px;line-height:1.25;letter-spacing:-1px;flex-shrink:0}
.brand-heading h1 b{font-size:20px;margin-left:3px}
.brand-heading p{flex:1;min-width:0;margin:0 0 0 4px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:right;font-size:8px;line-height:1.5;letter-spacing:0;white-space:nowrap;color:#795437;text-shadow:0 1px 2px #fff9e8,0 0 4px #fff9e8;font-weight:650}
.brand-heading p em{display:none}
.top-controls{top:calc(64px + env(safe-area-inset-top,0px))}
.bond-card{top:calc(134px + env(safe-area-inset-top,0px))}
.pet-vitals{top:calc(207px + env(safe-area-inset-top,0px));left:16px;width:198px;max-width:calc(100% - 102px);gap:3px}
.pet-vitals .vital output{font-size:13px;right:7%;top:45%}
.pet-vitals .vital small{font-size:8px;bottom:8%;line-height:1.1}
.day-night{top:calc(134px + env(safe-area-inset-top,0px))}
.feature-rail{top:calc(285px + env(safe-area-inset-top,0px))}
.pet-menu,.settings-panel{top:calc(127px + env(safe-area-inset-top,0px))}
@media(max-width:355px){.brand-heading{left:13px;right:12px;gap:2px}.brand-heading>.ui-art{width:24px;height:27px}.brand-heading h1{font-size:19px;letter-spacing:-1px}.brand-heading h1 b{font-size:18px;margin-left:2px}.brand-heading p{font-size:7px;margin-left:3px}.pet-vitals{left:13px;width:186px;gap:2px}.pet-vitals .vital output{font-size:12px}.pet-vitals .vital small{font-size:7.5px}}
@media(max-height:740px){.brand-heading{top:11px}.top-controls{top:55px}.bond-card{top:116px}.pet-vitals{top:185px}.day-night{top:116px}.feature-rail{top:257px}.pet-menu,.settings-panel{top:109px}}
@media(max-height:620px){.top-controls{top:51px}.bond-card{top:108px}.pet-vitals{top:171px}.day-night{top:108px}.feature-rail{top:243px}.pet-menu,.settings-panel{top:104px}}