/* match-live.css — styles for live match indicator and match status bar */
:root{
  --live-green: #28a745;
  --live-green-glow: rgba(40,167,69,0.15);
}

.match-status-bar{
  background: transparent;
  padding: 8px 12px;
  border-radius: 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.match-status{ font-weight:600; color:inherit; font-size:0.98em; }

.match-live-wrap{ display:flex; align-items:center; gap:8px; }

.match-live-anchor{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(40,167,69,0.04);
  color: var(--live-green);
  padding:6px 8px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  transition: background 120ms ease, transform 80ms ease;
}
.match-live-anchor:hover{ background: rgba(40,167,69,0.12); transform:translateY(-1px); }

.match-live-icon{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--live-green);
  position:relative;
  box-shadow: 0 0 0 0 rgba(40,167,69,0.6);
  flex:0 0 auto;
  animation: matchLivePulse 1.6s infinite;
  margin-right:2px;
}

/* hide emoji fallback inside .match-live-icon if present (keeps markup accessible) */
.match-live-icon > *{ font-size:0; line-height:0; }

.match-live-label{ font-size:0.95em; color:var(--live-green); }

.match-live-domain{
  font-size:0.9em; color:#666; max-width:140px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; opacity:0.9;
  transition: opacity .2s ease, max-width .25s ease;
}

@keyframes matchLivePulse{
  0%{ box-shadow:0 0 0 0 rgba(40,167,69,0.6); }
  70%{ box-shadow:0 0 0 10px rgba(40,167,69,0); }
  100%{ box-shadow:0 0 0 0 rgba(40,167,69,0); }
}

@media (max-width:600px){
  .match-live-anchor{ padding:4px 6px; border-radius:6px; font-size:0.92em; }
  .match-live-domain{ display:none; }
}