.ingredient-icon { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: middle; flex-shrink: 0; pointer-events: none; }
.k-ico .ingredient-icon { width: 34px; height: 34px; }
.sell .fbtn b { display: grid; place-items: center; }
.sell .fbtn .ingredient-icon { width: 17px; height: 17px; }
.sell .pile .ingredient-icon { width: 100%; height: 100%; }
.sell .supply-btn .ingredient-icon { width: 17px; height: 17px; }
.pet-art { display: inline-block; width: 1.8em; height: 1.6em; vertical-align: middle; overflow: visible; pointer-events: none; }
.pet-big .pet-art { width: 128px; height: 110px; }
.pet-care-portrait { text-align: center; }
.pet-care-portrait .pet-art { width: 150px; height: 125px; }
.sell.has-counter-pets > .queue-row { width: calc(100% - var(--pets-width)); }
.counter-pets { position: absolute; top: 2px; right: 8px; display: flex; gap: 3px; z-index: 5; }
.counter-pet { width: 41px; padding: 0; border: 0; background: #fff8; border-radius: 9px; display: flex; flex-direction: column; align-items: center; }
.counter-pet .pet-art { width: 35px; height: clamp(16px,calc(var(--counter-u) * 6 - 9px),27px); }
.counter-pet small { font-size: 7px; line-height: 8px; white-space: nowrap; color: #67462e; }
.counter-pet-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 12px 0; font-size: 13px; }
[data-mood="happy"] .pet-tail, [data-mood="excited"] .pet-tail { transform-origin: 74px 58px; animation: petWag .5s ease-in-out infinite alternate; }
[data-mood="happy"] .pet-body { transform-origin: center bottom; animation: petBreathe 2s ease-in-out infinite; }
[data-mood="excited"] .pet-body { animation: petHop .65s ease-in-out infinite; }
[data-mood="sad"] .pet-head, [data-mood="hungry"] .pet-head { transform-origin: 50px 55px; animation: petDroop 2s ease-in-out infinite; }
[data-mood="hungry"] .pet-body { animation: petHungry 1.5s ease-in-out infinite; }
[data-mood="dirty"] .pet-stink { animation: petStink 1.4s ease-in-out infinite; }
[data-mood="sleepy"] .pet-body, [data-mood="calm"] .pet-body { animation: petBreathe 3s ease-in-out infinite; transform-origin: center bottom; }
.pet-heart { animation: petHeart 1.5s ease-in-out infinite; transform-origin: 87px 18px; }
@keyframes petWag { to { transform: rotate(16deg); } }
@keyframes petHop { 50% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes petDroop { 50% { transform: translateY(3px) rotate(-4deg); } }
@keyframes petHungry { 50% { transform: translateX(1px); } }
@keyframes petBreathe { 50% { transform: scale(1.02,.97); } }
@keyframes petStink { 50% { transform: translateY(-5px); opacity: .25; } }
@keyframes petHeart { 50% { transform: translateY(-4px) scale(1.15); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .pet-art * { animation: none !important; } }
@media (orientation: landscape) and (max-height: 500px) { .counter-pets { position: relative; top: auto; right: auto; grid-column: 1; grid-row: 1; justify-self: end; align-self: start; } .counter-pet .pet-art { height: 24px; } }