*{box-sizing:border-box;margin:0}body{font-family:-apple-system,"PingFang SC","Noto Sans CJK SC",sans-serif;background:linear-gradient(#fbf3e8,#f3e4d0);color:#5a4636;min-height:100vh;display:flex;flex-direction:column;max-width:520px;margin:auto;-webkit-tap-highlight-color:transparent;user-select:none}
header{padding:16px 20px 0;display:flex;justify-content:space-between;align-items:center}h1{font-size:22px;letter-spacing:4px}
.bars{display:flex;gap:12px;font-size:12px}.bars label{display:flex;align-items:center;gap:4px}.bar{width:60px;height:8px;background:#e9dccb;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:#e0a070;transition:width .5s}
main{flex:1;position:relative;min-height:340px;overflow:hidden}
#pet{position:absolute;left:50%;bottom:20px;width:260px;margin-left:-130px;transition:transform 1.6s ease-in-out}
#pet{width:300px;margin-left:-150px}#breath{position:relative;width:100%;aspect-ratio:1;transform-origin:50% 95%;animation:breathe 3.2s ease-in-out infinite}
#breath img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s ease;pointer-events:none;filter:drop-shadow(0 10px 8px #6a4a2a22)}#breath img.on{opacity:1}
@keyframes breathe{50%{transform:scale(1.012,1.022)}}.sleep #breath{animation-duration:4.6s}
.happy #breath{animation:hop .45s ease-out 2}@keyframes hop{40%{transform:translateY(-16px) scale(1.01,.99)}}
.pet #breath{animation:nuzzle 1s ease-in-out infinite}@keyframes nuzzle{50%{transform:rotate(1.6deg) scale(1.01,1.02)}}
.eat #breath{animation:chew .45s ease-in-out infinite}@keyframes chew{50%{transform:translateY(3px) scaleY(.99)}}
.ball #breath{animation:trot .32s ease-in-out infinite}@keyframes trot{50%{transform:translateY(-6px)}}
.zzz{position:absolute;right:16%;top:28%;font-size:24px;color:#8a7a6a;display:none}.zzz span{font-size:16px;margin-left:4px}.sleep .zzz{display:block;animation:fl 2.4s infinite}@keyframes fl{50%{opacity:.3;transform:translateY(-8px)}}
.flip img{transform:scaleX(-1)}
#bubble{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#fff;padding:8px 14px;border-radius:16px;font-size:15px;box-shadow:0 2px 8px #0001;opacity:0;transition:opacity .3s;white-space:nowrap}#bubble.on{opacity:1}
#ball{position:absolute;width:26px;height:26px;border-radius:50%;background:#ff8a3d;display:none;bottom:40px}
.heart{position:absolute;font-size:22px;pointer-events:none;animation:up 1.2s forwards}@keyframes up{to{transform:translateY(-80px);opacity:0}}
.ctrl{padding:10px 16px}.btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}button{flex:1;border:0;border-radius:14px;padding:12px 4px;background:#fff;color:#5a4636;font-size:15px;box-shadow:0 2px 6px #0000000d}button:active{transform:scale(.96)}
form{display:flex;gap:8px;margin-top:10px}input{flex:1;border:1px solid #e6d6c2;border-radius:14px;padding:10px 12px;font-size:16px;background:#fffaf4}form button{flex:0 0 60px}
.tip{text-align:center;font-size:12px;color:#a08a74;margin-top:8px}footer{text-align:center;font-size:12px;color:#b09a84;padding:10px 0 calc(14px + env(safe-area-inset-bottom))}

.mirror img{transform:scaleX(-1)}
.shake #breath{animation:shk .5s ease-in-out 3}@keyframes shk{50%{transform:translateY(-5px) rotate(-1.5deg)}}
.wave #breath{animation:wv .4s ease-in-out 5;transform-origin:50% 95%}@keyframes wv{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.jump #breath{animation:jp .9s cubic-bezier(.3,.6,.4,1) 2}@keyframes jp{15%{transform:scale(1.04,.94)}45%{transform:translateY(-110px) scale(.98,1.03)}80%{transform:translateY(0) scale(1.05,.93)}100%{transform:none}}
.bark #breath{animation:bk .35s ease-out 2}@keyframes bk{30%{transform:translateY(-8px) scale(1.03)}}
.beg #breath{animation:bw .6s ease-in-out 3;transform-origin:50% 95%}@keyframes bw{50%{transform:translateY(4px) scale(1,.98)}}
.belly #breath{animation:wg .5s ease-in-out infinite}@keyframes wg{50%{transform:rotate(1.5deg)}}
.roll #breath img,.spin #breath img{transition:opacity .06s linear}.roll #breath,.spin #breath{animation:none;transition:transform .14s ease-out}