/* Tap sparkle — a very small tile that pops where the screen is touched,
   in the spirit of Tiles Hop. Gold and green (system colours), transform and
   opacity only, click-through, off for reduced motion. */
.vk-tap{
  position:fixed; left:0; top:0; width:0; height:0;
  z-index:2147483000; pointer-events:none; contain:layout style;
}
.vk-tap-tile, .vk-tap-ring{
  position:absolute; left:0; top:0; border-radius:3px;
  transform-origin:center; will-change:transform, opacity;
}
.vk-tap-tile{
  width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  background:linear-gradient(135deg,#f0cf6b 0%,#e0b84f 48%,#3fbf86 52%,#2fa36b 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 1px 4px rgba(0,0,0,.28), 0 0 6px rgba(224,184,79,.5);
  transform:rotate(45deg) scale(.35); opacity:0;
  animation:vk-tap-tile .42s cubic-bezier(.2,.8,.2,1) forwards;
}
.vk-tap-ring{
  width:19px; height:19px; margin:-9.5px 0 0 -9.5px;
  border:1.5px solid #3fbf86; border-radius:5px;
  box-shadow:0 0 4px rgba(63,191,134,.5);
  transform:rotate(45deg) scale(.4); opacity:0;
  animation:vk-tap-ring .5s cubic-bezier(.15,.7,.25,1) forwards;
}
@keyframes vk-tap-tile{
  0%  { transform:rotate(45deg) scale(.35); opacity:0; }
  25% { transform:rotate(45deg) scale(1.1); opacity:1; }
  100%{ transform:rotate(45deg) scale(.8) translate(-2px,-2px); opacity:0; }
}
@keyframes vk-tap-ring{
  0%  { transform:rotate(45deg) scale(.4); opacity:.9; }
  100%{ transform:rotate(45deg) scale(1.35); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .vk-tap{ display:none; } }