/* A single, decorative click invitation. The reader remains in control. */
.click-cue-target{position:relative}
.click-cue{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4;display:block!important}
.click-cue[hidden]{display:none!important}
.click-cue-mark{position:absolute;right:8px;bottom:5px;width:34px;height:43px;opacity:0;pointer-events:none}
.click-cue-target[data-click-cue-kind="gauge"] .click-cue-mark{right:22px;top:8px;bottom:auto}
.click-cue-mark svg{position:absolute;inset:0;width:34px;height:43px;overflow:visible;filter:drop-shadow(0 1px 3px #000b);pointer-events:none}
.click-cue-pointer{fill:#f3e8fc;stroke:#24182d;stroke-width:1.6;stroke-linejoin:round}
.click-cue-ring{position:absolute;left:5px;top:4px;width:23px;height:23px;border:1.5px solid #d1a5ed;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.3);box-shadow:0 0 8px #bc7de63b;pointer-events:none}
.click-cue.is-playing .click-cue-mark{animation:click-cue-gesture 2.2s cubic-bezier(.22,.61,.36,1) .18s both}
.click-cue.is-playing .click-cue-ring{animation:click-cue-pulse 2.2s ease-out .18s both}
@keyframes click-cue-gesture{
  0%{opacity:0;transform:translate(8px,9px) rotate(8deg)}
  15%{opacity:1}
  38%,47%{opacity:1;transform:translate(0,0) rotate(0deg)}
  53%{opacity:1;transform:translate(-1px,-1px) scale(.88);transform-origin:5px 4px}
  62%,77%{opacity:1;transform:translate(0,0) scale(1);transform-origin:5px 4px}
  100%{opacity:0;transform:translate(3px,5px) rotate(3deg)}
}
@keyframes click-cue-pulse{
  0%,48%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  53%{opacity:.85;transform:translate(-50%,-50%) scale(.55)}
  76%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}
}
@media(prefers-reduced-motion:reduce){.click-cue{display:none!important}}