/* jstiming_live.css — habillage visuel de /live-race/jstiming et des cartes
   de résultat JSTiming (branche JSTIMING, demande du 2026-09-04 : "fais
   quelque chose qui ressemble à du live, beau à voir, facile à suivre").
   Classes préfixées "jst-" pour ne toucher aucun style sqorz existant. */

.jst-live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 0 rgba(255, 77, 77, 0.6);
    animation: jstPulse 1.6s infinite;
}

@keyframes jstPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 77, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

.jst-heat-card {
    animation: jstFadeIn 0.35s ease-out;
}

@keyframes jstFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.jst-rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 18px;
    font-family: monospace;
    line-height: 1;
    border: 2px solid currentColor;
}

.jst-rank-badge.jst-rank-1 {
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.45);
}

.jst-round-stepper {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.jst-round-pill {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.jst-round-pill.jst-done {
    opacity: 0.55;
}

.jst-round-pill.jst-current {
    animation: jstPulseBg 1.6s infinite;
}

@keyframes jstPulseBg {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.35); }
}

.jst-round-pill.jst-upcoming {
    opacity: 0.3;
}