/* A turn emits two local light sources toward its corner, not a full-screen wash. */
.drag-light[data-direction="down-right"]{
  background:radial-gradient(ellipse at 16% 17%,rgba(255,255,255,.88),transparent 47%),radial-gradient(ellipse at 51% 56%,rgba(255,202,74,.76),transparent 67%);
  clip-path:polygon(0 0,48% 0,100% 78%,100% 100%,65% 100%,0 40%);
}
.drag-light[data-direction="up-right"]{
  background:radial-gradient(ellipse at 16% 83%,rgba(255,255,255,.88),transparent 47%),radial-gradient(ellipse at 51% 44%,rgba(255,202,74,.76),transparent 67%);
  clip-path:polygon(0 100%,48% 100%,100% 22%,100% 0,65% 0,0 60%);
}
.drag-preview.gesture-feedback{
  --feedback-rgb:var(--glow-rgb,176 188 202);
  width:min(260px,calc(100vw - 16px));padding:10px 13px;border-radius:10px;
  border-color:rgb(var(--feedback-rgb)/.48);background:#19232ff5;color:#ecf2f8;
  box-shadow:0 5px 20px #0004;
}
.gesture-feedback strong{display:block;font-size:16px;line-height:1.4;color:rgb(var(--feedback-rgb))}
.gesture-feedback small{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:#c7d2de;overflow-wrap:anywhere}
.gesture-meter{display:block;height:3px;margin-top:9px;overflow:hidden;border-radius:3px;background:#8393a333}
.gesture-meter i{display:block;height:100%;border-radius:inherit;background:rgb(var(--feedback-rgb));transition:width .06s linear}
.gesture-feedback[data-state="ready"]{border-color:rgb(var(--feedback-rgb));box-shadow:0 0 0 1px rgb(var(--feedback-rgb)/.2),0 5px 20px #0004}
.gesture-feedback[data-state="blocked"]{--feedback-rgb:176 188 202;border-style:dashed}
.gesture-feedback[data-state="blocked"] .gesture-meter{display:none}
@media(prefers-reduced-motion:reduce){.gesture-meter i{transition:none}}