/* ==========================================================================
   winner-banner — Login-time notification for Inner Circle prize winners.
   Mirrors .ic-next-drop-banner structure but uses Iceman blue instead of gold.
   ========================================================================== */

.winner-banner {
    background-color: var(--ic-accent, #D4A843);
    color: var(--brand-primary);
    width: 100%;
}

.winner-banner__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0;
    flex-wrap: wrap;
}

.winner-banner__label {
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-extrabold);
    font-size: 0.75rem;
    letter-spacing: var(--brand-letter-spacing-caps);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    background-color: var(--brand-primary);
    color: var(--brand-accent);
    padding: 0.25rem 0.6rem;
    border-radius: var(--brand-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-style: normal;
}

/* Emoji inside the pill — reset text-transform so it renders correctly */
.winner-banner__label::first-letter {
    font-style: normal;
}

.winner-banner__message {
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-extrabold);
    font-size: 1rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: var(--brand-letter-spacing-wide);
}

.winner-banner__cta {
    display: inline-block;
    background-color: var(--brand-accent);
    color: var(--ic-surface, #0F0F0F);
    font-family: var(--brand-font-heading);
    font-size: 0.9rem;
    font-weight: var(--brand-font-weight-bold);
    letter-spacing: var(--brand-letter-spacing-caps);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    border-radius: var(--brand-radius-sm);
    border: 2px solid var(--ic-surface, #0F0F0F);
    white-space: nowrap;
    flex-shrink: 0;
}

    .winner-banner__cta:hover,
    .winner-banner__cta:focus-visible {
        background-color: var(--ic-surface, #0F0F0F);;
        color: var(--brand-accent);
        outline: none;
    }

@media (max-width: 639px) {
    .winner-banner__message {
        order: 10;
        flex-basis: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        font-size: 0.85rem;
    }
}