/* =========================================================
   FC4 Live-Komponenten (Ranking, Statistiken, Teilnehmer-Karten)
   ========================================================= */
:root {
    --live-red: hsl(0, 85%, 58%);
    --online-green: hsl(130, 70%, 55%);
    --gold: hsl(45, 100%, 55%);
    --silver: hsl(210, 15%, 78%);
    --bronze: hsl(25, 65%, 52%);
}

/* --- Herzen / Leben --- */
.hearts { display: inline-flex; gap: 0.2rem; align-items: center; }
.hearts svg { width: 18px; height: 18px; }
.hearts.sm svg { width: 14px; height: 14px; }
.hearts.lg svg { width: 22px; height: 22px; }
.heart-full { color: var(--live-red); filter: drop-shadow(0 0 4px hsla(0, 85%, 58%, 0.6)); }
.heart-empty { color: hsla(0, 0%, 100%, 0.18); }
.heart-lost-anim { animation: heart-lost 0.9s ease-out; }
@keyframes heart-lost {
    0% { transform: scale(1.6); color: #fff; }
    100% { transform: scale(1); }
}

/* --- Badges --- */
.live-badge, .online-badge, .out-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.15rem 0.5rem; border-radius: 999px; line-height: 1.4; white-space: nowrap;
    text-decoration: none;
}
.live-badge { color: #fff; background: var(--live-red); box-shadow: 0 0 10px hsla(0, 85%, 58%, 0.7); animation: live-pulse 1.6s ease-in-out infinite; }
.live-badge:hover { filter: brightness(1.15); }
.online-badge { color: var(--online-green); border: 1px solid hsla(130, 70%, 55%, 0.6); background: hsla(130, 70%, 55%, 0.08); box-shadow: 0 0 8px hsla(130, 70%, 55%, 0.25); }
.online-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--online-green); box-shadow: 0 0 6px var(--online-green); }
.out-badge { color: var(--red-eliminated); border: 1px solid hsla(0, 80%, 60%, 0.5); }
@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 6px hsla(0, 85%, 58%, 0.5); }
    50% { box-shadow: 0 0 16px hsla(0, 85%, 58%, 0.95); }
}

/* --- Phase & Kennzahlen --- */
.live-statusbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; margin-bottom: 2rem; }
.phase-pill {
    font-family: 'Orbitron', monospace; font-weight: 700; font-size: 1rem;
    padding: 0.5rem 1.25rem; border-radius: 999px;
    border: 1px solid var(--border-color); color: var(--cyan-neon);
    background: rgba(0, 0, 0, 0.4); box-shadow: 0 0 18px hsla(55, 100%, 50%, 0.18);
}
.phase-pill.is-running::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--online-green); box-shadow: 0 0 8px var(--online-green); margin-right: 0.6rem; vertical-align: middle; animation: live-pulse 1.6s infinite; }
.phase-pill.is-ended { color: var(--text-muted-foreground); }
.live-counters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.live-counter { min-width: 6.5rem; text-align: center; padding: 0.5rem 0.9rem; border-radius: 0.75rem; background: hsla(240, 4%, 15%, 0.5); border: 1px solid hsla(0, 0%, 100%, 0.08); }
.live-counter strong { display: block; font-family: 'Orbitron', monospace; font-size: 1.35rem; color: var(--text-foreground); }
.live-counter span { font-size: 0.75rem; color: var(--text-muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; }
.live-counter.is-online strong { color: var(--online-green); }
.live-counter.is-out strong { color: var(--red-eliminated); }

/* --- Hinweis-Banner --- */
.live-banner { display: flex; gap: 0.75rem; align-items: center; justify-content: center; text-align: center; padding: 0.75rem 1rem; border-radius: 0.75rem; margin: 0 auto 1.5rem; max-width: 900px; font-size: 0.95rem; }
.live-banner.is-offline { background: hsla(0, 80%, 40%, 0.15); border: 1px solid hsla(0, 80%, 60%, 0.4); color: var(--red-eliminated); }
.live-banner.is-info { background: hsla(55, 100%, 50%, 0.07); border: 1px solid var(--border-color); color: var(--text-foreground); }
.live-banner[hidden] { display: none; }

.live-empty { text-align: center; color: var(--text-muted-foreground); padding: 3rem 1rem; }

/* --- Toasts für Live-Ereignisse --- */
.live-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 3000; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
.live-toast {
    pointer-events: auto; display: flex; gap: 0.75rem; align-items: center;
    padding: 0.75rem 1rem; border-radius: 0.75rem;
    background: rgba(15, 15, 15, 0.95); border: 1px solid var(--border-color);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); color: var(--text-foreground); font-size: 0.9rem;
    animation: toast-in 0.35s ease-out;
}
.live-toast img { width: 32px; height: 32px; border-radius: 4px; image-rendering: pixelated; flex-shrink: 0; }
.live-toast small { display: block; color: var(--text-muted-foreground); font-size: 0.8rem; margin-top: 0.15rem; }
.live-toast.is-danger { border-color: hsla(0, 80%, 60%, 0.6); box-shadow: 0 0 20px hsla(0, 80%, 60%, 0.25); }
.live-toast.is-success { border-color: hsla(130, 70%, 55%, 0.5); }
.live-toast.is-leaving { opacity: 0; transform: translateX(20px); transition: all 0.3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

/* --- Leben & Punkte auf den Teilnehmer-Karten --- */
.card-live-meta { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.card-live-meta .card-points { font-family: 'Orbitron', monospace; font-size: 0.8rem; font-weight: 700; color: var(--cyan-neon); }

@media (prefers-reduced-motion: reduce) {
    .live-badge, .phase-pill.is-running::before, .heart-lost-anim, .live-toast { animation: none; }
}