.tap-finger-cue {
  --tap-delay: 0s;
  --tap-angle: -24deg;
  position: fixed !important;
  z-index: 1200 !important;
  left: var(--tap-left, -100px) !important;
  top: var(--tap-top, -100px) !important;
  width: 50px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0;
  pointer-events: none !important;
  transform-origin: 50% 12%;
  overflow: visible !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)) drop-shadow(0 0 5px rgba(255, 255, 255, .5));
  contain: layout style;
  animation: tap-finger-loop 2.2s var(--tap-delay) cubic-bezier(.22, .72, .28, 1) infinite !important;
}

.tap-finger-glyph {
  position: relative;
  z-index: 2;
  display: block;
  width: var(--tap-hand-size, 42px);
  height: var(--tap-hand-size, 42px);
  font-size: 0;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-weight: 400;
  transform: rotate(var(--tap-angle));
  transform-origin: 50% 18%;
}

.tap-finger-glyph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tap-finger-ripple {
  position: absolute;
  z-index: 1;
  left: 9px;
  top: 0;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(105, 243, 255, .9);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.35);
  box-shadow: 0 0 9px rgba(68, 231, 255, .72);
  animation: tap-finger-ripple 2.2s var(--tap-delay) ease-out infinite !important;
}

.group-tap-finger,
.universe-bean-tap-finger {
  --tap-angle: -27deg;
}

.group-tap-finger:not(.is-visible),
body.has-focus-qr .group-tap-finger,
body.bean-chat-open .group-tap-finger,
body.bean-chat-open .universe-bean-tap-finger {
  display: none !important;
}

@keyframes tap-finger-loop {
  0%, 12%, 100% {
    opacity: 0;
    transform: translate3d(7px, 7px, 0) scale(.82);
  }
  18% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  30% {
    opacity: 1;
    transform: translate3d(-2px, -2px, 0) scale(.88);
  }
  40% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  64% {
    opacity: .96;
    transform: translate3d(0, 0, 0) scale(1);
  }
  78% {
    opacity: 0;
    transform: translate3d(5px, 5px, 0) scale(.88);
  }
}

@keyframes tap-finger-ripple {
  0%, 19%, 100% {
    opacity: 0;
    transform: scale(.35);
  }
  27% {
    opacity: .95;
  }
  48% {
    opacity: 0;
    transform: scale(1.55);
  }
}

.homepage-tap-finger:not(.is-visible) { display:none!important; }
.homepage-drag-label, .homepage-interaction-hint {
  padding: 5px 9px; border: 1px solid rgba(133,225,255,.45); border-radius: 12px;
  background: rgba(8,16,30,.9); color: #e2f7ff; font: 12px/1.4 sans-serif;
  white-space: nowrap; pointer-events: none;
}
.homepage-drag-label { position:absolute; top:40px; left:-42px; }
.homepage-interaction-hint { position:fixed; z-index:2002; }
.homepage-interaction-hint[hidden] { display:none; }
.world-tap-finger .tap-finger-glyph { animation: homepage-drag-sweep 2.8s ease-in-out infinite; }
@keyframes homepage-drag-sweep {
  0%, 25%, 100% { translate:0 0; }
  60%, 75% { translate:20px 0; }
}
.quality-tap-finger { z-index:2001!important; --tap-angle:155deg; }
@media (prefers-reduced-motion:reduce) {
  .homepage-tap-finger.is-visible { animation:none!important;opacity:1; }
  .homepage-tap-finger .tap-finger-ripple { animation:none!important; }
  .world-tap-finger .tap-finger-glyph { animation:none!important; }
}