/* 入室画面の LIVE 表示(段階4)。TOP の .status-pill.live-badge と同じ見た目。
   色と書体は ../site-base.css の変数(--text-muted・--neon-pink・--font-mono)を参照する。
   文言と is-live の付け外しは ../top-live.js(TOP と共用)。仕様は virtual-space/docs/LIVE_BADGE_PLAN.md。
   既定は OFF AIR(灰色・点滅なし)。LIVE のときだけマゼンタで点が点滅する。 */
.live-badge-row { display: flex; justify-content: center; margin-bottom: 12px; }
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid color-mix(in srgb, var(--text-muted) 45%, transparent);
    color: var(--text-muted);
}
.live-badge .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--text-muted);
    box-shadow: none;
}
.live-badge.is-live {
    background: color-mix(in srgb, var(--neon-pink) 14%, transparent);
    border-color: color-mix(in srgb, var(--neon-pink) 70%, transparent);
    color: var(--neon-pink);
    font-weight: 700;
}
.live-badge.is-live .live-dot {
    background-color: var(--neon-pink);
    box-shadow: 0 0 8px var(--neon-pink);
    animation: live-pulse 1.4s infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}
@media (max-width: 480px) {
    .live-badge { padding: 5px 11px; letter-spacing: 0.04em; }
}
@media (prefers-reduced-motion: reduce) {
    .live-badge.is-live .live-dot { animation: none; }
}