/* ===========================================================================
   board-lift — angehobene Figur beim Ziehen (render/drag-lift.js)
   Die Figur hebt sich vom Brett: etwas groesser, Schatten bleibt am Boden,
   leichtes Pendeln in Zugrichtung. Ueber einem erlaubten Zielfeld liegt am
   Fuss ein Landering in der Farbsprache des Bretts: Gold = Zug, Rot = Schlag.
   Figur, Schatten und Ring liegen auf einer eigenen Ebene ueber dem Brett;
   die Bewegung rechnet drag-lift.js (Federn), hier stehen nur die Looks.
   =========================================================================== */

.mpLift {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}
.mpLift > * {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Figur: Drehpunkt am Kopf, so pendelt der Fuss hinterher. */
.mpLift-piece {
  transform-origin: 50% 24%;
}
.mpLift-piece .pieceAsset {
  filter:
    drop-shadow(0 3px 3px rgba(0, 0, 0, .45))
    brightness(1.06);
}

/* Bodenschatten: bleibt beim Anheben auf dem Brett zurueck. */
.mpLift-shadow {
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(0, 0, 0, .85), rgba(0, 0, 0, .42) 55%, transparent);
  opacity: 0;
}

/* Landering am Fuss des Zielfelds (Geometrie wie der Effekt-Ring, main-15). */
.mpLift-ring {
  --lift-ring-rgb: 236, 200, 110;
  border-radius: 50%;
  border: 2px solid rgba(var(--lift-ring-rgb), .95);
  border-top-color: rgba(var(--lift-ring-rgb), .28);
  background: radial-gradient(ellipse at center,
    rgba(var(--lift-ring-rgb), .22) 0%, rgba(var(--lift-ring-rgb), .06) 55%, transparent 72%);
  box-shadow: 0 2px 12px -2px rgba(var(--lift-ring-rgb), .8);
  opacity: 0;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

/* Waehrend die Figur in der Hand ist: greifende Hand ueberall. */
html.mp-pieceLifted,
html.mp-pieceLifted * {
  cursor: var(--mp-cur-grabbing) !important;
}

/* Zielfeld unter der Hand: der Landering ersetzt Zielpunkt und Kastenrahmen
   (main-02 .dragOverAllowed). Schlagziele behalten ihr rotes Fadenkreuz. */
#board .sq.dragOverAllowed:not(.dragCaptureTarget)::after {
  content: none;
}

/* Vorgegriffen, der Gegner ist noch dran (board-drag.js): Zielpunkte nur
   leise und ohne Pulsieren, der Landering ohne Leuchten. Ist man dran,
   ploppen die Punkte auf und der Ring leuchtet einmal kurz auf. */
html.mp-liftWaiting #board .sq.dragMoveTarget::after,
html.mp-liftWaiting #board .sq.dragCaptureTarget::after {
  opacity: .42;
  animation: none;
}
.mpLift.is-waiting .mpLift-ring {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .mpLift-ring { transition: none; }
}