#score-play-status.is-loading {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

#score-play-status .score-play-spinner {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

#score-play-status .score-play-spinner::before {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: score-play-spin 0.8s linear infinite;
  content: '';
}

.score-play-tooltip {
  position: absolute;
  z-index: 20;
  left: 0;
  bottom: calc(100% + 8px);
  display: none;
  width: max-content;
  max-width: min(240px, calc(100vw - 32px));
  padding: 7px 10px;
  border-radius: 6px;
  background: #1b2433;
  box-shadow: 0 4px 12px rgb(29 36 55 / 20%);
  color: #fff;
  font: 12px/1.4 sans-serif;
  white-space: normal;
  pointer-events: none;
}

.score-play-tooltip.is-visible {
  display: block;
}

.score-play-tooltip::after {
  position: absolute;
  top: 100%;
  left: 6px;
  border: 6px solid transparent;
  border-top-color: #1b2433;
  content: '';
}

/* The desktop score column clips anything above its toolbar. */
#detail-page-navigation .score-play-tooltip {
  top: calc(100% + 8px);
  bottom: auto;
  right: 0;
  left: auto;
}

#detail-page-navigation .score-play-tooltip::after {
  top: auto;
  bottom: 100%;
  right: 6px;
  left: auto;
  border-top-color: transparent;
  border-bottom-color: #1b2433;
}

.score-play-status-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@keyframes score-play-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #score-play-status .score-play-spinner::before {
    animation: none;
  }
}

/* Playback color takes precedence while preserving Search2's match markers. */
:is(#notation, #mobile-notation) :is(g.note, g.chord).score-play-current
  :is(.notehead, .stem, .flag, .dot, .accid),
:is(#notation, #mobile-notation) :is(g.note, g.chord).score-play-current
  :is(.notehead, .stem, .flag, .dot, .accid) * {
  color: #0057ff !important;
  fill: #0057ff !important;
  stroke: #0057ff !important;
}

:is(#notation, #mobile-notation) .score-play-current .notehead,
:is(#notation, #mobile-notation) .score-play-current .notehead * {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #ffbd4a);
}

:is(#notation, #mobile-notation) .score-play-caret {
  fill: #ff6b00;
  stroke: #fff;
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 4px rgb(29 36 55 / 60%));
  pointer-events: none;
}