/* The nisse's punch (public/punch.js): over everything, taps pass through. His red knitted mitten comes up from below,
   winds back, fills the screen as it lands (0.43s), and falls away; a flash, a PANG! burst and a bruise follow. */
.nsp { position: fixed; inset: 0; z-index: 6500; pointer-events: none; overflow: hidden; contain: strict; }
.nsp-fist { position: absolute; left: 50%; top: 50%; width: min(62vw, 330px); aspect-ratio: 220 / 260; margin: calc(min(62vw, 330px) * -0.59) 0 0 calc(min(62vw, 330px) * -0.5);
  transform-origin: 50% 45%; opacity: 0; will-change: transform; animation: nsp-fist 1.15s cubic-bezier(.3, 0, .4, 1) forwards; }
.nsp-fist svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes nsp-fist {
  0%   { opacity: 1; transform: translate(34vw, 70vh) rotate(-24deg) scale(.4); }
  26%  { opacity: 1; transform: translate(16vw, 34vh) rotate(-34deg) scale(.26); animation-timing-function: cubic-bezier(.7, 0, 1, .6); } /* drawn back */
  37.5% { opacity: 1; transform: translate(0, 0) rotate(-6deg) scale(3.4); } /* the hit */
  52%  { opacity: 1; transform: translate(-2vw, 3vh) rotate(-2deg) scale(2.8); }
  100% { opacity: 0; transform: translate(6vw, 120vh) rotate(18deg) scale(2.2); }
}
.nsp-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: nsp-flash .3s .43s ease-out; }
@keyframes nsp-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
/* the black eye: a purple swelling round one eye and a hot flush at the edges, fading out */
.nsp-bruise { position: absolute; inset: 0; opacity: 0; animation: nsp-bruise 2.9s .43s ease-in forwards;
  background: radial-gradient(ellipse 34% 22% at 30% 36%, rgba(58, 22, 74, .78), rgba(96, 30, 80, .45) 55%, transparent 100%),
              radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, rgba(170, 18, 30, .5) 100%); }
@keyframes nsp-bruise { 0% { opacity: 0; } 6% { opacity: 1; } 55% { opacity: .85; } 100% { opacity: 0; } }
.nsp-pow { position: absolute; left: 50%; top: 42%; width: min(78vw, 360px); aspect-ratio: 220 / 160; translate: -50% -50%;
  display: grid; place-items: center; opacity: 0; animation: nsp-pow 2.5s .45s forwards; }
.nsp-pow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nsp-pow b { position: relative; font: 600 min(20vw, 92px)/1 var(--board, "Barlow Condensed", sans-serif); color: #d9262d; letter-spacing: .02em;
  -webkit-text-stroke: 2px #3a0708; paint-order: stroke fill; transform: rotate(-7deg); margin-top: -6%; }
.nsp-pow span { position: absolute; top: 100%; left: 50%; translate: -50% 4px; width: max-content; max-width: 86vw; padding: 7px 12px;
  background: #1f7a45; color: #fff; border-radius: 4px; font: 700 15px/1.25 "Atkinson Hyperlegible", system-ui, sans-serif; text-align: center; }
@keyframes nsp-pow {
  0% { opacity: 1; transform: scale(.2) rotate(-18deg); }
  12% { opacity: 1; transform: scale(1.12) rotate(4deg); }
  20% { opacity: 1; transform: scale(1) rotate(0); }
  24%, 32% { transform: translate(-4px, 2px); } 28%, 36% { transform: translate(4px, -2px); } 40% { transform: none; }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-14px); }
}
/* reduced motion: no flying fist, just the burst and the bruise */
.nsp.still .nsp-fist, .nsp.still .nsp-flash { display: none; }
.nsp.still .nsp-pow { animation: nsp-fade 2.6s .4s forwards; }
.nsp.still .nsp-bruise { animation-duration: 2.6s; }
@keyframes nsp-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }