/* =============================================================================
   TO PRO JOGO - Escalação por cima da live (escalacao-live.js, v6)
   =============================================================================

   O mesmo vidro do placar, do dock e do chat em tela cheia: fundo escuro
   translúcido, desfoque, contorno de 1 px e sombra suave, cantos de 16 px.
   Sempre escuro (fica por cima do vídeo, nos dois temas do app).

   Lugar e tamanho vêm do JS (left, top, width, max-height), medidos a cada
   mudança no player para nunca cobrir outra peça. Camada 59: abaixo do
   replay (60), do chat (62) e dos botões (64); como o lugar nunca cruza
   ninguém, a camada só decide o vídeo, que fica por baixo.
   ========================================================================== */

.tpj-esc{
  position:absolute; z-index:59; left:0; top:0; margin:0; box-sizing:border-box;
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#FFFFFF; line-height:1.25; text-align:left;
  border-radius:16px; background:rgba(12,10,9,.66); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 28px -14px rgba(0,0,0,.7);
  -webkit-user-select:none; user-select:none; pointer-events:auto;
}
.tpj-esc[data-forma="chip"]{ border-radius:999px; overflow:visible; }
.tpj-esc[data-sem-lugar]{ visibility:hidden !important; pointer-events:none; }
.tpj-esc[hidden]{ display:none !important; }

/* Entrada: esmaece e desce 6 px. Sem animação com movimento reduzido. */
.tpj-esc.entrando{ animation:tpj-esc-entrar .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tpj-esc-entrar{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .tpj-esc.entrando{ animation:none; }
}

.tpj-esc button{ font-family:inherit; -webkit-tap-highlight-color:transparent; }
.tpj-esc button:focus-visible{ outline:2px solid #FF7A3D; outline-offset:2px; }

/* O chip (recolhido, ou sem lugar para o painel) */
.tpj-esc-chip{
  display:inline-flex; align-items:center; gap:7px; height:30px; margin:0; padding:0 11px 0 7px;
  border:0; border-radius:999px; background:transparent; color:#FFFFFF; cursor:pointer;
  font-size:12.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap;
}
.tpj-esc-chip i, .tpj-esc-x i{
  width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); margin-top:-3px;
}
.tpj-esc-x i{ transform:rotate(-135deg); margin-top:3px; }

/* O alto do painel: escudo, nome, formação e o botão de recolher */
.tpj-esc-topo{
  flex:none; display:flex; align-items:center; gap:9px; padding:10px 10px 8px 12px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.tpj-esc-tit{ flex:1; min-width:0; }
.tpj-esc-tit b{ display:block; font-size:14px; font-weight:900; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpj-esc-tit small{ display:block; margin-top:2px; font-size:11px; font-weight:700; color:rgba(255,255,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpj-esc-x{
  flex:none; display:grid; place-items:center; width:30px; height:30px; margin:0; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.1); color:#FFFFFF; cursor:pointer;
}
.tpj-esc-x:hover, .tpj-esc-chip:hover{ background:rgba(255,255,255,.14); }
.tpj-esc-brasao{ flex:none; object-fit:contain; display:block; }
.tpj-esc-escudo{ flex:none; display:block; }

/* Dois lados na live: uma aba por time */
.tpj-esc-abas{ flex:none; display:flex; gap:6px; padding:8px 10px 0; }
.tpj-esc-aba{
  flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:28px; margin:0; padding:0 8px;
  border:0; border-radius:999px; background:rgba(255,255,255,.08); color:#FFFFFF; cursor:pointer; font-size:11px; font-weight:800;
}
.tpj-esc-aba span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpj-esc-aba.on{ background:#FF7A3D; color:#1A0D05; }

/* O corpo rola por dentro quando o lugar livre é menor que ele */
.tpj-esc-corpo{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:8px 10px 10px;
}
.tpj-esc-vazio{ margin:4px 2px; font-size:12px; color:rgba(255,255,255,.78); }

.tpj-esc-av{
  position:relative; flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; overflow:hidden;
  font-size:10px; font-weight:800; box-shadow:0 0 0 1.5px rgba(255,255,255,.85);
}
.tpj-esc-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* Lista: foto, nome e posição */
.tpj-esc-lista{ list-style:none; margin:0; padding:0; }
.tpj-esc-lista li{ display:flex; align-items:center; gap:8px; padding:4px 0; }
.tpj-esc-lista li + li{ border-top:1px solid rgba(255,255,255,.06); }
.tpj-esc-nome{ flex:1; min-width:0; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpj-esc-pos{ flex:none; max-width:46%; font-size:10.5px; font-weight:800; color:#FFB08A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Mini campo: o mesmo desenho da aba Time (Times.campo), 100 x 140 */
.tpj-esc-campo{ position:relative; width:100%; aspect-ratio:100 / 140; border-radius:10px; overflow:hidden; }
.tpj-esc-campo .tm-campo-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.tpj-esc-tk{
  position:absolute; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; gap:2px;
  width:76px; text-align:center; pointer-events:none;
}
.tpj-esc-tk b, .tpj-esc-tk small{
  max-width:76px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:6px; padding:1px 5px; box-sizing:border-box;
  background:rgba(10,8,7,.74);
}
.tpj-esc-tk b{ font-size:10.5px; font-weight:800; }
.tpj-esc-tk small{ margin-top:-2px; font-size:8.5px; font-weight:700; color:#FFD9C4; }

/* Banco */
.tpj-esc-banco{ margin-top:8px; }
.tpj-esc-banco small{ display:block; margin-bottom:5px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.tpj-esc-banco ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 10px; }
.tpj-esc-banco li{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; max-width:100%; }
.tpj-esc-banco li span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpj-esc-banco .tpj-esc-av{ width:22px; height:22px; font-size:9px; }