.friend .face-happy,.friend .face-wink,.friend .face-wow,.friend .face-sleep,.friend .face-tongue{display:none}
.friend.is-happy .face-rest,.friend.is-wink .face-rest,.friend.is-wow .face-rest,.friend.is-sleep .face-rest,.friend.is-tongue .face-rest{display:none}
.friend.is-happy .face-happy,.friend.is-wink .face-wink,.friend.is-wow .face-wow,.friend.is-sleep .face-sleep,.friend.is-tongue .face-tongue{display:block}
#friends-bar{overflow:visible}
.friend.is-reacting{z-index:22;transform-origin:center 80%}
.friend.is-reacting::after{content:var(--burst,"♥");position:absolute;left:50%;top:-8px;font-size:18px;line-height:1;animation:burst-pop .9s ease;pointer-events:none}
.react-particle{position:absolute;left:50%;top:28%;font-size:15px;line-height:1;pointer-events:none;animation:particle-fly .95s ease-out forwards;animation-delay:var(--delay,0ms)}
@keyframes burst-pop{0%{opacity:0;transform:translate(-50%,10px) scale(.4)}40%{opacity:1;transform:translate(-50%,-8px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-24px) scale(.75)}}
@keyframes particle-fly{0%{opacity:1;transform:translate(-50%,0) scale(.6)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(1.15)}}
.friend.is-reacting[data-react="smile"]{animation:react-smile .85s ease both!important}
.friend.is-reacting[data-react="kiss"]{animation:react-kiss 1.2s ease both!important}
.friend.is-reacting[data-react="wink"]{animation:react-wink .8s ease both!important}
.friend.is-reacting[data-react="tongue"]{animation:react-tongue .9s ease both!important}
.friend.is-reacting[data-react="surprise"]{animation:react-surprise .7s cubic-bezier(.2,1.6,.4,1) both!important}
.friend.is-reacting[data-react="yawn"]{animation:react-yawn 1.3s ease both!important}
.friend.is-reacting[data-react="jump"]{animation:react-jump .85s cubic-bezier(.2,1.5,.3,1) both!important}
.friend.is-reacting[data-react="hop"]{animation:react-hop 1s ease both!important}
.friend.is-reacting[data-react="bounce"]{animation:react-bounce .9s ease both!important}
.friend.is-reacting[data-react="spin"]{animation:react-spin 1s ease both!important}
.friend.is-reacting[data-react="flip"]{animation:react-flip 1.05s ease both!important}
.friend.is-reacting[data-react="cartwheel"]{animation:react-cartwheel 1.15s ease both!important}
.friend.is-reacting[data-react="roll"]{animation:react-roll 1.05s ease both!important}
.friend.is-reacting[data-react="tada"]{animation:react-tada 1.1s ease both!important}
.friend.is-reacting[data-react="shake"]{animation:react-shake .7s ease both!important}
.friend.is-reacting[data-react="wobble"]{animation:react-wobble .95s ease both!important}
.friend.is-reacting[data-react="jello"]{animation:react-jello 1.05s ease both!important}
.friend.is-reacting[data-react="rubber"]{animation:react-rubber .95s ease both!important}
.friend.is-reacting[data-react="pulse"]{animation:react-pulse .85s ease both!important}
.friend.is-reacting[data-react="heartbeat"]{animation:react-heartbeat .95s ease both!important}
.friend.is-reacting[data-react="swing"]{animation:react-swing 1.05s ease both!important}
.friend.is-reacting[data-react="wave"]{animation:react-wave 1.15s ease both!important}
.friend.is-reacting[data-react="nod"]{animation:react-nod .85s ease both!important}
.friend.is-reacting[data-react="nope"]{animation:react-nope .75s ease both!important}
.friend.is-reacting[data-react="giggle"]{animation:react-giggle .85s ease both!important}
.friend.is-reacting[data-react="dance"]{animation:react-dance 1.3s ease both!important}
.friend.is-reacting[data-react="inflate"]{animation:react-inflate .95s ease both!important}
.friend.is-reacting[data-react="pop"]{animation:react-pop .7s cubic-bezier(.2,1.8,.3,1) both!important}
.friend.is-reacting[data-react="spring"]{animation:react-spring .95s cubic-bezier(.2,1.6,.3,1) both!important}
.friend.is-reacting[data-react="float"]{animation:react-float 1.3s ease both!important}
.friend.is-reacting[data-react="drop"]{animation:react-drop .85s ease both!important}
.friend.is-reacting[data-react="zigzag"]{animation:react-zigzag .95s ease both!important}
.friend.is-reacting[data-react="moonwalk"]{animation:react-moonwalk 1.15s ease both!important}
.friend.is-reacting[data-react="fly"]{animation:react-fly 1.15s ease both!important}
.friend.is-reacting[data-react="twist"]{animation:react-twist .95s ease both!important}
.friend.is-reacting[data-react="teeter"]{animation:react-teeter 1.05s ease both!important}
.friend.is-reacting[data-react="peek"]{animation:react-peek .95s ease both!important}
.friend.is-reacting[data-react="sparkle"]{animation:react-sparkle 1.2s ease both!important}
.friend.is-reacting[data-react="bloom"]{animation:react-bloom 1.3s ease both!important}
.friend.is-reacting[data-react="rainbow"]{animation:react-rainbow 1.3s ease both!important}
.friend.is-reacting[data-react="stars"]{animation:react-stars 1.2s ease both!important}
.friend.is-reacting[data-react="notes"]{animation:react-notes 1.2s ease both!important}
.friend.is-reacting[data-react="confetti"]{animation:react-tada 1.2s ease both!important}
.friend.is-reacting[data-react="snow"]{animation:react-float 1.3s ease both!important}
.friend.is-reacting[data-react="magic"]{animation:react-magic 1.3s ease both!important}
.friend.is-reacting[data-react="bow"]{animation:react-bow .95s ease both!important}
.friend.is-reacting[data-react="dizzy"]{animation:react-dizzy 1.2s ease both!important}
.friend.is-reacting[data-react="shrink"]{animation:react-shrink .85s ease both!important}
.friend.is-reacting[data-react="rainbow"] svg,.friend.is-reacting[data-react="magic"] svg{animation:hue-spin 1.2s linear}
@keyframes react-smile{0%,100%{transform:scale(1)}28%{transform:scale(1.2) rotate(-10deg)}55%{transform:scale(1.12) rotate(8deg)}}
@keyframes react-kiss{0%,100%{transform:scale(1)}20%{transform:scale(1.15) translateY(-6px)}40%{transform:scale(1.05) rotate(-12deg)}70%{transform:scale(1.18) rotate(10deg)}}
@keyframes react-wink{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg) scale(1.08)}60%{transform:rotate(8deg)}}
@keyframes react-tongue{0%,100%{transform:scale(1)}25%{transform:scale(1.1, .92)}50%{transform:scale(.94, 1.14) rotate(6deg)}75%{transform:scale(1.08)}}
@keyframes react-surprise{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes react-yawn{0%,100%{transform:scale(1)}30%{transform:scale(1.06, .9)}60%{transform:scale(.96, 1.08) translateY(4px)}}
@keyframes react-jump{0%,100%{transform:translateY(0)}35%{transform:translateY(-28px) scale(1.06)}55%{transform:translateY(-6px)}70%{transform:translateY(-14px)}}
@keyframes react-hop{0%,100%{transform:translateY(0)}20%{transform:translateY(-16px)}40%{transform:translateY(0)}60%{transform:translateY(-22px)}80%{transform:translateY(0)}}
@keyframes react-bounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-18px) scale(1.08, .92)}50%{transform:translateY(0) scale(.96, 1.08)}70%{transform:translateY(-10px)}}
@keyframes react-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes react-flip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes react-cartwheel{0%{transform:rotate(0) translateY(0)}50%{transform:rotate(180deg) translateY(-18px)}100%{transform:rotate(360deg) translateY(0)}}
@keyframes react-roll{0%{transform:rotate(0) translateX(0)}50%{transform:rotate(180deg) translateX(16px)}100%{transform:rotate(360deg) translateX(0)}}
@keyframes react-tada{0%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.9) rotate(-8deg)}30%,50%,70%{transform:scale(1.18) rotate(8deg)}40%,60%{transform:scale(1.18) rotate(-8deg)}}
@keyframes react-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes react-wobble{0%,100%{transform:rotate(0)}15%{transform:rotate(-12deg) translateX(-6px)}30%{transform:rotate(10deg) translateX(6px)}45%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
@keyframes react-jello{0%,100%{transform:skew(0)}20%{transform:skew(-12deg, -8deg)}40%{transform:skew(10deg, 6deg)}60%{transform:skew(-6deg, -4deg)}80%{transform:skew(3deg, 2deg)}}
@keyframes react-rubber{0%{transform:scale(1)}30%{transform:scale(1.28, .72)}50%{transform:scale(.82, 1.22)}70%{transform:scale(1.12, .9)}100%{transform:scale(1)}}
@keyframes react-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes react-heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.2)}28%{transform:scale(1)}42%{transform:scale(1.2)}}
@keyframes react-swing{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@keyframes react-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg) translateY(-6px)}50%{transform:rotate(16deg) translateY(-2px)}75%{transform:rotate(-10deg)}}
@keyframes react-nod{0%,100%{transform:rotateX(0)}25%{transform:rotateX(28deg)}50%{transform:rotateX(-8deg)}75%{transform:rotateX(16deg)}}
@keyframes react-nope{0%,100%{transform:rotateY(0)}25%{transform:rotateY(-28deg)}50%{transform:rotateY(28deg)}75%{transform:rotateY(-16deg)}}
@keyframes react-giggle{0%,100%{transform:rotate(0) translateX(0)}20%{transform:rotate(-6deg) translateX(-4px)}40%{transform:rotate(6deg) translateX(4px)}60%{transform:rotate(-5deg) translateX(-3px)}80%{transform:rotate(4deg)}}
@keyframes react-dance{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-8px,-10px) rotate(-12deg)}40%{transform:translate(8px,-4px) rotate(12deg)}60%{transform:translate(-6px,-14px) rotate(-8deg)}80%{transform:translate(6px,-2px) rotate(6deg)}}
@keyframes react-inflate{0%,100%{transform:scale(1)}50%{transform:scale(1.38)}}
@keyframes react-pop{0%{transform:scale(1)}40%{transform:scale(1.32)}55%{transform:scale(.88)}100%{transform:scale(1)}}
@keyframes react-spring{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-24px) scale(.92, 1.1)}55%{transform:translateY(0) scale(1.1, .9)}75%{transform:translateY(-10px)}}
@keyframes react-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px) rotate(4deg)}}
@keyframes react-drop{0%{transform:translateY(-22px) scale(.9)}40%{transform:translateY(6px) scale(1.06, .9)}70%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes react-zigzag{0%,100%{transform:translate(0,0)}25%{transform:translate(-12px,-10px)}50%{transform:translate(12px,-16px)}75%{transform:translate(-8px,-6px)}}
@keyframes react-moonwalk{0%,100%{transform:translateX(0) scaleX(1)}40%{transform:translateX(-18px) scaleX(-1)}70%{transform:translateX(10px) scaleX(-1)}}
@keyframes react-fly{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(8px,-26px) rotate(-12deg)}70%{transform:translate(-6px,-12px) rotate(8deg)}}
@keyframes react-twist{0%,100%{transform:rotateY(0) rotate(0)}40%{transform:rotateY(180deg) rotate(8deg)}100%{transform:rotateY(360deg)}}
@keyframes react-teeter{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}}
@keyframes react-peek{0%,100%{transform:scale(1) translateY(0)}35%{transform:scale(.7) translateY(10px)}65%{transform:scale(1.12) translateY(-6px)}}
@keyframes react-sparkle{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.16) rotate(-8deg)}60%{transform:scale(1.1) rotate(8deg)}}
@keyframes react-bloom{0%{transform:scale(.7) rotate(-8deg)}50%{transform:scale(1.2) rotate(6deg)}100%{transform:scale(1)}}
@keyframes react-rainbow{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.12) rotate(-8deg)}50%{transform:scale(1.18) rotate(8deg)}75%{transform:scale(1.08) rotate(-4deg)}}
@keyframes react-stars{0%,100%{transform:rotate(0) scale(1)}40%{transform:rotate(-12deg) scale(1.15)}70%{transform:rotate(10deg) scale(1.1)}}
@keyframes react-notes{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-12px) rotate(-10deg)}60%{transform:translateY(-6px) rotate(10deg)}}
@keyframes react-magic{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.14) rotate(-10deg)}50%{transform:scale(.96) rotate(8deg)}75%{transform:scale(1.1) rotate(-4deg)}}
@keyframes react-bow{0%,100%{transform:rotate(0) translateY(0)}40%{transform:rotate(22deg) translateY(8px)}70%{transform:rotate(-4deg)}}
@keyframes react-dizzy{0%{transform:rotate(0)}100%{transform:rotate(540deg) scale(.95)}}
@keyframes react-shrink{0%,100%{transform:scale(1)}40%{transform:scale(.55)}70%{transform:scale(1.12)}}
@keyframes hue-spin{to{filter:hue-rotate(360deg) drop-shadow(0 4px 6px #db277733)}}
@media(prefers-reduced-motion:reduce){
  .friend.is-reacting{animation:none!important}
  .friend.is-reacting::after,.react-particle{animation:none;opacity:.85}
}