.playmate {
  --playmate-safe-top: env(safe-area-inset-top, 0px);
  --playmate-safe-bottom: env(safe-area-inset-bottom, 0px);
  --playmate-safe-left: env(safe-area-inset-left, 0px);
  --playmate-safe-right: env(safe-area-inset-right, 0px);
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(80px, env(safe-area-inset-bottom));
  z-index: 90;
  width: 220px;
  pointer-events: none;
}

.playmate[hidden] { display: none; }

.playmate-stage {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

.playmate-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.playmate.is-dragging .playmate-stage,
.playmate.is-dragging .playmate-toggle { cursor: grabbing; }
.playmate-stage:focus-visible, .playmate-toggle:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 3px;
  border-radius: 12px;
}

.playmate-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #fffffff0;
  color: #64748b;
  font: 20px/1 system-ui, sans-serif;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.playmate-ball-position { transform: translate(147px, 150px); }
.playmate-kick-leg { transform-origin: 105px 132px; }
.playmate-front-arm { transform-origin: 111px 101px; }
.playmate-head { transform-origin: 95px 95px; }
.playmate-eyes { transform-origin: 98px 70px; }
.playmate-orange, .playmate-brand, .playmate-sparkles { opacity: 0; }

/* 一轮结束后停留在品牌姿态，不循环打扰阅读。 */
.playmate.is-playing .playmate-child { animation: playmate-bounce 9s ease-in-out both; }
.playmate.is-playing .playmate-kick-leg { animation: playmate-kick 9s ease-in-out both; }
.playmate.is-playing .playmate-front-arm { animation: playmate-wave 9s ease-in-out both; }
.playmate.is-playing .playmate-head { animation: playmate-look 9s ease-in-out both; }
.playmate.is-playing .playmate-eyes { animation: playmate-blink 9s linear both; }
.playmate.is-playing .playmate-ball-position { animation: playmate-ball 9s linear both; }
.playmate.is-playing .playmate-ball-spin { animation: playmate-spin 9s linear both; }
.playmate.is-playing .playmate-orange { animation: playmate-transform 9s ease-in-out both; }
.playmate.is-playing .playmate-sparkles { animation: playmate-sparkle 9s ease-in-out both; }
.playmate.is-playing .playmate-brand { animation: playmate-logo 9s ease-in-out both; }
.playmate.is-paused * { animation-play-state: paused !important; }

@keyframes playmate-bounce {
  0%, 9%, 23%, 36%, 51%, 66%, 100% { transform: translateY(0); }
  15%, 43% { transform: translateY(-3px); }
  74% { transform: translateY(-8px); }
  79% { transform: translateY(0); }
}
@keyframes playmate-kick {
  0%, 9%, 25%, 36%, 54%, 100% { transform: rotate(0); }
  12%, 39% { transform: rotate(22deg); }
  16%, 43% { transform: rotate(-48deg); }
}
@keyframes playmate-wave {
  0%, 65%, 100% { transform: rotate(0); }
  72%, 82% { transform: rotate(-35deg); }
  77%, 87% { transform: rotate(-15deg); }
}
@keyframes playmate-look {
  0%, 32%, 100% { transform: rotate(0); }
  20%, 53% { transform: rotate(7deg); }
  72%, 85% { transform: rotate(-5deg); }
}
@keyframes playmate-blink {
  0%, 6%, 9%, 32%, 35%, 83%, 86%, 100% { transform: scaleY(1); }
  7%, 8%, 33%, 34%, 84%, 85% { transform: scaleY(.12); }
}
@keyframes playmate-ball {
  0%, 15% { transform: translate(147px, 150px); }
  22% { transform: translate(188px, 128px); }
  27% { transform: translate(209px, 150px); }
  32% { transform: translate(178px, 141px); }
  38%, 42% { transform: translate(147px, 150px); }
  50% { transform: translate(194px, 85px); }
  56% { transform: translate(213px, 113px); }
  60% { transform: translate(204px, 150px); }
  65% { transform: translate(194px, 134px); }
  70%, 100% { transform: translate(190px, 150px); }
}
@keyframes playmate-spin {
  0%, 15% { transform: rotate(0); opacity: 1; }
  27% { transform: rotate(190deg); }
  42% { transform: rotate(0); }
  70% { transform: rotate(540deg); opacity: 1; }
  78%, 100% { transform: rotate(570deg); opacity: 0; }
}
@keyframes playmate-transform {
  0%, 70% { opacity: 0; transform: scale(.7); }
  78%, 86% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.85); }
}
@keyframes playmate-sparkle {
  0%, 71%, 85%, 100% { opacity: 0; }
  76%, 80% { opacity: 1; }
}
@keyframes playmate-logo {
  0%, 86% { opacity: 0; }
  96%, 100% { opacity: 1; }
}

.playmate.is-collapsed { width: 36px; height: 36px; }
.playmate.is-collapsed .playmate-stage { display: none; }
.playmate.is-collapsed .playmate-toggle { width: 36px; height: 36px; color: #c2410c; }

@media (max-width: 600px) {
  .playmate { width: 150px; right: max(8px, env(safe-area-inset-right)); bottom: env(safe-area-inset-bottom, 0px); }
}

/* 尊重系统减少动态效果的偏好，保留静态小朋友与 Logo。 */
@media (prefers-reduced-motion: reduce) {
  .playmate.is-playing * { animation: none !important; }
  .playmate-ball-position { opacity: 0; }
  .playmate-brand { opacity: 1; }
}