/* The players' guys (drawn by /shared/guys.js): a gentle bob, a blink now and then,
   a spinning propeller, and a new hat dropping on with a squash. Used on the TV and the phones. */
.guy { width: 100%; display: block; overflow: visible; filter: drop-shadow(0 .45cqw 0 rgba(0,0,0,.35)) drop-shadow(0 1cqw 1.2cqw rgba(0,0,0,.55)); }
.guy .bob { transform-box: fill-box; transform-origin: 50% 100%; animation: guy-bob var(--bd, 2.4s) ease-in-out var(--bl, 0s) infinite; }
@keyframes guy-bob { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
.guy .eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: guy-blink 5s var(--bl, 0s) infinite; }
@keyframes guy-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.guy .prop { transform-box: fill-box; transform-origin: 50% 50%; animation: guy-prop .5s linear infinite; }
@keyframes guy-prop { to { transform: scaleX(-1); } }
.hatnew .hatin { transform-box: fill-box; transform-origin: 50% 100%; animation: guy-hatdrop .5s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes guy-hatdrop { 0% { transform: translateY(-60px) scale(.6) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } 80% { transform: translateY(0) scale(1.12, .86); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .guy *, .hatnew .hatin { animation: none !important; } }

/* the finishes: sparkles that twinkle, a sheen that crosses chrome and gold, candle flames, saucer lights */
.glint { transform-box: fill-box; transform-origin: 50% 50%; animation: guy-glint 3.2s ease-in-out var(--gd, 0s) infinite; }
@keyframes guy-glint { 0%, 55%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 72% { opacity: 1; transform: scale(1) rotate(45deg); } 88% { opacity: .35; transform: scale(.6) rotate(70deg); } }
.sheen { transform: skewX(-18deg); animation: guy-sheen 4.2s ease-in-out infinite; }
@keyframes guy-sheen { 0%, 45% { transform: translateX(-20px) skewX(-18deg); } 85%, 100% { transform: translateX(170px) skewX(-18deg); } }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: guy-flame .5s ease-in-out infinite alternate; }
@keyframes guy-flame { to { transform: scale(.82, 1.18) rotate(5deg); } }
.blink { animation: guy-lights 1.2s steps(1) infinite; }
.blink.two { animation-delay: -.6s; }
@keyframes guy-lights { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .glint { opacity: .8; } .glint, .sheen, .flame, .blink { animation: none !important; } }