/* shared tap affordances (js/interact.js) */
#tap-hints { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.tap-hint { position: absolute; transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity .5s, transform .5s;
  display: flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); box-shadow: 0 4px 14px rgba(40, 10, 40, .18);
  font: 600 calc(var(--u, 8px) * 1.5)/1 Fredoka, sans-serif; color: #a8456a; white-space: nowrap; }
.tap-hint.on { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: tapFloat 2.2s ease-in-out infinite; }
.tap-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff7aa8; box-shadow: 0 0 0 0 rgba(255, 122, 168, .6); animation: tapPing 1.6s ease-out infinite; }
@keyframes tapPing { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 168, .6); } 100% { box-shadow: 0 0 0 12px rgba(255, 122, 168, 0); } }
@keyframes tapFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
.tappable { transition: filter .2s; }
.tappable:hover { filter: brightness(1.08) drop-shadow(0 0 6px rgba(255, 230, 170, .8)); }
.tappable:focus-visible { outline: 3px solid #ffd36b; outline-offset: 3px; }
.tap-pop { animation: tapPop .35s ease-out; }
@keyframes tapPop { 40% { transform: scale(.94); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tap-hint.on, .tap-dot, .tap-pop { animation: none; } }