/**
 * Styles for the live indicator added by /assets/js/live-matches.js.
 * Static "upcoming" / "finished" rows already get their styling from
 * platform-new.css — this file only covers the live overlay.
 */

.pn-comp-match-center {
  flex-direction: column;
  gap: 2px;
}

/* Sits on top of the score widget, dot + minute (e.g. "78'"). */
.pn-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #d8232a;
  text-transform: uppercase;
  line-height: 1;
}

.pn-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8232a;
  display: inline-block;
  animation: pn-live-pulse 1.4s ease-in-out infinite;
}

@keyframes pn-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

/* Live score: red emphasis to differentiate from finished. */
.pn-score--live .pn-score-team {
  color: #d8232a;
  font-weight: 700;
}