/* ========================================
   Match card — boletería mini-ticket horizontal.
   Used in fixture, recent-results lists, etc. Compact form so a
   torneo with 300 partidos doesn't drown the page in vertical
   space. Score in Bebas, teams flanking it, dashed bottom for
   meta/prediction row.
   ======================================== */

.match-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.match-block {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 150ms, transform 200ms;
}
.match-block:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

/* Top row: 5-column grid so badges + score sit on fixed vertical
   lines across every row (badges align column-to-column even when
   team names differ in length). Names live in the outer flex
   columns and ellipsis when they don't fit.

   Layout: [home-name 1fr] [home-badge auto] [center auto] [away-
   badge auto] [away-name 1fr]. The mobile breakpoint switches the
   names for the short codes so the score still has room. */
.match-block > .matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

/* Rótulo de fase/fecha arriba a la izquierda (cards en vivo). Mismo tono que el
   meta inferior pero al tope, para que la card en vivo no cuelgue la fecha
   abajo (quedaba rara bajo el marcador en juego). */
.match-block > .match-block__topmeta {
  padding: 10px 16px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.match-block > .match-block__topmeta + .matchup { padding-top: 8px; }

.match-block > .matchup > .home-name {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.match-block > .matchup > .away-name {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.match-block > .matchup > .home-badge,
.match-block > .matchup > .away-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Escudos del listado en desktop: el base -sm (20px) queda muy chico al lado
   del marcador. Scopeado a desktop (min-width: 560px) para NO pisar los
   overrides de mobile (32px) ni la sección -live (28px), que viven en sus
   propios media queries / selectores. */
@media (min-width: 560px) {
  .match-block > .matchup > .home-badge .cl-logo,
  .match-block > .matchup > .away-badge .cl-logo { width: 36px; height: 36px; }
}
.match-block > .matchup > .home-code,
.match-block > .matchup > .away-code {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: none;
}

/* Center column: score (.result) when finished/live, kickoff (.time)
   when scheduled. */
.match-block > .matchup > .center {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  padding: 0 4px;
}
.match-block > .matchup > .center > .result {
  font-family: var(--font-scoreboard);
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink);
}
.match-block > .matchup > .center > .time {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.match-block.-live > .matchup > .center > .result { color: var(--coral); }
.match-block > .matchup > .center > .live-min {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  white-space: nowrap;
}

/* Sección "En vivo": logos, nombres y marcador un toque más grandes —
   son los partidos más importantes. */
.match-list.-live .match-block > .matchup > .home-name,
.match-list.-live .match-block > .matchup > .away-name { font-size: 16px; }
.match-list.-live .match-block .cl-logo { width: 28px; height: 28px; }
.match-list.-live .match-block > .matchup > .center > .result { font-size: 32px; }

/* Mobile (≤559px): layout "matchup", misma lógica que .feed-match (próximos
   partidos del dashboard) — escudos a los lados + marcador al centro arriba,
   nombres debajo centrados y hasta 2 líneas. Antes los nombres quedaban al
   costado en una línea con ellipsis y los largos salían cortados
   ("Corea d...", "Repúbli..."). */
@media (max-width: 559px) {
  .match-block > .matchup {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 7px;
    justify-items: center;
  }
  .match-block > .matchup > .home-badge { grid-area: 1 / 1; }
  .match-block > .matchup > .center     { grid-area: 1 / 2; }
  .match-block > .matchup > .away-badge { grid-area: 1 / 3; }

  .match-block > .matchup > .home-name,
  .match-block > .matchup > .away-name,
  .match-list.-live .match-block > .matchup > .home-name,
  .match-list.-live .match-block > .matchup > .away-name {
    grid-row: 2;
    font-size: 12px;
    text-align: center;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
  }
  .match-block > .matchup > .home-name { grid-column: 1; }
  .match-block > .matchup > .away-name { grid-column: 3; }

  /* Escudos un poco más grandes para el efecto "matchup". */
  .match-block > .matchup .cl-logo { width: 32px; height: 32px; }
}

/* Meta row at the bottom: round / kickoff / prediction status */
.match-block > .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 10px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.match-block > .meta .round { color: var(--ink-soft); }
.match-block > .meta .pick.-exact { color: var(--accent); }
.match-block > .meta .pick.-result { color: var(--gold); }
.match-block > .meta .pick.-miss { color: var(--coral); }

/* Mobile compaction */
@media (max-width: 480px) {
  .match-block > .matchup .name { font-size: 13px; }
  .match-block > .matchup > .score { font-size: 24px; padding: 0 4px; }
  .match-block > .matchup { padding: 10px 12px; }
  .match-block > .meta { padding: 8px 12px 10px; flex-wrap: wrap; }
}

/* ========================================
   Goleadores en los listados (estilo Promiedos).
   Banda de dos columnas bajo el marcador: a la izquierda los autores
   del equipo local, a la derecha los del visitante (agrupados por el
   equipo AL QUE LE CUENTA el gol — un gol en contra suma al rival).
   La puebla MatchesHelper#match_goals desde la columna denormalizada
   `matches.goals`, así que el listado no carga el detalle ni hace N+1.
   Compartida por la card (.match-block) y la fila fina (.feed-match).
   ======================================== */
.match-scorers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 14px;
  padding: 8px 16px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.match-scorers > .side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* El visitante va pegado a la derecha (su lado del marcador), no al centro. */
.match-scorers > .side.-away {
  align-items: flex-end;
  text-align: right;
}
.match-scorers > .side > .scorer {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Wrapper estable de goleadores (matches/_scorers_live): target del broadcast
   en vivo en cards y spotlight. Sin goles queda vacío → se saca del flujo para
   no dejar separación de más. */
.match-scorers-live:not(:has(.match-scorers)) { display: none; }

/* En la fila fina (.feed-match es flex) la banda ocupa su propia línea
   a todo el ancho debajo del marcador. */
.feed-match { flex-wrap: wrap; }
.feed-match > .match-scorers {
  flex-basis: 100%;
  padding: 4px 0 0;
  border-top: 0;
}

/* ────────── Chip "Tu pálpito" (.palpito-row) ──────────
   Compartido por la fila fina (.feed-match) y la card en vivo (.match-block).
   Estados: cargado (acento), en vivo (coral, parcial provisorio), sin pálpito
   (coral si todavía se puede / muted si no) y resuelto (verde/dorado/rojo).
   Markup en matches/_palpito_chip. */
.palpito-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.palpito-row .sc {
  font-family: var(--font-scoreboard);
  font-size: 15px;
  letter-spacing: 0.06em;
}
.palpito-row .note { font-weight: 600; }

/* Placement en la fila fina: su propia línea, full-width, como .match-scorers. */
.feed-match > .palpito-row { flex-basis: 100%; margin-top: 8px; }
/* Placement en la card en vivo: centrada bajo la meta (fit-content + auto). */
.match-block > .palpito-row { display: flex; width: fit-content; margin: 10px auto 14px; }

/* Cargado (partido por jugarse) */
.palpito-row.-done {
  color: var(--ink-soft);
  background: var(--accent-dim);
  border: 1px solid rgba(10, 219, 198, 0.25);
}
.palpito-row.-done .sc { color: var(--accent); }

/* En vivo: parcial provisorio */
.palpito-row.-live {
  color: var(--coral);
  background: rgba(255, 120, 102, 0.1);
  border: 1px solid rgba(255, 120, 102, 0.32);
}
.palpito-row.-live .sc { color: var(--coral); }

/* Sin pálpito y todavía a tiempo de cargar */
.palpito-row.-todo {
  color: var(--coral);
  background: rgba(255, 120, 102, 0.1);
  border: 1px solid rgba(255, 120, 102, 0.3);
}

/* Sin pálpito y ya no se puede (partido empezado/cerrado) */
.palpito-row.-none {
  color: var(--muted);
  background: rgba(236, 232, 220, 0.04);
  border: 1px solid var(--line);
}

/* Resuelto */
.palpito-row.-exact {
  color: var(--ink-soft);
  background: var(--green-dim);
  border: 1px solid rgba(47, 207, 106, 0.28);
}
.palpito-row.-exact .sc,
.palpito-row.-exact .note { color: var(--green); }
.palpito-row.-result {
  color: var(--ink-soft);
  background: var(--gold-dim);
  border: 1px solid rgba(255, 210, 63, 0.28);
}
.palpito-row.-result .sc,
.palpito-row.-result .note { color: var(--gold); }
.palpito-row.-miss {
  color: var(--muted);
  background: rgba(229, 89, 79, 0.08);
  border: 1px solid rgba(229, 89, 79, 0.22);
}
.palpito-row.-miss .sc { color: var(--ink-soft); }