/* ═══════════════════════════════════════════════════════════════
   PIXEL MILESTONE — Normie Editor
   Replaces confetti with a pixel-native GIF milestone animation.
   ═══════════════════════════════════════════════════════════════ */

.pm-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  pointer-events:none;
  overflow:hidden;
}

.pm-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* Center count display */
.pm-count{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  animation:pmCountIn .6s cubic-bezier(.17,.89,.32,1.28) .15s forwards;
}
.pm-count__number{
  display:block;
  font-family:"Press Start 2P",monospace;
  font-size:clamp(36px,9vw,72px);
  letter-spacing:3px;
  line-height:1;
  color:#fff;
  text-shadow:
    0 0 20px rgba(255,215,0,.6),
    0 0 40px rgba(255,180,0,.3),
    0 4px 0 rgba(0,0,0,.4);
}
.pm-count__label{
  display:block;
  font-family:"Press Start 2P",monospace;
  font-size:clamp(8px,2.2vw,14px);
  letter-spacing:6px;
  text-transform:uppercase;
  margin-top:8px;
  color:rgba(255,255,255,.7);
  text-shadow:0 2px 0 rgba(0,0,0,.3);
}

@keyframes pmCountIn{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0); }
  60%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* Fade out the whole overlay */
.pm-overlay.is-leaving .pm-count{
  animation:pmCountOut .4s ease-in forwards;
}
@keyframes pmCountOut{
  to{ opacity:0; transform:translate(-50%,-50%) scale(.5); }
}