.play-action-stack > .captain-button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.captain-button img { display: block; width: 36px; height: 36px; object-fit: contain; }
html body .site.studio-player:not(.record-mode) .stage-shell .play-action-stack > .captain-button { width: 44px !important; padding: 4px !important; border-radius: 50%; }
html body .site.studio-player:not(.record-mode) .stage-shell .play-action-stack > .captain-button img { width: 36px; height: 36px; flex-basis: 36px; image-rendering: auto; border-radius: 50%; }
html body .site.studio-player:not(.record-mode) .stage-shell .play-action-stack > .captain-button:is(:hover, :active, :focus) { background: transparent !important; }
.captain-button:hover img { filter: brightness(1.08); }
.captain-button[aria-pressed="true"] img { outline: 2px solid #4dd2c8; outline-offset: 1px; }
.captain-button:disabled { opacity: .65; cursor: default; }
/* One small hop per five seconds, starting five seconds after clean playback.
   The runtime gate honors quiet/serious/recording states and motion preferences;
   only an explicit loopback movement review may opt into system-reduced motion. */
.play-action-stack > .captain-button[data-reminder="true"] img {
  animation: captain-invite-bounce 5s ease-in-out 5s infinite;
  animation-duration: 5s !important;
  animation-iteration-count: infinite !important;
}
.play-action-stack > .captain-button[data-reminder="true"]:is(:hover, :focus-visible) img,
body:has(dialog[open]) .captain-button[data-reminder="true"] img { animation-name: none; }
@keyframes captain-invite-bounce {
  0%, 12%, 100% { transform: translateY(0); }
  5% { transform: translateY(-5px); }
}
html body .site.studio-player:not(.record-mode) .stage-shell .play-action-stack > .captain-button:focus-visible { outline: 2px solid #f8ca4b; outline-offset: 2px; }
.studio-control-deck > .captain-cameo { display: contents; }
.captain-cameo-destination { position: absolute; pointer-events: none; left: 50%; top: 48%; width: clamp(150px, 28%, 300px); height: min(340px, 70%); transform: translate(-50%, -50%); }
.captain-cameo-art { display: grid; place-items: center; width: 100%; height: 100%; }
.captain-cameo-art img, .captain-cameo-art canvas { max-width: 100%; width: 100%; height: 100%; object-fit: contain; }
.captain-cameo-art canvas[hidden] { display: none; }
/* Only the decorative actor escapes stage clipping. It never intercepts a
   page control or enlarges the document's scrollable area. */
.captain-flight-layer { position: fixed; z-index: 80; pointer-events: none; user-select: none; will-change: transform; }
.captain-flight-layer .captain-cameo-art[data-phase="preparing"], .captain-cameo-destination .captain-cameo-art[data-phase="preparing"] { visibility: hidden; }
/* This layer exists only when movement is enabled. Honor the explicit local
   review/viewer opt-in even when the site's broad system reset is present. */
.captain-flight-layer .captain-cameo-art:is([data-phase="speaking"], [data-phase="holding"], [data-phase="exiting"]) { animation: captain-hover 3400ms ease-in-out infinite; animation-duration: 3400ms !important; animation-iteration-count: infinite !important; }
.captain-flight-layer .captain-cameo-art[data-phase="exiting"] { animation-play-state: paused; }
@keyframes captain-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--captain-hover-lift, -8px)); } }
.captain-emblem { display: grid; place-items: center; width: 75px; height: 75px; border-radius: 50%; color: #102331; background: #f1cf75; font: 900 55px/1 Georgia, serif; }
@media (max-width: 480px) {
  .captain-flight-layer { --captain-hover-lift: -6px; }
  .captain-cameo-destination { width: clamp(130px, 43%, 180px); height: min(220px, 72%); top: 50%; }
}

.episode-utility-actions > [data-episode-captain] { display: contents; }
.episode-captain-button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.episode-captain-button:focus-visible { outline: 3px solid #31506d; outline-offset: 4px; }
.episode-captain-button img { border-radius: 50%; }
.episode-captain-stage {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(160px, 30vw, 280px);
  height: min(350px, 50dvh);
  z-index: 80;
  pointer-events: none;
}
.episode-captain-stage .captain-cameo-destination { width: 100%; height: 100%; top: 50%; }
.episode-captain-caption {
  position: fixed;
  z-index: 81;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(700px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 16px 20px;
  background: #142b3f;
  color: #fff0ca;
  border-left: 4px solid #4dd2c8;
  font: 17px/1.55 "Trebuchet MS", "Segoe UI", sans-serif;
  pointer-events: none;
}
.episode-captain-caption small { display: block; margin-bottom: 6px; color: #4dd2c8; font-size: 12px; font-weight: 700; }
.episode-captain-caption .caption-line { margin: 0; min-height: 3.1em; }
.episode-captain-caption .caption-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 480px) {
  .episode-captain-caption { font-size: 16px; padding: 12px 16px; }
}