/* Питомец: рисунок живёт сам по себе — дышит, моргает, виляет хвостом; радуется прыжком, спит, когда человека долго не было.
   Всё движение мягкое и негромкое; при системной настройке «меньше движения» оно выключается общим правилом из motion.css.
   Раздел пока выключен (PET_READY в core/model-pet.js), стили ждут его включения. */
.pet-art{display:block;overflow:visible}
.pet-art .p-shadow{fill:rgba(0,0,0,.10)}
.pet-art .p-ink{fill:#2b2a33}
.pet-art .p-line{fill:none;stroke:#2b2a33;stroke-width:2.4;stroke-linecap:round}
.pet-art .p-hair{fill:none;stroke:rgba(43,42,51,.35);stroke-width:1.6;stroke-linecap:round}
.pet-art .p-cheek{fill:#f59fb0;opacity:.55}
.pet-art .p-crack{fill:none;stroke:rgba(60,50,40,.55);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pet-art .p-zzz{font:800 13px var(--font);fill:var(--muted);animation:pet-zzz 2.6s ease-in-out infinite}
.pet-art .p-zzz.z2{font-size:10px;animation-delay:.9s}
.pet-art .p-aura{opacity:.22;transform-origin:60px 64px;animation:pet-aura 3.6s ease-in-out infinite}
.pet-art .p-all{transform-origin:60px 110px}
.pet-art .p-body{transform-origin:60px 112px;animation:pet-breathe 3.4s ease-in-out infinite}
.pet-art .p-head{transform-origin:60px 80px;animation:pet-nod 5.2s ease-in-out infinite}
.pet-art .p-eye{transform-origin:60px 56px;transform-box:fill-box;animation:pet-blink 4.6s infinite}
.pet-art .p-tail{transform-box:fill-box;transform-origin:0% 100%;animation:pet-wag 1.7s ease-in-out infinite}
.pet-art .p-ear-l,.pet-art .p-ear-r{transform-box:fill-box;transform-origin:50% 100%;animation:pet-twitch 6.5s ease-in-out infinite}
.pet-art .p-ear-r{animation-delay:.25s}
.pet-art .p-spark{transform-box:fill-box;transform-origin:center;animation:pet-twinkle 2.2s ease-in-out infinite}
.pet-art .p-spark.s2{animation-delay:.8s}
.pet-art .p-drops circle{animation:pet-drop 2.4s ease-in infinite}
.pet-art .p-drops circle:nth-child(2){animation-delay:.6s}.pet-art .p-drops circle:nth-child(3){animation-delay:1.2s}
.pet-cloud .p-all{animation:pet-float 4s ease-in-out infinite}
.pet-egg .p-all{transform-origin:60px 104px;animation:pet-wobble 2.6s ease-in-out infinite}
.pet-art.sleep .p-body{animation-duration:5.2s}
.pet-art.sleep .p-head{animation:none;transform:rotate(-4deg)}
.pet-art.sleep .p-tail,.pet-art.sleep .p-ear-l,.pet-art.sleep .p-ear-r{animation:none}
.pet-art.happy .p-all,.pet-cheer .p-all{animation:pet-jump .62s cubic-bezier(.3,1.5,.5,1) 3}
.pet-art.happy .p-tail{animation-duration:.5s}
@keyframes pet-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
@keyframes pet-nod{0%,100%{transform:rotate(0)}30%{transform:rotate(2.2deg)}65%{transform:rotate(-1.8deg)}}
@keyframes pet-blink{0%,92%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.08)}}
@keyframes pet-wag{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes pet-twitch{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-7deg)}96%{transform:rotate(4deg)}}
@keyframes pet-twinkle{0%,100%{transform:scale(.6);opacity:.45}50%{transform:scale(1.15);opacity:1}}
@keyframes pet-aura{0%,100%{transform:scale(.92);opacity:.16}50%{transform:scale(1.04);opacity:.3}}
@keyframes pet-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pet-wobble{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-5deg)}84%{transform:rotate(5deg)}92%{transform:rotate(-2deg)}}
@keyframes pet-jump{0%,100%{transform:translateY(0) scale(1,1)}35%{transform:translateY(-13px) scale(.97,1.04)}70%{transform:translateY(0) scale(1.05,.94)}}
@keyframes pet-zzz{0%{opacity:0;transform:translate(0,4px)}40%{opacity:1}100%{opacity:0;transform:translate(5px,-9px)}}
@keyframes pet-drop{0%{opacity:0;transform:translateY(-4px)}30%{opacity:.9}100%{opacity:0;transform:translateY(9px)}}

/* Карточка питомца: рисунок и его слова */
.petcard,button.card.petcard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;color:var(--text)}
.petcard .pet-art{flex:none}
.petcard .p-say{display:block;font-size:15.5px;font-weight:700;line-height:1.3}
.petcard .p-sub{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.petcard .bar{display:block;margin-top:9px}
.petcard.ask{background:linear-gradient(135deg,var(--accent-soft),transparent 70%),var(--surface-2)}
.app[data-variant="b"] .petcard.ask{background:linear-gradient(135deg,var(--accent-soft),transparent 70%),var(--surface)}
/* Экран питомца: сцена с мягким светом цвета питомца, имя, рост */
.pet-stage{position:relative;display:grid;place-items:center;margin:4px 20px 14px;padding:22px 0 12px;border-radius:calc(var(--r) + 8px);background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--pc,var(--accent)) 26%,transparent),transparent 72%),var(--surface-2);overflow:hidden}
.app[data-variant="b"] .pet-stage{margin:4px 14px 14px;background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--pc,var(--accent)) 26%,transparent),transparent 72%),var(--surface);box-shadow:var(--shadow)}
.pet-stage .pet-art{width:min(62vw,230px);height:auto}
.pet-name{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font-size:22px;font-weight:var(--head-w);letter-spacing:var(--head-track)}
.pet-name input{width:9ch;min-width:5ch;max-width:70%;border:0;outline:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:center;field-sizing:content}
.pet-phase{margin-top:2px;font-size:13px;color:var(--muted)}
.pet-stage .tag{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#f5a623,#f27aa5)}
.pet-grow{margin:0 20px 6px}
.app[data-variant="b"] .pet-grow{margin:0 14px 6px}
.pet-grow .bar{display:block;height:10px}
.pet-grow .row{display:flex;justify-content:space-between;margin-top:7px;font-size:12.5px;color:var(--muted)}
.pet-phases{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 20px 4px}
.app[data-variant="b"] .pet-phases{margin:10px 14px 4px}
.pet-phases i{display:grid;place-items:center;height:30px;border-radius:10px;font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);background:color-mix(in srgb,var(--muted) 12%,transparent)}
.pet-phases i.was{color:var(--text);background:color-mix(in srgb,var(--pc,var(--accent)) 30%,transparent)}
.pet-phases i.on{color:#fff;background:var(--pc,var(--accent))}
.pet-today .rowi .r-val{font-variant-numeric:tabular-nums}
.pet-today .rowi.off{opacity:.45}
.pets-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 20px 20px}
.app[data-variant="b"] .pets-grid{margin:0 14px 20px}
.app[data-device="desktop"] .pets-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-width:760px}
.pet-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 9px;border-radius:var(--r);background:var(--surface-2);color:var(--text);font-size:12.5px;font-weight:700;text-align:center}
.app[data-variant="b"] .pet-slot{background:var(--surface);box-shadow:var(--shadow)}
.pet-slot.on{box-shadow:inset 0 0 0 2px var(--accent)}
.pet-slot small{font-weight:600;color:var(--muted)}
.pet-slot .pet-art{width:74px;height:74px}
/* Короткая радость в углу экрана, когда человек что-то сделал */
.pet-cheer{position:absolute;right:14px;bottom:92px;z-index:25;pointer-events:none;animation:cheer-in 2.1s cubic-bezier(.2,.8,.2,1) both}
.app[data-device="desktop"] .pet-cheer{right:28px;bottom:28px}
.pet-cheer .pet-art{width:84px;height:84px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}
@keyframes cheer-in{0%{opacity:0;transform:translateY(40px) scale(.7)}14%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(24px) scale(.85)}}
/* Новое яйцо и новая фаза: мягкая вспышка цвета питомца */
.pet-burst{position:relative}
.pet-burst::before{content:'';position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pc,var(--accent)) 55%,transparent),transparent 62%);animation:burst 1.4s ease-out both;pointer-events:none}
@keyframes burst{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
.sheet .pet-hero{display:grid;place-items:center;margin:4px 0 8px}
.sheet .pet-hero .pet-art{width:170px;height:170px}
.sheet .pet-hero + h3{text-align:center;font-size:21px;font-weight:var(--head-w);letter-spacing:var(--head-track)}
.sheet .pet-hero ~ p{margin:6px 0 16px;text-align:center;color:var(--muted)}