/* League Stats — chrome del subject switcher (Jugadores / Equipos /
   Competición) + widgets visuales del subject Competición.
   Las filas de Players y Teams reusan `.squad-row*` del bundle global;
   este file solo carga lo propio del tab de liga. */

@layer components {
  /* ══════════════════════════════════════════════════════════════════
     HEADER · subject + metric lado-a-lado
     El subject picker vive en el section; el metric picker vive dentro
     de cada block (scope de Stimulus). Para mantener la paridad visual
     con el tab de team (dos dropdowns en la misma fila), la section se
     marca `position: relative`, el subject header reserva la mitad
     derecha con padding-right, y el `.team-stats-header` del block
     activo se posiciona en absolute ocupando esa mitad.

     Los blocks inactivos quedan `display: none` (via `[hidden]`), así
     que sólo un metric picker visible a la vez — no hay overlap.
     ══════════════════════════════════════════════════════════════════ */

  .league-stats {
    position: relative;
  }

  .league-stats-subject-header {
    padding: 0 calc(50% + 4px) 12px 0;
  }

  .league-stats-subject-picker .select-trigger {
    width: 100%;
    overflow: hidden;
  }

  .league-stats-subject-picker .select-trigger > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
  }

  /* Metric picker del block activo — col 2 del subject row. */
  .league-stats > [data-league-stats-subject-target="block"] > .team-stats-header {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 4px);
    padding: 0 0 12px;
  }

  /* ══════════════════════════════════════════════════════════════════
     TEAM ROW · misma caja que .squad-row pero el slot de foto lleva
     escudo en vez de retrato.
     ══════════════════════════════════════════════════════════════════ */

  .squad-row--team .squad-row__photo-wrap--team {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: var(--color-bg-subtle, rgb(255 255 255 / 4%));
  }

  .squad-row__team-crest {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ══════════════════════════════════════════════════════════════════
     COMPETITION · card chrome
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-card {
    background: var(--color-surface);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px 14px 16px;
  }

  .comp-stats-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
  }

  .comp-stats-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
  }

  .comp-stats-card__subtitle {
    font-size: 11px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* Season concluded — green accent so "Finalizada" reads as a state,
     not just another counter. */
  .comp-stats-progress__finished {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: var(--color-success);
  }

  .comp-stats-progress__finished::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-success);
  }

  /* ══════════════════════════════════════════════════════════════════
     1. PROGRESS · barra jornada actual/total + 3 big numbers
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-progress__bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    overflow: hidden;
    margin-bottom: 14px;
  }

  .comp-stats-progress__bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(
      90deg,
      var(--color-accent) 0%,
      color-mix(in oklch, var(--color-accent) 60%, transparent) 100%
    );
    border-radius: 999px;
    transition: width 0.6s ease;
  }

  /* Split progress (group + KO) — list-of-leaders layout: el segmento
     de grupos jugado en color principal, el resto del grupo gris suave,
     y los KO jugados en un acento secundario para distinguir fase. */
  .comp-stats-progress__bar--split {
    display: flex;
  }

  .comp-stats-progress__seg {
    display: block;
    height: 100%;
    transition: width 0.6s ease;
  }

  .comp-stats-progress__seg--group {
    background: var(--color-accent);
  }

  .comp-stats-progress__seg--group-rest {
    background: rgb(255 255 255 / 8%);
  }

  .comp-stats-progress__seg--knockout {
    background: linear-gradient(
      90deg,
      color-mix(in oklch, var(--color-accent) 75%, var(--color-yellow-card, #f5b400)) 0%,
      var(--color-yellow-card, #f5b400) 100%
    );
  }

  .comp-stats-progress__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 4px 0 14px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .comp-stats-progress__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
  }

  .comp-stats-progress__legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .comp-stats-progress__legend-item--group .comp-stats-progress__legend-dot {
    background: var(--color-accent);
  }

  .comp-stats-progress__legend-item--knockout .comp-stats-progress__legend-dot {
    background: var(--color-yellow-card, #f5b400);
  }

  .comp-stats-progress__legend-count {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-bignums {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .comp-stats-bignum {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
  }

  .comp-stats-bignum + .comp-stats-bignum {
    border-left: 1px solid var(--color-border);
  }

  .comp-stats-bignum__value {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-bignum__label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
  }

  /* ══════════════════════════════════════════════════════════════════
     2. OUTCOMES · stacked bar (home/draw/away)
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-outcomes__bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(255 255 255 / 4%);
    margin-bottom: 10px;
  }

  .comp-stats-outcomes__seg {
    display: block;
    height: 100%;
    transition: width 0.6s ease;
  }

  /* Paleta local/empate/visitante — alineada con `.h2h-bar.*`
     (match-detail H2H) para que todas las barras de resultados
     hablen el mismo lenguaje visual: home = accent (verde),
     draw = color-draw (gris), away = accent-secondary (cyan). */
  .comp-stats-outcomes__seg--home {
    background: var(--color-accent);
  }

  .comp-stats-outcomes__seg--draw {
    background: var(--color-draw);
  }

  .comp-stats-outcomes__seg--away {
    background: var(--color-accent-secondary);
  }

  .comp-stats-outcomes__legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .comp-stats-outcome {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .comp-stats-outcome__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .comp-stats-outcome--home .comp-stats-outcome__dot {
    background: var(--color-accent);
  }

  .comp-stats-outcome--draw .comp-stats-outcome__dot {
    background: var(--color-draw);
  }

  .comp-stats-outcome--away .comp-stats-outcome__dot {
    background: var(--color-accent-secondary);
  }

  .comp-stats-outcome__label {
    color: var(--color-text-muted);
  }

  .comp-stats-outcome__pct {
    color: var(--color-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     3. PODIUMS · attack / defense top 3
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-podium-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .comp-stats-podium {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 10px 10px 12px;
  }

  .comp-stats-podium__title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .comp-stats-podium__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .comp-stats-podium__row {
    position: relative;
    display: grid;
    grid-template-columns: 18px 22px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }

  /* Stretched-link pattern — invisible anchor covers the whole grid row
     so the podium entry navigates to the team page without restructuring
     the existing columns. */
  .comp-stats-podium__stretched {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    z-index: 1;
  }

  .comp-stats-podium__stretched:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .comp-stats-podium__rank {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-podium__row[data-rank="1"] .comp-stats-podium__rank {
    color: var(--color-accent, #f1c40f);
  }

  .comp-stats-podium__logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .comp-stats-podium__name {
    color: var(--color-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .comp-stats-podium__value {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     4. DISTRIBUTION · histograma goles/partido
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-distribution__grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .comp-stats-distribution__row {
    display: grid;
    grid-template-columns: 36px 1fr 32px 42px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
  }

  .comp-stats-distribution__bucket {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-distribution__bar-track {
    position: relative;
    height: 10px;
    background: rgb(255 255 255 / 5%);
    border-radius: 999px;
    overflow: hidden;
  }

  .comp-stats-distribution__bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(
      90deg,
      color-mix(in oklch, var(--color-accent) 90%, #000 10%) 0%,
      color-mix(in oklch, var(--color-accent) 30%, transparent 70%) 100%
    );
    border-radius: 999px;
    transition: width 0.6s ease;
  }

  .comp-stats-distribution__val {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-distribution__pct {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     5. DISCIPLINE · tarjetas amarillas / rojas
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-discipline__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .comp-stats-discipline__cell {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
  }

  .comp-stats-discipline__card {
    width: 16px;
    height: 22px;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  }

  .comp-stats-discipline__cell--yellow .comp-stats-discipline__card {
    background: #f1c40f;
  }

  .comp-stats-discipline__cell--red .comp-stats-discipline__card {
    background: #e74c3c;
  }

  .comp-stats-discipline__data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .comp-stats-discipline__value {
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-discipline__label {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .comp-stats-discipline__avg {
    font-size: 11px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     GOLES POR MINUTO · histograma vertical 6 buckets (+ET opcional)
     + pie con % por parte. Grid auto-ajusta a 7 columnas si la
     competición tiene prórroga.
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-minutes__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    min-height: 140px;
    padding: 4px 0 6px;
  }

  .comp-stats-minutes__grid--with-et {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .comp-stats-minutes__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .comp-stats-minutes__bar-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100px;
    background: rgb(255 255 255 / 3%);
    border-radius: 6px;
    overflow: hidden;
  }

  .comp-stats-minutes__bar {
    display: block;
    width: 70%;
    border-radius: 6px 6px 0 0;
    transition: height 0.6s ease;
  }

  .comp-stats-minutes__col--first .comp-stats-minutes__bar {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--color-accent) 80%, transparent) 0%,
      color-mix(in oklch, var(--color-accent) 40%, transparent) 100%
    );
  }

  .comp-stats-minutes__col--second .comp-stats-minutes__bar {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--color-accent-secondary) 80%, transparent) 0%,
      color-mix(in oklch, var(--color-accent-secondary) 40%, transparent) 100%
    );
  }

  .comp-stats-minutes__col--extra .comp-stats-minutes__bar {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--color-draw) 90%, transparent) 0%,
      color-mix(in oklch, var(--color-draw) 50%, transparent) 100%
    );
  }

  .comp-stats-minutes__pct {
    font-family: Oswald, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .comp-stats-minutes__bucket {
    font-size: 10px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
  }

  .comp-stats-minutes__halves {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .comp-stats-minutes__half {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .comp-stats-minutes__half-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .comp-stats-minutes__half--first .comp-stats-minutes__half-dot {
    background: var(--color-accent);
  }

  .comp-stats-minutes__half--second .comp-stats-minutes__half-dot {
    background: var(--color-accent-secondary);
  }

  .comp-stats-minutes__half--extra .comp-stats-minutes__half-dot {
    background: var(--color-draw);
  }

  .comp-stats-minutes__half-label {
    color: var(--color-text-muted);
  }

  .comp-stats-minutes__half-pct {
    color: var(--color-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-minutes__half-count {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     PENALTIES · hero + breakdown + conversion rate
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-penalties__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 12px;
  }

  .comp-stats-penalties__awarded-value {
    font-family: Oswald, sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-penalties__awarded-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .comp-stats-penalties__breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 12px;
  }

  .comp-stats-penalty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    position: relative;
  }

  .comp-stats-penalty + .comp-stats-penalty {
    border-left: 1px solid var(--color-border);
  }

  .comp-stats-penalty__value {
    font-family: Oswald, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-penalty--scored .comp-stats-penalty__value {
    color: var(--color-success, #2ecc71);
  }

  .comp-stats-penalty--saved .comp-stats-penalty__value {
    color: var(--color-accent, #3498db);
  }

  .comp-stats-penalty--missed .comp-stats-penalty__value {
    color: var(--color-warning, #f1c40f);
  }

  .comp-stats-penalty__label {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .comp-stats-penalties__conversion {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .comp-stats-penalties__conversion-label {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .comp-stats-penalties__conversion-track {
    height: 8px;
    background: rgb(255 255 255 / 5%);
    border-radius: 999px;
    overflow: hidden;
  }

  .comp-stats-penalties__conversion-fill {
    display: block;
    height: 100%;
    background: linear-gradient(
      90deg,
      var(--color-success, #2ecc71) 0%,
      color-mix(in oklch, var(--color-success, #2ecc71) 60%, transparent) 100%
    );
    border-radius: 999px;
    transition: width 0.6s ease;
  }

  .comp-stats-penalties__conversion-pct {
    font-family: Oswald, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     xG · hero 3 métricas + 2 podios (clínicos / ineficientes)
     ══════════════════════════════════════════════════════════════════ */

  .comp-stats-xg__hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 14px;
  }

  .comp-stats-xg__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
  }

  .comp-stats-xg__metric + .comp-stats-xg__metric {
    border-left: 1px solid var(--color-border);
  }

  .comp-stats-xg__metric-value {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .comp-stats-xg__metric--xg .comp-stats-xg__metric-value {
    color: var(--color-accent, #3498db);
  }

  .comp-stats-xg__metric--pos .comp-stats-xg__metric-value {
    color: var(--color-success, #2ecc71);
  }

  .comp-stats-xg__metric--neg .comp-stats-xg__metric-value {
    color: var(--color-danger, #e74c3c);
  }

  .comp-stats-xg__metric-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
  }

  .comp-stats-podium--clinical .comp-stats-podium__row[data-rank="1"] .comp-stats-podium__value {
    color: var(--color-success, #2ecc71);
  }

  .comp-stats-podium--wasteful .comp-stats-podium__row[data-rank="1"] .comp-stats-podium__value {
    color: var(--color-danger, #e74c3c);
  }

  /* ══════════════════════════════════════════════════════════════════
     Animations respect user prefs
     ══════════════════════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: reduce) {
    .comp-stats-progress__bar-fill,
    .comp-stats-outcomes__seg,
    .comp-stats-distribution__bar-fill,
    .comp-stats-minutes__bar,
    .comp-stats-penalties__conversion-fill {
      transition: none;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     AJAX-driven players grid (league-stats-pills controller)
     21 metric cards rendered as skeletons; rows are swapped in by the
     Stimulus controller after each (position, metric, limit) fetch.
     ══════════════════════════════════════════════════════════════════ */

  .league-stats-pills-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* `display: flex` overrides the bare `hidden` attribute, so the
     controller's `generalMode.hidden = true` (single-metric mode) left the
     21-card grid visible underneath the focused panel. Honour `hidden`
     explicitly so picking a metric actually swaps the view. */
  .league-stats-pills-grid[hidden] {
    display: none;
  }

  /* Subdued tint while a card is in flight — keeps the layout intact
     so the row swap doesn't reflow the whole grid. */
  .stats-card.is-loading {
    opacity: 0.85;
  }

  .stats-card.is-loading .skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
  }

  /* ══════════════════════════════════════════════════════════════════
     LIVE OVERLAY · "EN VIVO" pill + "+N" delta on player ranking rows.
     The row's value already folds in the live delta (the wire projects
     it); these are just the breakdown markers. The pill stacks below the
     meta line like the squad injury/birthday lines, in the same
     `--color-live` accent the standings-mini live state uses.
     ══════════════════════════════════════════════════════════════════ */
  .squad-row__live {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-live);
  }

  .squad-row__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-live);
    flex-shrink: 0;
    animation: squad-row-live-pulse 1.6s ease-in-out infinite;
  }

  @keyframes squad-row-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  @media (prefers-reduced-motion: reduce) {
    .squad-row__live-dot {
      animation: none;
    }
  }

  .squad-row__live-delta {
    margin-left: 2px;
    font-size: 10px;
    font-weight: 700;
    vertical-align: super;
    color: var(--color-live);
  }

  .squad-row__metric--live {
    color: var(--color-live);
  }
}