.footer-friends {
  max-width: 300px;
  margin: 12px auto 0;
  padding: 0;
}
.friends-playground { min-width: 0; }
.friends-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 440 / 255;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 58%, #a4d3ad0c, transparent 66%);
}
.friends-scenery { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer-friends .friend {
  position: absolute;
  bottom: 0;
  width: 38%;
  padding: 0;
  border: 0;
  border-radius: 38%;
  background: transparent;
  color: #c2d3c8;
  -webkit-tap-highlight-color: transparent;
}
.friend:disabled { cursor: default; }
.friend-pip { left: 8%; }
.friend-robo { right: 8%; }
.friend svg { display: block; width: 100%; overflow: visible; }
.friend-name { display: block; font-size: .7rem; letter-spacing: .06em; line-height: 2; padding-top: 4px; }
.friend-name-spark { color: #edc780; font-size: .6rem; }
.friend:not(:disabled):hover .friend-name { color: #f0cb82; }
.friend:not(:disabled):hover svg { filter: drop-shadow(0 0 9px #bbe2b422); }
.footer-friends .friend:focus-visible { outline: 2px dashed #f0cb82; outline-offset: 4px; }
.friend-puppet { transform-box: fill-box; transform-origin: 50% 100%; }
.pip-puppet { animation: friends-pip-idle 5s ease-in-out infinite; }
.robo-puppet { animation: friends-robo-idle 5s ease-in-out infinite; }
.friend-eyes { transform-box: fill-box; transform-origin: center; animation: friends-blink 6s infinite; }
.robo-eyes { animation-delay: 1.5s; }
.pip-tail { transform-box: fill-box; transform-origin: right center; animation: friends-tail 3s ease-in-out infinite; }
.robo-antenna { animation: friends-antenna 3s ease-in-out infinite; }
.pip-arm-inner, .pip-arm-outer, .robo-arm-inner, .robo-arm-outer { transform-box: fill-box; transform-origin: center top; }
.pip-head, .robo-head { transform-box: fill-box; transform-origin: center bottom; }
.friends-star {
  position: absolute;
  left: calc(50% - 15px);
  top: 18%;
  width: 30px;
  line-height: 1;
  text-align: center;
  font-size: 25px;
  color: #f6d68b;
  text-shadow: 0 0 20px #ecc77475;
  animation: friends-star-toss 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.friends-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.friends-burst, .friends-highfive { position: absolute; left: 50%; top: 40%; pointer-events: none; z-index: 3; }
.friends-burst i { position: absolute; font-style: normal; font-size: 19px; color: #f5d087; opacity: 0; }
.friends-burst i:nth-child(1) { --burst-x: -80px; --burst-y: -62px; }
.friends-burst i:nth-child(2) { --burst-x: -30px; --burst-y: -88px; color: #b8dcb7; }
.friends-burst i:nth-child(3) { --burst-x: 35px; --burst-y: -68px; font-size: 8px; }
.friends-burst i:nth-child(4) { --burst-x: 85px; --burst-y: -36px; }
.friends-burst i:nth-child(5) { --burst-x: 46px; --burst-y: 24px; color: #e6b39e; font-size: 13px; }
.friends-burst i:nth-child(6) { --burst-x: -73px; --burst-y: 25px; color: #a4d4c1; }
.friends-burst i:nth-child(7) { --burst-x: 9px; --burst-y: -108px; font-size: 9px; color: #e6b39e; }
.friends-burst i:nth-child(8) { --burst-x: 100px; --burst-y: 9px; font-size: 12px; }
.friends-burst i:nth-child(9) { --burst-x: -106px; --burst-y: -14px; font-size: 12px; }
.friends-highfive { opacity: 0; color: #f4d28b; font-size: 42px; line-height: 1; margin: -8px 0 0 -21px; }

/* Idle: Pip lobs a wishing star; Robo Pip nearly loses their balance catching it. */
@keyframes friends-star-toss {
  0%, 12%, 100% { transform: translate(-40px, 42px) rotate(-20deg) scale(.8); }
  32% { transform: translate(0, -5px) rotate(80deg) scale(1); }
  48%, 60% { transform: translate(40px, 42px) rotate(160deg) scale(.8); }
  81% { transform: translate(0, -5px) rotate(260deg) scale(1); }
}
@keyframes friends-pip-idle {
  0%, 10%, 50%, 70%, 100% { transform: rotate(0); }
  22% { transform: translateY(-5px) rotate(5deg); }
  85% { transform: rotate(-5deg) scale(1.02, .98); }
}
@keyframes friends-robo-idle {
  0%, 26%, 76%, 100% { transform: rotate(0); }
  48% { transform: rotate(7deg); }
  56% { transform: rotate(-5deg); }
  66% { transform: translateY(-4px) rotate(-4deg); }
}
@keyframes friends-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
@keyframes friends-tail { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(9deg); } }
@keyframes friends-antenna { 0%, 100% { fill: #f1cb7f; } 50% { fill: #fff0bb; } }

.friends-stage[data-trick] .friends-star { animation: friends-star-wait 1s ease-in-out infinite; }
@keyframes friends-star-wait { 0%, 100% { transform: translateY(-6px) scale(.8); } 50% { transform: translateY(-12px) scale(.9); } }
.friends-stage[data-trick="highfive"] .pip-puppet { animation: friends-pip-five 3.2s both; }
.friends-stage[data-trick="highfive"] .robo-puppet { animation: friends-robo-five 3.2s both; }
.friends-stage[data-trick="highfive"] .pip-arm-inner { animation: friends-pip-hand 3.2s both; }
.friends-stage[data-trick="highfive"] .robo-arm-inner { animation: friends-robo-hand 3.2s both; }
.friends-stage[data-trick="highfive"] .friends-highfive { animation: friends-five-spark 3.2s both; }
@keyframes friends-pip-five { 0%, 100% { transform: none; } 32%, 52% { transform: translate(27px, -12px) rotate(8deg); } 65% { transform: translate(15px, 0) rotate(-5deg); } }
@keyframes friends-robo-five { 0%, 100% { transform: none; } 32%, 52% { transform: translate(-27px, -12px) rotate(-8deg); } 65% { transform: translate(-15px, 0) rotate(5deg); } }
@keyframes friends-pip-hand { 0%, 100% { transform: none; } 27%, 58% { transform: rotate(-100deg); } }
@keyframes friends-robo-hand { 0%, 100% { transform: none; } 27%, 58% { transform: rotate(75deg); } }
@keyframes friends-five-spark { 0%, 29%, 75%, 100% { opacity: 0; transform: scale(.2); } 37%, 50% { opacity: 1; transform: scale(1.2) rotate(20deg); } }

.friends-stage[data-trick="sneeze"] .pip-puppet { animation: friends-sneeze 3.6s both; }
.friends-stage[data-trick="sneeze"] .robo-puppet { animation: friends-startle 3.6s both; }
.friends-stage[data-trick="sneeze"] .friends-burst i { animation: friends-confetti 3.6s ease-out both; }
@keyframes friends-sneeze {
  0%, 100% { transform: none; }
  16% { transform: rotate(-6deg) scale(1, 1.05); }
  26% { transform: rotate(-10deg) scale(1, 1.07); }
  34% { transform: translate(7px, 4px) rotate(12deg) scale(1.08, .85); }
  46% { transform: rotate(-4deg); }
  65%, 78% { transform: rotate(2deg); }
}
@keyframes friends-startle { 0%, 30%, 100% { transform: none; } 41% { transform: translate(12px, -22px) rotate(12deg); } 55% { transform: translate(8px, 0) rotate(-6deg); } 68% { transform: translate(4px, -5px) rotate(4deg); } }
@keyframes friends-confetti {
  0%, 31% { opacity: 0; transform: translate(-28px, 15px) scale(.1); }
  35% { opacity: 1; }
  70% { opacity: 1; transform: translate(var(--burst-x), var(--burst-y)) rotate(120deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--burst-x), calc(var(--burst-y) + 28px)) rotate(180deg) scale(.5); }
}

.friends-stage[data-trick="dance"] .pip-puppet { animation: friends-robot-dance .55s steps(2, end) 8; }
.friends-stage[data-trick="dance"] .robo-puppet { animation: friends-wiggle .55s ease-in-out 8; }
.friends-stage[data-trick="dance"] .pip-arm-inner { animation: friends-arm-dance .55s steps(2, end) 8; }
.friends-stage[data-trick="dance"] .robo-arm-outer { animation: friends-arm-dance .55s ease-in-out reverse 8; }
.friends-stage[data-trick="dance"] .robo-head { animation: friends-head-bop .55s ease-in-out 8; }
@keyframes friends-robot-dance { 0%, 100% { transform: translateX(-5px) rotate(-9deg); } 50% { transform: translate(5px, -7px) rotate(9deg); } }
@keyframes friends-wiggle { 0%, 100% { transform: rotate(8deg) scale(1.03, .97); } 50% { transform: translateY(-9px) rotate(-8deg) scale(.97, 1.03); } }
@keyframes friends-arm-dance { 0%, 100% { transform: rotate(-65deg); } 50% { transform: rotate(25deg); } }
@keyframes friends-head-bop { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

.friends-stage[data-trick="float"] .robo-puppet { animation: friends-levitate 4.2s ease-in-out both; }
.friends-stage[data-trick="float"] .pip-puppet { animation: friends-look-up 4.2s ease-in-out both; }
.friends-stage[data-trick="float"] .robo-arm-inner, .friends-stage[data-trick="float"] .robo-arm-outer { animation: friends-flail .35s ease-in-out 12; }
.friends-stage[data-trick="float"] .robo-heart { fill: #fff2bb; }
@keyframes friends-levitate { 0%, 100% { transform: none; } 20% { transform: translateY(-28px) rotate(-9deg); } 40% { transform: translateY(-37px) rotate(12deg); } 60% { transform: translateY(-31px) rotate(-9deg); } 82% { transform: translateY(3px) scale(1.06, .92); } }
@keyframes friends-look-up { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-9deg); } 74% { transform: translateY(-13px) rotate(5deg); } 85% { transform: scale(1.04, .96); } }
@keyframes friends-flail { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(35deg); } }

/* A single switch freezes every layer, including the ambient star and blinking. */
.friends-stage[data-running="false"] *, .friends-stage[data-running="false"] *::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .friends-stage *, .friends-stage *::before { animation: none !important; }
  .friends-stage .friends-star { transform: translateY(12px); }
}
@media (max-width: 600px) {
  .footer-friends { margin-top: 8px; }
}