/* /assets/css/parciais.css
   ----------------------------------------------------------------------------
   Parciais ao vivo nos campinhos do Brasileirão (index). Badge de pontos cravado
   na borda inferior do avatar (estilo card de game), total "AO VIVO" no card,
   placar no header, selo de scout, MVP do time. Injetado por parciais.js.
   Paleta: laranja da marca + campo escuro. Tudo escopado em #jogos-root.
   -------------------------------------------------------------------------- */

/* Pílula de pontos IDÊNTICA à da Copa (.copa-parcial-badge): mesmo tamanho de
   fonte (0.62rem), padding (2px 7px), borda e raio. Posicionada logo abaixo do
   avatar com o MESMO espaçamento da Copa (avatar →4px→ pílula →1px→ nome), sem
   min-width nem clamp, pra não inflar no mobile. Antes era maior e FUT-style. */
#jogos-root .pitch .player .pdc-parcial-badge {
  position: absolute;
  top: 100%;
  left: 50%;
  --pdc-ty: 10px;
  transform: translate(-50%, var(--pdc-ty));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 2px 7px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Nome logo abaixo da pílula, com o MESMO gap da Copa (~1px). A pílula ocupa
   ~16px (fonte 0.62rem + padding 2px) a partir de +4px do avatar → nome em +21px.
   Uniforme mobile/desktop, igual à Copa (que não troca espaçamento por viewport). */
#jogos-root .pitch .player.tem-pilula .cap {
  top: calc(100% + 28px) !important;
}
#jogos-root .pitch .player.tem-pilula .alt-cap {
  top: calc(100% + 40px) !important;
}

/* Substituto (jogador em dúvida) em CINZA — mais elegante, como na Copa.
   Vale na versão normal e com parciais. */
#jogos-root .pitch .player .alt-cap {
  color: #c2ccd9 !important;
}

/* Cores por sinal — paleta da Copa (verde/vermelho mais encorpados e elegantes);
   anel branco e sombra preservados. */
#jogos-root .pitch .player .pdc-parcial-badge.is-pos {
  background: linear-gradient(180deg, #23945d, #167045);
  box-shadow: 0 2px 6px rgba(18, 112, 69, 0.42);
}
#jogos-root .pitch .player .pdc-parcial-badge.is-neg {
  background: linear-gradient(180deg, #d34038, #a52a22);
  box-shadow: 0 2px 6px rgba(165, 42, 34, 0.42);
}
#jogos-root .pitch .player .pdc-parcial-badge.is-zero {
  background: linear-gradient(180deg, #7b8493, #4b5563);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32);
}
#jogos-root .pitch .player .pdc-parcial-badge.is-out {
  background: rgba(17, 24, 36, 0.82);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  font-size: clamp(0.5rem, 2cqi, 0.62rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-color: rgba(255, 255, 255, 0.35);
}

/* Titular previsto que não entrou: avatar esmaecido. */
#jogos-root .pitch .player.is-nao-entrou img {
  filter: grayscale(1) brightness(1.12);
  opacity: 0.42;
}

/* MVP da parcial — maior pontuador do time: COROA acima da foto. Sem anel
   colorido de propósito: amarelo/dourado no anel confundia com status "dúvida". */
#jogos-root .pitch .player.is-mvp::after {
  content: '\01F451';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Selos de scout (⚽ gol / 👟 assist) — UM por produção, distribuídos em arco
   no SENTIDO HORÁRIO ao redor do avatar. O wrapper .pdc-seals cobre exatamente
   a área quadrada do avatar; cada .pdc-seal é posicionado via left/top inline
   (calculados por trig no parciais.js). */
#jogos-root .pitch .player .pdc-seals {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;   /* mesma área do avatar (img é quadrada no topo) */
  pointer-events: none;
  z-index: 6;
}
#jogos-root .pitch .player .pdc-seal {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 6;
  min-width: 16px;
  height: 16px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  background: #fff;
  color: #0a1324;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Cartão no canto SUPERIOR ESQUERDO da foto (amarelo CA / vermelho CV). */
#jogos-root .pitch .player .pdc-card {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 6;
  width: 11px;
  height: 15px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
#jogos-root .pitch .player .pdc-card.is-amarelo { background: #f6c500; }
#jogos-root .pitch .player .pdc-card.is-vermelho { background: #d8221f; }
/* Expulso (cartão vermelho): foto vira sombra — saiu da partida. */
#jogos-root .pitch .player.is-expulso img {
  filter: grayscale(0.6) brightness(0.55) !important;
}

/* Mobile: selos de scout (gol/assist) e cartões ~20% menores (pedido Hebert).
   Selo 16→13px, fonte 10→8px; cartão 11×15→9×12px. */
@media (max-width: 768px) {
  #jogos-root .pitch .player .pdc-seal {
    min-width: 13px;
    height: 13px;
    font-size: 8px;
    padding: 0 1.5px;
  }
  #jogos-root .pitch .player .pdc-card {
    width: 9px;
    height: 12px;
  }
}

/* Total AO VIVO — pill "broadcast": base de vidro escuro, dot laranja pulsando,
   rótulo discreto e a pontuação em destaque. */
#jogos-root .lineup-card .pdc-parcial-total {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(22, 26, 34, 0.92), rgba(30, 35, 46, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  backdrop-filter: blur(8px) saturate(130%);
}
#jogos-root .lineup-card .pdc-parcial-total b {
  font-weight: 900;
  font-size: 0.74rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-left: 1px;
}
#jogos-root .lineup-card .pdc-parcial-total.is-fim {
  background: linear-gradient(135deg, rgba(30, 35, 46, 0.92), rgba(22, 26, 34, 0.9));
  color: rgba(255, 255, 255, 0.72);
}
#jogos-root .lineup-card .pdc-parcial-total__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fb5904;
  box-shadow: 0 0 0 0 rgba(251, 89, 4, 0.6), 0 0 7px rgba(251, 89, 4, 0.9);
  animation: pdcLivePulse 1.6s ease-out infinite;
}

@keyframes pdcLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(251, 89, 4, 0.6), 0 0 7px rgba(251, 89, 4, 0.9); }
  70% { box-shadow: 0 0 0 7px rgba(251, 89, 4, 0), 0 0 7px rgba(251, 89, 4, 0.9); }
  100% { box-shadow: 0 0 0 0 rgba(251, 89, 4, 0), 0 0 7px rgba(251, 89, 4, 0.9); }
}

/* Card com parcial (jogo começou/encerrou): esconde o chip "Atualizado há…". */
#jogos-root .lineup-card.tem-parcial .chip-stack,
#jogos-root .lineup-card.tem-parcial .upd-chip {
  display: none !important;
}

/* MERCADO FECHADO (parciais ativas): some desfalques e cobradores — as
   substituições não valem mais, então essa info deixa de fazer sentido. */
body.is-mercado-fechado .status-card,
body.is-mercado-fechado .pdc-cob,
body.is-mercado-fechado .toggle-extras-wrap,
body.is-mercado-fechado .arb-slot .arb-pill,
body.is-mercado-fechado .arb-slot .arb-topline {
  display: none !important;
}

/* Placar no centro do header, no lugar do "×". */
.rd-placar-gols .pdc-placar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.rd-placar-gols .pdc-placar b {
  font-size: 1.15em;
  color: var(--pdc-laranja, #fb5904);
}
.rd-placar-gols .pdc-placar i {
  font-style: normal;
  opacity: 0.5;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  #jogos-root .lineup-card .pdc-parcial-total__dot { animation: none; }
}

/* ============================================================================
   DESFALQUES (lesionados/suspensos) — mais alinhado e organizado.
   Override scopado no índice (parciais.css só carrega aqui). Vale só com
   mercado ABERTO (com mercado fechado o bloco é escondido pelo gating acima).
   ========================================================================== */
#jogos-root .status-card .sg-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 5px;
}
#jogos-root .status-card .sg-title i { font-size: 0.82rem; color: #9aa3af; }
#jogos-root .status-card .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}
/* Chips DISCRETOS, neutros (sem cor) — minimalista, como o Hebert prefere. */
#jogos-root .status-card .tag {
  font-size: 0.68rem;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.35;
  border: 0;
  box-shadow: none;
  background: rgba(15, 23, 42, 0.045);
  color: #6b7280;
}
/* Layout estilo "cobradores" (organizado): cada categoria é uma LINHA — rótulo
   de largura fixa à esquerda + nomes à direita, tudo alinhado e empilhado. */
@media (min-width: 769px) {
  #jogos-root .status-card .status-body {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  #jogos-root .status-card .status-group {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: start;
    gap: 12px;
    padding: 7px 2px;
  }
  #jogos-root .status-card .status-group + .status-group {
    border-top: 1px solid rgba(15, 23, 42, 0.07);
  }
  #jogos-root .status-card .sg-title { margin-bottom: 0; padding-top: 2px; }
}

/* ============================================================================
   COBRADORES (bola parada) — leve refinamento de alinhamento.
   ========================================================================== */
#jogos-root .pdc-cob__row { padding: 6px 0; }

/* ============================================================================
   DESFALQUES (lesionados / suspensos) — mais discretos no índice.
   A informação principal é o campinho; estes painéis recuam visualmente.
   ========================================================================== */
#jogos-root .status-card {
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: none;
}
#jogos-root .status-card .sg-title {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #aab0b9;
}
#jogos-root .status-card .sg-title i { color: #c3c8d0 !important; }
#jogos-root .status-card .tag {
  font-size: 0.66rem;
  font-weight: 500;
  padding: 2px 8px;
  color: #7b818b;
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
}

/* ============================================================================
   ENTRARAM DO BANCO — painel escuro abaixo do campinho (só com parcial ativa).
   Alinhado: cabeçalho + soma à direita; chips nome + pontos.
   ========================================================================== */
#jogos-root .pdc-parcial-banco {
  margin: 6px 2px 0;
  padding: 7px 9px 8px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(20, 24, 32, 0.92), rgba(16, 20, 27, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
#jogos-root .pdc-parcial-banco__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 6px;
}
#jogos-root .pdc-parcial-banco__head i { color: #fb7a2a; font-size: 0.72rem; }
#jogos-root .pdc-parcial-banco__head em {
  margin-left: auto;
  font-style: normal;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  padding: 1px 7px;
  border-radius: 999px;
}
#jogos-root .pdc-parcial-banco__head em.is-pos { color: #5ee08f; background: rgba(34, 197, 94, 0.16); }
#jogos-root .pdc-parcial-banco__head em.is-neg { color: #f4a3a3; background: rgba(229, 72, 77, 0.18); }
#jogos-root .pdc-parcial-banco__head em.is-zero { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); }
/* Grid alinhado: nome à esquerda, pontos à direita, colunas casadas (igual Copa). */
#jogos-root .pdc-parcial-banco__chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
}
#jogos-root .pdc-parcial-banco__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 3px 5px 3px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#jogos-root .pdc-parcial-banco__chip .nm {
  font-size: 0.64rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#jogos-root .pdc-banco-pts {
  flex: none;
  font-size: 0.62rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
}
#jogos-root .pdc-banco-pts.is-pos { background: linear-gradient(180deg, #22c55e, #128043); }
#jogos-root .pdc-banco-pts.is-neg { background: linear-gradient(180deg, #f0565b, #c0353a); }
#jogos-root .pdc-banco-pts.is-zero { background: #5b6573; }

/* ============================================================================
   MOBILE (≤768px): badge de pontos no TAMANHO CHEIO, igual ao da Copa (mais
   encorpado e legível). Antes era afinado de propósito, mas ficava fraco no
   celular; agora padding 2px 7px + fonte ~0.62rem, espelhando .copa-parcial-badge.
   ========================================================================== */
@media (max-width: 768px) {
  /* Mobile: chip ~18% menor (0.5rem) e mais colado — o campinho é mais
     apertado no celular. Gaps ~4,4px em cima / ~5px embaixo (medidos),
     mantendo a pílula centralizada entre a foto e o nome. */
  #jogos-root .pitch .player .pdc-parcial-badge {
    --pdc-ty: 6px;
    font-size: 0.5rem;
    padding: 1.5px 6px;
  }
  #jogos-root .pitch .player.tem-pilula .cap {
    top: calc(100% + 18px) !important;
  }
  #jogos-root .pitch .player.tem-pilula .alt-cap {
    top: calc(100% + 29px) !important;
  }
  #jogos-root .pitch .player .pdc-parcial-badge.is-out {
    font-size: 0.46rem;
    padding: 1.5px 6px;
  }
}

/* ============================================================================
   ANEL DE STATUS (provável/dúvida) mais fino e elegante no índice.
   O padrão (--ring-w 0.18em) ficava grosseiro, sobretudo no mobile com avatar
   pequeno. Aqui afina o anel colorido e a borda branca. Só no #jogos-root.
   ========================================================================== */
#jogos-root .pitch .player img { border-width: 0.1em; }
#jogos-root .pitch .player.ok img {
  box-shadow: 0 0 0 0.13em var(--ring-ok, #16a34a), 0 0.5em 0.8em rgba(0, 0, 0, 0.26);
}
#jogos-root .pitch .player.doubt img {
  box-shadow: 0 0 0 0.13em var(--ring-duv, #f59e0b), 0 0.5em 0.8em rgba(0, 0, 0, 0.26);
}
@media (max-width: 768px) {
  #jogos-root .pitch .player img { border-width: 0.09em; }
  #jogos-root .pitch .player.ok img {
    box-shadow: 0 0 0 0.1em var(--ring-ok, #16a34a), 0 0.4em 0.7em rgba(0, 0, 0, 0.24);
  }
  #jogos-root .pitch .player.doubt img {
    box-shadow: 0 0 0 0.1em var(--ring-duv, #f59e0b), 0 0.4em 0.7em rgba(0, 0, 0, 0.24);
  }
}

/* ============================================================================
   PAINEL "NESTA PARTIDA" — modal centralizado ao tocar no jogador (parciais ao
   vivo). Centralizado e com z-index 1100 (acima da navbar mobile .nav-shortcuts,
   z-index 1050) pra não ficar escondido atrás dela. Conteúdo longo rola dentro
   do .pdc-np__list. Renderizado por parciais-painel.js. Namespace .pdc-np.
   ========================================================================== */
.pdc-np { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-start; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 12px; }
.pdc-np[hidden] { display: none; }
.pdc-np__bg {
  position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease;
  background: rgba(6, 10, 16, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pdc-np.open .pdc-np__bg { opacity: 1; }
.pdc-np__sheet {
  position: relative; width: 100%; max-width: 460px;
  max-height: 82vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #141821, #0e1218); color: #fff;
  border-radius: 18px; padding: 16px 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  transform: translateY(12px) scale(.98); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.pdc-np.open .pdc-np__sheet { transform: none; opacity: 1; }
/* O corpo é o container rolável (head + sub + lista vivem aqui dentro). */
.pdc-np__body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pdc-np__x {
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0;
  border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.pdc-np__head { display: flex; align-items: center; gap: 11px; padding-right: 34px; flex: none; }
.pdc-np__foto {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none;
  background: #fff; border: 2px solid rgba(255, 255, 255, 0.85);
}
.pdc-np__who { flex: 1; min-width: 0; }
.pdc-np__nome { display: block; font-size: 1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdc-np__meta { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: rgba(255, 255, 255, 0.66); }
.pdc-np__esc { border-radius: 3px; }
.pdc-np__tot {
  flex: none; font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums;
  padding: 2px 11px; border-radius: 999px;
}
.pdc-np__tot.is-pos { color: #0a1f12; background: linear-gradient(180deg, #39d07e, #16a35a); }
.pdc-np__tot.is-neg { color: #2a0c0c; background: linear-gradient(180deg, #ff7a7d, #e5484d); }
.pdc-np__tot.is-zero { color: #fff; background: rgba(255, 255, 255, 0.14); }
.pdc-np__sub { margin: 14px 2px 8px; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); flex: none; }
.pdc-np__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pdc-np__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); font-size: .82rem; }
.pdc-np__list li .l { color: rgba(255, 255, 255, 0.9); }
.pdc-np__list li .l em { font-style: normal; color: rgba(255, 255, 255, 0.55); font-weight: 700; }
.pdc-np__list li b { font-variant-numeric: tabular-nums; font-weight: 900; }
.pdc-np__list li.is-pos b { color: #4fe08a; }
.pdc-np__list li.is-neg b { color: #ff8a8d; }
.pdc-np__list li.is-zero b { color: rgba(255, 255, 255, 0.7); }
.pdc-np__vazio { color: rgba(255, 255, 255, 0.6); font-size: .85rem; padding: 14px 4px; text-align: center; }
body.pdc-np-open { overflow: hidden; }
body.is-parciais-ativas #jogos-root .pitch .player[data-id] { cursor: pointer; }
/* Mercado fechado / parciais AO VIVO: o clique abre a produção da rodada
   (parciais-painel.js), não o perfil. Esconde a tooltip "Ver perfil de ..."
   pra não confundir o usuário. */
body.is-parciais-ativas #jogos-root .pitch .player[data-id].is-jogador-link::after,
body.is-parciais-ativas #jogos-root .pitch .player[data-id].is-jogador-link::before {
  content: none !important;
  display: none !important;
}

/* ============================================================================
   DUELO de pontuação no header (parcial mandante × visitante) + TOQUES.
   ========================================================================== */
.rd-placar-card .pdc-duelo {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 5px; font-variant-numeric: tabular-nums;
}
.rd-placar-card .pdc-duelo__t {
  font-size: 0.82rem; font-weight: 800; color: #4b5563;
  padding: 1px 9px; border-radius: 999px; background: rgba(15, 23, 42, 0.05);
}
.rd-placar-card .pdc-duelo__t.is-win {
  color: #fff; background: linear-gradient(180deg, #22c55e, #16a34a);
  box-shadow: 0 1px 5px rgba(22, 163, 74, 0.3);
}
.rd-placar-card .pdc-duelo__lbl {
  font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #9aa3af;
}

/* Flash ao MARCAR: avatar clareia + badge dá um "pop". */
#jogos-root .pitch .player.pdc-flash img { animation: pdcFlashImg 0.85s ease-out; }
#jogos-root .pitch .player.pdc-flash .pdc-parcial-badge { animation: pdcFlashPop 0.6s ease-out; }
@keyframes pdcFlashImg {
  0% { filter: brightness(1.7) saturate(1.2); }
  100% { filter: brightness(1); }
}
@keyframes pdcFlashPop {
  0% { transform: translate(-50%, var(--pdc-ty)) scale(1); }
  35% { transform: translate(-50%, var(--pdc-ty)) scale(1.28); }
  100% { transform: translate(-50%, var(--pdc-ty)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #jogos-root .pitch .player.pdc-flash img,
  #jogos-root .pitch .player.pdc-flash .pdc-parcial-badge { animation: none; }
}

/* ============================================================================
   BARRA DE DESTAQUES da rodada — maiores pontuadores ao vivo (topo da home).
   Alinhada ao TRILHO (--rail). Rolagem horizontal por toque (scroll-snap).
   ========================================================================== */
#pdc-destaques {
  width: var(--rail-w, 100%);
  max-width: var(--rail-max, 680px);
  margin: 0 auto 14px;
  position: relative;
  overflow: hidden;
  padding: 12px 12px 8px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(120% 150% at 50% -30%, rgba(251, 89, 4, 0.07), transparent 60%),
    #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
/* Fio laranja fininho no topo — toque de marca, discreto (espelha a Copa). */
#pdc-destaques::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(251, 89, 4, 0.45), #fb5904, rgba(251, 89, 4, 0.45), transparent);
  opacity: 0.7;
}
.pdc-dest__hd {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 4px 9px; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280; text-align: center;
}
.pdc-dest__hd::before, .pdc-dest__hd::after {
  content: ""; flex: 0 1 48px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.16), transparent);
}
.pdc-dest__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78px;
  gap: 8px; overflow-x: auto; padding: 2px 2px 8px;
  /* centraliza quando os cards cabem (desktop); 'safe' volta pra esquerda
     quando estoura e precisa rolar (mobile) — senão o 1º card fica inacessível. */
  justify-content: safe center;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pdc-dest__row::-webkit-scrollbar { display: none; }
/* Viewport com pistas de "arraste pro lado": fade nas bordas (some no fim) +
   setinha que respira no canto direito (some quando o usuário arrasta). */
.pdc-dest__view { position: relative; }
.pdc-dest__fade {
  position: absolute; top: 0; bottom: 8px; width: 38px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 0.22s ease;
}
.pdc-dest__fade--l { left: 0; background: linear-gradient(90deg, #fff 28%, rgba(255, 255, 255, 0)); }
.pdc-dest__fade--r { right: 0; background: linear-gradient(270deg, #fff 28%, rgba(255, 255, 255, 0)); }
.pdc-dest.is-scroll-l .pdc-dest__fade--l { opacity: 1; }
.pdc-dest.is-scroll-r .pdc-dest__fade--r { opacity: 1; }
.pdc-dest__item {
  position: relative; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px 9px; border-radius: 14px; cursor: pointer; color: #1f2937;
  background: #faf8f4;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
@media (hover: hover) {
  .pdc-dest__item:hover { transform: translateY(-2px); border-color: rgba(251, 89, 4, 0.5); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1); }
}
/* Pódio: top 3 ganham fundo creme quente e moldura laranja. */
.pdc-dest__item:nth-child(-n+3) { border-color: rgba(251, 89, 4, 0.32); background: #fff6ec; }
.pdc-dest__pos {
  position: absolute; top: 6px; left: 8px; font-size: 0.58rem; font-weight: 900;
  color: #9aa3af; font-variant-numeric: tabular-nums;
}
.pdc-dest__item:nth-child(-n+3) .pdc-dest__pos { color: #e8730c; }
.pdc-dest__avatar { position: relative; width: 42px; height: 42px; }
.pdc-dest__foto {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: #fff; border: 2px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.pdc-dest__item:nth-child(-n+3) .pdc-dest__foto { border-color: rgba(251, 89, 4, 0.55); }
.pdc-dest__badge {
  position: absolute; right: -2px; bottom: -2px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}
.pdc-dest__nm {
  max-width: 70px; font-size: 0.62rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #374151;
}
.pdc-dest__pts {
  font-size: 0.72rem; font-weight: 900; font-variant-numeric: tabular-nums;
  padding: 1px 9px; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, #23945d, #167045);
  box-shadow: 0 1px 4px rgba(18, 112, 69, 0.32);
}
@media (max-width: 768px) {
  #pdc-destaques { width: 100%; }
  .pdc-dest__row { grid-auto-columns: 72px; gap: 7px; }
  .pdc-dest__item { padding: 9px 5px 8px; border-radius: 12px; }
  .pdc-dest__avatar { width: 38px; height: 38px; }
}

/* AO VIVO um pouco menor no mobile (avatar/card menores). */
@media (max-width: 768px) {
  #jogos-root .lineup-card .pdc-parcial-total {
    top: 6px; right: 7px; gap: 5px; padding: 2px 7px 2px 6px;
    font-size: 0.5rem; letter-spacing: 0.05em;
  }
  #jogos-root .lineup-card .pdc-parcial-total b { font-size: 0.64rem; }
  #jogos-root .lineup-card .pdc-parcial-total__dot { width: 6px; height: 6px; }
}

/* Stagger de entrada da barra de destaques (só na 1ª aparição). */
@keyframes pdcDestIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.pdc-dest.is-entering .pdc-dest__item { animation: pdcDestIn 0.42s ease-out backwards; }
@media (prefers-reduced-motion: reduce) {
  .pdc-dest.is-entering .pdc-dest__item { animation: none; }
}
.pdc-dest__seal {
  position: absolute; top: -3px; right: -4px; z-index: 2;
  min-width: 15px; height: 15px; padding: 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  border-radius: 999px; background: #fff; color: #0a1324;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}