/**
 * milestone.css — the one-off "we hit a full version" moment.
 *
 * Shown once per account, ever, for a given version. A celebration that reappears is not a
 * celebration, it is an interruption — so this is keyed to the version and recorded server-side.
 * Pointer-events stay off everywhere except the dismiss button, so it can never trap anyone.
 */

#wcMilestone {
    position: fixed; inset: 0; z-index: 2147483100;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(12,60,30,0.92), rgba(4,10,7,0.96));
    opacity: 0; transition: opacity 0.35s ease;
}
#wcMilestone.on { opacity: 1; }

#wcMilestone .ms-card {
    position: relative; z-index: 2;
    text-align: center; padding: 2rem 1.6rem;
    max-width: 21rem; margin: 0 1.25rem;
    border-radius: 20px;
    background: #0c110f;
    border: 1px solid rgba(74,222,128,0.45);
    box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 60px rgba(74,222,128,0.18);
    transform: translateY(14px) scale(0.97);
    transition: transform 0.4s cubic-bezier(0.2,0.9,0.3,1.1);
}
#wcMilestone.on .ms-card { transform: none; }

#wcMilestone .ms-leaf { font-size: 2.6rem; display: block; margin-bottom: 0.4rem; animation: msPop 0.6s ease-out both; }
#wcMilestone .ms-ver {
    font-size: 2.9rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
    background: linear-gradient(135deg,#4ade80,#a7f3d0,#4ade80);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
#wcMilestone .ms-title { margin: 0.55rem 0 0.3rem; font-size: 1.05rem; font-weight: 700; color: #e8f3ec; }
#wcMilestone .ms-sub   { margin: 0; font-size: 0.88rem; line-height: 1.55; color: #9db8a8; }
#wcMilestone .ms-ok {
    margin-top: 1.3rem; width: 100%;
    background: linear-gradient(145deg,#4ade80,#22c55e); color: #06210f;
    font-weight: 800; font-size: 0.95rem;
    border: 0; border-radius: 12px; padding: 0.8rem 1rem; cursor: pointer;
    touch-action: manipulation;
}
#wcMilestone .ms-ok:active { opacity: 0.85; }

/* Confetti. Plain divs falling — no canvas, no library, nothing to load. */
#wcMilestone .ms-bits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
#wcMilestone .ms-bit {
    position: absolute; top: -12vh; width: 9px; height: 14px; border-radius: 2px;
    opacity: 0; animation: msFall linear forwards;
}

@keyframes msPop  { from { transform: scale(0.4) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes msFall {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
    8%   { opacity: 1; }
    100% { opacity: 0.9; transform: translateY(118vh) rotate(720deg); }
}

/* Asked for less motion: keep the moment, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    #wcMilestone .ms-bits { display: none; }
    #wcMilestone .ms-card { transition: none; transform: none; }
    #wcMilestone .ms-leaf { animation: none; }
}