/* anchors: invisible drag targets, positioned explicitly so hit-testing
   coordinates stay predictable regardless of flex flow */
.anchor {
  position: absolute;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.anchor-eye { top: 40%; }
#anchor-OD, #cq-anchor-OD { left: 25%; }
#anchor-OS, #cq-anchor-OS { left: 75%; }
#anchor-dock, #cq-anchor-dock,
#anchor-cover, #cq-anchor-cover,
#anchor-krimsky-dock, #cq-anchor-krimsky-dock,
#anchor-target-dock, #cq-anchor-target-dock {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: 0;
  transform: translate(-50%, -50%);
}

/* ═══════════════════════════════════════════════════════════
   Cover Paddle — Professional Medical Occluder
   Size: 160×160 px (upgraded from 140px for a more substantial,
   professional-instrument feel)
   Effect: semi-transparent dark glass with subtle rim highlight
   ═══════════════════════════════════════════════════════════ */
.cover-paddle {
  position: absolute;
  width: 160px;
  height: 160px;

  /* Layered gradients: dark core → translucent edge → glass sheen */
  background:
    /* Top-left specular highlight — simulates light hitting the occluder */
    radial-gradient(
      ellipse 55% 40% at 32% 28%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 70%
    ),
    /* Core body — deep charcoal with slight transparency */
    radial-gradient(
      circle at 50% 45%,
      rgba(38, 38, 42, 0.92) 0%,
      rgba(22, 22, 26, 0.96) 55%,
      rgba(10, 10, 14, 0.90) 100%
    );

  border-radius: 50%;

  /* Inner rim: thin bright ring for depth, outer ring: dark halo */
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  outline: 2px solid rgba(0, 0, 0, 0.55);
  outline-offset: 1px;

  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  z-index: 100;
  left: 0;
  top: 0;
  transform-origin: center;

  /* Layered shadows: ambient depth + diffuse glow */
  box-shadow:
    0  2px  4px  rgba(0, 0, 0, 0.25),
    0  8px  20px rgba(0, 0, 0, 0.45),
    0 18px  40px rgba(0, 0, 0, 0.30),
    inset 0 1px 2px rgba(255, 255, 255, 0.06);

  transition:
    transform   0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity     0.25s ease,
    box-shadow  0.25s ease;

  opacity: 0.8;
  transform: scale(0.48); /* initial docked scale */

  /* Subtle backdrop blur for glass depth (where browser supports it) */
  backdrop-filter: blur(2px) saturate(0.6);
  -webkit-backdrop-filter: blur(2px) saturate(0.6);
}

/* ── Touch hit-expansion zone (invisible, extends pointer area) ── */
.cover-paddle::before {
  content: '';
  position: absolute;
  top:    -18px;
  left:   -18px;
  right:  -18px;
  bottom: -18px;
  border-radius: 50%;
  pointer-events: auto;
}

/* ── Active drag state ── */
.cover-paddle.dragging {
  cursor: grabbing;
  box-shadow:
    0  4px  8px  rgba(0, 0, 0, 0.30),
    0 14px  35px rgba(0, 0, 0, 0.55),
    0 24px  50px rgba(0, 0, 0, 0.35),
    inset 0 1px 3px rgba(255, 255, 255, 0.08);
  opacity: 0.88;
}

/* ── Handle: tapered stick below the disc ── */
.cover-paddle::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 115px;
  /* Metallic gradient — light edge left, shadow right */
  background: linear-gradient(
    to right,
    rgba(90, 90, 95, 0.95)  0%,
    rgba(50, 50, 55, 0.98) 40%,
    rgba(20, 20, 24, 0.98) 100%
  );
  border-radius: 7px;
  bottom: -106px;
  /* Centre under the 160px disc: (160 - 14) / 2 = 73px */
  left: 73px;
  z-index: -1;
  box-shadow:
    inset -2px -3px 6px rgba(0, 0, 0, 0.55),
    1px 3px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 640px) {
  .cover-paddle::after {
    height: 85px;
    bottom: -77px;
  }
}