.visible-ghost-rider.uses-runner-sprite {
  width: 72px;
  height: 1px;
  min-width: 72px;
  max-width: 72px;
  transform-origin: 50% 0;
  transition: opacity 180ms linear;
  filter: none;
}

.runner-sprite-shell {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 72px;
  height: 144px;
  transform: translateY(var(--runner-ground-offset, 0px));
  transition: none;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.5));
}

.runner-sprite-crop,
.runner-sprite-view,
.runner-sprite-layer {
  position: absolute;
  inset: 0;
  width: 72px;
  height: 144px;
}

.runner-sprite-shirt-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--runner-shirt-color, var(--runner-primary));
  mix-blend-mode: multiply;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  -webkit-mask-position: var(--runner-frame-x, 0) var(--runner-frame-y, 0);
  mask-position: var(--runner-frame-x, 0) var(--runner-frame-y, 0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--racer-atlas-width, 576px) var(--racer-atlas-height, 576px);
  mask-size: var(--racer-atlas-width, 576px) var(--racer-atlas-height, 576px);
}

.runner-sprite-crop {
  overflow: hidden;
  transform: scale(var(--runner-visual-scale, 1));
  transform-origin: 50% 100%;
  transition: none;
}

/* Keep the existing behind-you lifetime for the callout, but the athlete
   itself is no longer physically in front of the viewer. */
.visible-ghost-rider.uses-runner-sprite.is-behind .runner-sprite-crop {
  visibility: hidden;
}

/* A behind racer keeps only its callout. Remove the close-runner artwork
   geometry so the hidden, oversized sprite cannot lift the callout upward. */
.visible-ghost-rider.uses-runner-sprite.is-behind .runner-sprite-shell {
  height: 0;
  transform: none;
  --runner-ground-offset: 0px;
  --runner-label-lift: 0px;
  --runner-callout-line-length: 17px;
}

.visible-ghost-rider.uses-runner-sprite.is-behind .runner-sprite-label {
  top: -4px;
  transform: translate(-50%, -100%);
  transition: none;
}

.runner-near-floor .runner-sprite-crop {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 87%, transparent 100%);
}

.runner-is-mirrored .runner-sprite-view {
  transform: scaleX(-1);
}

.runner-sprite-layer {
  background-position: var(--runner-frame-x, 0) var(--runner-frame-y, 0);
  background-repeat: no-repeat;
  background-size: var(--racer-atlas-width, 576px) var(--racer-atlas-height, 576px);
}

.runner-sprite-primary,
.runner-sprite-accent {
  background: var(--runner-primary);
  mix-blend-mode: color;
  -webkit-mask-position: var(--runner-frame-x, 0) var(--runner-frame-y, 0);
  mask-position: var(--runner-frame-x, 0) var(--runner-frame-y, 0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  -webkit-mask-size: var(--racer-atlas-width, 576px) var(--racer-atlas-height, 576px);
  mask-size: var(--racer-atlas-width, 576px) var(--racer-atlas-height, 576px);
}

.runner-sprite-accent {
  background: var(--runner-accent);
}

.runner-sprite-label {
  position: absolute;
  z-index: 2;
  top: calc(-4px - var(--runner-label-lift, 0px));
  left: 50%;
  display: flex;
  box-sizing: border-box;
  width: 164px;
  min-width: 164px;
  max-width: 164px;
  min-height: 39px;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(var(--runner-label-scale, 1));
  transition: none;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 7px;
  background: rgba(5, 9, 16, 0.78);
  color: #fff;
  font-family: Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.runner-callout-hidden .runner-sprite-label {
  display: none;
}

.runner-sprite-label::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: var(--runner-callout-line-length, 17px);
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.35));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.runner-sprite-label::after {
  content: '';
  position: absolute;
  top: calc(100% + var(--runner-callout-line-length, 17px) - 2px);
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(5, 9, 16, 0.88);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.uses-runner-sprite .visible-ghost-name {
  width: 148px;
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.uses-runner-sprite .visible-ghost-meta {
  width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .uses-runner-sprite {
    --runner-frame-x: 0px;
    --runner-frame-y: 0px;
  }
}