
:root{
  --skin:#d7a078;--skin-hi:#edc09a;--skin-shadow:#b97955;
  --hair:#2b211d;--hair2:#453228;--shirt:#f6f6f3;--vest:#171717;
  --eye:#33251d;--lip:#8f5356;
}
*{box-sizing:border-box}


.dealer{position:relative;width:min(470px,88vw);height:590px;filter:drop-shadow(0 16px 17px rgba(0,0,0,.14));transform-origin:50% 92%}

/* ---------- BODY ---------- */
.torso{position:absolute;left:50%;bottom:28px;width:324px;height:235px;transform:translateX(-50%);z-index:5}
.shirt{position:absolute;inset:0;background:linear-gradient(90deg,#ececea,#fff 31% 69%,#e8e8e5);clip-path:polygon(14% 100%,8% 38%,24% 16%,41% 5%,59% 5%,76% 16%,92% 38%,86% 100%)}
.neck{position:absolute;left:50%;top:-54px;width:91px;height:86px;transform:translateX(-50%);background:linear-gradient(90deg,var(--skin-shadow),var(--skin) 22% 78%,var(--skin-shadow));border-radius:0 0 34px 34px;z-index:2}
.vest{position:absolute;left:48px;right:48px;top:34px;bottom:0;background:linear-gradient(90deg,#0d0d0d,#252525 35%,#171717 65%,#0b0b0b);clip-path:polygon(0 3%,32% 0,50% 45%,68% 0,100% 3%,95% 100%,5% 100%);z-index:4}
.collarL,.collarR{position:absolute;top:19px;width:78px;height:65px;background:#fff;z-index:3}
.collarL{left:88px;clip-path:polygon(0 0,100% 0,70% 100%)}
.collarR{right:88px;clip-path:polygon(0 0,100% 0,30% 100%)}
.bow{position:absolute;left:50%;top:46px;width:82px;height:42px;transform:translateX(-50%);z-index:7}
.bow:before,.bow:after{content:"";position:absolute;top:5px;width:38px;height:32px;background:linear-gradient(135deg,#2a2a2a,#080808)}
.bow:before{left:0;clip-path:polygon(100% 16%,100% 84%,0 100%,8% 0)}
.bow:after{right:0;clip-path:polygon(0 16%,0 84%,100% 100%,92% 0)}
.bow i{position:absolute;left:50%;top:50%;width:20px;height:24px;transform:translate(-50%,-50%);background:#111;border-radius:6px}
.button{position:absolute;left:50%;width:13px;height:13px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#555 0 10%,#151515 28% 72%,#000 74%);z-index:8}.b1{top:135px}.b2{top:177px}.b3{top:218px}

/* ---------- HEAD ---------- */
.head{position:absolute;left:50%;top:72px;width:214px;height:258px;transform:translateX(-50%);z-index:20;transform-origin:50% 82%}
.face{position:absolute;left:10px;right:10px;top:20px;bottom:0;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.2),transparent 30%),linear-gradient(90deg,var(--skin-shadow),var(--skin-hi) 15%,var(--skin) 50%,var(--skin-hi) 85%,var(--skin-shadow));border-radius:47% 47% 43% 43% / 36% 36% 58% 58%;box-shadow:inset 0 -13px 20px rgba(92,48,33,.11)}
.ear{position:absolute;top:105px;width:28px;height:55px;background:linear-gradient(90deg,var(--skin-shadow),var(--skin-hi));border-radius:55%;z-index:-1}.ear.l{left:-1px}.ear.r{right:-1px;transform:scaleX(-1)}
.hair{position:absolute;left:1px;right:1px;top:0;height:100px;background:radial-gradient(ellipse at 22% 55%,#4b382d 0 15%,transparent 16%),radial-gradient(ellipse at 44% 34%,#3c2c25 0 23%,transparent 24%),radial-gradient(ellipse at 68% 34%,#352720 0 23%,transparent 24%),linear-gradient(#4a352b,#201916);border-radius:58% 49% 34% 31% / 75% 68% 26% 28%;z-index:5;box-shadow:inset 0 -10px 11px rgba(0,0,0,.2)}
.hair:after{content:"";position:absolute;left:18px;right:18px;bottom:-17px;height:42px;background:linear-gradient(#342720,#1e1714);clip-path:polygon(0 10%,12% 31%,21% 7%,33% 30%,45% 0,58% 27%,70% 8%,82% 30%,100% 12%,91% 100%,8% 100%)}
.brow{position:absolute;top:104px;width:50px;height:9px;background:#241b17;border-radius:60% 40%;z-index:7}.brow.l{left:39px;transform:rotate(-5deg)}.brow.r{right:39px;transform:rotate(5deg)}
.eye{position:absolute;top:122px;width:37px;height:18px;background:#f7f2eb;border-radius:50%;z-index:7;overflow:hidden;transform-origin:center;animation:blink 6s infinite}.eye.l{left:48px}.eye.r{right:48px}.eye:before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#111 0 27%,var(--eye) 29% 62%,#211713 64%)}
.nose{position:absolute;left:50%;top:128px;width:25px;height:61px;transform:translateX(-50%);border-left:2px solid rgba(95,56,42,.22);border-right:2px solid rgba(255,255,255,.14);border-radius:50%;z-index:6}.nose:after{content:"";position:absolute;left:50%;bottom:0;width:31px;height:10px;transform:translateX(-50%);border-bottom:2px solid rgba(99,56,42,.2);border-radius:50%}
.mouth{position:absolute;left:50%;top:205px;width:64px;height:18px;transform:translateX(-50%);border-bottom:3px solid var(--lip);border-radius:0 0 60% 60%;z-index:8;transition:.18s}
.cheek{position:absolute;top:168px;width:40px;height:38px;border-radius:50%;background:radial-gradient(circle,rgba(194,94,77,.1),transparent 70%);z-index:3}.cheek.l{left:23px}.cheek.r{right:23px}
.stubble{position:absolute;left:40px;right:40px;top:176px;height:72px;border-radius:0 0 48% 48%;background:radial-gradient(circle,rgba(48,36,31,.18) 0 1px,transparent 1.4px) 0 0/7px 7px;opacity:.25;mask-image:linear-gradient(to bottom,transparent,#000 32%,#000);z-index:4}
@keyframes blink{0%,46%,49%,100%{transform:scaleY(1)}47%,48%{transform:scaleY(.08)}}

/* ---------- NATURAL ARM CHAIN ---------- */
.armAnchor{position:absolute;top:372px;width:48px;height:105px;z-index:4;transform-origin:24px 10px}
.armAnchor.left{left:96px;transform:rotate(18deg)}
.armAnchor.right{right:96px;transform:rotate(-18deg)}
.upperArm{position:absolute;left:8px;top:0;width:34px;height:108px;background:linear-gradient(90deg,#dededb,#fff 43%,#e7e7e4);border-radius:20px 20px 17px 17px;box-shadow:inset -4px -4px 7px rgba(0,0,0,.07)}
.forearm{position:absolute;left:1px;top:88px;width:32px;height:108px;background:linear-gradient(90deg,#e3e3e0,#fff 44%,#e9e9e6);border-radius:17px;transform-origin:16px 9px;box-shadow:inset -3px -4px 7px rgba(0,0,0,.07)}
.left .forearm{transform:rotate(-24deg)}
.right .forearm{transform:rotate(24deg)}
.cuff{position:absolute;left:-2px;bottom:0;width:36px;height:19px;background:#fff;border-radius:10px;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.hand{position:absolute;left:2px;top:96px;width:29px;height:49px;background:linear-gradient(90deg,var(--skin-shadow),var(--skin) 38%,var(--skin-hi));border-radius:15px 15px 12px 12px;transform-origin:50% 8px;box-shadow:inset -2px -3px 4px rgba(0,0,0,.09)}
.palm{position:absolute;inset:0;border-radius:inherit;background:inherit}
.finger{position:absolute;top:38px;width:6px;background:linear-gradient(var(--skin-hi),var(--skin));border-radius:7px;height:28px}.f1{left:2px;height:23px}.f2{left:8px;height:29px}.f3{left:14px;height:31px}.f4{left:20px;height:25px}
.thumb{position:absolute;top:19px;width:9px;height:26px;background:linear-gradient(var(--skin-hi),var(--skin));border-radius:8px}
.left .thumb{right:-6px;transform:rotate(-30deg)}
.right .thumb{left:-6px;transform:rotate(30deg)}

/* ---------- CHEER ---------- */
.dealer.happy{animation:bodyCheer .48s ease-in-out infinite alternate}
.dealer.happy .armAnchor.left{animation:leftRaise .48s cubic-bezier(.4,0,.2,1) infinite alternate}
.dealer.happy .armAnchor.right{animation:rightRaise .48s cubic-bezier(.4,0,.2,1) infinite alternate}
.dealer.happy .left .forearm{animation:leftForearm .48s ease-in-out infinite alternate}
.dealer.happy .right .forearm{animation:rightForearm .48s ease-in-out infinite alternate}
.dealer.happy .head{animation:headCheer .48s ease-in-out infinite alternate}
.dealer.happy .mouth{top:200px;width:72px;height:34px;border:0;background:radial-gradient(ellipse at 50% 33%,#c46875 0 28%,#6a2831 31% 58%,#241014 62%);border-radius:28% 28% 58% 58%;box-shadow:inset 0 -6px rgba(255,177,190,.28)}
.dealer.happy .eye{top:126px;height:8px;background:#2b1e18;border-radius:999px;overflow:visible;animation:none}.dealer.happy .eye:before{display:none}
.dealer.happy .brow.l{transform:translateY(-4px) rotate(-15deg)}.dealer.happy .brow.r{transform:translateY(-4px) rotate(15deg)}
.dealer.happy .cheek{background:radial-gradient(circle,rgba(221,104,122,.24),transparent 72%)}
@keyframes bodyCheer{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@keyframes headCheer{from{transform:translateX(-50%) rotate(-1deg)}to{transform:translateX(-50%) translateY(-2px) rotate(1deg)}}
/* arm starts at shoulder and swings as one chain; local downward vector becomes upward/outward */
@keyframes leftRaise{from{transform:rotate(171deg)}to{transform:rotate(177deg)}}
@keyframes rightRaise{from{transform:rotate(-171deg)}to{transform:rotate(-177deg)}}
@keyframes leftForearm{from{transform:rotate(-1deg)}to{transform:rotate(6deg)}}
@keyframes rightForearm{from{transform:rotate(1deg)}to{transform:rotate(-6deg)}}


/* ---------- SAD ---------- */
.dealer.sad{
  animation:sadBody 1.8s ease-in-out infinite alternate;
}
.dealer.sad .torso{
  transform:translateX(-50%) translateY(7px) scaleX(.985);
}
.dealer.sad .head{
  animation:sadHead 1.8s ease-in-out infinite alternate;
}
.dealer.sad .armAnchor.left{
  animation:sadLeftArm 1.8s ease-in-out infinite alternate;
}
.dealer.sad .armAnchor.right{
  animation:sadRightArm 1.8s ease-in-out infinite alternate;
}
.dealer.sad .left .forearm{
  animation:sadLeftForearm 1.8s ease-in-out infinite alternate;
}
.dealer.sad .right .forearm{
  animation:sadRightForearm 1.8s ease-in-out infinite alternate;
}

/* eyebrows rise toward the center, giving a disappointed expression */
.dealer.sad .brow.l{
  transform:translateY(5px) rotate(13deg);
}
.dealer.sad .brow.r{
  transform:translateY(5px) rotate(-13deg);
}

/* slightly lowered eyelids */
.dealer.sad .eye{
  top:126px;
  height:13px;
}
.dealer.sad .eye:before{
  top:60%;
}

/* frown */
.dealer.sad .mouth{
  top:216px;
  width:55px;
  height:16px;
  border:0;
  border-top:3px solid var(--lip);
  border-radius:55% 55% 0 0;
  background:transparent;
}

/* cheeks lose the happy warmth */
.dealer.sad .cheek{
  opacity:.45;
}

@keyframes sadBody{
  from{ transform:translateY(2px); }
  to{ transform:translateY(6px); }
}
@keyframes sadHead{
  from{ transform:translateX(-50%) translateY(6px) rotate(-1deg); }
  to{ transform:translateX(-50%) translateY(10px) rotate(1deg); }
}
@keyframes sadLeftArm{
  from{ transform:translateY(8px) rotate(8deg); }
  to{ transform:translateY(12px) rotate(5deg); }
}
@keyframes sadRightArm{
  from{ transform:translateY(8px) rotate(-8deg); }
  to{ transform:translateY(12px) rotate(-5deg); }
}
@keyframes sadLeftForearm{
  from{ transform:rotate(10deg); }
  to{ transform:rotate(14deg); }
}
@keyframes sadRightForearm{
  from{ transform:rotate(-10deg); }
  to{ transform:rotate(-14deg); }
}


/* ---------- CRYING ---------- */
.dealer.crying{
  animation:cryBody 1.4s ease-in-out infinite alternate;
}
.dealer.crying .torso{
  transform:translateX(-50%) translateY(10px) scaleX(.98);
}
.dealer.crying .head{
  animation:cryHead 1.2s ease-in-out infinite alternate;
}
.dealer.crying .armAnchor.left{
  animation:cryLeftArm 1.3s ease-in-out infinite alternate;
}
.dealer.crying .armAnchor.right{
  animation:cryRightArm 1.3s ease-in-out infinite alternate;
}
.dealer.crying .left .forearm{
  animation:cryLeftForearm 1.3s ease-in-out infinite alternate;
}
.dealer.crying .right .forearm{
  animation:cryRightForearm 1.3s ease-in-out infinite alternate;
}
.dealer.crying .brow.l{
  transform:translateY(7px) rotate(18deg);
}
.dealer.crying .brow.r{
  transform:translateY(7px) rotate(-18deg);
}
.dealer.crying .eye{
  top:128px;
  height:10px;
}
.dealer.crying .eye:before{
  top:66%;
}
.dealer.crying .mouth{
  top:216px;
  width:58px;
  height:18px;
  border:0;
  border-top:3px solid var(--lip);
  border-radius:60% 60% 0 0;
  background:transparent;
  animation:cryMouth 0.55s ease-in-out infinite alternate;
}
.dealer.crying .cheek{
  background:radial-gradient(circle,rgba(173,96,118,.10),transparent 72%);
  opacity:.45;
}
.dealer.crying .tear{
  opacity:1;
}
.dealer.crying .tear.l{
  animation:tearFallLeft 1.15s ease-in infinite;
}
.dealer.crying .tear.r{
  animation:tearFallRight 1.28s ease-in infinite .22s;
}

.tear{
  position:absolute;
  top:138px;
  width:11px;
  height:34px;
  border-radius:999px 999px 999px 999px / 40% 40% 60% 60%;
  background:linear-gradient(180deg,rgba(205,244,255,.95),rgba(118,197,255,.78) 62%,rgba(83,169,245,.92));
  box-shadow:0 0 8px rgba(125,197,255,.28);
  opacity:0;
  z-index:6;
  transform-origin:50% 0%;
}
.tear.l{ left:58px; }
.tear.r{ right:58px; }

@keyframes tearFallLeft{
  0%{ transform:translateY(-2px) scaleY(.35); opacity:0; }
  14%{ opacity:.9; }
  70%{ opacity:.95; }
  100%{ transform:translateY(26px) scaleY(1); opacity:0; }
}
@keyframes tearFallRight{
  0%{ transform:translateY(-1px) scaleY(.35); opacity:0; }
  16%{ opacity:.9; }
  70%{ opacity:.95; }
  100%{ transform:translateY(28px) scaleY(1); opacity:0; }
}
@keyframes cryBody{
  from{ transform:translateY(3px); }
  to{ transform:translateY(8px); }
}
@keyframes cryHead{
  from{ transform:translateX(-50%) translateY(8px) rotate(-1.2deg); }
  to{ transform:translateX(-50%) translateY(12px) rotate(1.2deg); }
}
@keyframes cryLeftArm{
  from{ transform:translateY(12px) rotate(4deg); }
  to{ transform:translateY(16px) rotate(1deg); }
}
@keyframes cryRightArm{
  from{ transform:translateY(12px) rotate(-4deg); }
  to{ transform:translateY(16px) rotate(-1deg); }
}
@keyframes cryLeftForearm{
  from{ transform:rotate(18deg); }
  to{ transform:rotate(22deg); }
}
@keyframes cryRightForearm{
  from{ transform:rotate(-18deg); }
  to{ transform:rotate(-22deg); }
}
@keyframes cryMouth{
  from{ transform:translateX(-50%) scaleX(1) translateY(0); }
  to{ transform:translateX(-50%) scaleX(.95) translateY(1px); }
}


/* ---------- TAUNT ---------- */
.dealer.taunt{
  animation:tauntBody 0.9s ease-in-out infinite alternate;
}
.dealer.taunt .torso{
  transform:translateX(-50%) translateY(1px) scaleX(1.01);
}
.dealer.taunt .head{
  animation:tauntHead 0.9s ease-in-out infinite alternate;
}
.dealer.taunt .armAnchor.left{
  animation:tauntLeftArm 0.9s ease-in-out infinite alternate;
}
.dealer.taunt .armAnchor.right{
  animation:tauntRightArm 0.9s ease-in-out infinite alternate;
}
.dealer.taunt .left .forearm{
  animation:tauntLeftForearm 0.9s ease-in-out infinite alternate;
}
.dealer.taunt .right .forearm{
  animation:tauntRightForearm 0.9s ease-in-out infinite alternate;
}
.dealer.taunt .right .hand{
  animation:tauntHand 0.48s ease-in-out infinite alternate;
}

.dealer.taunt .brow.l{
  transform:translateY(-8px) rotate(-13deg);
}
.dealer.taunt .brow.r{
  transform:translateY(3px) rotate(9deg);
}

.dealer.taunt .eye{
  top:124px;
  height:12px;
}
.dealer.taunt .eye:before{
  top:56%;
}
.dealer.taunt .eye.l{
  transform:scaleY(.95);
}
.dealer.taunt .eye.r{
  transform:scaleY(.88);
}

.dealer.taunt .mouth{
  top:202px;
  width:58px;
  height:18px;
  transform:translateX(-50%) rotate(-9deg);
  border-bottom:3px solid var(--lip);
  border-radius:0 0 75% 45%;
}

.dealer.taunt .cheek{
  background:radial-gradient(circle,rgba(196,108,124,.16),transparent 72%);
  opacity:.75;
}

@keyframes tauntBody{
  from{ transform:translateY(0); }
  to{ transform:translateY(-2px); }
}
@keyframes tauntHead{
  from{ transform:translateX(-50%) translateY(-1px) rotate(-2deg); }
  to{ transform:translateX(-50%) translateY(1px) rotate(-4deg); }
}
@keyframes tauntLeftArm{
  from{ transform:rotate(24deg); }
  to{ transform:rotate(20deg); }
}
@keyframes tauntRightArm{
  from{ transform:rotate(-126deg); }
  to{ transform:rotate(-132deg); }
}
@keyframes tauntLeftForearm{
  from{ transform:rotate(-16deg); }
  to{ transform:rotate(-12deg); }
}
@keyframes tauntRightForearm{
  from{ transform:rotate(54deg); }
  to{ transform:rotate(65deg); }
}
@keyframes tauntHand{
  from{ transform:rotate(4deg); }
  to{ transform:rotate(-10deg); }
}


/* ---------- SPEAKING ---------- */
/* speaking is an overlay state and can coexist with the other emotions */
.dealer.speaking .mouth{
  animation:speakNeutral .18s ease-in-out infinite alternate;
}

.dealer.speaking:not(.happy):not(.sad):not(.crying):not(.taunt) .mouth{
  top:198px;
  width:58px;
  height:24px;
  border:0;
  background:radial-gradient(ellipse at 50% 30%, #b96a74 0 34%, #6a2b33 38% 60%, #261217 63% 100%);
  border-radius:30% 30% 58% 58%;
  box-shadow:inset 0 -4px rgba(255,183,194,.22);
}

.dealer.happy.speaking .mouth{
  animation:speakHappy .16s ease-in-out infinite alternate;
}

.dealer.sad.speaking .mouth{
  animation:speakSad .2s ease-in-out infinite alternate;
}

.dealer.crying.speaking .mouth{
  animation:speakCry .22s ease-in-out infinite alternate;
}

.dealer.taunt.speaking .mouth{
  animation:speakTaunt .17s ease-in-out infinite alternate;
}

@keyframes speakNeutral{
  from{
    transform:translateX(-50%) scaleY(.8);
    height:18px;
    width:54px;
  }
  to{
    transform:translateX(-50%) scaleY(1);
    height:28px;
    width:60px;
  }
}

@keyframes speakHappy{
  from{
    transform:translateX(-50%) scaleY(.78);
    height:24px;
    width:66px;
  }
  to{
    transform:translateX(-50%) scaleY(1);
    height:36px;
    width:76px;
  }
}

@keyframes speakSad{
  from{
    transform:translateX(-50%) scaleX(.95);
    width:52px;
    height:14px;
    border-top-width:3px;
  }
  to{
    transform:translateX(-50%) scaleX(.86) translateY(1px);
    width:46px;
    height:18px;
    border-top-width:2px;
  }
}

@keyframes speakCry{
  from{
    transform:translateX(-50%) scaleX(1);
    width:56px;
    height:15px;
    border-top-width:3px;
  }
  to{
    transform:translateX(-50%) scaleX(.9) translateY(1px);
    width:49px;
    height:20px;
    border-top-width:2px;
  }
}

@keyframes speakTaunt{
  from{
    transform:translateX(-50%) rotate(-9deg) scaleX(1);
    width:56px;
    height:16px;
  }
  to{
    transform:translateX(-50%) rotate(-11deg) scaleX(.9) translateY(1px);
    width:48px;
    height:22px;
  }
}


/* ---------- HARD TAUNT ---------- */
.dealer.hardtaunt{
  animation:hardTauntBody .34s ease-in-out infinite alternate;
}
.dealer.hardtaunt .torso{
  transform:translateX(-50%) translateY(-2px) scaleX(1.03);
}
.dealer.hardtaunt .head{
  animation:hardTauntHead .34s ease-in-out infinite alternate;
}
.dealer.hardtaunt .armAnchor.left{
  animation:hardTauntLeftArm .34s ease-in-out infinite alternate;
}
.dealer.hardtaunt .armAnchor.right{
  animation:hardTauntRightArm .22s ease-in-out infinite alternate;
}
.dealer.hardtaunt .left .forearm{
  animation:hardTauntLeftForearm .34s ease-in-out infinite alternate;
}
.dealer.hardtaunt .right .forearm{
  animation:hardTauntRightForearm .22s ease-in-out infinite alternate;
}
.dealer.hardtaunt .right .hand{
  animation:hardTauntHand .14s ease-in-out infinite alternate;
}

.dealer.hardtaunt .brow.l{
  transform:translateY(-10px) rotate(-18deg);
}
.dealer.hardtaunt .brow.r{
  transform:translateY(4px) rotate(15deg);
}

.dealer.hardtaunt .eye{
  top:123px;
  height:11px;
}
.dealer.hardtaunt .eye:before{
  top:57%;
}
.dealer.hardtaunt .eye.l{
  transform:scaleY(.92);
}
.dealer.hardtaunt .eye.r{
  transform:scaleY(.78);
}

.dealer.hardtaunt .mouth{
  top:196px;
  width:74px;
  height:30px;
  border:0;
  background:radial-gradient(ellipse at 50% 32%, #ca7883 0 24%, #7b2f39 29% 58%, #271116 63% 100%);
  border-radius:22% 26% 58% 54%;
  transform:translateX(-50%) rotate(-10deg);
  box-shadow:inset 0 -5px rgba(255,183,194,.22);
  animation:hardTauntMouth .18s ease-in-out infinite alternate;
}

.dealer.hardtaunt .cheek{
  background:radial-gradient(circle,rgba(216,110,126,.22),transparent 72%);
  opacity:.92;
}

@keyframes hardTauntBody{
  from{ transform:translateY(-1px); }
  to{ transform:translateY(-6px); }
}
@keyframes hardTauntHead{
  from{ transform:translateX(-50%) translateY(-1px) rotate(-4deg); }
  to{ transform:translateX(-50%) translateY(1px) rotate(-7deg); }
}
@keyframes hardTauntLeftArm{
  from{ transform:rotate(28deg); }
  to{ transform:rotate(22deg); }
}
@keyframes hardTauntRightArm{
  from{ transform:rotate(-135deg); }
  to{ transform:rotate(-146deg); }
}
@keyframes hardTauntLeftForearm{
  from{ transform:rotate(-14deg); }
  to{ transform:rotate(-9deg); }
}
@keyframes hardTauntRightForearm{
  from{ transform:rotate(63deg); }
  to{ transform:rotate(79deg); }
}
@keyframes hardTauntHand{
  from{ transform:rotate(7deg) translateX(0); }
  to{ transform:rotate(-13deg) translateX(-4px); }
}
@keyframes hardTauntMouth{
  from{ transform:translateX(-50%) rotate(-10deg) scaleX(1); }
  to{ transform:translateX(-50%) rotate(-12deg) scaleX(.92) translateY(1px); }
}


/* ---------- PANIC ---------- */
.sweat{
  position:absolute;
  width:13px;
  height:22px;
  border-radius:60% 40% 65% 35%;
  background:linear-gradient(180deg,rgba(220,247,255,.95),rgba(104,191,245,.9));
  box-shadow:0 0 7px rgba(105,188,240,.24);
  opacity:0;
  z-index:9;
}
.sweat.l{left:18px;top:119px;transform:rotate(18deg)}
.sweat.r{right:18px;top:100px;transform:rotate(-18deg)}

.dealer.panic{
  animation:panicBody .16s ease-in-out infinite alternate;
}
.dealer.panic .torso{
  transform:translateX(-50%) translateY(-3px) scaleX(.99);
}
.dealer.panic .head{
  animation:panicHead .13s ease-in-out infinite alternate;
}
.dealer.panic .armAnchor.left{
  animation:panicLeftArm .22s ease-in-out infinite alternate;
}
.dealer.panic .armAnchor.right{
  animation:panicRightArm .19s ease-in-out infinite alternate;
}
.dealer.panic .left .forearm{
  animation:panicLeftForearm .18s ease-in-out infinite alternate;
}
.dealer.panic .right .forearm{
  animation:panicRightForearm .16s ease-in-out infinite alternate;
}

.dealer.panic .brow.l{
  transform:translateY(-12px) rotate(11deg);
}
.dealer.panic .brow.r{
  transform:translateY(-12px) rotate(-11deg);
}

.dealer.panic .eye{
  top:118px;
  width:40px;
  height:24px;
  animation:none;
}
.dealer.panic .eye:before{
  width:13px;
  height:13px;
  top:53%;
}

.dealer.panic .mouth{
  top:202px;
  width:38px;
  height:32px;
  border:0;
  background:radial-gradient(ellipse at 50% 36%,#8e4650 0 28%,#57252d 32% 59%,#261216 64%);
  border-radius:48%;
  box-shadow:inset 0 -4px rgba(255,186,194,.18);
  animation:panicMouth .2s ease-in-out infinite alternate;
}

.dealer.panic .sweat{
  opacity:1;
}
.dealer.panic .sweat.l{
  animation:panicSweatLeft .72s ease-in infinite;
}
.dealer.panic .sweat.r{
  animation:panicSweatRight .88s ease-in infinite .12s;
}

@keyframes panicBody{
  from{transform:translate(-2px,0)}
  to{transform:translate(2px,-2px)}
}
@keyframes panicHead{
  from{transform:translateX(-50%) translate(-2px,-1px) rotate(-1deg)}
  to{transform:translateX(-50%) translate(2px,1px) rotate(1deg)}
}
@keyframes panicLeftArm{
  from{transform:rotate(36deg) translateY(-2px)}
  to{transform:rotate(48deg) translateY(-7px)}
}
@keyframes panicRightArm{
  from{transform:rotate(-36deg) translateY(-2px)}
  to{transform:rotate(-50deg) translateY(-7px)}
}
@keyframes panicLeftForearm{
  from{transform:rotate(-54deg)}
  to{transform:rotate(-70deg)}
}
@keyframes panicRightForearm{
  from{transform:rotate(54deg)}
  to{transform:rotate(72deg)}
}
@keyframes panicMouth{
  from{transform:translateX(-50%) scale(.88,1)}
  to{transform:translateX(-50%) scale(1.04,.86)}
}
@keyframes panicSweatLeft{
  0%{transform:translateY(-3px) rotate(18deg) scale(.7);opacity:0}
  20%{opacity:1}
  100%{transform:translateY(23px) rotate(18deg) scale(1);opacity:0}
}
@keyframes panicSweatRight{
  0%{transform:translateY(-3px) rotate(-18deg) scale(.7);opacity:0}
  20%{opacity:1}
  100%{transform:translateY(25px) rotate(-18deg) scale(1);opacity:0}
}


/* ---------- LIGHT PANIC ---------- */
.dealer.lightpanic{
  animation:lightPanicBody .7s ease-in-out infinite alternate;
}
.dealer.lightpanic .torso{
  transform:translateX(-50%) translateY(-1px) scaleX(.995);
}
.dealer.lightpanic .head{
  animation:lightPanicHead .65s ease-in-out infinite alternate;
}
.dealer.lightpanic .armAnchor.left{
  animation:lightPanicLeftArm .8s ease-in-out infinite alternate;
}
.dealer.lightpanic .armAnchor.right{
  animation:lightPanicRightArm .75s ease-in-out infinite alternate;
}
.dealer.lightpanic .left .forearm{
  animation:lightPanicLeftForearm .8s ease-in-out infinite alternate;
}
.dealer.lightpanic .right .forearm{
  animation:lightPanicRightForearm .75s ease-in-out infinite alternate;
}

.dealer.lightpanic .brow.l{
  transform:translateY(-5px) rotate(6deg);
}
.dealer.lightpanic .brow.r{
  transform:translateY(-5px) rotate(-6deg);
}

.dealer.lightpanic .eye{
  top:120px;
  width:38px;
  height:20px;
}
.dealer.lightpanic .eye:before{
  top:54%;
}

.dealer.lightpanic .mouth{
  top:203px;
  width:46px;
  height:21px;
  border:0;
  background:radial-gradient(ellipse at 50% 34%,#9d5861 0 30%,#612b32 35% 60%,#281318 65%);
  border-radius:42%;
  box-shadow:inset 0 -3px rgba(255,185,195,.15);
  animation:lightPanicMouth .7s ease-in-out infinite alternate;
}

.dealer.lightpanic .sweat{
  opacity:0;
}
.dealer.lightpanic .sweat.r{
  opacity:1;
  animation:lightPanicSweat 1.8s ease-in infinite;
}
.dealer.lightpanic .sweat.l{
  display:none;
}

@keyframes lightPanicBody{
  from{transform:translateY(0)}
  to{transform:translateY(-1px)}
}
@keyframes lightPanicHead{
  from{transform:translateX(-50%) translateX(-1px) rotate(-.4deg)}
  to{transform:translateX(-50%) translateX(1px) rotate(.4deg)}
}
@keyframes lightPanicLeftArm{
  from{transform:rotate(20deg)}
  to{transform:rotate(24deg)}
}
@keyframes lightPanicRightArm{
  from{transform:rotate(-20deg)}
  to{transform:rotate(-25deg)}
}
@keyframes lightPanicLeftForearm{
  from{transform:rotate(-26deg)}
  to{transform:rotate(-31deg)}
}
@keyframes lightPanicRightForearm{
  from{transform:rotate(26deg)}
  to{transform:rotate(32deg)}
}
@keyframes lightPanicMouth{
  from{transform:translateX(-50%) scale(.95,1)}
  to{transform:translateX(-50%) scale(1,.92)}
}
@keyframes lightPanicSweat{
  0%{transform:translateY(-2px) rotate(-18deg) scale(.75);opacity:0}
  18%{opacity:.9}
  65%{opacity:.8}
  100%{transform:translateY(16px) rotate(-18deg) scale(.9);opacity:0}
}


.dealer{width:470px;height:590px}