/* حيواني الأليف — meters, soap bubbles, food flying to the pet, a bouncing toy */
.pet-meters{position:absolute;left:4%;right:30%;top:3%;display:grid;gap:3px;padding:6px 8px;border:2px solid var(--line);border-radius:14px;background:#fffd;z-index:4}
.pet-mood{position:absolute;left:50%;top:24%;translate:-50% 0;font-weight:800;font-size:16px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:999px;padding:0 10px;z-index:4}
.pet-mood:empty{display:none}
.pet-bubbles{position:absolute;inset:0;z-index:3}
.bubble{position:absolute;width:calc(9% * var(--s));aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#e8f7ffcc 30%,#b9e6ffaa 70%,#9fd8ff55);box-shadow:inset 0 0 0 1px #fff9;animation:bub .3s ease-out}
@keyframes bub{from{scale:.2}}
.fly-food{position:absolute;left:50%;bottom:-10%;width:20%;translate:-50% 0;z-index:5;transition:bottom .6s cubic-bezier(.3,1.3,.6,1),width .6s,opacity .6s}
.fly-food.go{bottom:48%;width:10%;opacity:.4}
.toy-bounce{position:absolute;left:70%;top:66%;width:18%;z-index:5;animation:toyB 1.3s ease-in-out}
@keyframes toyB{0%{transform:translate(0,40px) scale(.5)}25%{transform:translate(-40px,-60px) rotate(-90deg)}50%{transform:translate(-80px,0) rotate(-180deg)}75%{transform:translate(-110px,-40px) rotate(-270deg)}100%{transform:translate(-130px,10px) rotate(-360deg)}}
/* 2026-10-31: hunger + sleep */
.meter{font-size:13px}
.pet-think{position:absolute;left:66%;top:20%;width:20%;aspect-ratio:1;z-index:4;display:grid;place-items:center;border:2px solid var(--line);border-radius:50%;background:#fff;box-shadow:0 4px 10px #0002;animation:think 1.6s ease-in-out infinite}
.pet-think::before,.pet-think::after{content:"";position:absolute;border:2px solid var(--line);border-radius:50%;background:#fff}
.pet-think::before{width:22%;aspect-ratio:1;left:-14%;bottom:-6%}
.pet-think::after{width:12%;aspect-ratio:1;left:-30%;bottom:-24%}
.pet-think[hidden]{display:none}
.pet-think img{width:66%;height:66%;object-fit:contain}
@keyframes think{50%{transform:translateY(-6%)}}
.pet-hungry .gk-pick[data-k="pet"]{animation:droop 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes droop{50%{transform:scaleY(.96) rotate(-2deg)}}
.pet-sleepy .gk-pick[data-k="pet"]{animation:sway 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes sway{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.pet-chomp .gk-pick[data-k="pet"]{animation:chomp .5s ease-in-out 2}
@keyframes chomp{50%{transform:scale(1.06,.94)}}
.pet-no .gk-pick[data-k="pet"]{animation:nope .5s ease-in-out}
@keyframes nope{20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
.pet-night,.pet-bed,.pet-sleeper{position:absolute;opacity:0;pointer-events:none;transition:opacity .8s}
.pet-night{inset:0;z-index:1;background:radial-gradient(circle at 78% 14%,#fff8c6 0 3%,#fff8c600 6%),radial-gradient(ellipse at 50% 70%,rgba(30,20,80,.35),rgba(10,8,40,.78));}
.pet-bed{left:12%;top:58%;width:76%;z-index:2}
.pet-sleeper{left:19%;top:56%;width:62%;z-index:3;animation:breathe 2.8s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breathe{50%{transform:scale(1.02,1.04)}}
.pet-asleep .pet-night,.pet-asleep .pet-bed,.pet-asleep .pet-sleeper{opacity:1}
.pet-asleep .gk-pick[data-k="pet"],.pet-asleep .gk-stickers{opacity:0;transition:opacity .5s}
.pet-asleep .pet-think{display:none}
.pet-meters{gap:2px;padding:5px 8px}
.pet-mood{top:31%}
.pet-think{top:33%;left:68%;width:18%}
/* live pet (2026-10-31): animated clip on a canvas over the pet's place; finger drags it; it hops on release */
.pet-src{position:fixed;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none;z-index:-1}
.pet-live{position:absolute;left:20%;top:30%;width:60%;height:62%;object-fit:contain;object-position:50% 100%;z-index:2;opacity:0;pointer-events:none;touch-action:none;transition:opacity .4s;filter:drop-shadow(0 8px 10px #0003)}
.pet-live-on .pet-live{opacity:1;pointer-events:auto;cursor:grab}
.pet-live-on .gk-pick[data-k="pet"]{opacity:0}
.pet-drag .pet-live{cursor:grabbing;filter:drop-shadow(0 18px 14px #0004);scale:1.06}
.pet-live.hop{animation:pet-hop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pet-hop{0%{translate:0 0}40%{translate:0 -9%}100%{translate:0 0}}
.gk-stickers{transition:transform .05s linear}
.pet-asleep .pet-live{opacity:0;pointer-events:none}
.pet-hungry .pet-live{filter:saturate(.85) drop-shadow(0 8px 10px #0003)}
.pet-chomp .pet-live{animation:chomp .5s ease-in-out 2}
.pet-no .pet-live{animation:nope .5s ease-in-out}