/* ===== Layout geral ===== */
.formacao-wrap{display:flex;flex-direction:column;gap:14px}
.team-logo-sm{width:28px;height:28px;object-fit:contain}
.formacao-header{display:flex;justify-content:space-between;align-items:center}
.team-legend{display:flex;align-items:center;gap:8px;color:#ddd}
.formation-badge{font-size:.75rem;font-weight:800;background:#0e0e0e;color:#a6e1ff;padding:2px 6px;border-radius:6px;border:1px solid #2c2c2c}

/* ===== Campo (HORIZONTAL) ===== */
.pitch{
  position:relative; width:100%; max-width:1000px; margin-inline:auto;
  aspect-ratio: 3/2; /* horizontal */
  background:
    /* CÍRCULO CENTRAL — CONTORNO PRETO FINO */
    radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(255,255,255,.85) 17.9% 17.98%, transparent 17.98%),
    /* LINHA DO MEIO — PRETA */
    linear-gradient(to right,
      transparent calc(50% - 1px),
      rgba(255,255,255,.85) calc(50% - 1px),
      rgba(255,255,255,.85) calc(50% + 1px),
      transparent calc(50% + 1px)),
    /* GRAMA: ~10 LISTRAS TOTAIS (alternadas) */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.06) 0 10%,
      rgba(0,0,0,.12) 10% 20%),
    linear-gradient(#186a37, #0f5a2d); /* verde */
  border:2px solid rgba(255,255,255,.6); border-radius:14px; overflow:hidden;
}

/* GRANDES ÁREAS — BRANCAS */
.pitch::before, .pitch::after{
  content:""; position:absolute; top:12%; bottom:12%; width:14%;
  border:2px solid rgba(255,255,255,.85);
}
.pitch::before{ left:-2px; border-left:none; border-top-right-radius:10px; border-bottom-right-radius:10px; }
.pitch::after { right:-2px; border-right:none; border-top-left-radius:10px; border-bottom-left-radius:10px; }

/* PEQUENAS ÁREAS / GOLEIRAS — BRANCAS */
.goal{position:absolute; top:45%; bottom:45%; width:2.4%; border:2px solid rgba(255,255,255,.85)}
.goal.left{ left:-2px; border-left:none; border-top-right-radius:6px; border-bottom-right-radius:6px }
.goal.right{ right:-2px; border-right:none; border-top-left-radius:6px; border-bottom-left-radius:6px }

/* ===== Jogadores (posicionados por variáveis CSS --top/--left) ===== */
.player{
  position:absolute; 
  left: var(--left, 50%);
  top: var(--top, 50%);
  transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55);
  max-width:180px;
  z-index:1;
  text-decoration: none !important;
}
.player:hover{ z-index:2; }

.player.player-link {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.player.player-link:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.player .badge{
  width:46px; height:46px; border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.2);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  padding:0;
}
.player.home .badge{ background:#219653; }
.player.away .badge{ background:#2D9CDB; }

.player .avatar{display:block; width:100%; height:100%; object-fit:cover}
.avatar-fallback{font-weight:700}

/* ===== Labels dos jogadores - DESKTOP ===== */
@media (min-width: 769px) {
  .player .meta{ 
    background:none; 
    padding:0; 
    border-radius:0; 
    backdrop-filter:none; 
  }
  
  .player .label{ 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    gap:2px; 
    padding:0; 
    background:none;
    text-align: center;
  }
  
  .player .jnum{ 
    font-size:.78rem; 
    font-weight:800; 
    opacity:.95; 
    line-height:1;
    color: #fff;
  }
  
  .player .jname{
    font-size:.86rem; 
    font-weight:700; 
    max-width:150px; 
    text-align:center; 
    line-height:1.08;
    white-space:normal; 
    overflow:hidden; 
    text-overflow:ellipsis;
    color: #fff;
  }
  
  .player {
    margin-bottom: 8px;
  }
  
  .player .badge {
    margin-bottom: 2px;
  }
}

/* ===== Técnicos e reservas ===== */
.coaches{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.coach{display:flex;align-items:center;gap:8px;background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:8px 10px;color:#ddd}
.coach-photo{width:32px;height:32px;border-radius:50%;object-fit:cover}
.coach-info{display:flex;flex-direction:column;gap:2px}
.coach-label{color:#9aa0a6;font-size:0.8rem}
.coach-name{font-weight:600;color:#e6e6e6}

.reserve-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:8px;
  align-items:stretch;
}
.reserve-list .card{margin-top:0!important;}

.card{background:#111;border:1px solid #2a2a2a;border-radius:10px;padding:10px}

/* Linhas de reserva com grid consistente - 3 COLUNAS (foto, nome, número) */
.res-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.res-list li{
  display:block;
  border-radius:8px;
  color:#ddd;
  transition: background-color 0.2s ease;
}
.res-list li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.reserve-link {
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto; /* avatar | nome | número */
  align-items:center;
  gap:12px;
  padding:6px 8px;
  color: inherit;
  text-decoration: none !important;
}
.res-ava{
  width:26px !important;
  height:26px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:block !important;
  background-color: #333; /* Fundo para quando não há imagem */
  border: 1px solid #555; /* Borda para melhor visibilidade */
}
.res-name{
  color:#e6e6e6 !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  font-size:0.9rem !important;
}
.res-num{
  color:#b8c0cc !important;
  font-variant-numeric:tabular-nums !important;
  text-align:right !important;
  min-width:2.5ch !important;
  font-size:0.8rem !important;
  white-space:nowrap !important;
}
.res-sub{
  font-size:0.75rem !important;
  grid-column:2 / 4;
  white-space:normal !important;
  display:flex;
  align-items:center;
  gap:4px;
}

.res-sub-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex:0 0 auto;
}

.res-sub-svg{
  width:100%;
  height:100%;
}

.res-sub-circle{
  fill:none;
  stroke:#3b3f46;
  stroke-width:1.2;
}

.res-sub-arrow{
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.res-sub-arrow-in{
  stroke:#22c55e; /* verde */
}

.res-sub-arrow-out{
  stroke:#ef4444; /* vermelho */
}

.res-sub-text{
  display:inline-block;
}

.muted{color:#9aa0a6}

/* ===== MOBILE: Tooltip para jogadores e tamanhos reduzidos ===== */
@media (max-width: 768px){
  .pitch{max-width:100%}
  .coaches{grid-template-columns:1fr}
  .reserve-list{
    display:grid;
    grid-template-columns:1fr;
  }
  .reserve-link{ grid-template-columns:24px minmax(0,1fr) auto; gap:10px; }

  /* TAMANHO REDUZIDO DAS FOTOS DOS JOGADORES NO MOBILE */
  .player .badge{
    width:36px !important;
    height:36px !important;
  }

  /* Labels ocultas no mobile */
  .player .label {
    display: none !important;
  }
  
  .player .meta {
    display: none !important;
  }

  /* TOOLTIP CORRIGIDO: Mostrar apenas o nome do jogador */
  .player::after {
    content: attr(data-name); /* APENAS O NOME */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  /* Mostrar tooltip no hover (desktop) e active (mobile - ao segurar) */
  .player:hover::after,
  .player:active::after {
    opacity: 1;
  }

  /* Técnicos menores no mobile */
  .coach {
    padding: 6px 8px;
    gap: 6px;
  }

  .coach-photo {
    width: 28px;
    height: 28px;
  }

  .coach-label {
    font-size: 0.75rem;
  }

  .coach-name {
    font-size: 0.85rem;
  }

  /* Reservas menores no mobile */
  .res-name {
    font-size: 0.85rem !important;
  }
}

/* Garantir que o pitch tenha position relative */
.pitch { position: relative !important; }

/* Debug OFF */
.player::before { content: none !important; }

/* === CORREÇÃO PARA RESERVAS - ESTRUTURA DE 3 COLUNAS === */
.reserve-link {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 8px !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* CORREÇÃO CRÍTICA: Garantir que as imagens sejam sempre visíveis */
.res-ava {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  background-color: #333 !important; /* Fundo para fallback */
  border: 1px solid #555 !important; /* Borda para contraste */
  visibility: visible !important; /* Forçar visibilidade */
  opacity: 1 !important; /* Forçar opacidade total */
}

.res-name {
  color: #e6e6e6 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  font-size: 0.9rem !important;
}

.res-num {
  color: #b8c0cc !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
  min-width: 2.5ch !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
}

/* Garantir que elementos vazios não quebrem o layout */
.res-ava:empty {
  display: block !important;
  visibility: visible !important; /* Manter visível mesmo vazio */
  background-color: #444 !important; /* Cor diferente para avatares vazios */
}

.res-num:empty {
  display: block !important;
  visibility: hidden !important;
}

/* CORREÇÃO EXTRA: Forçar display e visibilidade para todas as imagens de reserva */
.res-list li img.res-ava {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Estilos para os links dos jogadores */
.player-link {
  text-decoration: none !important;
  color: inherit !important;
}

.player-link:hover .badge {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.reserve-link:hover .res-name {
  color: #ffffff !important;
}

/* Tamanhos ainda menores para telas muito pequenas */
@media (max-width: 480px) {
  .player .badge{
    width:32px !important;
    height:32px !important;
  }

  .coach-photo {
    width: 24px;
    height: 24px;
  }

  .coach-label {
    font-size: 0.7rem;
  }

  .coach-name {
    font-size: 0.8rem;
  }

  .reserve-link {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 5px 6px !important;
  }

  .res-ava {
    width: 22px !important;
    height: 22px !important;
  }

  .res-name {
    font-size: 0.8rem !important;
  }
}

/* === OVERRIDE: campo com imagem externa === */
.pitch{
  background: url('https://futstatsbr.com.br/public/assets/img/campo.png') center/contain no-repeat !important;
  border: none !important;
  background-color: transparent !important;
}

.pitch::before,
.pitch::after,
.goal{
  display: none !important;
  border: none !important;
  background: none !important;
}


.pitch::before,
.pitch::after,
.goal{
  display: none !important;
  border: none !important;
  background: none !important;
}

/* ===== Labels dos jogadores - base (todos os tamanhos) ===== */
.player .meta{ 
  background:none; 
  padding:0; 
  border-radius:0; 
  backdrop-filter:none; 
  margin-top:-2px;
}

.player .label{ 
  display:flex; 
  flex-direction:row; 
  align-items:center; 
  justify-content:center;
  gap:0; 
  padding:0; 
  background:none;
  text-align:center;
  white-space:nowrap;
}

.player .jnum{ 
  font-size:.78rem; 
  font-weight:800; 
  opacity:.95; 
  line-height:1;
  color:#fff;
  margin:0 3px 0 0;
  white-space:nowrap;
}

.player .jname{
  font-size:.86rem; 
  font-weight:700; 
  max-width:150px; 
  text-align:center; 
  line-height:1.08;
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis;
  color:#fff;
  margin:0;
}

/* ===== Tamanhos responsivos das fotos e labels ===== */

/* até 479px: extremamente compacto */
@media (max-width: 479px){
  .player .meta,
  .player .label{
    display:flex !important;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }

  .player .badge{
    width:18px !important;
    height:18px !important;
  }
  .player .jnum{
    font-size:.38rem !important;
    margin:0 2px 0 0 !important;
    white-space:nowrap !important;
  }
  .player .jname{
    font-size:.48rem !important;
    max-width:55px !important;
    white-space:nowrap !important;
  }

  /* desativa qualquer tooltip antiga */
  .player::after{
    content:none !important;
  }
}

/* 480px a 767px: bem pequeno */
@media (min-width: 480px) and (max-width: 767px){
  .player .meta,
  .player .label{
    display:flex !important;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }

  .player .badge{
    width:20px !important;
    height:20px !important;
  }
  .player .jnum{
    font-size:.44rem !important;
    margin:0 2px 0 0 !important;
    white-space:nowrap !important;
  }
  .player .jname{
    font-size:.54rem !important;
    max-width:65px !important;
    white-space:nowrap !important;
  }

  .player::after{
    content:none !important;
  }
}

/* 768px a 1199px: compacto, usado na maior parte dos tablets/notebooks pequenos */
@media (min-width: 768px) and (max-width: 1199px){
  .player .meta,
  .player .label{
    display:flex !important;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }

  .player .badge{
    width:22px !important;
    height:22px !important;
  }
  .player .jnum{
    font-size:.50rem !important;
    margin:0 3px 0 0 !important;
    white-space:nowrap !important;
  }
  .player .jname{
    font-size:.60rem !important;
    max-width:80px !important;
    white-space:nowrap !important;
  }

  .player::after{
    content:none !important;
  }
}

/* 1200px a 1499px: mais confortável, mas ainda moderado */
@media (min-width: 1200px) and (max-width: 1499px){
  .player .badge{
    width:26px !important;
    height:26px !important;
  }
  .player .jnum{
    font-size:.64rem !important;
  }
  .player .jname{
    font-size:.74rem !important;
    max-width:120px !important;
  }
}

/* 1500px+ telas grandes */
@media (min-width: 1500px){
  .player .badge{
    width:30px !important;
    height:30px !important;
  }
  .player .jnum{
    font-size:.72rem !important;
  }
  .player .jname{
    font-size:.82rem !important;
    max-width:140px !important;
  }
}

/* ===== SUPER COMPACTO – TELAS MENORES QUE 770px ===== */
@media (max-width: 769px){
  /* garante que as labels apareçam sempre em linha */
  .player .meta,
  .player .label{
    display:flex !important;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }

  /* foto AINDA menor */
  .player .badge{
    width:14px !important;
    height:14px !important;
  }

  /* número bem pequeno */
  .player .jnum{
    font-size:.30rem !important;
    margin:0 2px 0 0 !important;
    white-space:nowrap !important;
  }

  /* nome pequeno e com largura bem limitada */
  .player .jname{
    font-size:.40rem !important;
    max-width:40px !important;
    white-space:nowrap !important;
  }

  /* mata qualquer tooltip antiga de mobile */
  .player::after{
    content:none !important;
  }
}

/* ===== ESCALA EXTRA – TELAS MENORES QUE 770px (força redução geral) ===== */

/* até 599px: bem pequeno */
@media (max-width: 599px){
  .pitch .player{
    transform: translate(-50%, -30%) scale(0.55) !important;
    transform-origin: center top !important;
  }

  .pitch .player.player-link:hover{
    transform: translate(-50%, -30%) scale(0.6) !important;
  }
}

/* 600px a 769px: um pouco maior, mas ainda reduzido */
@media (min-width: 600px) and (max-width: 769px){
  .pitch .player{
    transform: translate(-50%, -30%) scale(0.75) !important;
    transform-origin: center top !important;
  }

  .pitch .player.player-link:hover{
    transform: translate(-50%, -30%) scale(0.8) !important;
  }
}

/* ===== Ajustes responsivos extra: cabeçalho e reservas ===== */

/* Telas até 599px: tudo bem compacto */
@media (max-width: 599px){
  /* Cabeçalho / formações */
  .team-logo-sm{
    width:20px !important;
    height:20px !important;
  }
  .team-legend{
    gap:4px !important;
    font-size:.70rem !important;
    line-height:1.1 !important;
  }
  .formation-badge{
    font-size:.55rem !important;
    padding:1px 4px !important;
    line-height:1.1 !important;
  }

  /* Técnicos */
  .coach{
    padding:4px 6px !important;
    gap:4px !important;
  }
  .coach-photo{
    width:24px !important;
    height:24px !important;
  }
  .coach-label{
    font-size:.70rem !important;
  }
  .coach-name{
    font-size:.80rem !important;
  }

  /* Reservas */
  .reserve-list{
    gap:8px !important;
  }
  .reserve-link{
    grid-template-columns:22px minmax(0,1fr) auto !important;
    gap:8px !important;
    padding:4px 6px !important;
  }
  .res-ava{
    width:22px !important;
    height:22px !important;
  }
  .res-name{
    font-size:.70rem !important;
  }
  .res-num{
    font-size:.70rem !important;
  }
}

/* 600px a 999px: um pouco maior, mantendo coerência com a formação */
@media (min-width: 600px) and (max-width: 999px){
  .team-logo-sm{
    width:24px !important;
    height:24px !important;
  }
  .team-legend{
    gap:6px !important;
    font-size:.78rem !important;
    line-height:1.15 !important;
  }
  .formation-badge{
    font-size:.62rem !important;
    padding:2px 6px !important;
    line-height:1.1 !important;
  }

  .coach{
    padding:6px 8px !important;
    gap:6px !important;
  }
  .coach-photo{
    width:26px !important;
    height:26px !important;
  }
  .coach-label{
    font-size:.75rem !important;
  }
  .coach-name{
    font-size:.85rem !important;
  }

  .reserve-list{
    gap:10px !important;
  }
  .reserve-link{
    grid-template-columns:24px minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:5px 7px !important;
  }
  .res-ava{
    width:24px !important;
    height:24px !important;
  }
  .res-name{
    font-size:.78rem !important;
  }
  .res-num{
    font-size:.78rem !important;
  }
}

/* ===== EXTRA SMALL – Cabeçalho super compacto para 280–399px ===== */
@media (max-width: 399px){
  .team-logo-sm{
    width:16px !important;
    height:16px !important;
  }
  .team-legend{
    gap:3px !important;
    font-size:.62rem !important;
    line-height:1.1 !important;
  }
  .formation-badge{
    font-size:.48rem !important;
    padding:1px 3px !important;
    line-height:1.05 !important;
  }
}

/* === TOGGLE DE VISUALIZAÇÃO DO CAMPO (PADRÃO: ESCONDIDO) === */
.pitch-view-toggle{
  display:none;
}

/* === MODO MOBILE: UM TIME POR VEZ NO CAMPO (< 770px) === */
@media (max-width: 769px){

  /* Mostra o toggle só no mobile */
  .pitch-view-toggle{
    display:flex;
    justify-content:center;
    gap:6px;
    margin:10px 0 4px;
  }

  .pitch-view-toggle .view-btn{
    border-radius:999px;
    padding:4px 10px;
    font-size:.78rem;
    border:1px solid #444;
    background:#141414;
    color:#eee;
    cursor:pointer;
    white-space:nowrap;
  }

  .pitch-view-toggle .view-btn.is-active{
    background:#0e9f6e; /* ajuste para a cor do tema */
    border-color:#0e9f6e;
  }

  /* Quando em modo "um time por vez", jogadores um pouco maiores e legíveis */
  [data-formacao][data-team-view] .player{
    transform: translate(-50%, -35%) scale(0.9) !important;
    transform-origin: center top !important;
  }

  [data-formacao][data-team-view] .player.player-link:hover{
    transform: translate(-50%, -35%) scale(0.95) !important;
  }

  [data-formacao][data-team-view] .player .badge{
    width:24px !important;
    height:24px !important;
  }

  [data-formacao][data-team-view] .player .jnum{
    font-size:.60rem !important;
    margin-right:3px !important;
    white-space:nowrap !important;
  }

  [data-formacao][data-team-view] .player .jname{
    font-size:.72rem !important;
    max-width:100px !important;
    text-overflow:ellipsis !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  /* Esconde o time oposto de acordo com a view ativa */
  [data-formacao][data-team-view="home"] .player.away,
  [data-formacao][data-team-view="away"] .player.home{
    opacity:0;
    pointer-events:none;
  }
}

/* === MODO SUPER MOBILE: 280px–450px (campo mais alto e menos amontoado) === */
@media (max-width: 450px){

  .pitch{
    /* bem mais alto, mais espaço vertical para espalhar os jogadores */
    aspect-ratio: 1 / 1;
  }

  [data-formacao][data-team-view] .player{
    /* um pouco menores e mais para cima para não encostar tanto */
    transform: translate(-50%, -34%) scale(0.82) !important;
    transform-origin: center top !important;
  }

  [data-formacao][data-team-view] .player.player-link:hover{
    transform: translate(-50%, -34%) scale(0.9) !important;
  }

  [data-formacao][data-team-view] .player .badge{
    width:22px !important;
    height:22px !important;
  }

  [data-formacao][data-team-view] .player .jnum{
    font-size:.54rem !important;
  }

  [data-formacao][data-team-view] .player .jname{
    font-size:.68rem !important;
    max-width:82px !important;
  }
}

/* 900px a 1199px: reforça tamanho das fotos e nomes em relação ao 768–1199 genérico */
@media (min-width: 900px) and (max-width: 1199px){
  .pitch .player{
    transform: translate(-50%, -50%) scale(0.95);
  }
  .pitch .player.player-link:hover{
    transform: translate(-50%, -50%) scale(1.02);
  }
  .player .badge{
    width:26px !important;
    height:26px !important;
  }
  .player .jnum{
    font-size:.60rem !important;
  }
  .player .jname{
    font-size:.78rem !important;
    max-width:130px !important;
  }
}


/* ===========================
   POS-MATCH • Escalação no campo: só foto + tooltip (número/nome) + popover ao clicar
   - Hover (mouse): mostra "número • nome"
   - Clique/toque: abre popover com "Ver Perfil" (sem navegar ao clicar no jogador)
   =========================== */

.pos-match-page .pitch .player .meta,
.pos-match-page .pitch .player .label,
.pos-match-page .pitch .player .jname,
.pos-match-page .pitch .player .jnum{
  display:none !important;
}

/* mantém apenas a foto (badge) */
.pos-match-page .pitch .player{
  cursor:pointer;
  text-decoration:none !important;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* garante que só a foto fique circular */
.pos-match-page .pitch .player .badge,
.pos-match-page .pitch .player .avatar{
  border-radius:999px !important;
}

/* TOOLTIP no hover (desktop): número + nome */
.pos-match-page .pitch .player::after{
  content: attr(data-pm-label) !important;
  position:absolute;
  bottom: calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background: rgba(0,0,0,.92);
  color:#fff;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:0 !important;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  pointer-events:none;
  z-index:1005;
}

/* só mostra hover onde existe hover de verdade */
@media (hover:hover){
  .pos-match-page .pitch .player:hover::after{ opacity:1; }
}

/* quando o popover está aberto, evita duplicar tooltip */
.pos-match-page .pitch .player.pm-open::after{ opacity:0 !important; }

/* POPOVER ao clicar/toque */
.pos-match-page .pitch .player .pm-popover{
  display:none;
  position:absolute;
  top: calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background: rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.18);
  border-radius:0 !important;
  padding:8px 10px;
  min-width: 120px;
  max-width: 200px;
  z-index:1010;
  text-align:center;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

.pos-match-page .pitch .player.pm-open .pm-popover{ display:block; }

.pos-match-page .pitch .player .pm-popover .pm-title{
  font-size:12px;
  font-weight:700;
  color:#fff;
  line-height:1.15;
}

.pos-match-page .pitch .player .pm-popover .pm-btn{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:5px 8px;
  font-size:12px;
  font-weight:600;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  border-radius:0 !important;
  cursor:pointer;
}

.pos-match-page .pitch .player .pm-popover .pm-btn:active{
  transform: translateY(1px);
}

/* END POS-MATCH LINEUP UI */