/* Three still painted glyphs per line: pop in, hold, then fade. No wiggle. */
.merchant-emotes{position:absolute;inset:0;z-index:2;pointer-events:none}
.merchant-emote{position:absolute;pointer-events:none;opacity:0;visibility:hidden;--delay:0ms;--tilt:0deg}
.merchant-emote--temple{left:66%;top:14%;width:7.5%;--tilt:8deg}
.merchant-emote--left{left:36.5%;top:21%;width:5.6%;--delay:150ms;--tilt:-19deg}
.merchant-emote--cheek{left:69%;top:33%;width:4.7%;--delay:310ms;--tilt:22deg}
.merchant-emote img{display:block;width:100%;height:auto;user-select:none}
body[data-view=close] .merchant-emote{visibility:visible;animation:emote-burst 2450ms ease-out var(--delay) both}
@keyframes emote-burst{
  0%{opacity:0;transform:translateY(7px) scale(.75) rotate(var(--tilt))}
  14%,56%{opacity:1;transform:translateY(0) scale(1) rotate(var(--tilt))}
  100%{opacity:0;transform:translateY(-17px) scale(1) rotate(var(--tilt));visibility:hidden}
}
@media(max-width:600px){
  .merchant-emote--temple{left:60.5%;top:14%;width:6.8%}
  .merchant-emote--cheek{left:62%;top:32%;width:4.7%}
}
@keyframes emote-quiet{0%,60%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){
  body[data-view=close] .merchant-emote{animation:emote-quiet 2450ms linear var(--delay) both!important;transform:none!important}
}

/* Keep mood marks in front of the bubble, aligned with the merchant artwork. */
.conversation > .emote-overlay{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.conversation > .speech-bubble{z-index:0}
.conversation > .replies,.conversation > .return-button{z-index:2}