/* v3 art direction — warm paper, forest green, room for the animal. */
:root{color:#344b40;background:#f6f5ec;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
body{background:radial-gradient(ellipse at 80% 0,#e9eee0,transparent 55%),#f6f5ec}
.app{max-width:1480px}.topbar{height:76px;padding:10px 26px;border-bottom:1px solid #405d4112;margin-bottom:12px}
.identity .mark{color:#507756;background:#e3ebd9;border-radius:50%;box-shadow:none;font-size:44px;width:49px;height:49px}
.identity strong{color:#344f3c;font-size:21px;letter-spacing:3px}.identity small{color:#84917d;font-size:10px;letter-spacing:2px}
.currency,.icon-btn{border:1px solid #e5e7da;box-shadow:none;background:#fffef8;border-radius:30px}.currency b{color:#627444}.icon-btn{font-size:19px}
.layout{grid-template-columns:78px minmax(0,1fr);gap:23px;padding:0 26px 20px;min-height:calc(100dvh - 88px)}
.nav{background:#eeeee3;border:0;box-shadow:none;padding:9px 6px;border-radius:26px;gap:8px}.nav-btn{min-height:68px;border-radius:21px;color:#88927e}.nav-btn span{font-size:23px;filter:saturate(.65)}
.nav-btn.active{background:#54765a;color:#fff;box-shadow:0 4px 10px #43684f20}.nav-btn:hover{background:#e1e7d6}.nav-btn.active:hover{background:#54765a}
h1{font-size:clamp(23px,2.4vw,31px);letter-spacing:.01em;color:#354e3c}h2,h3{color:#405a43}
.eyebrow{color:#96a47b;font-size:9px;letter-spacing:.2em;font-weight:650}.page-head{margin:4px 0 17px}.subtext{color:#8b9483;font-size:12px;font-weight:500;line-height:1.7}.bubble-tag{color:#67805b;border-color:#e1e6d5;background:#eff2e7;font-size:11px}
.panel{border:1px solid #e4e7da;border-radius:24px;background:#fffef9;box-shadow:0 6px 20px #40534004;padding:19px}
.home-layout{grid-template-columns:minmax(0,1fr) 268px;gap:18px}.home-left,.home-right{display:flex;flex-direction:column;gap:13px}.home-right .banner{grid-column:auto}.scene-card{padding:0;border-color:#e0e6d4}
.scene-top{padding:15px 19px 0}.scene-top h2{font-size:20px;color:#3c573f}.scene-top .chip{background:#eff2e7;border:0;color:#778767;font-size:10px;padding:8px}
.scene{height:315px;margin:12px 10px 0;border-radius:17px}
.scene.meadow{background:#bfd8a6 url('./assets/forest.webp') center 62%/cover no-repeat}
.scene.meadow>.cloud,.scene.meadow>.hill,.scene.meadow>.ground,.scene.meadow>.scene-decor{display:none}.scene.meadow:before{display:none}
.scene.meadow:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#fff5b50c,transparent 50%,#b5cf6012);animation:sunlight 13s ease-in-out infinite alternate}
.pet-speech{top:12px;left:12px;transform:none;background:#fffef4eb;backdrop-filter:blur(8px);color:#667447;font-size:11px;font-weight:550;max-width:88%;padding:8px 13px;box-shadow:0 3px 12px #40593314}
.pet-platform{inset:0;display:block}.pet-avatar-main{position:absolute;left:50%;bottom:13%;width:330px;height:330px;max-width:100%;animation:none;transform:translateX(-50%);transform-origin:50% 95%;touch-action:none;outline:none}
.pet-avatar-main:active{transform:translateX(-50%)}#birdCanvas{width:100%;height:100%;display:block;touch-action:none;filter:drop-shadow(0 2px 2px #24391f16)}#birdCanvas:focus-visible{outline:2px dashed #fff9;border-radius:40%}
.pet-shadow{left:50%;bottom:21.5%;width:93px;height:12px;background:#29361b66;filter:blur(5px);z-index:0;transform:translateX(-21%)}
.pet-hat{top:15%;left:61%;font-size:38px;pointer-events:none}.scene[data-care=sleep] .pet-hat{opacity:0}
.scene-bottom{padding:11px 17px 14px}.pet-mini{background:#eef2df;width:36px;height:36px;font-size:23px;border-radius:50%}.pet-info strong{font-size:15px}.pet-info small{color:#939a83;font-size:10px}.xp-meta{font-size:10px;color:#82916c}.xp-bar,.meter{height:6px;background:#f0f0e5}.xp-bar i,.meter i{background:#a9bf77}
.action-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.action-tile{min-height:87px;border:1px solid #e3e6d7;box-shadow:none;border-radius:20px;background:#fffef9;gap:3px;padding:10px 2px;color:#506448}.action-tile span{font-size:25px}.action-tile b{font-size:12px;font-weight:650}.action-tile small{font-size:10px;color:#97a087}.action-tile:hover{background:#eef3e5}.action-tile:disabled{opacity:.45}
.heading-row h3{font-size:15px;letter-spacing:.02em}.see-all{background:#f0f2e5;color:#7b8b64;font-size:10px;min-height:36px}.stats-list{gap:16px 13px}.stat-label{font-size:11px;font-weight:550}.stat-label span:last-child{color:#8d997e}.tip{font-size:11px;font-weight:400;line-height:1.7;color:#97a17f;margin-top:14px}
.quest-info b{font-size:11px;font-weight:600}.quest-info small{font-size:10px;color:#9ba48a}.quest-emoji{font-size:19px}.quest-row{padding:12px 0;border-color:#e8ecdc}.mini-reward{font-size:10px;min-height:38px;padding:8px;background:#edf0d7;color:#82934d}
.banner{background:#eaf0df;border-radius:22px;padding:16px}.banner h3{font-size:14px}.banner p{font-size:10px;line-height:1.7;color:#8c9a76}.banner button{font-size:11px;min-height:36px;padding:8px 12px;margin-top:10px}
.home-right .banner>div{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.home-right .banner p{display:none}.home-right .banner h3{font-size:11px}.home-right .banner button{margin-top:0;white-space:nowrap;font-size:10px}
.primary{background:#5a7b51;box-shadow:0 4px 10px #5271411c;border-radius:14px;font-weight:600}.secondary{color:#678254;border:1px solid #dce4cd;border-radius:14px;background:#fffef9;font-weight:550}.filter{color:#81906e;border-color:#e1e7d4}.filter.active{background:#68865b;border-color:#68865b}.pet-card,.shop-card{background:#fffef9;border:1px solid #e2e7d7;box-shadow:none}.pet-card.selected{border-color:#8ba96a;background:#f4f7ec}.pet-card button,.shop-card button{background:#edf2e2;color:#6c8755;min-height:44px}.pet-card .pet-illustration{height:145px;background:radial-gradient(ellipse,#eff3dc,#f8f7ec)}
.refined-portrait{object-fit:contain;width:100%;height:100%;display:block}.pet-card .refined-portrait{width:180px;height:180px;margin-top:-18px}.name-preview{height:145px}.name-preview .refined-portrait{max-height:160px}.collection{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.pet-card{min-height:245px}.modal .collection{grid-template-columns:repeat(3,minmax(0,1fr))}.modal .pet-card{min-height:200px}.modal .pet-card .pet-illustration{height:115px}.modal .pet-card .refined-portrait{width:150px;height:150px;margin-top:-18px}
.modal{background:#fffef8;border:1px solid #e7eadb;box-shadow:0 25px 80px #21361e30}.modal-header h2{font-size:21px;color:#536c44}.modal-content{color:#7f8f70;line-height:1.7}.close{color:#7c8e6c;background:#edf1e2}.form-input{border-color:#dfe7d2;color:#4c6242;background:#fffffb}.modal-root{background:#24391e66;backdrop-filter:blur(7px)}
.food-options{display:flex;gap:14px;margin-top:24px}.food-options button{flex:1;min-height:110px;font-size:18px;line-height:2}.food-options small{font-size:12px}
.care-prop{position:absolute;z-index:5;pointer-events:none;bottom:10%;left:59%;width:70px;text-align:center;font-size:23px}.food-bowl{border-radius:5px 5px 20px 20px;border-bottom:12px solid #bc875c;background:#e9c491;width:65px;box-shadow:0 4px 5px #37452633;font-size:23px}.care-prop.feed{animation:prop-in .4s ease-out}.care-prop.bath{left:36%;width:235px;bottom:9%;z-index:4}.water-basin{height:38px;border-radius:5px 5px 70px 70px;background:linear-gradient(#9ed6ddcf 25%,#6fa8af 30%,#538d98);border-top:4px solid #b7eff1;box-shadow:0 5px 7px #36574a22}.care-prop.bath i{position:absolute;width:9px;height:13px;background:#b2edfa;border-radius:70% 30% 60% 40%;bottom:25px;left:20%;animation:splash .6s ease-out infinite}.care-prop.bath i:nth-child(3){left:45%;animation-delay:.16s}.care-prop.bath i:nth-child(4){left:70%;animation-delay:.3s}.care-prop.bath i:nth-child(5){left:90%;animation-delay:.4s}
.care-prop.sleep{left:37%;width:220px;bottom:8%;z-index:2}.sleep-nest{height:32px;background:repeating-linear-gradient(9deg,#a7834e 0 2px,#d0ac6d 3px 5px);border-radius:50%;border:3px solid #b19659;box-shadow:0 3px 3px #263f2233}.zzz{position:absolute;top:-180px;right:5px;color:#fffce0;font-size:27px;animation:dream 2s ease-in-out infinite}.scene[data-care=sleep]:after{background:#243b5840}.care-prop.play{left:23%;bottom:32%;transform-origin:50% -70px;animation:bell .45s ease-in-out infinite alternate}.toy-bell{border-radius:50% 50% 5px 5px;background:#d1ac50;color:#fff1a9;width:40px;border-bottom:5px solid #967b36;box-shadow:0 3px 6px #344e3422}.toy-bell:before{content:"";position:absolute;width:2px;height:65px;background:#ac9a6b;bottom:100%;left:20px}
.care-caption{position:absolute;z-index:7;bottom:12px;left:50%;transform:translateX(-50%);background:#fffef1e8;border-radius:18px;color:#6d7953;font-size:11px;padding:7px 12px;white-space:nowrap}.care-caption:empty{display:none}.float-heart{color:#fff8c4;font-size:40px;text-shadow:0 1px 8px #af6333;top:28%;left:60%}
.welcome{min-height:520px;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(90deg,#fffdf2eb,#f1f2d39c),url('./assets/forest.webp') center/cover}.welcome-copy{position:relative;z-index:2;padding:30px;max-width:55%}.welcome h1{font-size:clamp(28px,4vw,46px);line-height:1.6;margin:17px 0}.welcome p{font-size:14px;line-height:2;color:#849071;margin-bottom:24px}.welcome small{display:block;margin-top:18px;color:#99a080;font-size:10px}.welcome>img{position:absolute;width:55%;right:0;bottom:3%}
.toast{background:#526b43;border-radius:18px;font-size:13px;font-weight:500}.shop-card button,.filter,.nav-btn,.mini-reward,.see-all{touch-action:manipulation}button{min-height:44px}
@keyframes sunlight{to{opacity:.35}}@keyframes prop-in{from{opacity:0;translate:0 12px}}@keyframes splash{to{translate:12px -78px;opacity:0;scale:.5}}@keyframes dream{to{translate:0 -16px;opacity:.25}}@keyframes bell{to{rotate:12deg}}
@media(min-width:1200px){.scene{height:430px}.pet-avatar-main{width:430px;height:430px}.pet-shadow{bottom:21%;width:115px}.home-layout{grid-template-columns:minmax(0,1fr) 310px}.action-tile{min-height:94px}}
@media(min-width:701px) and (max-width:900px){.layout{grid-template-columns:68px minmax(0,1fr);gap:15px;padding:0 18px 20px}.home-layout{grid-template-columns:1fr}.home-right{display:grid;grid-template-columns:1fr 1fr}.home-right .banner{display:none}.scene{height:360px}.pet-avatar-main{width:370px;height:370px}.page-head{margin-bottom:15px}.topbar{margin-bottom:15px}.home-right .panel{padding:16px}.scene-bottom{padding:11px 16px}.stats-list{gap:22px 12px}.tip{margin-top:20px}}
@media(max-width:700px){.topbar{height:66px;padding:8px 12px;margin-bottom:10px}.identity .mark{width:38px;height:38px;font-size:34px}.identity strong{font-size:16px;letter-spacing:1px}.identity small{font-size:8px;letter-spacing:1px}.currency,.icon-btn{min-height:38px;min-width:36px;padding:7px;font-size:14px}.currency b{font-size:13px}.topstats{gap:4px}.layout{display:flex;padding:0 11px 85px;gap:5px}.nav{background:#fffef8ed;border-top:1px solid #e1e6d6;backdrop-filter:blur(14px);border-radius:20px 20px 0 0;padding:7px 5px calc(7px + env(safe-area-inset-bottom));gap:2px}.nav-btn{border-radius:15px;min-height:51px}.nav-btn span{font-size:20px}.nav-btn b{font-size:10px}.page-head{margin:3px 4px 14px}h1{font-size:22px}.eyebrow{font-size:8px}.subtext{font-size:11px}.home-layout{grid-template-columns:1fr}.scene{height:345px;margin:10px 7px 0}.scene-top{padding:13px 14px 0}.scene-top h2{font-size:18px}.pet-avatar-main{width:350px;height:350px}.pet-speech{font-size:10px;max-width:93%}.action-row{gap:5px}.action-tile{border-radius:16px;min-height:82px}.action-tile span{font-size:23px}.action-tile b{font-size:10px}.action-tile small{font-size:9px}.home-right{display:flex}.home-right .banner{display:flex}.home-right .panel{padding:18px}.collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pet-card{padding:10px;min-height:225px}.pet-card .refined-portrait{width:155px;height:155px}.pet-card .pet-illustration{height:125px}.pet-card small{font-size:10px}.modal{padding:16px}.modal .collection{grid-template-columns:repeat(2,minmax(0,1fr))}.modal .pet-card{min-height:180px}.modal .pet-card b{font-size:13px}.welcome{min-height:620px;display:block}.welcome-copy{padding:16px;max-width:100%}.welcome h1{font-size:29px}.welcome>img{width:78%;bottom:-20px;right:-5%}.welcome-copy p{font-size:12px}.welcome .primary{font-size:13px}.food-options{gap:8px}.food-options button{font-size:15px}.care-prop.bath{left:26%}.care-prop.sleep{left:28%}.scene-top .chip{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}.pet-speech{backdrop-filter:none}}

@media(min-width:901px) and (max-width:1199px){.page-head{margin-bottom:12px}.layout{padding-bottom:12px}}

/* Anchor care props to the same contact plane as the bird's feet and beak. */
.care-prop.feed{left:50%;bottom:17%}
.care-prop.bath{left:calc(50% - 95px);bottom:14%}
.care-prop.sleep{left:calc(50% - 90px);bottom:14%}
.food-bowl{font-size:0;background:radial-gradient(ellipse at 30% 25%,#d4ac53 0 5%,transparent 6%),radial-gradient(ellipse at 60% 35%,#b78a37 0 6%,transparent 7%),radial-gradient(ellipse at 44% 20%,#ead08a 0 8%,transparent 9%),linear-gradient(#d2b782 0 28%,#c99961 30% 65%,#a97848 90%);height:35px;border:2px solid #dfbd87;border-bottom:8px solid #b58653;box-shadow:inset 0 3px 3px #6c4a2520,0 3px 4px #3c50272c}
.scene[data-care=feed] .food-bowl{animation:seedmeal 2.2s linear forwards}
@keyframes seedmeal{to{filter:saturate(.7)}}
#main{align-self:stretch;width:100%}
.pet-avatar-main{height:auto;aspect-ratio:1}