/* ===== Hewan pendamping ===== */
.parab{font-weight:600;color:var(--muted);font-size:.9em;margin-inline-start:6px;unicode-bidi:isolate}
.petrow{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.petbtn{flex:none;width:76px;height:76px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--surface)}
.petbtn svg{width:64px;height:64px;display:block}
.pbub{min-width:0;padding:10px 14px;line-height:1.4;background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px}
.pbub b{display:block;font-size:.95rem}.pbub #petln{display:block;color:var(--muted);font-size:.9rem}
.si .stage.pimg{position:relative}
.si .stage.pimg::after{content:'';position:absolute;bottom:7px;left:50%;width:46px;height:8px;margin-left:-23px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.3),transparent)}
.si .stage.pimg svg{position:relative;z-index:1;width:84px;height:84px;display:block}
@media(max-width:560px){.si .stage.pimg svg{width:62px;height:62px}.petbtn{width:64px;height:64px}.petbtn svg{width:54px;height:54px}}

/* --- Animasi hidup: hanya transform dan opacity (tanpa filter), tanpa JS per frame ---
   .live = sedang terlihat (maks. 4 sekaligus, diatur petLive). .act = reaksi sesaat saat disentuh. */
.pa{overflow:visible}
.pa *{transform-box:view-box}
.pa .bl{transform-box:fill-box;transform-origin:center}
.pa.act{transform-origin:50% 100%}.pa-lebah.act{transform-origin:50% 60%}
.pa-kucing .k-tail{transform-origin:72px 90px}.pa-kucing .k-body{transform-origin:50px 100px}.pa-kucing .k-head{transform-origin:50px 80px}.pa-kucing .k-earl{transform-origin:34px 40px}.pa-kucing .k-earr{transform-origin:66px 40px}
.pa-semut .s-antl{transform-origin:40px 24px}.pa-semut .s-antr{transform-origin:60px 24px}.pa-semut .s-legl{transform-origin:42px 72px}.pa-semut .s-legr{transform-origin:58px 72px}.pa-semut .s-head,.pa-semut .s-body{transform-origin:50px 62px}
.pa-lebah .l-all{transform-origin:50px 60px}.pa-lebah .l-wingl{transform-origin:40px 46px}.pa-lebah .l-wingr{transform-origin:60px 46px}.pa-lebah .l-antl{transform-origin:42px 32px}.pa-lebah .l-antr{transform-origin:58px 32px}
.pa-hudhud .h-head{transform-origin:46px 72px}.pa-hudhud .h-crest{transform-origin:46px 38px}.pa-hudhud .h-wing{transform-origin:56px 74px}
.pa-unta .u-neck{transform-origin:36px 60px}.pa-unta .u-tail{transform-origin:88px 62px}.pa-unta .u-body{transform-origin:58px 84px}
.pa-gajah .g-trunk{transform-origin:50px 58px}.pa-gajah .g-earl{transform-origin:35px 46px}.pa-gajah .g-earr{transform-origin:65px 46px}
.pa-paus .w-all{transform-origin:50px 60px}.pa-paus .w-tail{transform-origin:82px 62px}.pa-paus .w-spout{transform-origin:46px 24px}

/* napas dan kedip (semua hewan; jeda panjang di antara kedipan supaya hemat) */
.pa.live .bl{animation:pa-blink 5s infinite}
.pa-semut.live .bl{animation-duration:6.3s;animation-delay:-1.7s}.pa-lebah.live .bl{animation-duration:4.2s;animation-delay:-.9s}.pa-hudhud.live .bl{animation-duration:5.6s;animation-delay:-3s}
.pa-unta.live .bl{animation-duration:6.8s;animation-delay:-2.4s}.pa-gajah.live .bl{animation-duration:5.9s;animation-delay:-4s}.pa-paus.live .bl{animation-duration:6.1s;animation-delay:-1s}
@keyframes pa-blink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
@keyframes pa-ant{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes pa-br{from{transform:scaleY(1)}to{transform:scaleY(1.035)}}

/* kucing: ekor mengibas, bernapas, kepala miring, telinga berkedut */
.pa-kucing.live .k-tail{animation:pa-sw 3s ease-in-out infinite alternate}
.pa-kucing.live .k-body{animation:pa-br 3.4s ease-in-out infinite alternate}
.pa-kucing.live .k-head{animation:pa-tilt 5.2s ease-in-out infinite alternate}
.pa-kucing.live .k-earl{animation:pa-twl 7s infinite}.pa-kucing.live .k-earr{animation:pa-twr 7s infinite -3.5s}
@keyframes pa-sw{from{transform:rotate(-7deg)}to{transform:rotate(11deg)}}
@keyframes pa-tilt{from{transform:rotate(-2deg)}to{transform:rotate(2.4deg)}}
@keyframes pa-twl{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-10deg)}94%{transform:rotate(2deg)}}
@keyframes pa-twr{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(10deg)}94%{transform:rotate(-2deg)}}
/* semut: sungut bergoyang, kaki bergerak patah-patah (steps = hanya 4 gambar/detik), kepala mengangguk */
.pa-semut.live .s-antl{animation:pa-ant 1.9s ease-in-out infinite alternate}
.pa-semut.live .s-antr{animation:pa-ant 1.9s ease-in-out infinite alternate-reverse -.6s}
.pa-semut.live .s-legl{animation:pa-leg .5s steps(1,end) infinite}.pa-semut.live .s-legr{animation:pa-leg .5s steps(1,end) infinite -.25s}
.pa-semut.live .s-head{animation:pa-hb 3.6s ease-in-out infinite alternate}.pa-semut.live .s-body{animation:pa-ab 2.8s ease-in-out infinite alternate}
@keyframes pa-leg{0%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes pa-hb{from{transform:rotate(-3deg)}to{transform:rotate(3.5deg)}}
@keyframes pa-ab{from{transform:rotate(2.5deg)}to{transform:rotate(-2.5deg)}}
/* lebah: melayang, sayap mengepak cepat (steps = 10 gambar/detik), sungut bergoyang */
.pa-lebah.live .l-all{animation:pa-hov 2.4s ease-in-out infinite alternate}
.pa-lebah.live .l-wingl{animation:pa-fl .2s steps(1,end) infinite}.pa-lebah.live .l-wingr{animation:pa-fr .2s steps(1,end) infinite}
.pa-lebah.live .l-antl{animation:pa-ant 1.4s ease-in-out infinite alternate}.pa-lebah.live .l-antr{animation:pa-ant 1.4s ease-in-out infinite alternate-reverse}
@keyframes pa-hov{from{transform:translateY(1.5px) rotate(-1.5deg)}to{transform:translateY(-3px) rotate(1.5deg)}}
@keyframes pa-fl{0%{transform:rotate(-12deg)}50%{transform:rotate(7deg)}}
@keyframes pa-fr{0%{transform:rotate(12deg)}50%{transform:rotate(-7deg)}}
/* hud-hud: mematuk dua kali, jambul mengembang, sayap bergetar halus */
.pa-hudhud.live .h-head{animation:pa-peck 5s infinite}.pa-hudhud.live .h-crest{animation:pa-cr 6s infinite}.pa-hudhud.live .h-wing{animation:pa-ruf 4s ease-in-out infinite alternate}
@keyframes pa-peck{0%,66%,100%{transform:rotate(0)}72%{transform:rotate(9deg)}78%{transform:rotate(-1deg)}84%{transform:rotate(8deg)}90%{transform:rotate(0)}}
@keyframes pa-cr{0%,58%,100%{transform:scale(1)}64%,74%{transform:scale(1.08,1.12)}82%{transform:scale(1)}}
@keyframes pa-ruf{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
/* unta: leher berayun pelan, ekor mengibas, punuk naik turun */
.pa-unta.live .u-neck{animation:pa-nk 4.6s ease-in-out infinite alternate}.pa-unta.live .u-tail{animation:pa-ts 2.2s ease-in-out infinite alternate}.pa-unta.live .u-body{animation:pa-br 3.8s ease-in-out infinite alternate}
@keyframes pa-nk{from{transform:rotate(-3.5deg)}to{transform:rotate(3deg)}}
@keyframes pa-ts{from{transform:rotate(-6deg)}to{transform:rotate(14deg)}}
/* gajah: belalai berayun, telinga mengepak dua kali */
.pa-gajah.live .g-trunk{animation:pa-tr 3.2s ease-in-out infinite alternate}.pa-gajah.live .g-earl{animation:pa-el 5s infinite}.pa-gajah.live .g-earr{animation:pa-er 5s infinite}
@keyframes pa-tr{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes pa-el{0%,68%,100%{transform:rotate(0)}74%,86%{transform:rotate(11deg)}80%,92%{transform:rotate(0)}}
@keyframes pa-er{0%,68%,100%{transform:rotate(0)}74%,86%{transform:rotate(-11deg)}80%,92%{transform:rotate(0)}}
/* paus: mengapung, sirip ekor melambai, semburan air muncul sesekali */
.pa-paus.live .w-all{animation:pa-fl2 3.4s ease-in-out infinite alternate}.pa-paus.live .w-tail{animation:pa-tl 2.4s ease-in-out infinite alternate}.pa-paus.live .w-spout{animation:pa-sp 4.6s ease-out infinite}
@keyframes pa-fl2{from{transform:translateY(2px) rotate(-1.2deg)}to{transform:translateY(-3px) rotate(1.4deg)}}
@keyframes pa-tl{from{transform:rotate(-6deg)}to{transform:rotate(9deg)}}
@keyframes pa-sp{0%,52%{opacity:0;transform:scale(.5) translateY(5px)}62%{opacity:1;transform:scale(1) translateY(0)}84%{opacity:.9;transform:scale(1.05)}94%,100%{opacity:0;transform:scale(1.1) translateY(-3px)}}

/* reaksi saat disentuh: tiap hewan berbeda */
.pa-kucing.act{animation:pa-jump .75s ease-out}.pa-kucing.act .k-tail{animation:pa-flick .75s ease-in-out}
.pa-semut.act{animation:pa-scur .8s ease-in-out}
.pa-lebah.act{animation:pa-loop .95s ease-in-out}
.pa-hudhud.act .h-head{animation:pa-peck3 .9s ease-in-out}.pa-hudhud.act .h-crest{animation:pa-fan .9s ease-out}
.pa-unta.act .u-neck{animation:pa-toss .9s ease-in-out}
.pa-gajah.act .g-trunk{animation:pa-tw .9s ease-in-out}.pa-gajah.act .g-earl{animation:pa-el2 .9s ease-in-out}.pa-gajah.act .g-earr{animation:pa-er2 .9s ease-in-out}
.pa-paus.act{animation:pa-leap .95s ease-in-out}.pa-paus.act .w-spout{animation:pa-spb .95s ease-out}
@keyframes pa-jump{0%{transform:scale(1.06,.92)}25%{transform:translateY(-16px) scale(.96,1.06)}55%{transform:scale(1.06,.92)}75%{transform:translateY(-4px)}100%{transform:none}}
@keyframes pa-flick{0%,100%{transform:rotate(0)}30%{transform:rotate(30deg)}60%{transform:rotate(-14deg)}}
@keyframes pa-scur{0%,100%{transform:none}15%{transform:translateX(-10px) rotate(-7deg)}35%{transform:translateX(10px) rotate(7deg)}55%{transform:translateX(-7px) rotate(-5deg)}75%{transform:translateX(6px) rotate(4deg)}}
@keyframes pa-loop{0%{transform:none}25%{transform:translate(14px,-12px) rotate(90deg)}50%{transform:translate(0,-22px) rotate(180deg)}75%{transform:translate(-14px,-12px) rotate(270deg)}100%{transform:rotate(360deg)}}
@keyframes pa-peck3{0%,100%{transform:rotate(0)}15%,45%,75%{transform:rotate(11deg)}30%,60%{transform:rotate(-2deg)}}
@keyframes pa-fan{0%,100%{transform:scale(1)}25%,70%{transform:scale(1.28,1.38)}}
@keyframes pa-toss{0%,100%{transform:rotate(0)}30%{transform:rotate(-16deg)}60%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}}
@keyframes pa-tw{0%,100%{transform:rotate(0)}25%{transform:rotate(-28deg)}55%{transform:rotate(26deg)}80%{transform:rotate(-12deg)}}
@keyframes pa-el2{0%,40%,80%,100%{transform:rotate(0)}20%,60%{transform:rotate(16deg)}}
@keyframes pa-er2{0%,40%,80%,100%{transform:rotate(0)}20%,60%{transform:rotate(-16deg)}}
@keyframes pa-leap{0%,100%{transform:none}35%{transform:translateY(-22px) rotate(-14deg)}65%{transform:translateY(-6px) rotate(8deg)}}
@keyframes pa-spb{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.4) translateY(-6px)}}

/* hemat daya: jeda saat tab disembunyikan, mati total di mode hemat dan saat "kurangi gerakan" */
.pa-off .pa,.pa-off .pa *{animation-play-state:paused!important}
.lite .pa.live:not(.act),.lite .pa.live:not(.act) *{animation:none!important}
@media(prefers-reduced-motion:reduce){.pa,.pa *{animation:none!important}}

/* wajah hewan di setiap balasan jawaban (.fb): gambar statis, gerakannya beda tiap hewan */
.fb::before{content:'';float:left;width:40px;height:40px;margin:-6px 12px -6px -6px;background:var(--pet-idle) center/contain no-repeat}
.fb.ok::before{background-image:var(--pet-ok);animation:phop .6s}.fb.no::before{background-image:var(--pet-no);animation:pshk .5s}
.fb::after{content:'';display:block;clear:both}
@keyframes phop{0%{transform:translateY(0)}30%{transform:translateY(-12px) rotate(-6deg)}60%{transform:translateY(0)}80%{transform:translateY(-4px)}100%{transform:none}}
@keyframes pshk{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes pf-ant{0%,100%{transform:none}15%{transform:translateX(-5px) rotate(-10deg)}35%{transform:translateX(5px) rotate(10deg)}55%{transform:translateX(-4px) rotate(-7deg)}75%{transform:translateX(3px) rotate(5deg)}}
@keyframes pf-bee{0%,100%{transform:none}25%{transform:translate(6px,-9px) rotate(12deg)}50%{transform:translate(-6px,-13px) rotate(-12deg)}75%{transform:translate(5px,-5px) rotate(8deg)}}
@keyframes pf-hud{0%,40%,80%,100%{transform:none}20%,60%{transform:translateY(-6px) scale(1.1)}}
@keyframes pf-cam{0%,100%{transform:none}30%{transform:rotate(-12deg)}60%{transform:rotate(7deg)}}
@keyframes pf-ele{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.1)}55%{transform:rotate(12deg) scale(1.1)}80%{transform:rotate(-5deg)}}
@keyframes pf-wha{0%,100%{transform:none}35%{transform:translateY(-13px) rotate(-16deg)}70%{transform:translateY(-3px) rotate(8deg)}}
@keyframes pf-droop{0%{transform:none}30%,100%{transform:translateY(4px) scale(.94) rotate(-6deg)}}
@keyframes pf-sink{0%{transform:none}30%,100%{transform:translateY(6px) rotate(10deg)}}
html[data-pet=p_semut] .fb.ok::before{animation-name:pf-ant}html[data-pet=p_lebah] .fb.ok::before{animation-name:pf-bee}html[data-pet=p_hudhud] .fb.ok::before{animation-name:pf-hud}
html[data-pet=p_unta] .fb.ok::before{animation-name:pf-cam}html[data-pet=p_gajah] .fb.ok::before{animation-name:pf-ele}html[data-pet=p_paus] .fb.ok::before{animation-name:pf-wha}
html[data-pet=p_unta] .fb.no::before,html[data-pet=p_gajah] .fb.no::before{animation:pf-droop .6s forwards}
html[data-pet=p_lebah] .fb.no::before,html[data-pet=p_paus] .fb.no::before{animation:pf-sink .6s forwards}
@media(prefers-reduced-motion:reduce){.fb::before{animation:none!important}}