/* Boost queue countdown banner — thin fixed strip above bottom nav */
#boostQueueBanner {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    min-height: 36px;
    padding: 6px 16px;
    background: linear-gradient(90deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
    border-top: 1px solid rgba(0, 209, 102, 0.3);
    box-shadow: 0 -2px 12px rgba(0, 209, 102, 0.15);
    color: #e6edf3;
    font-size: 0.85rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    min-width: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

#boostQueueBanner.is-visible {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

.boost-banner-icon {
    flex-shrink: 0;
}

.boost-banner-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.boost-banner-text strong {
    color: #00d166;
}

/* Raise boost banner above site bottom nav when present.
   --site-overlay-lift is the page-pinned chrome ABOVE the nav (0px everywhere
   except /casino/roulette below 860px, which pins its SPIN/CLEAR bar there —
   see casino_roulette.html). This strip is z-index 1040 and the pinned bar is
   45, so without the term the banner would paint over the bottom of the bar
   whenever a boost is queued. Unset -> 0px -> unchanged. */
body:has(.site-bottom-nav) #boostQueueBanner {
    bottom: calc(var(--site-shell-bottom, 110px)
                 + var(--site-overlay-lift, 0px));
}

@media (max-width: 768px) {
    #boostQueueBanner.is-visible ~ .v2-bottom-nav,
    #boostQueueBanner.is-visible ~ [data-bottom-nav] {
        margin-bottom: 36px;
    }
}