.shared-play-launch {
  --shared-blue: #609ed1;
  left: auto;
  right: 20px;
  bottom: 211px;
  width: auto;
  height: 46px;
  opacity: 1;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 7px;
  border: 1px solid #d9c4a7;
  border-radius: 24px;
  background: #fffaf0ed;
  color: #624b35;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 3px 9px #60422418;
  cursor: pointer;
  z-index: 7;
}
.shared-play-launch::before, .shared-play-ball {
  content: '';
  width: 30px;
  height: 30px;
  border: 1px solid #547da0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, #d1e6f7 0 7%, transparent 24%), linear-gradient(112deg, #7db3dc 0 43%, #d9e5df 44% 52%, #5d95c6 53%);
  box-shadow: inset -3px -5px 4px #37618c35, 0 3px 3px #664c2626;
}
.shared-play-panel {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 172px;
  transform: translateX(-50%);
  width: min(390px, calc(100% - 28px));
  padding: 9px 12px;
  border: 1px solid #decaad;
  border-radius: 14px;
  color: #614b35;
  background: #fffaf0f5;
  box-shadow: 0 4px 14px #65431d18;
}
.shared-play-panel p { margin: 0; font-size: 13px; line-height: 1.5; text-align: center; }
.shared-play-controls { display: flex; justify-content: center; gap: 8px; margin-top: 7px; }
.shared-play-controls button { min-height: 44px; border: 1px solid #cbb08c; border-radius: 10px; background: #f4e6ce; color: #62472f; font: inherit; font-size: 12px; padding: 6px 11px; cursor: pointer; }
.shared-play-controls button:disabled { opacity: .55; cursor: default; }
.shared-play-controls .shared-play-stop { border-color: transparent; background: transparent; }
.shared-play-floor { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: calc(var(--shared-play-ground, 292px) - 35px); height: 78px; border: 1px dashed #8aa7b875; border-radius: 50%; background: #eef6fa0d; cursor: pointer; }
.shared-play-floor:disabled { border-color: transparent; cursor: default; }
.shared-play-ball { pointer-events: none; position: absolute; z-index: 4; left: var(--shared-ball-x, 50%); bottom: var(--shared-play-ground, 292px); width: var(--shared-ball-size, 36px); height: var(--shared-ball-size, 36px); transform: translateX(-50%) rotate(var(--shared-ball-roll, 0deg)); transition: left 1s cubic-bezier(.16,.84,.2,1), transform 1s ease-out; }
.shared-play-launch:focus-visible, .shared-play-floor:focus-visible, .shared-play-controls button:focus-visible { outline: 3px solid #5284a7; outline-offset: 3px; }
.shared-play-launch[hidden], .shared-play-panel[hidden], .shared-play-floor[hidden], .shared-play-ball[hidden], .shared-play-controls button[hidden] { display: none; }
.app[data-entry-ready="false"] .shared-play-launch { pointer-events: none; opacity: .6; }
@media (max-width: 860px) {
  /* The care chooser belongs to the dock at z-index 6. Keep its targets
     above the nearby launcher, including the lower companion choice. */
  .shared-play-launch { bottom: 145px; right: 12px; max-width: calc(100% - 24px); z-index: 5; }
  /* Keep the play controls above the pets so a second line of instructions
     cannot cover the ball or the floor touch target on a narrow screen. */
  .shared-play-panel { top: 86px; bottom: auto; padding: 8px 10px; }
  .room:has(.shared-play-panel:not([hidden])) .living-moment-badge { visibility: hidden; }
  .shared-play-panel p { font-size: 12px; }
  .shared-play-controls { gap: 5px; }
  .shared-play-controls button { min-height: 44px; padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .shared-play-ball { transition: none; }
  .shared-play-floor { background: transparent; }
}

.shared-play-panel[data-phase=complete], .shared-play-panel[data-phase=watch-end], .shared-play-panel[data-phase=cancelled], .shared-play-panel[data-phase=message] { pointer-events: none; }