/* Site-wide broadcast popup. Built from beast-broadcast.html (locked layout).
   Scoped .bc-* so nothing leaks. */
.bc-overlay {
    --bc-black: #0E0E0E;
    --bc-surface: #161616;
    --bc-gold: #E8B400;
    --bc-gold-deep: #C99700;
    --bc-bone: #F5F3EE;
    --bc-steel: #9A9A9A;
    --bc-steel-soft: #6f6f6f;
    --bc-line: rgba(255, 255, 255, 0.08);

    position: fixed;
    inset: 0;
    background: rgba(8, 8, 8, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1090;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.bc-overlay.show { opacity: 1; pointer-events: auto; }

.bc-modal {
    width: 100%;
    max-width: 460px;
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1);
    font-family: 'Space Grotesk', system-ui, sans-serif;
}
.bc-overlay.show .bc-modal { transform: translateY(0) scale(1); }

.bc-media { position: relative; aspect-ratio: 16/10; background: radial-gradient(circle at 35% 25%, #242424, #0c0c0c); overflow: hidden; }
.bc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 14, 14, 0.85)); }

.bc-eyebrow {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.24em;
    color: var(--bc-black); background: var(--bc-gold); padding: 6px 11px; border-radius: 4px;
}
.bc-media .bc-eyebrow { position: absolute; top: 16px; left: 16px; z-index: 2; }

.bc-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.5); border: 1px solid var(--bc-line);
    color: var(--bc-bone); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.18s; backdrop-filter: blur(4px);
}
.bc-close:hover { background: rgba(0, 0, 0, 0.75); color: var(--bc-gold); }
.bc-close svg { width: 17px; height: 17px; }

.bc-body { padding: 26px 28px 30px; position: relative; }
.bc-body-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bc-body-top .bc-close { position: static; }

.bc-title { font-family: 'Anton', sans-serif; font-size: 32px; line-height: 0.96; text-transform: uppercase; letter-spacing: 0.01em; color: var(--bc-bone); margin-bottom: 14px; }
.bc-text { font-size: 14px; line-height: 1.6; color: var(--bc-steel); margin-bottom: 24px; white-space: pre-line; }

.bc-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bc-cta {
    background: var(--bc-gold); color: var(--bc-black); border: none;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
    padding: 15px 26px; border-radius: 5px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px; transition: background 0.2s; text-decoration: none;
}
.bc-cta:hover { background: var(--bc-gold-deep); }
.bc-cta svg { width: 15px; height: 15px; }
.bc-dismiss { background: transparent; border: none; color: var(--bc-steel-soft); font-family: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; cursor: pointer; transition: color 0.18s; }
.bc-dismiss:hover { color: var(--bc-steel); }

@media (prefers-reduced-motion: reduce) {
    .bc-overlay, .bc-modal { transition: none; }
    .bc-modal { transform: none; }
}
@media (max-width: 520px) {
    .bc-title { font-size: 26px; }
    .bc-body { padding: 22px 20px 24px; }
}