/* Standard Game UI v1.1: tap-hint.css. SHPTapHint, the shared "tap the art" glow pulse and drawn tap hand (Polyrhythm
   tap-to-check, Portal PLAY over the art). Every rule is scoped under .shp-tap-; colours come from tokens.css (load it first)
   through --shp-tap-color (set per hint by tap-hint.js from a token name). Nodes never take pointer events. */
.shp-tap-glow { --shp-tap-color: var(--sgu-white); position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0;
  border-radius: var(--sgu-radius-l, 16px); pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--shp-tap-color) 30%, transparent), 0 0 26px 8px color-mix(in srgb, var(--shp-tap-color) 20%, transparent),
    inset 0 0 34px 8px color-mix(in srgb, var(--shp-tap-color) 12%, transparent); }
.shp-tap-glow.is-round { border-radius: 50%; }
.shp-tap-glow.is-on { visibility: visible; animation: shp-tap-pulse 2.6s ease-in-out infinite; }
.shp-tap-hand { --shp-tap-color: var(--sgu-white); position: absolute; z-index: 4; left: 0; top: 0; width: 56px; height: 56px;
  pointer-events: none; display: none; filter: drop-shadow(0 2px 5px var(--sgu-black)); }
.shp-tap-hand.is-on { display: block; animation: shp-tap-tap 1.8s ease-in-out infinite; }
.shp-tap-hand svg { display: block; width: 100%; height: 100%; overflow: visible; }
.shp-tap-palm { fill: var(--sgu-gray-100); stroke: var(--sgu-black); stroke-width: 2.6; stroke-linejoin: round; }
.shp-tap-crease { fill: none; stroke: color-mix(in srgb, var(--sgu-gray-500) 70%, var(--sgu-black)); stroke-width: 1.8; stroke-linecap: round; }
.shp-tap-ring { fill: none; stroke: var(--shp-tap-color); stroke-width: 2.4; opacity: 0; transform-origin: 32px 10px; }
.shp-tap-hand.is-on .shp-tap-ring { animation: shp-tap-ring 1.8s ease-out infinite; }
@keyframes shp-tap-pulse { 0%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.985); } 50% { opacity: .9; transform: translate(-50%, -50%) scale(1.015); } }
@keyframes shp-tap-tap { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-3px, -7px); } 50% { transform: translate(0, 0) scale(.94); } }
@keyframes shp-tap-ring { 0%, 45% { opacity: 0; transform: scale(.4); } 55% { opacity: .95; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
.shp-tap-glow.is-on.is-still { animation: none; opacity: .6; }
.shp-tap-hand.is-on.is-still, .shp-tap-hand.is-on.is-still .shp-tap-ring { animation: none; }
.shp-tap-hand.is-on.is-still .shp-tap-ring { opacity: .7; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .shp-tap-glow.is-on { animation: none; opacity: .6; }
  .shp-tap-hand.is-on, .shp-tap-hand.is-on .shp-tap-ring { animation: none; }
  .shp-tap-hand.is-on .shp-tap-ring { opacity: .7; transform: scale(1); }
}