/* ========================================
   Live emblem — indicador EN VIVO unificado.
   Anillo de PROGRESO (minuto/90') + el minuto al centro + un aro CÓNICO que
   gira alrededor (mismo lenguaje que los marcos de avatar premium, ver
   player-theme.css). Reutilizado por el detalle (match-live-strip), el listado
   (.status.-live), las cards (.live-min) y el spotlight del home.
   Markup: app/views/matches/_live_emblem.html.erb. Color = --coral (token live).
   ======================================== */
.live-emblem {
  position: relative;
  flex: none;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.live-emblem.-sm { width: 18px; height: 18px; }

/* Aro cónico exterior que gira (la "vida"). Máscara radial → solo el borde,
   igual técnica que .avatar[class*="-frame-"]::before. */
.live-emblem > .le-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--coral), #ffe2da, var(--coral), #ffe2da, var(--coral));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: live-emblem-spin 2.6s linear infinite;
}
.live-emblem.-sm > .le-ring {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
}
@keyframes live-emblem-spin { to { transform: rotate(360deg); } }

/* Anillo de progreso (SVG): track tenue + arco coral según el minuto. El -90°
   arranca el arco arriba; pathLength=100 lo deja en % vía stroke-dashoffset. */
.live-emblem > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.live-emblem .le-trk { fill: none; stroke: rgba(255, 120, 102, 0.18); stroke-width: 3; }
.live-emblem .le-bar {
  fill: none;
  stroke: var(--coral);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px var(--coral-glow));
}

/* Minuto (o etiqueta del período) al centro — blanco para que destaque. */
.live-emblem > .le-min {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-scoreboard);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink-bright);
}
.live-emblem.-sm > .le-min { font-size: 9px; }

@media (prefers-reduced-motion: reduce) {
  .live-emblem > .le-ring { animation: none; }
}