/* Compact illustrated cutouts and layered SVG actors. Every costume change has a small physical tell,
   never a caption that announces a previous claim. Motion belongs to the public
   performance; nothing in these styles depends on a private influence card. */
.arena-performer {
  --performer-default-width: 76px;
  --performer-duration: 1100ms;
  --pf-enter: translate(0, 9px) scale(.94);
  --pf-beat: translate(0, -2px) rotate(-2deg);
  --pf-gaze: rotate(-7deg);
  --pf-hand-from: translate(-3px, 2px) rotate(-9deg);
  --pf-hand-beat: translate(0, -3px) rotate(5deg);
  --pf-prop-from: translate(0, 8px) rotate(-25deg) scale(.65);
  --pf-prop-beat: translate(0, -2px) rotate(8deg) scale(1.03);
  --pf-cloth-from: skewX(-6deg) scaleX(.88);
  --pf-cloth-beat: skewX(3deg) scaleX(1.05);
  display: inline-grid;
  place-items: center;
  width: var(--performer-width, var(--performer-default-width));
  aspect-ratio: 3 / 4;
  position: relative;
  isolation: isolate;
  vertical-align: bottom;
  pointer-events: none;
}
.performer-art { display: block; width: 100%; height: 100%; overflow: visible; }
.performer-art .performer-figure,
.performer-art .performer-head,
.performer-art .performer-body,
.performer-art .performer-hand,
.performer-art .performer-cloak,
.performer-art .performer-prop,
.performer-art .performer-platform,
.performer-art .performer-sparkles { transform-box: view-box; }
.performer-figure { transform-origin: 48px 115px; }
.performer-head { transform-origin: 48px 47px; }
.performer-hand { transform-origin: 62px 54px; }
.performer-cloak { transform-origin: 48px 48px; }
.performer-prop { transform-origin: 68px 76px; }
.performer-art--duke .performer-prop { transform-origin: 71px 77px; }
.performer-art--assassin .performer-prop { transform-origin: 73px 76px; }
.performer-art--captain .performer-prop { transform-origin: 75px 75px; }
.performer-art--ambassador .performer-prop { transform-origin: 63px 77px; }
.performer-art--contessa .performer-prop { transform-origin: 63px 71px; }
.performer-art--neutral .performer-prop { transform-origin: 48px 73px; }
.performer-platform { transform-origin: 48px 118px; }
.performer-sparkles { transform-origin: 48px 72px; opacity: .35; }
.performer-art--ghost { opacity: .35; filter: saturate(.4); }
.performer-theme--neon .performer-figure { filter: drop-shadow(0 0 2px var(--pf-glow)); }
.performer-theme--neon .performer-platform { stroke-width: 1.2px; }
.performer-theme--woodland .performer-platform { opacity: .7; }
.performer-cutout { pointer-events: none; }

/* Idle movement is deliberately restrained: an eight-player table should feel
   inhabited without sixteen figures competing with the current decision. */
.arena-performer:not(.is-changing):not(.is-summoned) .performer-figure {
  animation: performer-breathe 5.4s ease-in-out infinite;
}
.arena-performer:nth-child(even):not(.is-changing):not(.is-summoned) .performer-figure { animation-delay: -2.1s; }
.arena-performer[data-role="assassin"]:not(.is-changing):not(.is-summoned) .performer-figure { animation-duration: 6.5s; }
.arena-performer[data-role="neutral"] .performer-sparkles { opacity: .13; }
/* Illustrated bodies move as one deliberate silhouette. Their appearance
   changes retain the pair-specific enter/beat recipes below; keep them still
   between events so a full arena does not look like a row of bobbing stickers. */
.arena-performer:not(.is-changing):not(.is-summoned):not(.is-acting):not(.is-challenged):not(.is-lost) .performer-art--illustrated .performer-figure { animation: none; }
.arena-performer.is-changing .performer-figure,
.arena-performer.is-summoned .performer-figure {
  animation: performer-arrive var(--performer-duration) cubic-bezier(.2,.72,.23,1) both;
}
.arena-performer.is-changing .performer-prop,
.arena-performer.is-summoned .performer-prop {
  animation: performer-flourish var(--performer-duration) cubic-bezier(.23,.7,.2,1) both;
}
.arena-performer.is-changing .performer-hand,
.arena-performer.is-summoned .performer-hand {
  animation: performer-hand-off var(--performer-duration) cubic-bezier(.23,.7,.2,1) both;
}
.arena-performer.is-changing .performer-head,
.arena-performer.is-summoned .performer-head {
  animation: performer-glance var(--performer-duration) ease-in-out both;
}
.arena-performer.is-changing .performer-cloak,
.arena-performer.is-summoned .performer-cloak {
  animation: performer-cloth var(--performer-duration) cubic-bezier(.2,.7,.2,1) both;
}
.arena-performer.is-changing .performer-platform,
.arena-performer.is-summoned .performer-platform {
  animation: performer-circle var(--performer-duration) ease-out both;
}
.arena-performer.is-changing .performer-sparkles,
.arena-performer.is-summoned .performer-sparkles {
  animation: performer-dust var(--performer-duration) ease-out both;
}

/* Duke leaves: conceal the crown, turn the scepter, issue a decree, or sweep
   the cape into a courtly bow. The new costume completes the same hand motion. */
.arena-performer[data-transition="duke-assassin"] {
  --pf-enter: translate(0, -3px) scale(1.02);
  --pf-beat: translate(-2px, 3px) rotate(-4deg);
  --pf-gaze: rotate(9deg);
  --pf-prop-from: translate(-22px, -24px) rotate(130deg) scale(.3);
  --pf-prop-beat: translate(-4px, -1px) rotate(-12deg) scale(.85);
  --pf-hand-from: translate(-14px, -18px) rotate(-55deg);
  --pf-cloth-from: skewX(8deg) scaleX(1.16);
}
.arena-performer[data-transition="duke-captain"] {
  --pf-enter: translate(-3px, 2px) rotate(-4deg);
  --pf-beat: translate(2px, -2px) rotate(3deg);
  --pf-prop-from: translate(-3px, 0) rotate(160deg) scale(.8);
  --pf-prop-beat: translate(1px, -4px) rotate(-14deg) scale(1.03);
  --pf-hand-from: rotate(24deg);
  --pf-gaze: rotate(-10deg);
}
.arena-performer[data-transition="duke-ambassador"] {
  --pf-enter: translate(0, -2px) scaleY(1.03);
  --pf-beat: translate(0, 2px) rotate(3deg);
  --pf-prop-from: translate(7px, -7px) rotate(28deg) scaleX(.2);
  --pf-prop-beat: translate(-4px, 0) rotate(-7deg) scaleX(1.05);
  --pf-hand-from: translate(8px, -6px) rotate(15deg);
  --pf-hand-beat: translate(-2px, 2px) rotate(-4deg);
  --pf-gaze: rotate(8deg);
}
.arena-performer[data-transition="duke-contessa"] {
  --pf-enter: translate(3px, 0) rotate(6deg);
  --pf-beat: translate(-1px, 5px) rotate(-3deg) scaleY(.97);
  --pf-prop-from: translate(-6px, 11px) rotate(-70deg) scaleX(.1);
  --pf-prop-beat: translate(3px, -2px) rotate(14deg) scaleX(1.08);
  --pf-cloth-from: skewX(12deg) scaleX(1.15);
  --pf-cloth-beat: skewX(-8deg) scaleX(1.08);
  --pf-gaze: rotate(12deg);
}

/* Assassin leaves: a hood falls away, a blade becomes a salute, a secret is
   sealed, or the knife disappears neatly behind a newly opened fan. */
.arena-performer[data-transition="assassin-duke"] {
  --pf-enter: translate(-2px, 6px) rotate(-4deg) scaleY(.93);
  --pf-beat: translate(0, -3px) scaleY(1.025);
  --pf-prop-from: translate(-20px, -4px) rotate(-100deg) scale(.45);
  --pf-prop-beat: translate(0, -7px) rotate(5deg) scale(1);
  --pf-hand-from: translate(-12px, -18px) rotate(-40deg);
  --pf-cloth-from: skewX(-12deg) scaleX(.7);
  --pf-gaze: rotate(-12deg);
}
.arena-performer[data-transition="assassin-captain"] {
  --pf-enter: translate(-5px, 3px) rotate(-6deg);
  --pf-beat: translate(3px, -1px) rotate(3deg);
  --pf-prop-from: translate(-2px, 4px) rotate(178deg) scale(.5);
  --pf-prop-beat: translate(-7px, -10px) rotate(-22deg) scale(1);
  --pf-hand-from: translate(-3px, 2px) rotate(20deg);
  --pf-hand-beat: translate(-3px, -12px) rotate(-15deg);
  --pf-gaze: rotate(-5deg);
}
.arena-performer[data-transition="assassin-ambassador"] {
  --pf-enter: translate(4px, 3px) rotate(5deg);
  --pf-beat: translate(0, 1px) rotate(-2deg);
  --pf-prop-from: translate(-14px, 0) rotate(-25deg) scaleX(.06);
  --pf-prop-beat: translate(-5px, 3px) rotate(8deg) scaleX(.8);
  --pf-hand-from: translate(-10px, 3px) rotate(-20deg);
  --pf-hand-beat: translate(-2px, 3px) rotate(3deg);
  --pf-gaze: rotate(11deg);
}
.arena-performer[data-transition="assassin-contessa"] {
  --pf-enter: translate(3px, 3px) rotate(4deg);
  --pf-beat: translate(-1px, 0) rotate(-3deg);
  --pf-prop-from: translate(8px, 7px) rotate(135deg) scaleX(.08);
  --pf-prop-beat: translate(-2px, -12px) rotate(-12deg) scaleX(.3);
  --pf-hand-from: translate(8px, 6px) rotate(25deg);
  --pf-hand-beat: translate(-2px, -10px) rotate(-20deg);
  --pf-cloth-from: skewX(6deg) scaleX(.8);
  --pf-gaze: rotate(-9deg);
}

/* Captain leaves: a formal salute, a blade lowered into shadow, an unfolded
   chart, or a flamboyant hat tip that finishes behind the fan. */
.arena-performer[data-transition="captain-duke"] {
  --pf-enter: translate(2px, 0) rotate(4deg);
  --pf-beat: translate(0, -2px) scaleY(1.03);
  --pf-prop-from: translate(-5px, -17px) rotate(-32deg) scale(.75);
  --pf-prop-beat: translate(3px, -3px) rotate(7deg) scale(1.02);
  --pf-hand-from: translate(-9px, -27px) rotate(-40deg);
  --pf-hand-beat: translate(1px, -4px) rotate(9deg);
  --pf-gaze: rotate(8deg);
}
.arena-performer[data-transition="captain-assassin"] {
  --pf-enter: translate(-2px, -2px) rotate(-3deg);
  --pf-beat: translate(3px, 3px) rotate(5deg);
  --pf-prop-from: translate(8px, -14px) rotate(-162deg) scale(1.4);
  --pf-prop-beat: translate(-10px, 0) rotate(28deg) scale(.5);
  --pf-hand-from: translate(5px, -8px) rotate(-27deg);
  --pf-hand-beat: translate(-5px, 3px) rotate(13deg);
  --pf-cloth-from: skewX(-7deg) scaleX(1.1);
  --pf-gaze: rotate(12deg);
}
.arena-performer[data-transition="captain-ambassador"] {
  --pf-enter: translate(-4px, 1px) rotate(-5deg);
  --pf-beat: translate(1px, 2px) rotate(2deg);
  --pf-prop-from: translate(-12px, -4px) rotate(85deg) scaleY(.55);
  --pf-prop-beat: translate(-8px, -2px) rotate(12deg) scale(1.08);
  --pf-hand-from: translate(-7px, -4px) rotate(-28deg);
  --pf-hand-beat: translate(-3px, 0) rotate(-8deg);
  --pf-gaze: rotate(14deg);
}
.arena-performer[data-transition="captain-contessa"] {
  --pf-enter: translate(1px, 0) rotate(7deg);
  --pf-beat: translate(-2px, 3px) rotate(-4deg);
  --pf-prop-from: translate(-9px, -35px) rotate(-45deg) scaleX(.5);
  --pf-prop-beat: translate(4px, -5px) rotate(24deg) scaleX(.8);
  --pf-hand-from: translate(-8px, -25px) rotate(-50deg);
  --pf-hand-beat: translate(3px, -2px) rotate(12deg);
  --pf-gaze: rotate(-12deg);
}

/* Ambassador leaves: the scroll rolls into a scepter, slips up a sleeve,
   becomes sailing orders, or creases into a fan one fold at a time. */
.arena-performer[data-transition="ambassador-duke"] {
  --pf-enter: translate(0, 4px) scaleY(.95);
  --pf-beat: translate(-1px, -3px) rotate(-2deg);
  --pf-prop-from: translate(-7px, 0) rotate(-88deg) scaleY(.42);
  --pf-prop-beat: translate(-3px, -4px) rotate(-12deg) scaleY(.85);
  --pf-hand-from: translate(-8px, 0) rotate(-18deg);
  --pf-hand-beat: translate(-2px, -5px) rotate(-5deg);
  --pf-cloth-from: skewX(0deg) scaleX(.9);
  --pf-gaze: rotate(7deg);
}
.arena-performer[data-transition="ambassador-assassin"] {
  --pf-enter: translate(-3px, 1px) rotate(-4deg);
  --pf-beat: translate(2px, 4px) rotate(3deg);
  --pf-prop-from: translate(-15px, -13px) rotate(-78deg) scale(.25);
  --pf-prop-beat: translate(-9px, -4px) rotate(35deg) scale(.45);
  --pf-hand-from: translate(-8px, -7px) rotate(-28deg);
  --pf-hand-beat: translate(-5px, 0) rotate(6deg);
  --pf-cloth-from: skewX(-12deg) scaleX(.8);
  --pf-gaze: rotate(13deg);
}
.arena-performer[data-transition="ambassador-captain"] {
  --pf-enter: translate(1px, 4px) rotate(3deg);
  --pf-beat: translate(-1px, -2px) rotate(-2deg);
  --pf-prop-from: translate(-10px, -1px) rotate(-95deg) scaleY(.45);
  --pf-prop-beat: translate(0, -9px) rotate(-15deg) scaleY(1);
  --pf-hand-from: translate(-6px, 1px) rotate(-15deg);
  --pf-hand-beat: translate(-2px, -7px) rotate(-10deg);
  --pf-gaze: rotate(-6deg);
}
.arena-performer[data-transition="ambassador-contessa"] {
  --pf-enter: translate(-2px, 2px) rotate(-3deg);
  --pf-beat: translate(2px, 2px) rotate(3deg);
  --pf-prop-from: translate(1px, 3px) rotate(80deg) scaleX(.08);
  --pf-prop-beat: translate(-4px, -1px) rotate(-8deg) scaleX(.5);
  --pf-hand-from: translate(0, 2px) rotate(15deg);
  --pf-hand-beat: translate(-3px, -2px) rotate(-8deg);
  --pf-gaze: rotate(9deg);
}

/* Contessa leaves: a royal flourish, a blade uncovered, a curtsy that becomes
   a salute, or an unfolded fan revealing the next diplomatic letter. */
.arena-performer[data-transition="contessa-duke"] {
  --pf-enter: translate(3px, 4px) rotate(5deg) scaleY(.96);
  --pf-beat: translate(-2px, -2px) rotate(-4deg);
  --pf-prop-from: translate(-6px, -4px) rotate(-118deg) scaleY(.3);
  --pf-prop-beat: translate(4px, -6px) rotate(19deg) scaleY(.95);
  --pf-hand-from: translate(-5px, -6px) rotate(-28deg);
  --pf-hand-beat: translate(3px, -3px) rotate(18deg);
  --pf-cloth-from: skewX(10deg) scaleX(1.1);
  --pf-gaze: rotate(-10deg);
}
.arena-performer[data-transition="contessa-assassin"] {
  --pf-enter: translate(-2px, 0) rotate(-4deg);
  --pf-beat: translate(2px, 3px) rotate(3deg);
  --pf-prop-from: translate(-15px, -24px) rotate(-120deg) scale(.1);
  --pf-prop-beat: translate(-8px, -14px) rotate(-50deg) scale(.65);
  --pf-hand-from: translate(-8px, -16px) rotate(-35deg);
  --pf-hand-beat: translate(-4px, -8px) rotate(-15deg);
  --pf-cloth-from: skewX(-9deg) scaleX(1.08);
  --pf-gaze: rotate(-11deg);
}
.arena-performer[data-transition="contessa-captain"] {
  --pf-enter: translate(1px, 6px) rotate(4deg) scaleY(.94);
  --pf-beat: translate(-2px, -2px) rotate(-3deg);
  --pf-prop-from: translate(-14px, -2px) rotate(-76deg) scaleY(.5);
  --pf-prop-beat: translate(-5px, -11px) rotate(-16deg) scale(1.04);
  --pf-hand-from: translate(-7px, 4px) rotate(-14deg);
  --pf-hand-beat: translate(-7px, -12px) rotate(-27deg);
  --pf-gaze: rotate(10deg);
}
.arena-performer[data-transition="contessa-ambassador"] {
  --pf-enter: translate(2px, 1px) rotate(4deg);
  --pf-beat: translate(-1px, 2px) rotate(-2deg);
  --pf-prop-from: translate(-5px, -9px) rotate(-48deg) scaleX(.12);
  --pf-prop-beat: translate(-7px, -4px) rotate(-5deg) scaleX(1.05);
  --pf-hand-from: translate(-3px, -8px) rotate(-18deg);
  --pf-hand-beat: translate(-3px, -2px) rotate(-5deg);
  --pf-cloth-from: skewX(8deg) scaleX(1.05);
  --pf-gaze: rotate(12deg);
}
.arena-performer[data-transition$="-neutral"] {
  --pf-enter: translate(0, -3px) scale(1.04);
  --pf-beat: translate(0, 2px) scale(.98);
  --pf-prop-from: translate(0, -8px) rotate(90deg) scale(.2);
  --pf-prop-beat: translate(0, 0) rotate(-5deg) scale(.85);
  --pf-cloth-from: scaleX(1.25);
  --pf-cloth-beat: scaleX(.94);
}
.arena-performer[data-transition="settle"] { --pf-enter: none; --pf-beat: translateY(-1px); --pf-prop-from: none; --pf-prop-beat: rotate(3deg); }

/* Parent arena may briefly add these for targeted exchanges. */
.arena-performer.is-acting .performer-figure { animation: performer-address 800ms ease-in-out both; }
.arena-performer.is-challenged .performer-head { animation: performer-double-take 680ms ease-in-out both; }
.arena-performer.is-challenged .performer-art--illustrated .performer-figure { animation: performer-cutout-recoil 680ms ease-in-out both; }
.arena-performer.is-lost .performer-figure { animation: performer-dismiss 850ms ease-in both; }
.arena-performer.is-lost .performer-platform { animation: performer-circle-out 850ms ease-out both; }

@keyframes performer-breathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }
@keyframes performer-arrive {
  0% { opacity: 0; transform: var(--pf-enter); }
  24% { opacity: .92; }
  52% { opacity: 1; transform: var(--pf-beat); }
  100% { opacity: 1; transform: none; }
}
@keyframes performer-flourish {
  0%,12% { opacity: .2; transform: var(--pf-prop-from); }
  52% { opacity: 1; transform: var(--pf-prop-beat); }
  100% { opacity: 1; transform: none; }
}
@keyframes performer-hand-off {
  0%,12% { transform: var(--pf-hand-from); }
  52% { transform: var(--pf-hand-beat); }
  100% { transform: none; }
}
@keyframes performer-glance { 0%,15%{transform:var(--pf-gaze)} 57%{transform:rotate(2deg)} 100%{transform:none} }
@keyframes performer-cloth { 0%{transform:var(--pf-cloth-from)} 47%{transform:var(--pf-cloth-beat)} 100%{transform:none} }
@keyframes performer-circle { 0%{opacity:0;transform:scale(.5)} 38%{opacity:1;transform:scale(1.15)} 100%{opacity:.85;transform:scale(1)} }
@keyframes performer-dust { 0%{opacity:0;transform:translateY(9px) scale(.85)} 35%{opacity:.9} 100%{opacity:.2;transform:translateY(-5px) scale(1.05)} }
@keyframes performer-address { 0%,100%{transform:none} 40%{transform:translateY(-4px) scale(1.055) rotate(-3deg)} 65%{transform:translateY(-2px) rotate(2deg)} }
@keyframes performer-double-take { 0%,100%{transform:none} 28%{transform:rotate(11deg)} 62%{transform:rotate(-7deg)} }
@keyframes performer-cutout-recoil { 0%,100%{transform:none} 28%{transform:translate(2px,2px) rotate(3deg)} 62%{transform:translate(-1px,-1px) rotate(-1deg)} }
@keyframes performer-dismiss { 0%{opacity:1;transform:none;filter:none} 28%{opacity:1;transform:translateY(-4px);filter:brightness(1.7)} 100%{opacity:0;transform:translateY(10px) scaleY(.4);filter:brightness(.6)} }
@keyframes performer-circle-out { 0%{opacity:.8;transform:scale(1)} 100%{opacity:0;transform:scale(1.7,.2)} }

@media (max-width: 600px) { .arena-performer { --performer-default-width: 62px; } }
@media (prefers-reduced-motion: reduce) {
  .arena-performer *, .arena-performer.is-changing *, .arena-performer.is-summoned *,
  .arena-performer.is-acting *, .arena-performer.is-challenged *, .arena-performer.is-lost * {
    animation: none !important;
    transition: none !important;
  }
  .arena-performer.is-lost .performer-figure { opacity: .16; filter: grayscale(1); }
}
html[data-motion="reduced"] .arena-performer *,
html[data-motion="off"] .arena-performer * { animation: none !important; transition: none !important; }