/* ==========================================================================
   task-reward-float.css - Floating reward text tokens
   Bounce Pop + Icon style: scale overshoot then float-up, item shows icon.
   ========================================================================== */

/* ── Floating overlay stage ─────────────────────────────────────────────── */

#reward-float-stage {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

/* ── Base token ─────────────────────────────────────────────────────────── */

.rf-token {
    position: fixed;
    pointer-events: none;
    white-space: nowrap;
    font-family: var(--font-body, sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    z-index: 99999;
    will-change: transform, opacity;
}

.rf-token--xp {
    color: #c5a059;
}

.rf-token--item {
    color: #a8d8a8;
}

.rf-token--hull {
    color: #5a9db8;
}

.rf-token--crew {
    color: #e05050;
}

.rf-token--rigging {
    color: #d4a84a;
}

.rf-token__icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 3px;
    opacity: 0.85;
}

/* ── Bounce Pop keyframe ────────────────────────────────────────────────── */

@keyframes rf-bounce-pop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px) scale(1.3);
    }
    35% {
        opacity: 1;
        transform: translateX(-50%) translateY(-12px) scale(0.95);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-18px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px) scale(1);
    }
}