.ravel-plus-bonus {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .25rem;
    padding: .28rem .65rem;
    border: 1px solid rgba(255, 225, 122, .45);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 12px rgba(255, 214, 102, .16);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
}

.ravel-plus-bonus__label,
.ravel-plus-bonus > span:last-child {
    color: #ffd86b;
    background: linear-gradient(90deg, #ffe89a, #ffbf69, #d7a8ff, #8ee9ff, #ffe89a);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ravel-plus-shimmer 3s linear infinite;
}

.ravel-plus-bonus__label {
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ravel-plus-bonus--compact {
    margin-top: .35rem;
    padding: .22rem .5rem;
    font-size: .82rem;
}

@keyframes ravel-plus-shimmer {
    from {
        background-position: 0% center;
    }
    to {
        background-position: 250% center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ravel-plus-bonus__label,
    .ravel-plus-bonus > span:last-child {
        animation: none;
    }
}