# Owncast Live badge
# Hidden by default; shown via JS only while the stream is live.

#live-badge {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-left: 1.5em;
    padding: 0.45em 0.9em;
    border-radius: 2em;
    background: #e53935;
    color: #fff;
    font-family: "Roboto Slab", serif;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#live-badge:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(229, 57, 53, 0.55);
}

#live-badge .live-dot {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.4s ease-in-out infinite;
}

#live-badge .live-label {
    animation: live-blink 1s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}

@keyframes live-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* On small screens the header stacks vertically; keep the badge aligned right. */
@media screen and (max-width: 736px) {
    #live-badge {
        margin-left: 0;
        margin-top: 0.75em;
        align-self: flex-end;
    }
}