/* Shared scoreboard styles — pill + animations.
   Linked from App.razor (admin Blazor views) and Pages/Scoreboards/Index.cshtml (spectator).
   Single source of truth so spectator and admin pages render identically. */

/* ===== Missed Green pill ===== */
/* Replaces the em-dash + "OFF GREEN" text treatment in the distance column when an
   entry has IsOffGreen = true. Uses Lucide x-circle inline SVG. */
.missed-green-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: #fcebeb;
    color: #a32d2d;
}

.missed-green-pill svg {
    width: 1em;
    height: 1em;
    stroke: currentColor;
}

/* ===== Animations ===== */
@keyframes scoreboard-pulse-update {
    0%   { background: rgba(255, 215, 0, 0.4); }
    100% { background: transparent; }
}

@keyframes scoreboard-count-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes scoreboard-leader-shimmer {
    0%   { box-shadow: 0 0 20px gold; }
    100% { box-shadow: 0 0 5px gold; }
}

/* Pulse — fires on any state change. Admin uses .row, spectator uses .entry. */
.row.row-pulse,
.entry.row-pulse {
    animation: scoreboard-pulse-update 1.5s ease-out;
}

/* Slide-in — distance text rises from below. animation-fill-mode: backwards keeps the
   element at the "from" state (translateY(20px); opacity:0) during the 0.2s pre-roll,
   so it stays hidden before the slide rather than flashing in then jumping back. */
.distance-slide-in {
    display: inline-block;
    animation: scoreboard-count-up 0.6s ease-out 0.2s backwards;
}

/* Shimmer — fires on new-leader transitions. Starts 0.4s after class is added so it
   reads as the third beat of the combined-animation sequence. Base CSS for .row.leader
   and .entry.leader already includes box-shadow: 0 0 5px gold, matching the 100%
   keyframe, so the shimmer settles into the persistent ring rather than fading to none. */
.row.row-new-leader,
.entry.row-new-leader {
    animation: scoreboard-leader-shimmer 2s ease-out 0.4s;
}

/* ===== Reduced motion ===== */
/* Targeted override — only collapses the scoreboard's own animations. If broader project-
   wide motion suppression becomes needed later, swap to *, *::before, *::after pattern. */
@media (prefers-reduced-motion: reduce) {
    .row.row-pulse,
    .entry.row-pulse,
    .distance-slide-in,
    .row.row-new-leader,
    .entry.row-new-leader {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}