/* Человечек — те же размеры и формы, что в оверлее (widget/twitch-chatters-overlay.html).
   Если меняешь человечка в оверлее, поменяй и здесь, чтобы превью совпадало со стримом. */

.figure {
  position: relative;
  width: 70px; height: 96px;
}
.body-wrap { position: absolute; inset: 0; transform-origin: 50% 100%; }

.head {
  position: absolute; left: 15px; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--skin, #ffffff);
  border: 3px solid #1d1830;
  box-sizing: border-box;
  z-index: 3;
}
.head::before, .head::after {
  content: ''; position: absolute; top: 14px;
  width: 5px; height: 7px; border-radius: 3px; background: #1d1830;
}
.head::before { left: 18px; }
.head::after  { left: 27px; }
.mouth {
  position: absolute; left: 20px; top: 24px; width: 10px; height: 5px;
  border: 3px solid #1d1830; border-top: none; border-radius: 0 0 10px 10px;
  box-sizing: border-box;
}
.hat {
  position: absolute; left: 12px; top: -6px; width: 46px; height: 22px;
  background: var(--c2, #6a5acd); border: 3px solid #1d1830; box-sizing: border-box;
  border-radius: 24px 24px 4px 4px; z-index: 4;
}
.hat::after {
  content: ''; position: absolute; right: -14px; bottom: -3px;
  width: 20px; height: 7px; background: var(--c2, #6a5acd);
  border: 3px solid #1d1830; border-radius: 4px; box-sizing: content-box;
}
.no-hat .hat { display: none; }

.torso {
  position: absolute; left: 17px; top: 36px;
  width: 36px; height: 34px; border-radius: 12px 12px 8px 8px;
  background: var(--c1, #9b6bff); border: 3px solid #1d1830; box-sizing: border-box;
  z-index: 2;
}
.limb {
  position: absolute; width: 10px; border-radius: 6px;
  background: var(--c1, #9b6bff); border: 3px solid #1d1830; box-sizing: border-box;
  transform-origin: 50% 4px;
}
.arm  { top: 40px; height: 26px; }
.arm.l { left: 12px; z-index: 1; }
.arm.r { left: 48px; z-index: 3; }
.leg  { top: 64px; height: 30px; background: #2c2547; }
.leg.l { left: 21px; z-index: 1; }
.leg.r { left: 39px; z-index: 1; }

/* Танец «руки вверх» из оверлея — для живого превью */
.dancing .body-wrap, .dancing .limb {
  animation-duration: var(--beat, .5s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.dancing .body-wrap { animation-name: d-bounce; }
.dancing .arm.r     { animation-name: d-hands-r; animation-direction: alternate; }
.dancing .arm.l     { animation-name: d-hands-l; animation-direction: alternate; }
@keyframes d-bounce  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes d-hands-r { from { transform: rotate(-160deg); } to { transform: rotate(-200deg); } }
@keyframes d-hands-l { from { transform: rotate(200deg); }  to { transform: rotate(160deg); } }

/* Машет рукой — после сохранения */
.waving .arm.r { animation: wave .3s ease-in-out infinite alternate; }
.waving .body-wrap { animation: hop .5s cubic-bezier(.3,1.8,.6,1) 1; }
@keyframes wave { from { transform: rotate(-150deg); } to { transform: rotate(-195deg); } }
@keyframes hop  { 0% { transform: translateY(0); } 40% { transform: translateY(-18px); } 100% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .dancing .body-wrap, .dancing .limb, .waving .arm.r, .waving .body-wrap { animation: none; }
}