/* =========================================================================
   emotes.css — the reaction rig
   =========================================================================

   Twelve regulars, six reactions, ONE rig. Straight out of
   `Tarneeb Emotes Cartoon.dc.html`; the 69 @keyframes below are copied
   VERBATIM from the prototype and must not be hand-tuned. If a motion looks
   wrong, the binding is wrong, not the keyframe.

   The prototype states the architecture outright:

     "Body, arms and timing are shared. A character is only its crown, hair,
      moustache width, skin and garment — so a new region is a handful of
      values, not a new animation set."

   So: the rig is one markup tree with one set of classes, every character is a
   block of custom properties, and every reaction is a `data-react` value that
   binds the shared parts to that reaction's keyframes. Adding a thirteenth
   regular is a dozen colours. Adding a seventh reaction is a keyframe set and
   one binding block — no per-character work either way.

   Geometry is 1:1 with the prototype's tiles (a 116x150 stage). In game the
   whole thing is scaled by --ct-scale rather than re-specified, because the
   handoff asks for "roughly half this size" at the seat and identical
   proportions are the point.
   ========================================================================= */

/* ---- the shared rig ---------------------------------------------------- */

.ct {
  /* character variables — every one of these is overridden per character */
  --ct-skin:       #e0a877;
  --ct-ink:        #3a2a1c;
  --ct-garment:    #f2ead8;
  --ct-accent:     #c9a24a;
  --ct-crown:      #f2ead8;
  --ct-crown-ink:  #241812;
  --ct-cord:       #241c12;
  --ct-hair:       #241812;
  --ct-mouth:      #7c2b1c;
  --ct-moustache:  38px;
  --ct-scale:      1;

  position: relative;
  width: 116px;
  height: 150px;
  transform: scale(var(--ct-scale));
  transform-origin: 50% 100%;
  pointer-events: none;
}

.ct-body { position: absolute; inset: 0; transform-origin: 50% 100%; }

.ct-torso {
  position: absolute; left: 14px; top: 76px; width: 88px; height: 74px;
  background: var(--ct-garment); border: 3px solid var(--ct-ink);
  border-radius: 30px 30px 10px 10px;
}
.ct-collar {
  position: absolute; left: 44px; top: 76px; width: 28px; height: 26px;
  background: var(--ct-accent); border: 3px solid var(--ct-ink);
  border-radius: 0 0 13px 13px;
}

.ct-arm { position: absolute; top: 72px; width: 16px; height: 52px; transform-origin: 50% 6px; }
.ct-arm-l { left: 18px; }
.ct-arm-r { right: 18px; }
.ct-sleeve {
  position: absolute; left: 1px; top: 0; width: 14px; height: 40px;
  background: var(--ct-garment); border: 3px solid var(--ct-ink); border-radius: 7px;
}
.ct-hand {
  position: absolute; left: -7px; top: 30px; width: 30px; height: 26px;
  background: var(--ct-skin); border: 3px solid var(--ct-ink); border-radius: 13px;
}

.ct-head { position: absolute; left: 18px; top: 0; width: 80px; height: 80px; transform-origin: 50% 100%; }

/* Crown-back sits BEHIND the face and is what reads as the silhouette from
   across the table — the headwear, not the head. */
.ct-crown-back {
  position: absolute; left: -9px; top: -7px; width: 98px; height: 94px;
  background: var(--ct-crown); border: 3px solid var(--ct-crown-ink);
  border-radius: 49px 49px 26px 26px;
}
.ct-face {
  position: absolute; inset: 0;
  background: var(--ct-skin); border: 3px solid var(--ct-ink); border-radius: 50%;
}
.ct-crown-front {
  position: absolute; left: -4px; top: -6px; width: 88px; height: 30px;
  background: var(--ct-crown); border: 3px solid var(--ct-crown-ink);
  border-radius: 44px 44px 10px 10px;
}
/* The agal. Gulf only — hidden for every other crown type. */
.ct-cord {
  position: absolute; left: -7px; width: 94px; height: 7px;
  background: var(--ct-cord); border-radius: 4px;
}
.ct-cord-1 { top: 0; }
.ct-cord-2 { top: 10px; }

.ct-brow { position: absolute; top: 26px; width: 18px; height: 5px; background: var(--ct-ink); border-radius: 3px; }
.ct-brow-l { left: 15px; }
.ct-brow-r { right: 15px; }

.ct-eye {
  position: absolute; top: 35px; width: 15px; height: 16px;
  background: #fff; border: 2px solid var(--ct-ink); border-radius: 50%;
}
.ct-eye-l { left: 17px; }
.ct-eye-r { right: 17px; }
.ct-pupil { position: absolute; left: 4px; top: 5px; width: 6px; height: 6px; background: var(--ct-ink); border-radius: 50%; }

/* Width is the character variable. The prototype is explicit that the
   moustache does NOT move -- "The moustache stays put, so every brow move
   reads against it" -- so it carries no animation on any reaction. */
.ct-moustache {
  position: absolute; left: 50%; top: 51px; height: 11px;
  width: var(--ct-moustache); margin-left: calc(var(--ct-moustache) / -2);
  background: var(--ct-ink); border-radius: 19px 19px 5px 5px;
}
.ct[data-moustache="none"] .ct-moustache { display: none; }

.ct-mouth {
  position: absolute; left: 50%; top: 62px; width: 23px; height: 14px; margin-left: -11.5px;
  background: var(--ct-mouth); border: 3px solid var(--ct-ink);
  border-radius: 6px 6px 12px 12px; transform-origin: 50% 12%;
}

/* Parts that only some reactions use. Hidden by default and switched on by the
   binding block, so the same markup serves all six. */
.ct-tongue, .ct-finger, .ct-flush, .ct-steam { display: none; }

.ct-tongue {
  position: absolute; left: 50%; top: 70px; width: 16px; height: 12px; margin-left: -8px;
  background: #d4586a; border: 3px solid var(--ct-ink); border-radius: 0 0 9px 9px;
}
.ct-finger {
  position: absolute; left: -2px; top: 26px; width: 10px; height: 26px;
  background: var(--ct-skin); border: 3px solid var(--ct-ink); border-radius: 5px;
  transform-origin: 50% 100%;
}
/* Anger reads as comedy, never as menace — a flush under the skin, not a colour
   change of it. */
.ct-flush {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(60% 50% at 50% 62%, rgba(200,42,28,.62) 0%, rgba(200,42,28,0) 100%);
}
.ct-steam {
  position: absolute; top: -14px; width: 9px; height: 9px;
  background: rgba(226, 218, 200, .78); border-radius: 50%;
}
.ct-steam-l { left: 4px; }
.ct-steam-r { right: 4px; }

/* ---- crown types ------------------------------------------------------- */
/* Four silhouettes carry the whole roster. Everything else is colour. */

/* Gulf: ghutra + agal. The default shape above already is the ghutra. */
.ct[data-crown="ghutra"] .ct-cord { display: block; }

/* Lebanese and the younger ones: no headwear, hair only. The crown pieces
   become the hairline, which is why they are recoloured rather than removed —
   a removed crown-back leaves the head with no silhouette at all. */
.ct[data-crown="hair"] .ct-cord { display: none; }
.ct[data-crown="hair"] .ct-crown-back {
  background: var(--ct-hair); border-color: var(--ct-hair);
  border-radius: 49px 49px 40px 40px; top: -9px; height: 84px;
}
.ct[data-crown="hair"] .ct-crown-front {
  background: var(--ct-hair); border-color: var(--ct-hair);
  border-radius: 44px 44px 22px 22px; height: 26px;
}

/* Egyptian: tarboosh — a straight-sided cylinder, no drape. */
.ct[data-crown="tarboosh"] .ct-cord { display: none; }
.ct[data-crown="tarboosh"] .ct-crown-back {
  background: var(--ct-hair); border-color: var(--ct-hair);
  border-radius: 49px 49px 40px 40px; top: -6px; height: 82px;
}
.ct[data-crown="tarboosh"] .ct-crown-front {
  left: 6px; top: -26px; width: 68px; height: 34px;
  border-radius: 6px 6px 2px 2px;
}

/* Palestinian: keffiyeh — squarer fall, worn lower at the shoulders. */
.ct[data-crown="keffiyeh"] .ct-cord { display: block; }
.ct[data-crown="keffiyeh"] .ct-crown-back {
  border-radius: 46px 46px 14px 14px; height: 100px;
}
.ct[data-crown="keffiyeh"] .ct-crown-front { border-radius: 42px 42px 6px 6px; }

/* The women: shayla. Frames the face rather than capping it, and the earring
   is the tell at seat size. */
.ct[data-crown="shayla"] .ct-cord { display: none; }
.ct[data-crown="shayla"] .ct-crown-back {
  border-radius: 49px 49px 30px 30px; top: -8px; height: 104px;
}
.ct[data-crown="shayla"] .ct-crown-front { border-radius: 44px 44px 16px 16px; height: 26px; }
.ct[data-crown="shayla"] .ct-face { clip-path: ellipse(46% 50% at 50% 52%); }
.ct[data-crown="shayla"] .ct-earring {
  position: absolute; right: -2px; top: 46px; width: 7px; height: 7px;
  background: var(--ct-accent); border: 2px solid var(--ct-ink); border-radius: 50%;
}
.ct-earring { display: none; }
.ct[data-crown="shayla"] .ct-earring { display: block; }

/* ---- reaction bindings -------------------------------------------------- */
/* Every reaction is 3600ms and loops. The four laugh voices are the exception:
   their durations are cut to the recording they were keyed against, so voice
   and mouth stay in step. */


/* clap */
.ct[data-react="clap"] .ct-body { animation: ctClapBody 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="clap"] .ct-arm-l { animation: ctClapArmL 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="clap"] .ct-arm-r { animation: ctClapArmR 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="clap"] .ct-head { animation: ctClapHead 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="clap"] .ct-eye { animation: ctClapEye 3600ms ease-in-out infinite; }
.ct[data-react="clap"] .ct-mouth { animation: ctClapMouth 3600ms cubic-bezier(.3,1.45,.5,1) infinite; }
.ct[data-react="clap"] .ct-brow { animation: ctClapBrow 3600ms ease-in-out infinite; }

/* laugh */
.ct[data-react="laugh"] .ct-body { animation: ctLaughBody 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"] .ct-arm-l { animation: ctLaughArmL 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"] .ct-arm-r { animation: ctLaughArmR 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"] .ct-head { animation: ctLaughHead 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"] .ct-eye { animation: ctLaughEye 3600ms ease-in-out infinite; }
.ct[data-react="laugh"] .ct-mouth { animation: ctLaughMouth 3600ms cubic-bezier(.3,1.45,.5,1) infinite; }

/* celebrate */
.ct[data-react="celebrate"] .ct-body { animation: ctCelebBody 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="celebrate"] .ct-arm-l { animation: ctCelebArmL 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="celebrate"] .ct-arm-r { animation: ctCelebArmR 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="celebrate"] .ct-head { animation: ctCelebHead 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="celebrate"] .ct-eye { animation: ctCelebEye 3600ms ease-in-out infinite; }
.ct[data-react="celebrate"] .ct-mouth { animation: ctCelebMouth 3600ms cubic-bezier(.3,1.45,.5,1) infinite; }
.ct[data-react="celebrate"] .ct-conf { display: block; animation: ctConf 3600ms ease-out infinite; }

/* tease */
.ct[data-react="tease"] .ct-body { animation: ctTeaseBody 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="tease"] .ct-arm-r { animation: ctTeaseArmR 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="tease"] .ct-head { animation: ctTeaseHead 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="tease"] .ct-brow { animation: ctTeaseBrow 3600ms ease-in-out infinite; }
.ct[data-react="tease"] .ct-finger { display: block; }
.ct[data-react="tease"] .ct-finger { animation: ctTeaseFinger 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="tease"] .ct-mouth { animation: ctTeaseMouth 3600ms cubic-bezier(.3,1.45,.5,1) infinite; }
.ct[data-react="tease"] .ct-eye-r { animation: ctTeaseWink 3600ms ease-in-out infinite; }

/* funny */
.ct[data-react="funny"] .ct-body { animation: ctFunBody 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="funny"] .ct-arm-l { animation: ctFunArmL 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="funny"] .ct-arm-r { animation: ctFunArmR 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="funny"] .ct-head { animation: ctFunHead 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="funny"] .ct-eye-l .ct-pupil { animation: ctFunPupilL 3600ms ease-in-out infinite; }
.ct[data-react="funny"] .ct-eye-r .ct-pupil { animation: ctFunPupilR 3600ms ease-in-out infinite; }
.ct[data-react="funny"] .ct-tongue { display: block; }
.ct[data-react="funny"] .ct-tongue { animation: ctFunTongue 3600ms cubic-bezier(.3,1.45,.5,1) infinite; }

/* angry */
.ct[data-react="angry"] .ct-body { animation: ctAngBody 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="angry"] .ct-arm-l { animation: ctAngArmL 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="angry"] .ct-arm-r { animation: ctAngArmR 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="angry"] .ct-head { animation: ctAngHead 3600ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="angry"] .ct-brow-l { animation: ctAngBrowL 3600ms ease-in-out infinite; }
.ct[data-react="angry"] .ct-brow-r { animation: ctAngBrowR 3600ms ease-in-out infinite; }
.ct[data-react="angry"] .ct-eye { animation: ctAngEye 3600ms ease-in-out infinite; }
.ct[data-react="angry"] .ct-flush { display: block; }
.ct[data-react="angry"] .ct-flush { animation: ctAngFlush 3600ms ease-in-out infinite; }
.ct[data-react="angry"] .ct-mouth { animation: ctAngMouth 3600ms cubic-bezier(.3,1.45,.5,1) infinite; }
.ct[data-react="angry"] .ct-steam { display: block; animation: ctSteam 3600ms ease-out infinite; }
.ct[data-react="angry"] .ct-steam-r { animation-delay: 420ms; }

/* The four laugh voices. Duration is NOT a style choice — each was keyed
   against its recording's syllable peaks (7 pulses, 8, 4 and 9), so changing
   these desynchronises the jaw from the voice. */
.ct[data-react="laugh"][data-voice="0"] .ct-body { animation: ctLg0Body 2900ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="0"] .ct-arm-l { animation: ctLg0ArmL 2900ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="0"] .ct-arm-r { animation: ctLg0ArmR 2900ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="0"] .ct-head { animation: ctLg0Head 2900ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="0"] .ct-eye { animation: ctLg0Eye 2900ms ease-in-out infinite; }
.ct[data-react="laugh"][data-voice="0"] .ct-mouth { animation: ctLg0Mouth 2900ms cubic-bezier(.3,1.45,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="1"] .ct-body { animation: ctLg1Body 3700ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="1"] .ct-arm-l { animation: ctLg1ArmL 3700ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="1"] .ct-arm-r { animation: ctLg1ArmR 3700ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="1"] .ct-head { animation: ctLg1Head 3700ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="1"] .ct-eye { animation: ctLg1Eye 3700ms ease-in-out infinite; }
.ct[data-react="laugh"][data-voice="1"] .ct-mouth { animation: ctLg1Mouth 3700ms cubic-bezier(.3,1.45,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="2"] .ct-body { animation: ctLg2Body 1800ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="2"] .ct-arm-l { animation: ctLg2ArmL 1800ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="2"] .ct-arm-r { animation: ctLg2ArmR 1800ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="2"] .ct-head { animation: ctLg2Head 1800ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="2"] .ct-eye { animation: ctLg2Eye 1800ms ease-in-out infinite; }
.ct[data-react="laugh"][data-voice="2"] .ct-mouth { animation: ctLg2Mouth 1800ms cubic-bezier(.3,1.45,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="3"] .ct-body { animation: ctLg3Body 3400ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="3"] .ct-arm-l { animation: ctLg3ArmL 3400ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="3"] .ct-arm-r { animation: ctLg3ArmR 3400ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="3"] .ct-head { animation: ctLg3Head 3400ms cubic-bezier(.35,1.25,.5,1) infinite; }
.ct[data-react="laugh"][data-voice="3"] .ct-eye { animation: ctLg3Eye 3400ms ease-in-out infinite; }
.ct[data-react="laugh"][data-voice="3"] .ct-mouth { animation: ctLg3Mouth 3400ms cubic-bezier(.3,1.45,.5,1) infinite; }

/* ---- the roster --------------------------------------------------------- */
/* A character is only these values. Nothing here touches motion. */
.ct[data-char="abu-khalid"] {
  --ct-garment: #f2ead8; --ct-accent: #c9a24a; --ct-skin: #e0a877;
  --ct-hair: #241812; --ct-crown: #f2ead8; --ct-moustache: 38px;
}
.ct[data-char="ziad"] {
  --ct-garment: #2f5d43; --ct-accent: #f2ead8; --ct-skin: #dba36f;
  --ct-hair: #16191c; --ct-crown: #16191c; --ct-moustache: 34px;
}
.ct[data-char="nasser"] {
  --ct-garment: #4a5a3a; --ct-accent: #ece2cc; --ct-skin: #d99f6c;
  --ct-hair: #1c1c1c; --ct-crown: #4a5a3a; --ct-moustache: 38px;
}
.ct[data-char="am-fathi"] {
  --ct-garment: #ece2cc; --ct-accent: #b8873a; --ct-skin: #c98a56;
  --ct-hair: #3a1710; --ct-crown: #b8873a; --ct-moustache: 48px;
}
.ct[data-char="latifa"] {
  --ct-garment: #14120f; --ct-accent: #c9a24a; --ct-skin: #e3ad7f;
  --ct-hair: #2a2622; --ct-crown: #14120f;
}
.ct[data-char="rima"] {
  --ct-garment: #8c2f3a; --ct-accent: #f2ead8; --ct-skin: #e0aa79;
  --ct-hair: #3a2415; --ct-crown: #8c2f3a;
}
.ct[data-char="dalal"] {
  --ct-garment: #2f3d33; --ct-accent: #a4232a; --ct-skin: #daa270;
  --ct-hair: #241812; --ct-crown: #2f3d33;
}
.ct[data-char="soad"] {
  --ct-garment: #2f5d6b; --ct-accent: #e8c874; --ct-skin: #cf9560;
  --ct-hair: #c2622f; --ct-crown: #2f5d6b;
}
.ct[data-char="saif"] {
  --ct-garment: #f7f1e4; --ct-accent: #dcd2bb; --ct-skin: #e5b184;
  --ct-hair: #241812; --ct-crown: #f7f1e4;
}
.ct[data-char="marwan"] {
  --ct-garment: #1f2933; --ct-accent: #3d4b57; --ct-skin: #dea87a;
  --ct-hair: #1c1410; --ct-crown: #1c1410;
}
.ct[data-char="bassel"] {
  --ct-garment: #3f4a52; --ct-accent: #5b6771; --ct-skin: #d9a06d;
  --ct-hair: #1c1c1c; --ct-crown: #1c1c1c;
}
.ct[data-char="hany"] {
  --ct-garment: #b8412c; --ct-accent: #f2ead8; --ct-skin: #cd9159;
  --ct-hair: #241a12; --ct-crown: #f2ead8;
}

/* ---- the 69 keyframes, verbatim from the prototype ---------------------- */

@keyframes ctClapBody{0%{transform:translateY(0) scale(1,1)}5%{transform:translateY(2px) scale(1.03,.97)}11%{transform:translateY(-2px) scale(.98,1.02)}14%{transform:translateY(1px) scale(1.05,.95)}18%{transform:translateY(0) scale(1,1)}22%{transform:translateY(1px) scale(1.04,.96)}26%{transform:translateY(0) scale(1,1)}31%{transform:translateY(1px) scale(1.03,.97)}35%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes ctClapArmL{0%{transform:rotate(10deg)}6%{transform:rotate(-18deg)}11%{transform:rotate(52deg)}13%{transform:rotate(46deg)}17%{transform:rotate(-12deg)}21%{transform:rotate(50deg)}23%{transform:rotate(45deg)}27%{transform:rotate(-8deg)}31%{transform:rotate(49deg)}33%{transform:rotate(44deg)}38%{transform:rotate(-4deg)}42%{transform:rotate(47deg)}48%{transform:rotate(10deg)}100%{transform:rotate(10deg)}}
@keyframes ctClapArmR{0%{transform:rotate(-10deg)}6%{transform:rotate(18deg)}11%{transform:rotate(-52deg)}13%{transform:rotate(-46deg)}17%{transform:rotate(12deg)}21%{transform:rotate(-50deg)}23%{transform:rotate(-45deg)}27%{transform:rotate(8deg)}31%{transform:rotate(-49deg)}33%{transform:rotate(-44deg)}38%{transform:rotate(4deg)}42%{transform:rotate(-47deg)}48%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctClapHead{0%{transform:rotate(0deg) translateY(0)}6%{transform:rotate(-3deg) translateY(-3px)}12%{transform:rotate(2deg) translateY(2px)}18%{transform:rotate(-1deg) translateY(-1px)}22%{transform:rotate(2deg) translateY(2px)}28%{transform:rotate(-1deg) translateY(-1px)}32%{transform:rotate(1deg) translateY(1px)}48%{transform:rotate(0deg) translateY(0)}100%{transform:rotate(0deg) translateY(0)}}
@keyframes ctClapMouth{0%{transform:scale(.55,.4)}10%{transform:scale(1.05,1)}20%{transform:scale(.95,.85)}30%{transform:scale(1,.95)}46%{transform:scale(.55,.4)}100%{transform:scale(.55,.4)}}
@keyframes ctClapEye{0%{transform:scaleY(1)}10%{transform:scaleY(.5)}40%{transform:scaleY(.55)}50%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes ctClapBrow{0%{transform:translateY(0)}8%{transform:translateY(-4px)}42%{transform:translateY(-3px)}50%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes ctLaughBody{0%{transform:translateY(0) scale(1,1)}5%{transform:translateY(-3px) scale(.94,1.07)}9%{transform:translateY(2px) scale(1.07,.93)}14%{transform:translateY(0) scale(1,1)}18%{transform:translateY(-2px) scale(.96,1.05)}22%{transform:translateY(2px) scale(1.06,.94)}27%{transform:translateY(0) scale(1,1)}31%{transform:translateY(-2px) scale(.97,1.04)}35%{transform:translateY(1px) scale(1.05,.95)}40%{transform:translateY(0) scale(1,1)}44%{transform:translateY(-1px) scale(.99,1.02)}48%{transform:translateY(1px) scale(1.02,.98)}56%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes ctLaughHead{0%{transform:rotate(0deg) translateY(0)}8%{transform:rotate(-14deg) translateY(-4px)}16%{transform:rotate(-6deg) translateY(-1px)}24%{transform:rotate(-13deg) translateY(-3px)}32%{transform:rotate(-5deg) translateY(-1px)}40%{transform:rotate(-10deg) translateY(-2px)}52%{transform:rotate(0deg) translateY(0)}100%{transform:rotate(0deg) translateY(0)}}
@keyframes ctLaughMouth{0%{transform:scale(.5,.4)}6%{transform:scale(1.2,1.35)}12%{transform:scale(.92,.85)}18%{transform:scale(1.15,1.25)}24%{transform:scale(.92,.82)}30%{transform:scale(1.1,1.12)}36%{transform:scale(.92,.82)}42%{transform:scale(1.02,1)}54%{transform:scale(.5,.4)}100%{transform:scale(.5,.4)}}
@keyframes ctLaughEye{0%{transform:scaleY(1)}6%{transform:scaleY(.12)}46%{transform:scaleY(.14)}56%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes ctLaughArmL{0%{transform:rotate(10deg)}8%{transform:rotate(40deg)}14%{transform:rotate(28deg)}22%{transform:rotate(39deg)}30%{transform:rotate(27deg)}40%{transform:rotate(35deg)}54%{transform:rotate(10deg)}100%{transform:rotate(10deg)}}
@keyframes ctLaughArmR{0%{transform:rotate(-10deg)}8%{transform:rotate(-32deg)}16%{transform:rotate(-22deg)}26%{transform:rotate(-31deg)}36%{transform:rotate(-23deg)}54%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctCelebBody{0%{transform:translateY(0) scale(1,1)}6%{transform:translateY(8px) scale(1.1,.88)}12%{transform:translateY(-26px) scale(.9,1.14)}20%{transform:translateY(-32px) scale(1,1)}28%{transform:translateY(6px) scale(1.12,.86)}34%{transform:translateY(-7px) scale(.97,1.05)}40%{transform:translateY(1px) scale(1.03,.97)}46%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes ctCelebArmL{0%{transform:rotate(10deg)}6%{transform:rotate(36deg)}13%{transform:rotate(-54deg)}20%{transform:rotate(-44deg)}28%{transform:rotate(-58deg)}36%{transform:rotate(-42deg)}46%{transform:rotate(10deg)}100%{transform:rotate(10deg)}}
@keyframes ctCelebArmR{0%{transform:rotate(-10deg)}6%{transform:rotate(-36deg)}13%{transform:rotate(54deg)}20%{transform:rotate(44deg)}28%{transform:rotate(58deg)}36%{transform:rotate(42deg)}46%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctCelebHead{0%{transform:rotate(0deg) translateY(0)}6%{transform:rotate(0deg) translateY(3px)}13%{transform:rotate(-6deg) translateY(-4px)}22%{transform:rotate(-4deg) translateY(-2px)}30%{transform:rotate(3deg) translateY(3px)}38%{transform:rotate(-1deg) translateY(0)}46%{transform:rotate(0deg) translateY(0)}100%{transform:rotate(0deg) translateY(0)}}
@keyframes ctCelebMouth{0%{transform:scale(.5,.4)}7%{transform:scale(.75,.6)}14%{transform:scale(1.3,1.4)}30%{transform:scale(1.12,1.18)}44%{transform:scale(.5,.4)}100%{transform:scale(.5,.4)}}
@keyframes ctCelebEye{0%{transform:scaleY(1)}13%{transform:scaleY(.28)}36%{transform:scaleY(.32)}46%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes ctTeaseBody{0%{transform:rotate(0deg) translateX(0)}10%{transform:rotate(5deg) translateX(6px)}20%{transform:rotate(4deg) translateX(5px)}56%{transform:rotate(5deg) translateX(6px)}70%{transform:rotate(0deg) translateX(0)}100%{transform:rotate(0deg) translateX(0)}}
@keyframes ctTeaseHead{0%{transform:rotate(0deg)}10%{transform:rotate(-8deg)}22%{transform:rotate(-5deg)}56%{transform:rotate(-7deg)}70%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes ctTeaseArmR{0%{transform:rotate(-10deg)}7%{transform:rotate(-44deg)}12%{transform:rotate(-72deg)}20%{transform:rotate(-66deg)}56%{transform:rotate(-68deg)}70%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctTeaseFinger{0%{transform:rotate(0deg)}12%{transform:rotate(-28deg)}19%{transform:rotate(24deg)}26%{transform:rotate(-21deg)}33%{transform:rotate(18deg)}40%{transform:rotate(-15deg)}47%{transform:rotate(11deg)}54%{transform:rotate(-7deg)}62%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes ctTeaseBrow{0%{transform:translateY(0) rotate(0deg)}12%{transform:translateY(-7px) rotate(-14deg)}58%{transform:translateY(-6px) rotate(-12deg)}70%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(0) rotate(0deg)}}
@keyframes ctTeaseWink{0%{transform:scaleY(1)}14%{transform:scaleY(.1)}30%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes ctTeaseMouth{0%{transform:translateX(0) rotate(0deg) scale(1,1)}12%{transform:translateX(5px) rotate(-10deg) scale(1.06,.8)}58%{transform:translateX(5px) rotate(-9deg) scale(1.04,.8)}70%{transform:translateX(0) rotate(0deg) scale(1,1)}100%{transform:translateX(0) rotate(0deg) scale(1,1)}}
@keyframes ctFunBody{0%{transform:rotate(0deg) scale(1,1)}8%{transform:rotate(-5deg) scale(1.02,.98)}20%{transform:rotate(5deg) scale(.99,1.01)}32%{transform:rotate(-4deg)}44%{transform:rotate(4deg)}56%{transform:rotate(-2deg)}68%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes ctFunHead{0%{transform:rotate(0deg) translateY(0)}8%{transform:rotate(11deg) translateY(-3px)}20%{transform:rotate(-11deg) translateY(-3px)}32%{transform:rotate(8deg) translateY(-2px)}44%{transform:rotate(-8deg) translateY(-2px)}56%{transform:rotate(4deg)}68%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes ctFunTongue{0%{transform:scaleY(0) rotate(0deg)}8%{transform:scaleY(1.3) rotate(-6deg)}14%{transform:scaleY(1) rotate(4deg)}26%{transform:scaleY(1.05) rotate(-5deg)}40%{transform:scaleY(1) rotate(4deg)}54%{transform:scaleY(1.02) rotate(-3deg)}64%{transform:scaleY(1) rotate(0deg)}72%{transform:scaleY(0) rotate(0deg)}100%{transform:scaleY(0) rotate(0deg)}}
@keyframes ctFunPupilL{0%{transform:translate(0,0)}10%{transform:translate(5px,-2px)}62%{transform:translate(5px,-2px)}72%{transform:translate(0,0)}100%{transform:translate(0,0)}}
@keyframes ctFunPupilR{0%{transform:translate(0,0)}10%{transform:translate(-5px,-2px)}62%{transform:translate(-5px,-2px)}72%{transform:translate(0,0)}100%{transform:translate(0,0)}}
@keyframes ctFunArmL{0%{transform:rotate(10deg)}10%{transform:rotate(28deg)}22%{transform:rotate(14deg)}34%{transform:rotate(26deg)}46%{transform:rotate(15deg)}68%{transform:rotate(10deg)}100%{transform:rotate(10deg)}}
@keyframes ctFunArmR{0%{transform:rotate(-10deg)}10%{transform:rotate(-28deg)}22%{transform:rotate(-14deg)}34%{transform:rotate(-26deg)}46%{transform:rotate(-15deg)}68%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctAngBody{0%{transform:translate(0,0) scale(1,1)}5%{transform:translate(0,4px) scale(1.06,.94)}9%{transform:translate(-2px,0) scale(1,1)}11%{transform:translate(2px,0)}13%{transform:translate(-2px,0)}15%{transform:translate(2px,0)}17%{transform:translate(-2px,0)}19%{transform:translate(2px,0)}21%{transform:translate(-2px,0)}23%{transform:translate(2px,0)}25%{transform:translate(-1px,0)}27%{transform:translate(1px,0)}30%{transform:translate(0,0)}100%{transform:translate(0,0)}}
@keyframes ctAngHead{0%{transform:rotate(0deg) translateY(0)}6%{transform:rotate(0deg) translateY(-4px)}10%{transform:rotate(-3deg)}14%{transform:rotate(3deg)}18%{transform:rotate(-3deg)}22%{transform:rotate(3deg)}26%{transform:rotate(-2deg)}34%{transform:rotate(0deg) translateY(0)}100%{transform:rotate(0deg) translateY(0)}}
@keyframes ctAngBrowL{0%{transform:translateY(0) rotate(0deg)}8%{transform:translateY(7px) rotate(26deg)}56%{transform:translateY(7px) rotate(24deg)}66%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(0) rotate(0deg)}}
@keyframes ctAngBrowR{0%{transform:translateY(0) rotate(0deg)}8%{transform:translateY(7px) rotate(-26deg)}56%{transform:translateY(7px) rotate(-24deg)}66%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(0) rotate(0deg)}}
@keyframes ctAngFlush{0%{opacity:0}10%{opacity:.6}56%{opacity:.55}68%{opacity:0}100%{opacity:0}}
@keyframes ctAngMouth{0%{transform:scale(1,1)}8%{transform:scale(1.3,1.35)}56%{transform:scale(1.24,1.28)}68%{transform:scale(1,1)}100%{transform:scale(1,1)}}
@keyframes ctAngEye{0%{transform:scaleY(1)}9%{transform:scaleY(.62)}58%{transform:scaleY(.66)}68%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes ctAngArmL{0%{transform:rotate(10deg)}8%{transform:rotate(32deg)}12%{transform:rotate(25deg)}16%{transform:rotate(33deg)}20%{transform:rotate(26deg)}24%{transform:rotate(32deg)}28%{transform:rotate(27deg)}42%{transform:rotate(30deg)}66%{transform:rotate(10deg)}100%{transform:rotate(10deg)}}
@keyframes ctAngArmR{0%{transform:rotate(-10deg)}8%{transform:rotate(-32deg)}12%{transform:rotate(-25deg)}16%{transform:rotate(-33deg)}20%{transform:rotate(-26deg)}24%{transform:rotate(-32deg)}28%{transform:rotate(-27deg)}42%{transform:rotate(-30deg)}66%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctSteam{0%{transform:translate(0,0) scale(.35);opacity:0}8%{opacity:.85}34%{transform:translate(calc(var(--dx) * 1px),-44px) scale(1.6);opacity:0}100%{transform:translate(calc(var(--dx) * 1px),-44px) scale(1.6);opacity:0}}
@keyframes ctLg0Mouth{0%{transform:scale(.5,.4)}2.69%{transform:scale(.62,.5)}4.41%{transform:scale(1.35,1.45)}12.62%{transform:scale(.62,.5)}14.34%{transform:scale(1.31,1.40)}27.1%{transform:scale(.62,.5)}28.83%{transform:scale(1.19,1.27)}36.21%{transform:scale(.62,.5)}37.93%{transform:scale(1.18,1.26)}46.14%{transform:scale(.62,.5)}47.86%{transform:scale(1.16,1.24)}56.48%{transform:scale(.62,.5)}58.21%{transform:scale(1.20,1.28)}66.83%{transform:scale(.62,.5)}68.55%{transform:scale(1.10,1.17)}75.45%{transform:scale(.6,.48)}75.86%{transform:scale(.5,.4)}100%{transform:scale(.5,.4)}}
@keyframes ctLg0Head{0%{transform:rotate(0deg) translateY(0)}4.41%{transform:rotate(-12.0deg) translateY(-3.4px)}14.34%{transform:rotate(-11.1deg) translateY(-3.2px)}28.83%{transform:rotate(-8.8deg) translateY(-2.5px)}37.93%{transform:rotate(-8.6deg) translateY(-2.5px)}47.86%{transform:rotate(-8.2deg) translateY(-2.4px)}58.21%{transform:rotate(-9.0deg) translateY(-2.6px)}68.55%{transform:rotate(-7.0deg) translateY(-2.1px)}75.86%{transform:rotate(0deg) translateY(0)}100%{transform:rotate(0deg) translateY(0)}}
@keyframes ctLg0Body{0%{transform:translateY(0) scale(1,1)}2.69%{transform:translateY(-1.5px) scale(0.965,1.040)}4.41%{transform:translateY(3.0px) scale(1.070,0.940)}12.62%{transform:translateY(-1.4px) scale(0.969,1.036)}14.34%{transform:translateY(2.8px) scale(1.063,0.946)}27.1%{transform:translateY(-1.1px) scale(0.978,1.026)}28.83%{transform:translateY(2.3px) scale(1.045,0.962)}36.21%{transform:translateY(-1.1px) scale(0.978,1.025)}37.93%{transform:translateY(2.2px) scale(1.043,0.963)}46.14%{transform:translateY(-1.1px) scale(0.980,1.023)}47.86%{transform:translateY(2.2px) scale(1.041,0.965)}56.48%{transform:translateY(-1.2px) scale(0.977,1.027)}58.21%{transform:translateY(2.3px) scale(1.047,0.960)}66.83%{transform:translateY(-0.9px) scale(0.985,1.018)}68.55%{transform:translateY(1.9px) scale(1.031,0.974)}75.86%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes ctLg0Eye{0%{transform:scaleY(1)}2.34%{transform:scaleY(1)}4.41%{transform:scaleY(.16)}68.55%{transform:scaleY(.18)}77.52%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes ctLg0ArmL{0%{transform:rotate(10deg)}4.41%{transform:rotate(34.0deg)}14.34%{transform:rotate(31.6deg)}28.83%{transform:rotate(25.4deg)}37.93%{transform:rotate(24.9deg)}47.86%{transform:rotate(23.9deg)}58.21%{transform:rotate(26.1deg)}68.55%{transform:rotate(20.6deg)}75.86%{transform:rotate(10deg)}100%{transform:rotate(10deg)}}
@keyframes ctLg0ArmR{0%{transform:rotate(-10deg)}4.41%{transform:rotate(-29.0deg)}14.34%{transform:rotate(-27.1deg)}28.83%{transform:rotate(-22.2deg)}37.93%{transform:rotate(-21.8deg)}47.86%{transform:rotate(-21.0deg)}58.21%{transform:rotate(-22.7deg)}68.55%{transform:rotate(-18.4deg)}75.86%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctLg1Mouth{0%{transform:scale(.5,.4)}5.46%{transform:scale(.62,.5)}6.81%{transform:scale(1.04,1.10)}13.89%{transform:scale(.62,.5)}15.24%{transform:scale(1.05,1.12)}29.46%{transform:scale(.62,.5)}30.81%{transform:scale(1.07,1.14)}39.51%{transform:scale(.62,.5)}40.86%{transform:scale(1.13,1.20)}59.62%{transform:scale(.62,.5)}60.97%{transform:scale(1.35,1.45)}66.11%{transform:scale(.62,.5)}67.46%{transform:scale(1.33,1.43)}70.65%{transform:scale(.62,.5)}72%{transform:scale(1.24,1.33)}75.19%{transform:scale(.62,.5)}76.54%{transform:scale(1.11,1.19)}81.08%{transform:scale(.5,.4)}81.95%{transform:scale(.6,.48)}100%{transform:scale(.5,.4)}}
@keyframes ctLg1Head{0%{transform:rotate(0deg) translateY(0)}6.81%{transform:rotate(-5.7deg) translateY(-1.7px)}15.24%{transform:rotate(-6.1deg) translateY(-1.8px)}30.81%{transform:rotate(-6.3deg) translateY(-1.9px)}40.86%{transform:rotate(-7.5deg) translateY(-2.2px)}60.97%{transform:rotate(-12.0deg) translateY(-3.4px)}67.46%{transform:rotate(-11.6deg) translateY(-3.3px)}72%{transform:rotate(-9.8deg) translateY(-2.8px)}76.54%{transform:rotate(-7.2deg) translateY(-2.1px)}81.08%{transform:rotate(0deg) translateY(0)}100%{transform:rotate(0deg) translateY(0)}}
@keyframes ctLg1Body{0%{transform:translateY(0) scale(1,1)}5.46%{transform:translateY(-0.8px) scale(0.990,1.012)}6.81%{transform:translateY(1.6px) scale(1.021,0.982)}13.89%{transform:translateY(-0.8px) scale(0.988,1.014)}15.24%{transform:translateY(1.7px) scale(1.024,0.980)}29.46%{transform:translateY(-0.9px) scale(0.987,1.015)}30.81%{transform:translateY(1.7px) scale(1.026,0.978)}39.51%{transform:translateY(-1.0px) scale(0.983,1.020)}40.86%{transform:translateY(2.0px) scale(1.035,0.970)}59.62%{transform:translateY(-1.5px) scale(0.965,1.040)}60.97%{transform:translateY(3.0px) scale(1.070,0.940)}66.11%{transform:translateY(-1.5px) scale(0.966,1.038)}67.46%{transform:translateY(2.9px) scale(1.067,0.942)}70.65%{transform:translateY(-1.3px) scale(0.973,1.030)}72%{transform:translateY(2.5px) scale(1.053,0.954)}75.19%{transform:translateY(-1.0px) scale(0.984,1.019)}76.54%{transform:translateY(1.9px) scale(1.033,0.972)}81.08%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes ctLg1Eye{0%{transform:scaleY(1)}5.19%{transform:scaleY(1)}6.81%{transform:scaleY(.16)}76.54%{transform:scaleY(.18)}83.57%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes ctLg1ArmL{0%{transform:rotate(10deg)}6.81%{transform:rotate(17.2deg)}15.24%{transform:rotate(18.2deg)}30.81%{transform:rotate(18.9deg)}40.86%{transform:rotate(22.0deg)}60.97%{transform:rotate(34.0deg)}67.46%{transform:rotate(33.0deg)}72%{transform:rotate(28.2deg)}76.54%{transform:rotate(21.3deg)}81.08%{transform:rotate(10deg)}100%{transform:rotate(10deg)}}
@keyframes ctLg1ArmR{0%{transform:rotate(-10deg)}6.81%{transform:rotate(-15.7deg)}15.24%{transform:rotate(-16.5deg)}30.81%{transform:rotate(-17.0deg)}40.86%{transform:rotate(-19.5deg)}60.97%{transform:rotate(-29.0deg)}67.46%{transform:rotate(-28.2deg)}72%{transform:rotate(-24.4deg)}76.54%{transform:rotate(-18.9deg)}81.08%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctLg2Mouth{0%{transform:scale(.5,.4)}0.56%{transform:scale(.62,.5)}3.33%{transform:scale(1.19,1.27)}15.22%{transform:scale(.62,.5)}18%{transform:scale(1.35,1.45)}24.56%{transform:scale(.62,.5)}27.33%{transform:scale(1.28,1.38)}39.22%{transform:scale(.62,.5)}42%{transform:scale(1.12,1.19)}53.11%{transform:scale(.6,.48)}61.11%{transform:scale(.5,.4)}100%{transform:scale(.5,.4)}}
@keyframes ctLg2Head{0%{transform:rotate(0deg) translateY(0)}3.33%{transform:rotate(-8.8deg) translateY(-2.5px)}18%{transform:rotate(-12.0deg) translateY(-3.4px)}27.33%{transform:rotate(-10.6deg) translateY(-3.0px)}42%{transform:rotate(-7.4deg) translateY(-2.2px)}61.11%{transform:rotate(0deg) translateY(0)}100%{transform:rotate(0deg) translateY(0)}}
@keyframes ctLg2Body{0%{transform:translateY(0) scale(1,1)}0.56%{transform:translateY(-1.1px) scale(0.978,1.026)}3.33%{transform:translateY(2.3px) scale(1.045,0.962)}15.22%{transform:translateY(-1.5px) scale(0.965,1.040)}18%{transform:translateY(3.0px) scale(1.070,0.940)}24.56%{transform:translateY(-1.4px) scale(0.970,1.034)}27.33%{transform:translateY(2.7px) scale(1.060,0.949)}39.22%{transform:translateY(-1.0px) scale(0.983,1.020)}42%{transform:translateY(2.0px) scale(1.034,0.971)}61.11%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes ctLg2Eye{0%{transform:scaleY(1)}0.56%{transform:scaleY(1)}3.33%{transform:scaleY(.16)}42%{transform:scaleY(.18)}56.44%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes ctLg2ArmL{0%{transform:rotate(10deg)}3.33%{transform:rotate(25.4deg)}18%{transform:rotate(34.0deg)}27.33%{transform:rotate(30.4deg)}42%{transform:rotate(21.8deg)}61.11%{transform:rotate(10deg)}100%{transform:rotate(10deg)}}
@keyframes ctLg2ArmR{0%{transform:rotate(-10deg)}3.33%{transform:rotate(-22.2deg)}18%{transform:rotate(-29.0deg)}27.33%{transform:rotate(-26.1deg)}42%{transform:rotate(-19.3deg)}61.11%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctLg3Mouth{0%{transform:scale(.5,.4)}7.71%{transform:scale(.62,.5)}9.18%{transform:scale(1.05,1.12)}19%{transform:scale(.62,.5)}20.47%{transform:scale(1.08,1.15)}34.53%{transform:scale(.62,.5)}36%{transform:scale(1.35,1.45)}41.24%{transform:scale(.62,.5)}42.71%{transform:scale(1.28,1.38)}45.82%{transform:scale(.62,.5)}47.29%{transform:scale(1.26,1.35)}50.76%{transform:scale(.62,.5)}52.24%{transform:scale(1.26,1.34)}58.88%{transform:scale(.62,.5)}60.35%{transform:scale(1.17,1.25)}67.71%{transform:scale(.62,.5)}69.18%{transform:scale(1.06,1.13)}73.71%{transform:scale(.62,.5)}75.18%{transform:scale(1.04,1.10)}79.41%{transform:scale(.5,.4)}81.06%{transform:scale(.6,.48)}100%{transform:scale(.5,.4)}}
@keyframes ctLg3Head{0%{transform:rotate(0deg) translateY(0)}9.18%{transform:rotate(-6.1deg) translateY(-1.8px)}20.47%{transform:rotate(-6.5deg) translateY(-1.9px)}36%{transform:rotate(-12.0deg) translateY(-3.4px)}42.71%{transform:rotate(-10.6deg) translateY(-3.0px)}47.29%{transform:rotate(-10.3deg) translateY(-2.9px)}52.24%{transform:rotate(-10.1deg) translateY(-2.9px)}60.35%{transform:rotate(-8.5deg) translateY(-2.5px)}69.18%{transform:rotate(-6.2deg) translateY(-1.9px)}75.18%{transform:rotate(-5.7deg) translateY(-1.7px)}79.41%{transform:rotate(0deg) translateY(0)}100%{transform:rotate(0deg) translateY(0)}}
@keyframes ctLg3Body{0%{transform:translateY(0) scale(1,1)}7.71%{transform:translateY(-0.8px) scale(0.988,1.014)}9.18%{transform:translateY(1.7px) scale(1.024,0.980)}19%{transform:translateY(-0.9px) scale(0.986,1.016)}20.47%{transform:translateY(1.8px) scale(1.027,0.977)}34.53%{transform:translateY(-1.5px) scale(0.965,1.040)}36%{transform:translateY(3.0px) scale(1.070,0.940)}41.24%{transform:translateY(-1.4px) scale(0.970,1.034)}42.71%{transform:translateY(2.7px) scale(1.060,0.949)}45.82%{transform:translateY(-1.3px) scale(0.972,1.032)}47.29%{transform:translateY(2.6px) scale(1.057,0.951)}50.76%{transform:translateY(-1.3px) scale(0.972,1.032)}52.24%{transform:translateY(2.6px) scale(1.055,0.953)}58.88%{transform:translateY(-1.1px) scale(0.979,1.024)}60.35%{transform:translateY(2.2px) scale(1.043,0.963)}67.71%{transform:translateY(-0.9px) scale(0.987,1.014)}69.18%{transform:translateY(1.7px) scale(1.025,0.978)}73.71%{transform:translateY(-0.8px) scale(0.990,1.012)}75.18%{transform:translateY(1.6px) scale(1.021,0.982)}79.41%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes ctLg3Eye{0%{transform:scaleY(1)}7.41%{transform:scaleY(1)}9.18%{transform:scaleY(.16)}75.18%{transform:scaleY(.18)}82.82%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes ctLg3ArmL{0%{transform:rotate(10deg)}9.18%{transform:rotate(18.2deg)}20.47%{transform:rotate(19.4deg)}36%{transform:rotate(34.0deg)}42.71%{transform:rotate(30.4deg)}47.29%{transform:rotate(29.4deg)}52.24%{transform:rotate(29.0deg)}60.35%{transform:rotate(24.6deg)}69.18%{transform:rotate(18.6deg)}75.18%{transform:rotate(17.2deg)}79.41%{transform:rotate(10deg)}100%{transform:rotate(10deg)}}
@keyframes ctLg3ArmR{0%{transform:rotate(-10deg)}9.18%{transform:rotate(-16.5deg)}20.47%{transform:rotate(-17.4deg)}36%{transform:rotate(-29.0deg)}42.71%{transform:rotate(-26.1deg)}47.29%{transform:rotate(-25.4deg)}52.24%{transform:rotate(-25.0deg)}60.35%{transform:rotate(-21.6deg)}69.18%{transform:rotate(-16.8deg)}75.18%{transform:rotate(-15.7deg)}79.41%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes ctBubble{0%,6%{opacity:0;transform:scale(.4) translateY(8px)}12%{opacity:1;transform:scale(1.14) translateY(0)}16%{transform:scale(1)}60%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(.92)}100%{opacity:0}}
@keyframes ctConf{0%{transform:translate(0,0) rotate(0deg);opacity:0}2%{opacity:1}22%{transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) rotate(var(--rot));opacity:0}100%{transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) rotate(var(--rot));opacity:0}}

/* Reduced motion SHORTENS, it does not delete — a reaction that never plays is
   indistinguishable from one that failed to send. One pass, then rest. */
:root[data-motion="reduced"] .ct * { animation-iteration-count: 1 !important; }

/* ---- placement in the game --------------------------------------------- */

/* A reaction pops at the seat that sent it. Fixed rather than a felt overlay
   because it must anchor to a SEAT, and the seats live outside .ga-felt — but
   it stays below the modal layer so a reaction can never cover the victory
   screen or a confirm sheet. */
.ct-pop {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 60;
  pointer-events: none;
  animation: ctPopIn 200ms cubic-bezier(.22, 1, .36, 1) both;
}

/* The round-end celebrate is a child of the felt, not of the viewport, so it
   sits inside the table's bounds the way the composition-A frame requires. */
.ct-pop-table {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 40;
}

@keyframes ctPopIn {
  from { opacity: 0; translate: 0 8px; scale: .9; }
  to   { opacity: 1; translate: 0 0;   scale: 1; }
}

/* ---- the picker tiles --------------------------------------------------- */

.ct-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.emote-tile.ct-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* The rig is 150px tall before scaling; at 0.34 it occupies ~51px, and the
     shout needs the rest. A fixed height keeps all six tiles on one grid. */
  height: 76px;
  padding: 0 0 4px;
  overflow: hidden;
  background: var(--surf2, #17130d);
  border: 1px solid var(--line2, #2a2118);
  border-radius: var(--radius);
  min-width: 0;
}

/* The rig is bottom-anchored inside its tile; scale() leaves the original
   116x150 box in flow, so it is pulled back up rather than given room. */
.emote-tile.ct-tile .ct {
  position: absolute;
  left: 50%;
  bottom: 14px;
  margin-left: -58px;
}

.ct-tile-shout {
  position: relative;
  font: 800 9px/1 Archivo, sans-serif;
  letter-spacing: .1em;
  color: var(--gold-accent, #E0AD4E);
}

.ct-mute {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 0;
  font: 700 11px/1 Archivo, sans-serif;
  letter-spacing: .06em;
  color: var(--ink, #f2ead8);
  background: transparent;
  border: 1px solid var(--line2, #2a2118);
  border-radius: var(--radius);
  cursor: pointer;
}
.ct-mute[data-muted="1"] { color: var(--muted, #9a8f7d); }

/* Sound controls in the tray. The handoff puts a master volume AND a mute on
   this component: "in the game they belong in the overflow menu, remembered
   between sessions." One pair for everything that makes a noise — the four
   recorded laughs and the fifteen synthesised table cues share one preference,
   so muting here cannot be contradicted by a deal burst a moment later. */
.ct-sound {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ct-sound .ct-mute { margin-top: 0; flex: 0 0 auto; width: auto; padding: 8px 12px; }
.ct-vol {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--tap, 44px);
  accent-color: var(--gold-accent, #E0AD4E);
  background: transparent;
  cursor: pointer;
}
.ct-vol:disabled { opacity: .4; cursor: default; }