/* The live score on a started bet's tile (scripts/live-bets.js): green when the
   bet's chance from here is 65% or more, red at 35% or less, grey between. */
.cp-live { color: var(--tmb-gray-700); }
.cp-live-chance { font-weight: 600; }
.cp-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
    background: var(--tmb-red); vertical-align: 1px; animation: cp-live-pulse 1.6s ease-in-out infinite; }
.cp-live-dot.is-final { background: var(--tmb-gray-500); animation: none; }
@keyframes cp-live-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .cp-live-dot { animation: none; } }

.cp-play.cp-live-good { background: var(--tmb-success-bg); border-color: var(--tmb-green-300); box-shadow: inset 4px 0 0 var(--tmb-green-700); }
.cp-play.cp-live-good .cp-live-chance { color: var(--tmb-green-700); }
.cp-play.cp-live-bad { background: var(--tmb-danger-bg-light); border-color: color-mix(in srgb, var(--tmb-red-700) 35%, transparent); box-shadow: inset 4px 0 0 var(--tmb-red-700); }
.cp-play.cp-live-bad .cp-live-chance { color: var(--tmb-red-700); }
.cp-play.cp-live-even { box-shadow: inset 4px 0 0 var(--tmb-gray-400); }

/* A parlay's legs, a row each, its dot in the leg's own colour. */
.cp-live-leg { margin-top: 2px; padding-left: 2px; }
.cp-live-leg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px;
    background: var(--tmb-gray-400); vertical-align: 1px; }
.cp-live-leg.is-good .cp-live-leg-dot { background: var(--tmb-green-700); }
.cp-live-leg.is-bad .cp-live-leg-dot { background: var(--tmb-red-700); }