root {
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: visible;
}

.float-popup {
    position: absolute;
    left: -50px;
    white-space: nowrap;
    pointer-events: none;
    font-size: 22px;
    font-weight: 900;
    color: white;
    background-color: transparent;
}

.float-popup.coins          { color: #fbbf24; animation: float-up 1.4s ease-out both; }
.float-popup.challenge      { color: #34d399; font-size: 18px; animation: float-up 1.4s ease-out both; }
.float-popup.sparkle-direct { color: #fbbf24; font-size: 20px; animation: sparkle-burst 0.7s ease-out both; }
.float-popup.sparkle-chain  { color: #c4b5fd; font-size: 16px; animation: sparkle-burst 0.9s ease-out both; }
.float-popup.burst-popup    { color: #f472b6; font-size: 28px; font-weight: 900; animation: burst-float 1.8s ease-out both; }
.float-popup.mult-tag       { color: #fbbf24; font-size: 16px; font-weight: 800; animation: float-up 1.0s ease-out both; }
.float-popup.chain-summary  { color: #c4b5fd; font-size: 24px; font-weight: 900; animation: float-up 1.6s ease-out both; }
.float-popup.popup-mega     { color: #fbbf24; font-size: 32px; font-weight: 900; animation: float-up 1.6s ease-out both; }
.float-popup.popup-chain    { color: #c4b5fd; font-size: 24px; font-weight: 900; animation: float-up 1.4s ease-out both; }
.float-popup.popup-nice     { color: #34d399; font-size: 22px; font-weight: 900; animation: float-up 1.4s ease-out both; }
.float-popup.popup-md       { font-size: 22px; animation: float-up 1.4s ease-out both; }
.float-popup.popup-lg       { font-size: 28px; animation: float-up 1.4s ease-out both; }
.float-popup.popup-xl       { font-size: 36px; animation: float-up 1.4s ease-out both; }

/* ── Multiplier popups ── */
.float-popup.mult-val-popup {
    font-size: 94px;
    font-weight: 900;
    left: -320px;
    animation: corner-pop 1.2s cubic-bezier(0.22,1,0.36,1) both;
}


.float-popup.mult-label-popup {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.06em;
    left: -150px;
    animation: corner-pop 1.2s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.05s;
}

.float-popup.mult-val-popup.mult-normal   { color: #34d399; }
.float-popup.mult-val-popup.mult-big      { color: #fbbf24; }
.float-popup.mult-val-popup.mult-mega     { color: #c4b5fd; }
.float-popup.mult-label-popup.mult-normal { color: #34d399; }
.float-popup.mult-label-popup.mult-big    { color: #fbbf24; }
.float-popup.mult-label-popup.mult-mega   { color: #c4b5fd; }

.float-popup.mult-cap-warning-popup {
    font-size: 30px;
    font-weight: 800;
    color: rgba(251,191,36,0.85);
    letter-spacing: 0.1em;
    animation: float-up 1.2s ease-out both;
}

@keyframes float-up {
    0%   { opacity: 0;   transform: translateY(0px)   scale(0.8); }
    15%  { opacity: 1;   transform: translateY(-8px)  scale(1.05); }
    70%  { opacity: 1;   transform: translateY(-32px) scale(1.0); }
    100% { opacity: 0;   transform: translateY(-52px) scale(0.95); }
}

@keyframes sparkle-burst {
    0%   { opacity: 0;   transform: translateY(0)     scale(0.5) rotate(0deg);  }
    25%  { opacity: 1;   transform: translateY(-12px) scale(1.2) rotate(30deg); }
    70%  { opacity: 0.7; transform: translateY(-28px) scale(1.0) rotate(60deg); }
    100% { opacity: 0;   transform: translateY(-40px) scale(0.8) rotate(90deg); }
}

@keyframes burst-float {
    0%   { opacity: 0;   transform: translateY(10px)  scale(0.7); }
    20%  { opacity: 1;   transform: translateY(-15px) scale(1.1); }
    75%  { opacity: 1;   transform: translateY(-55px) scale(1.0); }
    100% { opacity: 0;   transform: translateY(-80px) scale(0.9); }
}

@keyframes corner-pop {
    0%   { opacity: 0; transform: scale(0.4) translateY(15px); }
    25%  { opacity: 1; transform: scale(1.12) translateY(0px); }
    55%  { opacity: 1; transform: scale(1.0)  translateY(-15px); }
    100% { opacity: 0; transform: scale(0.9)  translateY(-70px); }
}

/* Explosion Particles */
.float-popup.spark-particle {
    font-size: 12px;
    color: #fbbf24;
    animation: spark-fly 0.6s ease-out both;
}

.float-popup.smoke-particle {
    font-size: 28px;
    opacity: 0.6;
    animation: smoke-rise 0.8s ease-out both;
}

@keyframes spark-fly {
    0%   { opacity: 1; transform: scale(1.0) translateY(0px); }
    100% { opacity: 0; transform: scale(0.3) translateY(-40px) translateX(20px); }
}

@keyframes smoke-rise {
    0%   { opacity: 0.6; transform: scale(0.5) translateY(0px); }
    100% { opacity: 0;   transform: scale(1.8) translateY(-60px); }
}