/* Tuntii'nin evcil üçgeni — pet, bahçe ve mağaza stilleri.
   JS tarafı: static/js/pet/ */
#pet {
    position: fixed;
    top: 0;
    left: 0;
    width: 48px;
    height: 46px;
    z-index: 50;
    cursor: pointer;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    touch-action: none;
}
#pet .pet-sprite {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 50% 88%;
}
#pet .pet-svg {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: center;
}
#pet,
#pet-store .ps-stage-pet {
    --pc: var(--accent, #c45c26);
}
/* eğilme ve squash ayak tabanından; sürüklerken tutulan yerden */
#pet:not(.dragging) {
    transform-origin: 50% 100%;
}
#pet.dragging {
    transform-origin: 50% 25%;
}

/* gölgelendirme: gradyan durakları CSS'ten, vurgu rengini (temayla) takip eder */
.pet-svg .pg-hi {
    stop-color: color-mix(in oklch,var(--pc) 58%,white);
}
.pet-svg .pg-mid {
    stop-color: var(--pc);
}
.pet-svg .pg-lo {
    stop-color: color-mix(in oklch,var(--pc) 66%,black);
}
.pet-svg .pet-body {
    stroke: color-mix(in oklch,var(--pc) 55%,black);
    stroke-width: .9;
    stroke-linejoin: round;
    stroke-opacity: .55;
}
.pet-svg .pet-belly {
    fill: #fff;
    opacity: .13;
}
.pet-svg .pet-shine {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-width: 1.5;
    opacity: .55;
}
.pet-svg .pet-shine-side {
    stroke-width: 1.2;
    opacity: .22;
}
.pet-svg .pet-glint {
    fill: #fff;
    transition: opacity .1s ease;
}

/* Bacaklar HTML (SVG değil) — CSS transform her tarayıcıda çalışır. Origin üstte: scaleY uzatınca bacak aşağı uzar (görünür). */
#pet .pet-leg {
    position: absolute;
    z-index: 1;
    bottom: 1px;
    width: 9px;
    height: 13px;
    border-radius: 5px 5px 4px 4px;
    background: linear-gradient(180deg,color-mix(in oklch,var(--pc) 70%,black),color-mix(in oklch,var(--pc) 56%,black));
    box-shadow: inset 0 -2px 0 oklch(0 0 0 / .14);
    transform-origin: 50% 0%;
    will-change: transform;
}
#pet .pet-foot-l {
    left: 11px;
}
#pet .pet-foot-r {
    left: 28px;
}
#pet .pet-icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
#pet .pet-coin-pop {
    position: absolute;
    left: 50%;
    bottom: 100%;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font: 700 11px var(--sans,sans-serif);
    color: var(--accent);
    pointer-events: none;
    animation: pet-coin-pop .8s ease-out forwards;
    transform: translateX(-50%);
}
#pet .pet-coin-pop .pet-icon {
    width: 12px;
    height: 12px;
}
@keyframes pet-coin-pop {
    0% { opacity:0;transform:translate(-50%,4px) scale(.6) }
    20% { opacity:1 }
    100% { opacity:0;transform:translate(-50%,-28px) scale(1) }
}

/* Giyinme animasyonu */
#pet.dressing .pet-sprite {
    animation: pet-dress .72s cubic-bezier(.34,1.4,.64,1);
}
@keyframes pet-dress {
    0% { transform:scale(1,1) rotate(0) }
    18% { transform:scale(1.14,.84) rotate(-8deg) }
    42% { transform:scale(.9,1.12) rotate(7deg) }
    68% { transform:scale(1.08,.92) rotate(-3deg) }
    100% { transform:scale(1,1) rotate(0) }
}
#pet .pet-eye {
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .12s ease,transform .08s ease;
}
#pet .pet-pupil {
    fill: #2c2416;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .15s ease,opacity .12s ease;
}
#pet .pet-pupils {
    transition: transform .18s ease;
}
#pet .pet-cheek {
    fill: #fff;
    opacity: .28;
    transition: opacity .2s ease,fill .2s ease,transform .2s ease;
}
#pet .eye-closed {
    stroke: #2c2416;
    stroke-width: 1.6;
    stroke-linecap: round;
    fill: none;
    opacity: 0;
    transition: opacity .12s ease;
}

/* Ağız / dil — varsayılan gizli, ifade sınıflarıyla açılır */
#pet .pet-mouth,
#pet .pet-tongue {
    opacity: 0;
    transition: opacity .14s ease,transform .18s ease;
    transform-box: fill-box;
    transform-origin: center;
}
#pet .pet-mouth-line {
    stroke: #2c2416;
    stroke-width: 1.35;
    stroke-linecap: round;
    fill: none;
}
#pet .pet-mouth-cat {
    stroke: #2c2416;
    stroke-width: 1.45;
    stroke-linecap: round;
    fill: none;
}
#pet .pet-mouth-open {
    fill: #2c2416;
    stroke: none;
}
#pet .pet-tongue {
    fill: #e8899a;
    stroke: none;
}
#pet.face-right .pet-pupils {
    transform: translateX(2px);
}
#pet.face-left .pet-pupils {
    transform: translateX(-2px);
}
#pet.asleep .pet-eye,
#pet.asleep .pet-pupil,
#pet.asleep .pet-glint,
#pet.face-purr .pet-glint,
#pet.yawning .pet-glint {
    opacity: 0;
}
#pet.asleep .eye-closed {
    opacity: 1;
}

/* —— Bebek / kedi sevgi yüzleri —— */

/* Cat smile: ^ω^ benzeri yumuşak kavis + kısık mutlu göz */
#pet.face-cat-smile .pet-mouth-cat {
    opacity: 1;
}
#pet.face-cat-smile .pet-eye {
    transform: scaleY(.55);
    transform-box: fill-box;
    transform-origin: center;
}
#pet.face-cat-smile .pet-pupil {
    transform: scale(1.15,.75);
}
#pet.face-cat-smile .pet-cheek {
    opacity: .55;
    fill: #f0a8b8;
}
#pet.face-cat-smile .pet-sprite {
    animation: pet-love-bob .7s ease-in-out infinite;
}

/* Dil çıkarma (blep) */
#pet.face-tongue .pet-mouth-open {
    opacity: 1;
}
#pet.face-tongue .pet-tongue {
    opacity: 1;
    animation: pet-blep .55s ease-in-out infinite;
}
#pet.face-tongue .pet-eye {
    transform: scaleY(.72);
    transform-box: fill-box;
    transform-origin: center;
}
#pet.face-tongue .pet-cheek {
    opacity: .45;
    fill: #f2b0bc;
}
#pet.face-tongue .pet-sprite {
    animation: pet-love-tilt .85s ease-in-out infinite;
}

/* Aşırı sevgi: allık + yumuşak gülümseme + kucaklanma sallantısı */
#pet.face-love .pet-mouth-cat {
    opacity: 1;
}
#pet.face-love .pet-cheek {
    opacity: .75;
    fill: #f08aa0;
    transform: scale(1.35);
    transform-box: fill-box;
    transform-origin: center;
}
#pet.face-love .pet-eye {
    transform: scaleY(.48) scaleX(1.05);
    transform-box: fill-box;
    transform-origin: center;
}
#pet.face-love .pet-pupil {
    transform: scale(1.25);
}
#pet.face-love .pet-sprite {
    animation: pet-nuzzle .55s ease-in-out infinite;
}

/* Mırıldanma / yarı kapalı göz */
#pet.face-purr .pet-mouth-line {
    opacity: 1;
}
#pet.face-purr .pet-eye {
    opacity: 0;
}
#pet.face-purr .pet-pupil {
    opacity: 0;
}
#pet.face-purr .eye-closed {
    opacity: 1;
    stroke-width: 1.9;
}
#pet.face-purr .pet-cheek {
    opacity: .5;
    fill: #e8a0b0;
}
#pet.face-purr .pet-sprite {
    animation: pet-purr-sway 1.1s ease-in-out infinite;
}
@keyframes pet-blep {
    0%,100% { transform:translateY(0) scale(1) }
    50% { transform:translateY(1.4px) scale(1.08,1.15) }
}
@keyframes pet-love-bob {
    0%,100% { transform:translateY(0) scale(1,1) }
    50% { transform:translateY(-3px) scale(1.04,.96) }
}
@keyframes pet-love-tilt {
    0%,100% { transform:rotate(-4deg) translateY(0) }
    50% { transform:rotate(5deg) translateY(-2px) }
}
@keyframes pet-nuzzle {
    0%,100% { transform:rotate(-6deg) scale(1.06,.94) }
    50% { transform:rotate(6deg) scale(1.08,.92) }
}
@keyframes pet-purr-sway {
    0%,100% { transform:translateY(1px) scale(1.05,.93) }
    50% { transform:translateY(-1px) scale(1.08,.9) }
}

/* Yürüyüş: sol kısa/basılı ↔ sağ uzun/havada (zıt faz loop). scaleX geniş, scaleY kısa = basılı; scaleX dar, scaleY uzun = adım. */
#pet.walking .pet-sprite {
    animation: pet-walk-bob .4s ease-in-out infinite;
}
#pet.walking .pet-foot-l {
    animation: pet-leg-l .4s ease-in-out infinite;
}
#pet.walking .pet-foot-r {
    animation: pet-leg-r .4s ease-in-out infinite;
}
#pet.walking-slow .pet-sprite,
#pet.walking-slow .pet-foot-l,
#pet.walking-slow .pet-foot-r {
    animation-duration: .55s;
}
#pet.walking-fast .pet-sprite,
#pet.walking-fast .pet-foot-l,
#pet.walking-fast .pet-foot-r {
    animation-duration: .26s;
}

/* Sol bacak */
@keyframes pet-leg-l {
    0%,100% { transform:translateY(3px) scale(1.45,.45) }
    25% { transform:translateY(0) scale(1,.95) }
    50% { transform:translateY(-6px) scale(.7,1.55) }
    75% { transform:translateY(-1px) scale(1.05,.9) }
}

/* Sağ bacak — 180° faz kayması */
@keyframes pet-leg-r {
    0%,100% { transform:translateY(-6px) scale(.7,1.55) }
    25% { transform:translateY(-1px) scale(1.05,.9) }
    50% { transform:translateY(3px) scale(1.45,.45) }
    75% { transform:translateY(0) scale(1,.95) }
}
@keyframes pet-walk-bob {
    0%,100% { transform:translateY(2px) rotate(-5deg) scale(1.08,.88) }
    25% { transform:translateY(-4px) rotate(2deg) scale(.96,1.06) }
    50% { transform:translateY(2px) rotate(5deg) scale(1.08,.88) }
    75% { transform:translateY(-4px) rotate(-2deg) scale(.96,1.06) }
}

/* Gardırop: oturur gibi, mağazaya bakar, sallanır ama yer değiştirmez */
#pet.wardrobe .pet-sprite {
    transform-origin: 50% 92%;
    animation: pet-wardrobe-sway 3.2s ease-in-out infinite;
}
@keyframes pet-wardrobe-sway {
    0%,100% { transform:translateY(3px) scale(1.06,.9) rotate(-2deg) }
    50% { transform:translateY(1px) scale(1.08,.88) rotate(2deg) }
}
#pet.wardrobe .pet-foot-l {
    animation: none;
    transform: translate(-3px,5px) scale(1.35,.5);
}
#pet.wardrobe .pet-foot-r {
    animation: none;
    transform: translate(3px,5px) scale(1.35,.5);
}
/* boştayken hafif sallanma: temel kural, her durumun kendi animasyonu (daha özgül) bunu ezer */
#pet .pet-sprite {
    animation: pet-idle-sway 3.4s ease-in-out infinite;
}
@keyframes pet-idle-sway {
    0%,100% { transform:translateY(0) rotate(0) }
    50% { transform:translateY(-1.4px) rotate(1.2deg) }
}
@keyframes pet-hop {
    0% { transform:translateY(0) scale(1,1) }
    20% { transform:translateY(1px) scale(1.06,.86) }
    55% { transform:translateY(-15px) scale(.97,1.06) }
    80% { transform:translateY(0) scale(1.04,.92) }
    100% { transform:translateY(0) scale(1,1) }
}
@keyframes pet-jump {
    0% { transform:translateY(0) scale(1,1) }
    18% { transform:translateY(2px) scale(1.1,.8) }
    50% { transform:translateY(-22px) scale(.95,1.08) rotate(4deg) }
    82% { transform:translateY(0) scale(1.06,.9) }
    100% { transform:translateY(0) scale(1,1) }
}
@keyframes pet-wiggle {
    0%,100% { transform:rotate(0) }
    25% { transform:rotate(-5deg) }
    75% { transform:rotate(5deg) }
}
@keyframes pet-breathe {
    0%,100% { transform:scale(1,1) }
    50% { transform:scale(1.04,.955) }
}
@keyframes pet-pupils-look {
    0%,100% { transform:translateX(0) }
    25% { transform:translateX(-2.5px) }
    70% { transform:translateX(2.5px) }
}

/* yön değiştirirken kısa sıkış-dön */
#pet.turning .pet-svg {
    animation: pet-turn .22s ease-out;
}
@keyframes pet-turn {
    0% { transform:scaleX(1) }
    45% { transform:scaleX(.7) }
    100% { transform:scaleX(1) }
}

/* hızlı yürüyüşten durunca fren sallanması */
#pet.settling .pet-sprite {
    animation: pet-settle .5s ease-out;
}
@keyframes pet-settle {
    0% { transform:rotate(0) }
    30% { transform:rotate(-4deg) }
    60% { transform:rotate(2.4deg) }
    85% { transform:rotate(-1deg) }
    100% { transform:rotate(0) }
}

/* koklama: belirgin öne eğilme + burun sallanması */
#pet.sniffing .pet-sprite {
    animation: pet-sniff-body .72s ease-in-out infinite;
    transform-origin: 50% 92%;
}
#pet.sniffing .pet-svg {
    animation: pet-sniff-nose .36s ease-in-out infinite;
    transform-origin: 50% 85%;
}
#pet.sniffing .pet-foot-l {
    animation: none;
    transform: translate(-2px,4px) scale(1.3,.55);
}
#pet.sniffing .pet-foot-r {
    animation: none;
    transform: translate(2px,4px) scale(1.3,.55);
}
#pet.sniffing .pet-pupils {
    transform: translateY(5px);
}
#pet.sniffing .pet-pupil {
    transform: scale(1.25);
}
#pet.sniffing .pet-cheek {
    opacity: .15;
}
@keyframes pet-sniff-body {
    0%,100% { transform:translateY(0) rotate(0) scale(1,1) }
    20% { transform:translateY(9px) rotate(22deg) scale(1.1,.86) }
    45% { transform:translateY(11px) rotate(26deg) scale(1.12,.84) }
    70% { transform:translateY(8px) rotate(20deg) scale(1.08,.88) }
}
@keyframes pet-sniff-nose {
    0%,100% { transform:translateY(0) rotate(0) }
    25% { transform:translateY(5px) rotate(-8deg) }
    50% { transform:translateY(7px) rotate(6deg) }
    75% { transform:translateY(4px) rotate(-6deg) }
}

/* bakma: belirgin baş kaldırma + geniş göz gezintisi */
#pet.looking .pet-sprite {
    animation: pet-look-body 1.35s ease-in-out infinite;
    transform-origin: 50% 92%;
}
#pet.looking .pet-foot-l,
#pet.looking .pet-foot-r {
    animation: none;
    transform: translateY(1px) scale(1.1,.85);
}
#pet.looking .pet-pupils {
    animation: pet-look-eyes 1.35s ease-in-out infinite;
}
#pet.looking .pet-svg {
    animation: pet-look-tilt 1.35s ease-in-out infinite;
    transform-origin: 50% 80%;
}
#pet.looking .pet-pupil {
    transform: scale(1.2);
}
@keyframes pet-look-body {
    0%,100% { transform:translateY(0) rotate(0) }
    20% { transform:translateY(-7px) rotate(-14deg) scale(1.02,1) }
    50% { transform:translateY(-9px) rotate(0) scale(1.04,.98) }
    80% { transform:translateY(-7px) rotate(14deg) scale(1.02,1) }
}
@keyframes pet-look-tilt {
    0%,100% { transform:rotate(0) }
    25% { transform:rotate(-8deg) translateY(-2px) }
    50% { transform:rotate(0) translateY(-3px) }
    75% { transform:rotate(8deg) translateY(-2px) }
}
@keyframes pet-look-eyes {
    0%,100% { transform:translate(0,-2px) }
    20% { transform:translate(-5px,-4px) }
    40% { transform:translate(0,-5px) }
    60% { transform:translate(5px,-4px) }
    80% { transform:translate(0,-3px) }
}

/* oturma: hem yerde hem sayfa elemanı kenarında kullanılır */
#pet.sitting .pet-sprite {
    transform-origin: 50% 92%;
    transform: translateY(4px) scale(1.08,.88);
    animation: pet-sit-sway 3.6s ease-in-out infinite;
}
@keyframes pet-sit-sway {
    0%,100% { transform:translateY(4px) scale(1.08,.88) }
    50% { transform:translateY(2px) scale(1.1,.86) }
}
#pet.sitting .pet-foot-l {
    animation: none;
    transform: translate(-3px,5px) scale(1.4,.5);
}
#pet.sitting .pet-foot-r {
    animation: none;
    transform: translate(3px,5px) scale(1.4,.5);
}

/* uykuya dalmadan önce esneme + uyanınca kısa gerinme */
#pet.yawning .pet-sprite {
    transform-origin: 50% 90%;
    animation: pet-yawn .8s ease-in-out;
}
@keyframes pet-yawn {
    0% { transform:scale(1,1) rotate(0) }
    40% { transform:scale(1.14,.82) rotate(-3deg) }
    70% { transform:scale(.95,1.08) rotate(2deg) }
    100% { transform:scale(1,1) rotate(0) }
}
#pet.yawning .pet-eye,
#pet.yawning .pet-pupil {
    opacity: .35;
}
#pet.waking .pet-sprite {
    animation: pet-wake .4s ease-out;
}
@keyframes pet-wake {
    0% { transform:scale(.94,1.05) rotate(-2deg) }
    100% { transform:scale(1,1) rotate(0) }
}

/* imleç yakınken hafif bir fark ediş ipucu */
#pet.cursor-near .pet-cheek {
    opacity: .4;
}
#pet.hopping .pet-sprite {
    animation: pet-hop .45s ease-out;
}
#pet.jumping .pet-sprite {
    animation: pet-jump .55s ease-out;
}
#pet.excited .pet-sprite {
    animation: pet-wiggle .6s ease-in-out infinite;
}
#pet.excited .pet-pupil {
    transform: scale(1.35);
}
#pet.asleep .pet-sprite {
    animation: pet-breathe 2.8s ease-in-out infinite;
}

/* sürüklenirken sarkma + çırpınan ayaklar + şaşkın gözler */
#pet.dragging {
    cursor: grabbing;
}
#pet.dragging .pet-sprite {
    transform-origin: 50% 12%;
    animation: pet-dangle 1.1s ease-in-out infinite;
}
@keyframes pet-dangle {
    0%,100% { transform:rotate(4deg) }
    50% { transform:rotate(-4deg) }
}
#pet.dragging .pet-foot-l {
    animation: pet-kick .5s ease-in-out infinite;
}
#pet.dragging .pet-foot-r {
    animation: pet-kick .5s ease-in-out infinite;
    animation-delay: -.25s;
}
@keyframes pet-kick {
    0%,100% { transform:translate(-2px,2px) rotate(-12deg) scale(.9,1.15) }
    50% { transform:translate(2px,0) rotate(14deg) scale(.85,1.25) }
}
#pet.dragging .pet-pupil {
    transform: scale(1.4);
}

/* yüksekten düşünce sersemleme */
#pet.dizzy .pet-sprite {
    animation: pet-dizzy .9s ease-in-out;
}
@keyframes pet-dizzy {
    0%,100% { transform:rotate(0) }
    20% { transform:rotate(-7deg) }
    40% { transform:rotate(6deg) }
    60% { transform:rotate(-4deg) }
    80% { transform:rotate(2deg) }
}
#pet.dizzy .pet-pupils {
    animation: pet-pupils-look .9s ease-in-out;
}

/* şarkı & dans — belirgin zıplama ve sallanma */
#pet.dancing .pet-sprite {
    animation: pet-dance .48s ease-in-out infinite;
}
@keyframes pet-dance {
    0%,100% { transform:rotate(-10deg) translateY(0) scale(1,1) }
    20% { transform:rotate(4deg) translateY(-8px) scale(1.06,.92) }
    40% { transform:rotate(10deg) translateY(0) scale(.94,1.08) }
    60% { transform:rotate(-4deg) translateY(-6px) scale(1.05,.93) }
    80% { transform:rotate(8deg) translateY(-2px) scale(.96,1.05) }
}
#pet.dancing .pet-foot-l {
    animation: pet-dance-kick .48s ease-in-out infinite;
}
#pet.dancing .pet-foot-r {
    animation: pet-dance-kick .48s ease-in-out infinite;
    animation-delay: -.24s;
}
@keyframes pet-dance-kick {
    0%,100% { transform:translateY(2px) scale(1.2,.6) }
    50% { transform:translateY(-6px) scale(.75,1.4) rotate(8deg) }
}
#pet.dancing .pet-pupils {
    animation: pet-pupils-look .9s ease-in-out infinite;
}

/* sulama kabı: sadece sulama sırasında görünür, yöne göre yer değiştirir */
#pet .pet-can {
    position: absolute;
    width: 22px;
    height: 18px;
    bottom: 5px;
    left: 100%;
    margin-left: -7px;
    opacity: 0;
    transform-origin: 30% 78%;
    transition: opacity .25s ease,transform .3s ease;
    pointer-events: none;
}
#pet .pet-can svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
#pet.face-left .pet-can {
    left: auto;
    right: 100%;
    margin-right: -7px;
    margin-left: 0;
    transform: scaleX(-1);
}
#pet.watering .pet-can {
    opacity: 1;
    transform: rotate(26deg);
}
#pet.face-left.watering .pet-can {
    transform: scaleX(-1) rotate(26deg);
}
#pet.watering .pet-sprite {
    animation: pet-pour 2.3s ease-in-out;
}
@keyframes pet-pour {
    0%,100% { transform:rotate(0) }
    25%,75% { transform:rotate(6deg) }
    50% { transform:rotate(7deg) }
}
#pet .pet-drop {
    position: absolute;
    width: 4px;
    height: 6px;
    border-radius: 50% 50% 60% 60%;
    background: #6fa8dc;
    pointer-events: none;
    animation: pet-drop-fall .55s ease-in forwards;
}
@keyframes pet-drop-fall {
    0% { transform:translateY(0);opacity:.9 }
    100% { transform:translateY(32px);opacity:0 }
}

/* konuşma baloncuğu */
#pet .pet-bubble {
    position: absolute;
    bottom: 106%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface,#fff);
    border: 1px solid var(--border,#ddd);
    border-radius: 10px;
    padding: 2px 8px;
    font: 600 11px var(--sans,sans-serif);
    color: var(--text,#333);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}
#pet .pet-bubble.show {
    animation: pet-bubble 1.7s ease-out forwards;
}
@keyframes pet-bubble {
    0% { opacity:0;transform:translateX(-50%) scale(.6) }
    12% { opacity:1;transform:translateX(-50%) scale(1) }
    78% { opacity:1 }
    100% { opacity:0;transform:translateX(-50%) scale(.95) }
}
#pet.reduced-motion .pet-bubble.show {
    animation: none;
    opacity: 1;
}

/* ses aç/kapa — hover'da belirir */
#pet .pet-sound {
    position: absolute;
    left: 102%;
    top: -4px;
    width: 16px;
    height: 16px;
    color: var(--muted,#8a7d6d);
    opacity: 0;
    transition: opacity .2s ease;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pet .pet-sound::after {
    content: "";
    position: absolute;
    inset: -12px;
}
#pet .pet-sound .pet-icon {
    width: 14px;
    height: 14px;
    display: block;
}
#pet:hover .pet-sound {
    opacity: .9;
}
#pet .pet-sound:hover {
    color: var(--accent);
}
#pet .pet-heart,
.ps-stage-pet-wrap .pet-heart {
    position: absolute;
    left: 50%;
    bottom: 88%;
    color: var(--accent,#c45c26);
    pointer-events: none;
    animation: pet-heart-float .9s ease-out forwards;
}
#pet .pet-note {
    position: absolute;
    left: 50%;
    bottom: 92%;
    color: var(--muted,#8a7d6d);
    pointer-events: none;
    animation: pet-heart-float 1.25s ease-out forwards;
}
#pet .pet-heart .pet-icon,
.ps-stage-pet-wrap .pet-heart .pet-icon,
#pet .pet-note .pet-icon {
    width: 14px;
    height: 14px;
    display: block;
}
@keyframes pet-heart-float {
    0% { transform:translate(var(--hx,0),0) scale(.5);opacity:0 }
    18% { opacity:1 }
    100% { transform:translate(var(--hx,0),-46px) scale(1.05);opacity:0 }
}
#pet .pet-zzz {
    position: absolute;
    left: 72%;
    bottom: 96%;
    font: 600 11px var(--sans,sans-serif);
    color: var(--muted,#8a7d6d);
    pointer-events: none;
    opacity: 0;
}
#pet.asleep .pet-zzz {
    animation: pet-zzz-float 2.6s ease-out infinite;
}
@keyframes pet-zzz-float {
    0% { transform:translateY(0);opacity:0 }
    20% { opacity:.9 }
    100% { transform:translateY(-24px);opacity:0 }
}

/* bahçe */
#pet-garden {
    position: fixed;
    inset: 0;
    z-index: 49;
    pointer-events: none;
}
#pet-garden .pet-flower {
    position: absolute;
    width: 36px;
    height: 48px;
    margin-left: -18px;
    opacity: 0;
    transition: opacity 1.4s ease;
}
#pet-garden .pet-flower.planted {
    opacity: 1;
}
#pet-garden .pet-flower.fading {
    opacity: 0;
}
.pet-flower svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: filter 1.4s ease;
}
.pet-flower .fl-wilt,
.pet-flower .fl-grow,
.pet-flower .fl-sway {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
.pet-flower .fl-wilt {
    transition: transform 1.4s ease;
}
.pet-flower .fl-grow {
    transition: transform .9s cubic-bezier(.34,1.56,.64,1);
}
.pet-flower .fl-sway {
    animation: fl-sway var(--swayDur,3.4s) ease-in-out infinite;
}
@keyframes fl-sway {
    0%,100% { transform:rotate(2deg) }
    50% { transform:rotate(-2deg) }
}
.pet-flower.st0 .fl-grow {
    transform: scale(.62);
}
.pet-flower.st1 .fl-grow {
    transform: scale(.82);
}
.pet-flower.st2 .fl-grow {
    transform: scale(1);
}
.pet-flower .fl-stem {
    fill: none;
    stroke: #6f9457;
    stroke-width: 3.2;
    stroke-linecap: round;
}
.pet-flower .fl-leaf {
    fill: #6f9457;
}
.pet-flower .fl-head {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .8s cubic-bezier(.34,1.56,.64,1);
}
.pet-flower.st0 .fl-head {
    transform: scale(0);
}
.pet-flower .fl-petals {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .9s cubic-bezier(.34,1.56,.64,1);
}
.pet-flower.st0 .fl-petals,
.pet-flower.st1 .fl-petals {
    transform: scale(0);
}
.pet-flower .fl-petals ellipse {
    fill: var(--petal,#d97798);
}
.pet-flower .fl-bud {
    fill: #7d9c5f;
    transition: fill .8s ease;
}
.pet-flower.st2 .fl-bud {
    fill: #e9c46a;
}
.pet-flower.thirsty .fl-wilt {
    transform: rotate(8deg) scaleY(.96);
}
.pet-flower.thirsty svg {
    filter: saturate(.65);
}
.pet-flower.wilted .fl-wilt {
    transform: rotate(16deg) scaleY(.88);
}
.pet-flower.wilted svg {
    filter: saturate(.3) brightness(.92);
}
#pet-garden .fl-spark {
    position: absolute;
    width: 12px;
    height: 12px;
    color: #e2b13c;
    pointer-events: none;
    animation: pet-heart-float 1s ease-out forwards;
}
#pet-garden .fl-spark .pet-icon {
    width: 12px;
    height: 12px;
    display: block;
}

/* hareket azaltma tercihi: her şey sakinleşir */
#pet.reduced-motion * {
    animation: none!important;
}
#pet.reduced-motion .pet-sprite,
#pet.reduced-motion .pet-pupils {
    transition: none!important;
}
#pet-garden.reduced-motion * {
    animation: none!important;
    transition: none!important;
}
#pet-store {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(.75rem,2vw,1.5rem);
    background: oklch(0 0 0 / .42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#pet-store.is-open {
    display: flex;
    animation: ps-overlay-in .28s cubic-bezier(.2,0,0,1);
}
@keyframes ps-overlay-in {
    from { opacity:0 }
    to { opacity:1 }
}
#pet-store .ps-panel {
    width: min(56rem,100%);
    height: min(36rem,90vh);
    display: flex;
    flex-direction: column;
    background: var(--surface,#fff);
    color: var(--text,#222);
    border-radius: 24px;
    box-shadow: 0 0 0 1px var(--border),0 24px 64px oklch(0 0 0 / .22);
    overflow: hidden;
    animation: ps-panel-in .38s cubic-bezier(.2,0,0,1);
}
@keyframes ps-panel-in {
    from { opacity:0;transform:translateY(12px) scale(.98) }
    to { opacity:1;transform:none }
}
#pet-store .ps-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
#pet-store .ps-title {
    font: 700 1.15rem var(--sans,sans-serif);
    letter-spacing: -.02em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
#pet-store .ps-title .pet-icon {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--accent);
}
#pet-store .ps-head-actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
#pet-store .ps-coins {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: var(--accent-soft,#f5ebe3);
    color: var(--accent);
    font: 700 .9rem var(--sans,sans-serif);
    font-variant-numeric: tabular-nums;
}
#pet-store .ps-coins .pet-icon {
    width: 1rem;
    height: 1rem;
}
#pet-store .ps-close {
    border: none;
    background: var(--bg,#f5f2ee);
    color: var(--muted);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    transition-property: background-color,color,scale;
    transition-duration: .15s;
}
#pet-store .ps-close:hover {
    background: var(--accent-soft,#f5ebe3);
    color: var(--accent);
}
#pet-store .ps-close:active {
    scale: .96;
}
#pet-store .ps-body {
    display: grid;
    grid-template-columns: minmax(14rem,17rem) 1fr;
    flex: 1;
    min-height: 0;
}

/* Sol sütun: portre (sahne) üstte, üç slot altta */
#pet-store .ps-char {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: linear-gradient(180deg,var(--bg,#f7f4ef) 0%,var(--accent-soft,#f5ebe3) 100%);
    border-right: 1px solid var(--border);
}
#pet-store .ps-stage {
    position: relative;
    flex: 1;
    min-height: 12rem;
    overflow: hidden;
}
#pet-store .ps-stage-glow {
    position: absolute;
    left: 50%;
    bottom: calc(2.9rem + 62px);
    width: 13rem;
    height: 13rem;
    transform: translate(-50%,50%);
    border-radius: 50%;
    background: radial-gradient(circle,oklch(0.595 0.148 44.9 / .18),transparent 70%);
    pointer-events: none;
}
#pet-store .ps-stage-floor {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 2.4rem;
    height: 1.1rem;
    border-radius: 50%;
    background: oklch(0 0 0 / .07);
    box-shadow: 0 0 0 1px oklch(0 0 0 / .04);
}
#pet-store .ps-stage-pet-wrap {
    position: absolute;
    left: 50%;
    bottom: 2.9rem;
    transform: translateX(-50%);
    width: 96px;
    height: 92px;
    z-index: 2;
    scale: 1.35;
    transform-origin: 50% 100%;
}
#pet-store .ps-stage-pet {
    position: relative;
    width: 96px;
    height: 92px;
    transform-origin: 50% 88%;
}
#pet-store .ps-stage-pet .pet-sprite {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 50% 88%;
}
#pet-store .ps-stage-pet .pet-svg {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
}
#pet-store .ps-stage-pet .pet-mouth,
#pet-store .ps-stage-pet .pet-tongue {
    opacity: 0;
}
#pet-store .ps-stage-pet .pet-leg {
    position: absolute;
    z-index: 1;
    bottom: 2px;
    width: 16px;
    height: 22px;
    border-radius: 8px 8px 6px 6px;
    background: linear-gradient(180deg,color-mix(in oklch,var(--pc) 70%,black),color-mix(in oklch,var(--pc) 56%,black));
    box-shadow: inset 0 -2px 0 oklch(0 0 0 / .14);
    transform-origin: 50% 0%;
}
#pet-store .ps-stage-pet .pet-foot-l {
    left: 20px;
}
#pet-store .ps-stage-pet .pet-foot-r {
    left: 58px;
}
#pet-store .ps-stage-pet .pet-pupil {
    fill: #2c2416;
}
#pet-store .ps-stage-pet .pet-cheek {
    fill: #fff;
    opacity: .28;
}
#pet-store .ps-stage-pet .eye-closed {
    stroke: #2c2416;
    stroke-width: 1.6;
    stroke-linecap: round;
    fill: none;
    opacity: 0;
}
#pet-store .ps-stage-pet.dressing .pet-sprite {
    animation: pet-dress .85s cubic-bezier(.34,1.4,.64,1);
}
#pet-store .ps-stage-pet.sims-spin .pet-sprite {
    animation: ps-sims-spin 1s cubic-bezier(.34,1.2,.64,1);
}
#pet-store .ps-stage-pet.sims-mirror .pet-sprite {
    animation: ps-sims-mirror .9s ease-in-out;
}
#pet-store .ps-stage-pet.sims-happy .pet-sprite {
    animation: ps-sims-happy .75s cubic-bezier(.34,1.4,.64,1);
}
#pet-store .ps-stage-pet.sims-idle .pet-sprite {
    animation: pet-wardrobe-sway 3.2s ease-in-out infinite;
}
#pet-store .ps-stage-pet.sims-idle .pet-foot-l {
    transform: translate(-4px,6px) scale(1.35,.5);
}
#pet-store .ps-stage-pet.sims-idle .pet-foot-r {
    transform: translate(4px,6px) scale(1.35,.5);
}
@keyframes ps-sims-spin {
    0% { transform:scale(1) rotate(0) }
    20% { transform:scale(1.08,.9) rotate(-8deg) }
    45% { transform:scale(.95,1.08) rotate(180deg) }
    70% { transform:scale(1.1,.88) rotate(320deg) }
    100% { transform:scale(1) rotate(360deg) }
}
@keyframes ps-sims-mirror {
    0%,100% { transform:translateY(0) rotate(0) }
    25% { transform:translateY(-6px) rotate(-12deg) scale(1.05) }
    50% { transform:translateY(-4px) rotate(10deg) }
    75% { transform:translateY(-8px) rotate(-6deg) }
}
@keyframes ps-sims-happy {
    0% { transform:translateY(0) scale(1) }
    25% { transform:translateY(-18px) scale(.96,1.06) }
    45% { transform:translateY(0) scale(1.1,.88) }
    65% { transform:translateY(-10px) scale(.98,1.04) }
    100% { transform:translateY(0) scale(1) }
}
#pet-store .ps-stage-react {
    position: absolute;
    left: 50%;
    bottom: calc(2.9rem + 165px);
    transform: translateX(-50%);
    font: 700 .78rem var(--sans,sans-serif);
    color: var(--accent);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}
#pet-store .ps-stage-react.show {
    animation: ps-react-pop 1.4s ease-out forwards;
}
@keyframes ps-react-pop {
    0% { opacity:0;transform:translateX(-50%) translateY(6px) scale(.9) }
    15% { opacity:1;transform:translateX(-50%) translateY(0) scale(1) }
    75% { opacity:1 }
    100% { opacity:0;transform:translateX(-50%) translateY(-8px) }
}
#pet-store .ps-hint {
    font-size: .8rem;
    color: var(--muted);
    margin: .2rem 0 0;
    line-height: 1.45;
}
#pet-store .ps-scroll {
    flex: 1;
    overflow: auto;
    padding: .35rem .85rem 1.1rem;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch,var(--accent) 45%,transparent) color-mix(in oklch,var(--bg,#f5f2ee) 80%,transparent);
}
#pet-store .ps-scroll::-webkit-scrollbar {
    width: 9px;
}
#pet-store .ps-scroll::-webkit-scrollbar-track {
    background: color-mix(in oklch,var(--bg,#f5f2ee) 70%,transparent);
    border-radius: 999px;
    margin: 6px 0;
}
#pet-store .ps-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in oklch,var(--accent) 42%,var(--muted,#aaa));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
#pet-store .ps-scroll::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch,var(--accent) 70%,var(--muted,#aaa));
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* float effects */
#pet .pet-heart .pet-icon,
#pet .pet-note .pet-icon {
    width: 14px;
    height: 14px;
    display: block;
}

/* göz kırpma: göz kapanır gibi basılır, opaklık zıplaması yok */
#pet.blink .pet-eye,
#pet.blink .pet-pupil {
    transform: scaleY(.1);
}
#pet.blink .pet-glint {
    opacity: 0;
}

/* kuyruk: gövdenin arkasında, yöne göre taraf değiştirir, ruh haline göre sallanır */
.pet-tail {
    position: absolute;
    z-index: 0;
    bottom: 8px;
    left: 1px;
    width: 13px;
    height: 5px;
    border-radius: 5px 2px 2px 5px;
    background: linear-gradient(180deg,color-mix(in oklch,var(--pc) 82%,black),color-mix(in oklch,var(--pc) 60%,black));
    transform-origin: 100% 50%;
    --ta: 30deg;
    transform: rotate(var(--ta));
    animation: pet-wag 1.9s ease-in-out infinite;
    pointer-events: none;
}
#pet.face-left .pet-tail {
    left: auto;
    right: 1px;
    border-radius: 2px 5px 5px 2px;
    transform-origin: 0 50%;
    --ta: -30deg;
}
#pet.walking .pet-tail,
#pet.sniffing .pet-tail {
    animation-duration: .5s;
}
#pet.walking-fast .pet-tail {
    animation-duration: .3s;
    --ta: 12deg;
}
#pet.face-left.walking-fast .pet-tail {
    --ta: -12deg;
}
#pet.excited .pet-tail,
#pet.dancing .pet-tail,
#pet.face-cat-smile .pet-tail,
#pet.face-love .pet-tail,
#pet.face-tongue .pet-tail,
#pet.dragging .pet-tail {
    animation-duration: .2s;
}
#pet.asleep .pet-tail,
#pet.sitting .pet-tail {
    animation-duration: 3.2s;
    --ta: 6deg;
}
#pet.face-left.asleep .pet-tail,
#pet.face-left.sitting .pet-tail {
    --ta: -6deg;
}
#pet-store .ps-stage-pet .pet-tail {
    width: 24px;
    height: 9px;
    bottom: 16px;
    left: 3px;
}
@keyframes pet-wag {
    0%,100% { transform:rotate(calc(var(--ta) - 16deg)) }
    50% { transform:rotate(calc(var(--ta) + 14deg)) }
}

/* yer gölgesi: zıplarken yerde kalır ve küçülür */
#pet .pet-shadow {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -3px;
    width: 38px;
    height: 8px;
    margin-left: -19px;
    border-radius: 50%;
    background: radial-gradient(closest-side,oklch(0 0 0 / .28),oklch(0 0 0 / 0));
    pointer-events: none;
    transition: opacity .2s ease;
}
#pet.walking .pet-shadow {
    animation: pet-shadow-walk .4s ease-in-out infinite;
}
#pet.walking-fast .pet-shadow {
    animation-duration: .26s;
}
#pet.hopping .pet-shadow {
    animation: pet-shadow-hop .45s ease-out;
}
#pet.jumping .pet-shadow {
    animation: pet-shadow-hop .55s ease-out;
}
#pet.dragging .pet-shadow {
    opacity: 0;
}
@keyframes pet-shadow-walk {
    0%,50%,100% { transform:scale(1.05,1) }
    25%,75% { transform:scale(.9,.85) }
}
@keyframes pet-shadow-hop {
    0%,100% { transform:scale(1);opacity:1 }
    50% { transform:scale(.55);opacity:.45 }
}

/* toz bulutu: koşarken, dönerken, yere inerken */
#pet-garden .pet-dust {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: color-mix(in oklch,var(--muted,#8a7d6d) 50%,transparent);
    pointer-events: none;
    animation: pet-dust .6s ease-out forwards;
}
@keyframes pet-dust {
    0% { opacity:.85;transform:translate(0,0) scale(.35) }
    100% { opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--ds,1.4)) }
}

/* sayfa geçişinde pet yerinden kayarak devam eder */
#pet {
    view-transition-name: tuntii-pet;
}

/* ========== Mağaza: slotlar ve raf ========== */
#pet-store .ps-slots {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .45rem;
    padding: .75rem;
    border-top: 1px solid var(--border);
}
#pet-store .ps-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    min-width: 0;
    padding: .55rem .3rem .5rem;
    border: none;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition-property: box-shadow,background-color,scale,translate;
    transition-duration: .15s,.15s,.15s,.4s;
    transition-timing-function: ease-out,ease-out,ease-out,var(--ease-spring,ease-out);
}
#pet-store .ps-slot:hover {
    translate: 0 -2px;
}
#pet-store .ps-slot:active {
    scale: .96;
}
#pet-store .ps-slot.is-on {
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent);
}
#pet-store .ps-slot-art {
    width: 2.1rem;
    height: 2.1rem;
    color: var(--muted);
}
#pet-store .ps-slot-art svg,
#pet-store .ps-row-art svg {
    display: block;
    width: 100%;
    height: 100%;
}
#pet-store .ps-slot-label {
    font: 700 .64rem var(--sans,sans-serif);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
#pet-store .ps-slot-item {
    max-width: 100%;
    font: 600 .78rem var(--sans,sans-serif);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#pet-store .ps-shelf {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
#pet-store .ps-shelf-head {
    padding: .9rem 1.1rem .5rem;
    flex-shrink: 0;
}
#pet-store .ps-shelf-title {
    margin: 0;
    font: 700 1.05rem var(--sans,sans-serif);
    letter-spacing: -.01em;
}
#pet-store .ps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
#pet-store .ps-row {
    width: 100%;
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: .5rem .85rem .5rem .5rem;
    border: none;
    border-radius: 16px;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--border);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition-property: box-shadow,background-color,scale,translate;
    transition-duration: .15s,.15s,.15s,.4s;
    transition-timing-function: ease-out,ease-out,ease-out,var(--ease-spring,ease-out);
}
#pet-store .ps-row:hover {
    box-shadow: 0 0 0 1px color-mix(in oklch,var(--accent) 40%,var(--border));
    translate: 2px 0;
}
#pet-store .ps-row:active {
    scale: .98;
}
#pet-store .ps-row.is-on {
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent);
}
#pet-store .ps-row-art {
    width: 3rem;
    height: 3rem;
    padding: .25rem;
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
}
#pet-store .ps-row-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
#pet-store .ps-row-name {
    font: 600 .92rem var(--sans,sans-serif);
    letter-spacing: -.01em;
}
#pet-store .ps-row-job {
    font-size: .78rem;
    line-height: 1.35;
    color: var(--muted);
}
#pet-store .ps-row-meta {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font: 700 .8rem var(--sans,sans-serif);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--muted);
}
#pet-store .ps-row-meta .pet-icon {
    width: .9rem;
    height: .9rem;
}
#pet-store .ps-row.is-locked .ps-row-meta,
#pet-store .ps-row.is-on .ps-row-meta {
    color: var(--accent);
}
#pet-store .ps-row.is-poor .ps-row-meta {
    color: var(--muted);
    opacity: .7;
}
#pet-store .ps-row.nope {
    animation: ps-nope .32s ease-in-out;
}
@keyframes ps-nope {
    0%,100% { translate: 0 0 }
    25% { translate: -5px 0 }
    50% { translate: 4px 0 }
    75% { translate: -2px 0 }
}
@media (max-width:480px) {
    #pet-store .ps-panel {
        height: min(46rem,94vh);
    }
    #pet-store .ps-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    #pet-store .ps-char {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    #pet-store .ps-stage {
        min-height: 13rem;
    }
}

/* ========== Eşyalar pet'in üstünde (48×46 koordinat, önizlemede 2×) ========== */
.pet-gear {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.pet-companion {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 46px;
    z-index: 4;
    pointer-events: none;
}
#pet-store .ps-stage-pet .pet-gear,
#pet-store .ps-stage-pet .pet-companion {
    inset: auto;
    left: 0;
    top: 0;
    width: 48px;
    height: 46px;
    transform: scale(2);
    transform-origin: 0 0;
}
.pet-head,
.pet-hand {
    position: absolute;
}
.pet-head:empty,
.pet-hand:empty {
    display: none;
}
.pet-head svg,
.pet-hand svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.pet-head {
    left: 50%;
    top: 1px;
    width: 18px;
    height: 18px;
    transform: translate(-50%,-62%);
    filter: drop-shadow(0 1px 1px oklch(0 0 0 / .2));
}
.pet-head[data-item="leaf"] {
    width: 15px;
    height: 15px;
    transform: translate(-28%,-80%) rotate(8deg);
}
#pet.dressing .pet-head,
.ps-stage-pet.dressing .pet-head,
.ps-stage-pet.dressing .pet-hand svg {
    animation: pet-gear-pop .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pet-gear-pop {
    0% { scale: 0 }
    60% { scale: 1.25 }
    100% { scale: 1 }
}

/* el: sağa bakarken konumlanır, sola bakınca ayna */
.pet-hand {
    inset: 0;
}
#pet.face-left .pet-hand {
    transform: scaleX(-1);
}
.pet-hand svg {
    position: absolute;
    filter: drop-shadow(0 1px 1px oklch(0 0 0 / .18));
}
.pet-hand[data-item="rod"] svg {
    left: 28px;
    top: -4px;
    width: 26px;
    height: 26px;
    transform-origin: 15% 88%;
    rotate: -10deg;
}
#pet.fishing .pet-hand[data-item="rod"] svg {
    rotate: 16deg;
    animation: pet-rod-sway 2.6s ease-in-out infinite;
}
#pet.fishing .pet-hand .it-bobber {
    transform-box: fill-box;
    animation: pet-bobber 1.8s ease-in-out infinite;
}
@keyframes pet-rod-sway {
    0%,100% { transform: rotate(-4deg) }
    50% { transform: rotate(5deg) }
}
@keyframes pet-bobber {
    0%,100% { transform: translateY(0) }
    50% { transform: translateY(1.8px) }
}
.pet-hand[data-item="book"] svg {
    left: 31px;
    top: 20px;
    width: 15px;
    height: 15px;
    rotate: -12deg;
}
#pet.reading .pet-hand[data-item="book"] svg {
    left: 12px;
    top: 25px;
    width: 24px;
    height: 24px;
    rotate: 0deg;
}
#pet.reading .pet-hand .it-page {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: pet-page 3.4s ease-in-out infinite;
}
@keyframes pet-page {
    0%,60% { transform: scaleX(1); opacity: 1 }
    80% { transform: scaleX(-1); opacity: 1 }
    92% { transform: scaleX(-1); opacity: 0 }
    93% { transform: scaleX(1); opacity: 0 }
    100% { transform: scaleX(1); opacity: 1 }
}
#pet.reading .pet-pupils {
    transform: translateY(2.2px);
}
.pet-hand[data-item="lantern"] svg {
    left: 33px;
    top: 21px;
    width: 16px;
    height: 16px;
    transform-origin: 50% 8%;
}
#pet.walking .pet-hand[data-item="lantern"] svg {
    animation: pet-lantern-swing .8s ease-in-out infinite;
}
@keyframes pet-lantern-swing {
    0%,100% { rotate: -10deg }
    50% { rotate: 10deg }
}

/* fener, karanlıkta: sıcak ışık halkası ve titreyen alev */
#pet.lantern-lit::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 60%;
    width: 170px;
    height: 170px;
    margin: -85px 0 0 -85px;
    border-radius: 50%;
    background: radial-gradient(closest-side,oklch(0.88 0.13 85 / .3),oklch(0.88 0.13 85 / .1) 55%,transparent);
    pointer-events: none;
    z-index: -1;
    animation: pet-halo 2.6s ease-in-out infinite;
}
#pet.lantern-lit .it-glass {
    fill: #ffe58a;
}
#pet.lantern-lit .it-flame {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: pet-flame .35s ease-in-out infinite alternate;
}
@keyframes pet-halo {
    0%,100% { opacity: .85; scale: 1 }
    50% { opacity: 1; scale: 1.06 }
}
@keyframes pet-flame {
    from { transform: scale(.85,.9) }
    to { transform: scale(1.08,1.12) }
}

/* ateş böceği: elips yörüngede döner, kanat çırpar; karanlıkta parlar */
.pet-firefly {
    position: absolute;
    left: 0;
    top: 0;
    width: 13px;
    height: 13px;
    offset-path: path('M50 16A26 13 0 1 1 -2 16A26 13 0 1 1 50 16');
    offset-rotate: 0deg;
    animation: pet-orbit 5.5s linear infinite;
}
.pet-firefly svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: pet-ff-bob 1.1s ease-in-out infinite;
}
.pet-firefly .it-wing {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: pet-ff-wing .12s linear infinite alternate;
}
.pet-firefly .it-glow {
    animation: pet-ff-glow 2.2s ease-in-out infinite;
}
@keyframes pet-orbit {
    to { offset-distance: 100% }
}
@keyframes pet-ff-bob {
    0%,100% { translate: 0 0 }
    50% { translate: 0 -3px }
}
@keyframes pet-ff-wing {
    to { scale: 1 .55 }
}
@keyframes pet-ff-glow {
    0%,100% { opacity: .25 }
    50% { opacity: .5 }
}
html[data-theme="dark"] .pet-firefly svg {
    filter: drop-shadow(0 0 3px #ffe680) drop-shadow(0 0 8px oklch(0.9 0.15 95 / .6));
}
@media (prefers-color-scheme:dark) {
    html:not([data-theme="light"]) .pet-firefly svg {
        filter: drop-shadow(0 0 3px #ffe680) drop-shadow(0 0 8px oklch(0.9 0.15 95 / .6));
    }
}

/* kovalamaca topu: yerde yuvarlanır, tekmede havalanır */
#pet-garden .pet-chase-ball {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform;
}
#pet-garden .pet-chase-ball::before {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: -3px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(closest-side,oklch(0 0 0 / .25),oklch(0 0 0 / 0));
}
#pet-garden .pcb-hop,
#pet-garden .pcb-spin,
#pet-garden .pcb-spin svg {
    display: block;
    width: 100%;
    height: 100%;
}
#pet-garden .pet-chase-ball.kicked .pcb-hop {
    animation: pcb-hop .5s cubic-bezier(.3,.7,.4,1);
}
@keyframes pcb-hop {
    0%,100% { translate: 0 0 }
    40% { translate: 0 -14px }
    75% { translate: 0 -3px }
}

/* ========== Eğlence: okşama, pusu, kuyruk, sersemlik, gerinme, hapşırık, rüzgâr ========== */

/* okşanıyor: gözler kapalı, basık-yumuşak sallanma */
#pet.petted .pet-sprite {
    transform-origin: 50% 92%;
    animation: pet-petted .9s ease-in-out infinite;
}
#pet.petted .pet-foot-l,
#pet.petted .pet-foot-r {
    animation: none;
    transform: translateY(3px) scale(1.3,.55);
}
#pet.petted .pet-tail {
    animation-duration: .25s;
}
@keyframes pet-petted {
    0%,100% { transform: translateY(2px) scale(1.06,.92) }
    50% { transform: translateY(3px) scale(1.1,.88) }
}

/* pusu: alçalır, kıç sallanır, gözler kocaman */
#pet.stalking .pet-sprite {
    transform-origin: 50% 95%;
    animation: pet-stalk .32s ease-in-out infinite;
}
#pet.stalking .pet-foot-l,
#pet.stalking .pet-foot-r {
    animation: none;
    transform: translateY(4px) scale(1.4,.45);
}
#pet.stalking .pet-pupil {
    transform: scale(1.45);
}
#pet.stalking .pet-tail {
    animation-duration: .16s;
}
@keyframes pet-stalk {
    0%,100% { transform: translateY(5px) scale(1.18,.78) rotate(-3deg) }
    50% { transform: translateY(5px) scale(1.18,.78) rotate(3deg) }
}

/* atlayışta havada: uzar, bacaklar geride, gölge yerde küçülür */
#pet.pouncing .pet-sprite {
    animation: none;
    transform: scale(.92,1.1);
}
#pet.pouncing .pet-foot-l,
#pet.pouncing .pet-foot-r {
    animation: none;
    transform: translateY(-2px) scale(.8,1.4) rotate(-20deg);
}
#pet.pouncing .pet-pupil {
    transform: scale(1.3);
}
#pet.pouncing .pet-shadow {
    opacity: .35;
    transform: scale(.6);
}

/* kuyruk kovalama: fırıl fırıl döner */
#pet.tail-chasing .pet-sprite {
    transform-origin: 50% 60%;
    animation: pet-spin .45s linear infinite;
}
#pet.tail-chasing .pet-tail {
    animation-duration: .12s;
}
@keyframes pet-spin {
    to { transform: rotate(360deg) }
}

/* sersem: sallanır, başının üstünde yıldızlar döner */
#pet.dizzy .pet-sprite,
#pet.dizzy .pet-pupils {
    animation-iteration-count: infinite;
}
#pet .pet-stars {
    display: none;
    position: absolute;
    left: 0;
    top: -10px;
    width: 48px;
    height: 20px;
    z-index: 5;
    pointer-events: none;
}
#pet.dizzy .pet-stars {
    display: block;
}
#pet .pet-stars i {
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    background: #e2b13c;
    clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
    offset-path: path('M40 10A16 6 0 1 1 8 10A16 6 0 1 1 40 10');
    offset-rotate: 0deg;
    animation: pet-orbit 1s linear infinite;
}
#pet .pet-stars i:nth-child(2) {
    animation-delay: -.33s;
}
#pet .pet-stars i:nth-child(3) {
    animation-delay: -.66s;
}

/* kedi gibi gerinme: önden alçalıp uzar, sonra dikilir; gözler kapalı */
#pet.stretching .pet-sprite {
    transform-origin: 50% 95%;
    animation: pet-stretch 1.3s ease-in-out;
}
#pet.stretching .pet-eye,
#pet.stretching .pet-pupil {
    transform: scaleY(.15);
}
#pet.stretching .pet-foot-r {
    animation: pet-stretch-leg 1.3s ease-in-out;
}
@keyframes pet-stretch {
    0%,100% { transform: none }
    30%,45% { transform: translateY(5px) scale(1.28,.72) rotate(-6deg) }
    70% { transform: translateY(-4px) scale(.88,1.16) }
}
@keyframes pet-stretch-leg {
    0%,100% { transform: none }
    30%,45% { transform: translate(5px,2px) scale(1,1.25) rotate(-30deg) }
}

/* hapşırık: a-a-a geriye, hapşu öne (bakış yönüne göre) */
#pet.sneezing .pet-sprite {
    transform-origin: 50% 92%;
    animation: pet-sneeze 1s ease-in forwards;
}
#pet.face-left.sneezing .pet-sprite {
    animation-name: pet-sneeze-l;
}
#pet.sneezing .pet-eye {
    transform: scaleY(.45);
}
@keyframes pet-sneeze {
    0% { transform: none }
    25% { transform: rotate(-4deg) scaleY(1.04) }
    50% { transform: translateY(-2px) rotate(-8deg) scaleY(1.08) }
    80% { transform: translateY(-3px) rotate(-11deg) scale(.95,1.12) }
    88% { transform: rotate(10deg) scale(1.15,.85) }
    100% { transform: none }
}
@keyframes pet-sneeze-l {
    0% { transform: none }
    25% { transform: rotate(4deg) scaleY(1.04) }
    50% { transform: translateY(-2px) rotate(8deg) scaleY(1.08) }
    80% { transform: translateY(-3px) rotate(11deg) scale(.95,1.12) }
    88% { transform: rotate(-10deg) scale(1.15,.85) }
    100% { transform: none }
}

/* hızlı scroll rüzgârı */
#pet.windy .pet-sprite {
    animation: pet-windy .7s ease-out;
}
#pet.windy .pet-tail {
    animation-duration: .1s;
}
@keyframes pet-windy {
    0%,100% { transform: none }
    20% { transform: skewX(-14deg) scale(1.05,.95) }
    45% { transform: skewX(9deg) }
    70% { transform: skewX(-4deg) }
}

/* olta: vuruşta şamandıra batar, kamış titrer; çekişte kamış savrulur */
#pet.bite .pet-hand .it-bobber {
    animation: pet-bobber-bite .22s ease-in-out infinite;
}
#pet.bite .pet-hand[data-item="rod"] svg {
    animation: pet-rod-tug .22s ease-in-out infinite;
}
#pet.reeling .pet-hand[data-item="rod"] svg {
    animation: pet-rod-reel .6s cubic-bezier(.3,1.4,.5,1);
}
#pet.reeling .pet-hand .it-bobber,
#pet.reeling .pet-hand .it-line {
    opacity: 0;
}
@keyframes pet-bobber-bite {
    0%,100% { transform: translateY(0) }
    50% { transform: translateY(4px) }
}
@keyframes pet-rod-tug {
    0%,100% { transform: rotate(2deg) }
    50% { transform: rotate(9deg) }
}
@keyframes pet-rod-reel {
    0% { transform: rotate(8deg) }
    35% { transform: rotate(-38deg) }
    100% { transform: rotate(0) }
}

/* kelebek başına kondu: gözler yukarıda */
#pet.bfly-on-head .pet-pupils {
    transform: translateY(-2.6px);
}

/* ---------- efekt katmanı (pet'in üstünde) ---------- */
#pet-fx {
    position: fixed;
    inset: 0;
    z-index: 51;
    pointer-events: none;
}
#pet-fx .pet-butterfly {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    will-change: transform;
    filter: drop-shadow(0 2px 2px oklch(0 0 0 / .15));
}
#pet-fx .pet-butterfly svg,
#pet-fx .pet-fish-catch svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
#pet-fx .pet-butterfly .bf-wing {
    transform-box: view-box;
    transform-origin: 16px 16px;
    animation: bf-flap .16s ease-in-out infinite alternate;
}
#pet-fx .pet-butterfly.landed .bf-wing {
    animation-duration: .9s;
}
@keyframes bf-flap {
    from { transform: scaleX(1) }
    to { transform: scaleX(.2) }
}
#pet-fx .pet-fish-catch {
    position: absolute;
    width: 18px;
    height: 18px;
}
#pet-fx .pet-splash {
    position: absolute;
    width: 4px;
    height: 5px;
    margin: -2px 0 0 -2px;
    border-radius: 50% 50% 60% 60%;
    background: #6fa8dc;
    animation: pet-splash .55s ease-out forwards;
}
@keyframes pet-splash {
    0% { opacity: .9; transform: none }
    50% { opacity: .9; transform: translate(calc(var(--dx) * .6),var(--dy)) }
    100% { opacity: 0; transform: translate(var(--dx),6px) }
}

/* boş yere tıklama dalgası */
#pet-garden .pet-ripple {
    position: absolute;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    border: 2px solid color-mix(in oklch,var(--accent) 70%,transparent);
    animation: pet-ripple .6s ease-out forwards;
}
@keyframes pet-ripple {
    from { opacity: .9; transform: scale(.2) }
    to { opacity: 0; transform: scale(1.2) }
}

/* ========== Eğlence 2: ayak izi, atıştırmalık, mevsim, parti ========== */

/* ayak izleri: hafif, yavaşça silinir */
#pet-garden .pet-print {
    position: absolute;
    width: 5px;
    height: 7px;
    margin: -3.5px 0 0 -2.5px;
    border-radius: 50% 50% 45% 45%;
    background: color-mix(in oklch,var(--muted,#8a7d6d) 60%,transparent);
    opacity: .22;
    pointer-events: none;
    animation: pet-print 2.6s ease-in forwards;
}
@keyframes pet-print {
    to { opacity: 0 }
}

/* atıştırmalık: yukarıdan düşer, seker; her ısırıkta küçülür */
#pet-garden .pet-treat {
    position: absolute;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 2px 1.5px oklch(0 0 0 / .2));
    transition: opacity .4s ease;
}
#pet-garden .pet-treat .pt-drop {
    display: block;
    width: 100%;
    height: 100%;
    animation: pet-treat-drop .6s cubic-bezier(.3,0,.6,1) both;
    transition: scale .15s cubic-bezier(.34,1.56,.64,1);
}
#pet-garden .pet-treat svg {
    display: block;
    width: 100%;
    height: 100%;
}
#pet-garden .pet-treat[data-bites="1"] .pt-drop {
    scale: .75;
}
#pet-garden .pet-treat[data-bites="2"] .pt-drop {
    scale: .45;
}
#pet-garden .pet-treat[data-bites="3"] .pt-drop {
    scale: .15;
}
#pet-garden .pet-treat.gone {
    opacity: 0;
}
@keyframes pet-treat-drop {
    0% { transform: translateY(var(--drop,-40px)); opacity: 0 }
    15% { opacity: 1 }
    60% { transform: translateY(0) scale(1.15,.8) }
    78% { transform: translateY(-7px) scale(.95,1.05) }
    100% { transform: none }
}
#pet-garden .pet-crumb {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 1px;
    background: #a8743a;
    animation: pet-crumb .55s ease-out forwards;
}
#pet-garden .pet-crumb-berry {
    background: #d9636a;
}
@keyframes pet-crumb {
    0% { opacity: 1; transform: none }
    50% { transform: translate(calc(var(--dx) * .6),var(--dy)) }
    100% { opacity: 0; transform: translate(var(--dx),4px) rotate(120deg) }
}

/* çiğneme: başını hızlı hızlı indirip kaldırır */
#pet.eating .pet-sprite {
    transform-origin: 50% 92%;
    animation: pet-chew .45s ease-in-out infinite;
}
#pet.eating .pet-eye {
    transform: scaleY(.5);
}
@keyframes pet-chew {
    0%,100% { transform: translateY(0) rotate(0) scale(1,1) }
    40% { transform: translateY(4px) rotate(calc(var(--chew-dir,1) * 9deg)) scale(1.08,.9) }
}
#pet.face-left.eating .pet-sprite {
    --chew-dir: -1;
}

/* doydu: başını iki yana sallar */
#pet.full .pet-sprite {
    animation: pet-no .7s ease-in-out 2;
}
@keyframes pet-no {
    0%,100% { transform: rotate(0) }
    25% { transform: rotate(-9deg) }
    75% { transform: rotate(9deg) }
}

/* mevsim parçacıkları */
#pet-garden .pet-flake {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform;
    transition: opacity 3s ease-in;
}
#pet-garden .pet-flake svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
#pet-garden .pet-flake-winter svg {
    filter: drop-shadow(0 0 1px #7aa5c9) drop-shadow(0 0 1px #7aa5c9);
}
#pet-garden .pet-flake-summer svg {
    filter: drop-shadow(0 0 1px oklch(0 0 0 / .35));
}
#pet-garden .pet-flake.landed {
    opacity: 0;
}
#pet-garden .pet-flake.caught {
    transition: opacity .3s ease, scale .3s ease;
    opacity: 0;
    scale: 1.8;
}

/* disko: dans ederken gökkuşağı renkleri */
#pet.disco .pet-sprite {
    animation: pet-dance .48s ease-in-out infinite, pet-disco 1.6s linear infinite;
}
@keyframes pet-disco {
    to { filter: hue-rotate(360deg) saturate(1.4) }
}
#pet-fx .pet-confetti {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 11px;
    border-radius: 2px;
    animation: pet-confetti-rain 2s cubic-bezier(.3,.5,.6,1) forwards;
}
@keyframes pet-confetti-rain {
    0% { transform: translate(0,0) rotate(0); opacity: 1 }
    85% { opacity: 1 }
    100% { transform: translate(var(--dx),100vh) rotate(var(--rot)); opacity: 0 }
}