/* Punch overlay (MIT) */
#punchOverlay{
  position:fixed;inset:0;pointer-events:none;z-index:9999;display:none;
}
#punchOverlay.active{display:block;}

/* Full-body animal container */
.punch-animal{
  position:absolute;width:300px;height:300px;
  will-change:transform,left,top;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));
}
.punch-animal svg{width:100%;height:100%;}

/* Mobile responsive sizing - reasonable */
@media (max-width: 767px) {
  .punch-animal{
    width:110px !important;height:110px !important;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));
  }
}

/* Overlay boxing glove (animated extension) */
.punch-glove{
  position:absolute;width:140px;height:140px;
  /* pivot near cuff so the fist extends out from the forearm */
  transform-origin:85% 55%;
  will-change:transform,left,top;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));
}
.punch-glove svg{width:100%;height:100%;}

/* Mobile responsive sizing - reasonable */
@media (max-width: 767px) {
  .punch-glove{
    width:65px !important;height:65px !important;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));
  }
}

/* Impact ring */
.punch-impact{
  position:absolute;width:12px;height:12px;border:2px solid rgba(255,255,255,.95);
  border-radius:9999px;opacity:0;transform:translate(-50%,-50%) scale(.2);
}
.punch-impact.show{animation:punchImpact .6s ease-out forwards;}
@keyframes punchImpact{
  from{opacity:.9;transform:translate(-50%,-50%) scale(.2);}
  to{opacity:0;transform:translate(-50%,-50%) scale(14);}
}

/* POW text */
.punch-sfx{
  position:absolute;left:0;top:0;pointer-events:none;
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-weight:900;font-size:34px;letter-spacing:1px;
  color:#fef08a;-webkit-text-stroke:3px #111827;text-shadow:0 0 18px rgba(250,204,21,.55);
  opacity:0;transform:translate(-50%,-50%) scale(.2);
}
.punch-sfx.show{animation:punchPow .5s ease-out forwards;}
@keyframes punchPow{
  0%  {opacity:0; transform:translate(-50%,-50%) scale(.2);}
  25% {opacity:1;}
  100%{opacity:0; transform:translate(-50%,-75%) scale(1.4);}
}

/* Mobile responsive sizing */
@media (max-width: 767px) {
  .punch-sfx{
    font-size:24px;
    -webkit-text-stroke:2px #111827;
  }
}

/* Number shake */
.hit-shake{animation:hitShake .5s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes hitShake{
  10%,90%{transform:translate3d(-1px,0,0);}
  20%,80%{transform:translate3d(2px,0,0);}
  30%,50%,70%{transform:translate3d(-4px,0,0);}
  40%,60%{transform:translate3d(4px,0,0);}
}

/* Label above the animal */
.punch-label{
  position:absolute;
  left:0; top:0;
  /* Center horizontally; no vertical lift here—JS sets exact top for precise placement */
  transform:translate(-50%, 0);
  pointer-events:none;
  padding:4px 10px;
  border-radius:9999px;
  background:rgba(15,23,42,.75); /* slate-900, 75% */
  color:#fff;
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
  display:none; /* shown when used */
  will-change:left,top;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .punch-animal,.punch-glove,.punch-impact,.punch-sfx,.hit-shake{
    animation:none!important;transition:none!important;
  }
}

/* --- Punch label: playful, on-brand pill --- */
/* Static label pill: on-brand, no animations */
.punch-label{
  position:absolute;
  left:0; top:0;
  transform:translate(-50%, 0);   /* we set exact top in JS; keep horizontally centered */
  pointer-events:none;

  /* Look & feel (glass + emerald ring to match your site) */
  padding:6px 14px;
  border-radius:9999px;
  background:linear-gradient(135deg, rgba(15,23,42,.85), rgba(15,23,42,.70)); /* slate glass */
  backdrop-filter:blur(10px);
  border:1px solid rgba(52,211,153,.35);
  box-shadow:0 8px 20px rgba(0,0,0,.35), 0 0 30px rgba(16,185,129,.18);

  /* Type */
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#ffffff;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  font-size: clamp(16px, 2.2vw, 22px);
  line-height:1;

  display:none;           /* shown by JS during punch */
  will-change:left,top;   /* no transform animations */
}


/* Pop-in animation when it appears */
.punch-label--show{
  display:block;
  animation: punchLabelPop .35s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes punchLabelPop{
  0%   { opacity:0; transform:translate(-50%, 8px) scale(.92); }
  60%  { opacity:1; transform:translate(-50%, -2px) scale(1.04); }
  100% { opacity:1; transform:translate(-50%, 0)    scale(1.00); }
}

/* Optional: tiny bounce when the glove hits */
.punch-label--impact{
  animation: punchLabelImpact .28s cubic-bezier(.36,.07,.19,.97);
}
@keyframes punchLabelImpact{
  0%   { transform:translate(-50%, 0) scale(1.00); }
  40%  { transform:translate(-50%, -3px) scale(1.06); }
  100% { transform:translate(-50%, 0) scale(1.00); }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .punch-label--show,
  .punch-label--impact{
    animation:none!important;
  }
}