/* =============================================================================
   TO PRO JOGO - Logo do patrocinador e placar por cima da live
   (patrocinio-live.js e placar-live.js)
   =============================================================================

   Os dois moram DENTRO do conteiner do player (.aovivo-tela: #aoVivoTela no
   app, o .aovivo-tela do cartao na pagina inicial), entao vao junto para a
   tela cheia. Nenhum dos dois recebe toque (pointer-events:none) e os dois
   ficam por baixo dos botoes (z-index 57 e 58: o .lance-fab e 60, o chat 62,
   os botoes 64).

   O que fica livre, e o teste patrocinio-placar-crm.mjs mede:
     - canto de cima a esquerda, 200 x 56: o selo;
     - canto de cima a direita: o botao de tela cheia e o "Chat";
     - embaixo a direita: o botao do replay (.lance-fab);
     - a esquerda, de 62 px do alto ate 60 px do pe: o chat em tela cheia
       (largura min(340px, 42%), chat-live.css).

   LOGO: embaixo, centralizada. Largura ate 16% do player (56 a 160 px).
   Altura ate 12% do player; quando o player e estreito a ponto de a logo
   poder ficar embaixo do chat, a altura para em 46 px (10 + 46 = 56 px do
   pe, abaixo dos 60 px onde o chat termina). Quem decide e o
   patrocinio-live.js (atributo data-alto), medindo o player.

   PLACAR: faixa de transmissao de TV no alto, centralizada, ate 60% da
   largura e sem passar por cima do selo nem dos botoes: brasao (ou escudo
   com as iniciais, com borda sutil) e nome em caixa alta de cada lado,
   numeros grandes no centro, em branco nos dois lados, com o "x" laranja
   entre eles (04/10/2026), a parcial pequena embaixo. Em
   player estreito (nao cabe entre o selo e os botoes) vira a forma compacta
   (sigla de 3 letras), desce para logo abaixo deles, encostada na direita,
   e a letra diminui. Quem decide e o placar-live.js (atributos data-lugar e
   data-forma e as variaveis --tpj-pl-*), medindo o player.

   O lapis do dono da arena fica DENTRO da caixa do placar (e o unico pedaco
   dela que recebe toque) e abre o editor flutuante .tpj-pl-ed, que mora no
   mesmo conteiner (vai junto para a tela cheia), por cima dos botoes (66).
   ========================================================================== */

/* ---- Logo do patrocinador ------------------------------------------------ */
.tpj-pat{
  position:absolute; z-index:57; pointer-events:none; margin:0; padding:0;
  left:50%; bottom:calc(10px + var(--tc-sa-b, 0px)); transform:translateX(-50%);
  width:clamp(56px, 16%, 160px);
  height:min(12%, 46px);
}
.tpj-pat[data-alto="1"]{ height:12%; }
.tpj-pat[hidden]{ display:none; }
.tpj-pat img{
  position:absolute; inset:0; width:100%; height:100%; margin:0; display:block;
  object-fit:contain; object-position:50% 100%;
  opacity:0; transition:opacity .6s ease;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
  -webkit-user-select:none; user-select:none;
}
.tpj-pat img.on{ opacity:1; }

/* ---- Placar --------------------------------------------------------------- */
.tpj-placar{
  position:absolute; z-index:58; pointer-events:none; box-sizing:border-box; margin:0;
  top:calc(8px + var(--tc-sa-t, 0px)); left:50%; transform:translateX(-50%);
  max-width:var(--tpj-pl-max, 60%);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:var(--tpj-pl-fs, 14px); line-height:1; color:#FFFFFF;
  display:flex; align-items:stretch; gap:.35em;
  -webkit-user-select:none; user-select:none;
}
.tpj-placar[hidden]{ display:none; }
.tpj-placar[data-lugar="abaixo"]{
  top:calc(66px + var(--tc-sa-t, 0px)); left:auto; right:calc(8px + var(--tc-sa-r, 0px)); transform:none;
}
/* O mesmo vidro do dock, do painel de quem fala e do chat em tela cheia
   (04/10/2026): fundo escuro translucido, desfoque, contorno de 1 px e
   sombra suave; cantos de 16 px. */
.tpj-placar-faixa{
  flex:1 1 auto; min-width:0; box-sizing:border-box; display:flex; align-items:center;
  padding:.25em .5em;
  background:rgba(12,10,9,.62);
  border:1px solid rgba(255,255,255,.14); border-radius:16px; overflow:hidden;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.tpj-placar-faixa[hidden]{ display:none; }
.tpj-placar-time{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:.45em; }
.tpj-placar-time.a{ justify-content:flex-end; }
.tpj-placar-time.b{ justify-content:flex-start; }
.tpj-placar-marca{ flex:none; width:1.75em; height:2em; display:grid; place-items:center; }
.tpj-pl-escudo, .tpj-pl-brasao{ display:block; width:100%; height:100%; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.tpj-pl-brasao{ object-fit:contain; box-sizing:border-box; padding:.08em; border-radius:.35em; background:rgba(255,255,255,.06); box-shadow:0 0 0 1px rgba(255,255,255,.2); }
.tpj-placar-nome{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:700; font-size:.92em; letter-spacing:.05em; text-transform:uppercase;
}
.tpj-placar-sigla{ display:none; font-weight:700; font-size:.95em; letter-spacing:.06em; white-space:nowrap; }
.tpj-placar-centro{
  flex:none; min-width:4.6em; padding:0 .55em;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.tpj-placar-numeros{
  display:flex; align-items:baseline; gap:.18em; font-weight:800; font-size:1.75em; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
/* Os dois numeros em branco (quem esta na frente nao muda de cor). */
.tpj-placar-pts{ display:inline-block; min-width:1.1em; text-align:center; color:#FFFFFF; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.tpj-placar-pts.frente{ color:#FFFFFF; }
/* O "x" laranja entre os numeros. */
.tpj-placar-x{ flex:none; color:#FF7A3D; font-weight:700; font-size:.6em; line-height:1; letter-spacing:0; text-transform:lowercase; text-shadow:none; }
.tpj-placar-pts.mudou{ animation:tpj-pl-pop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes tpj-pl-pop{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.38); text-shadow:0 0 .45em rgba(255,122,61,.95); }
  100%{ transform:scale(1); }
}
.tpj-placar-parcial{
  margin-top:.2em; font-size:.6em; font-weight:600; letter-spacing:.1em; line-height:1.15;
  color:rgba(255,255,255,.78); white-space:nowrap; font-variant-numeric:tabular-nums; text-transform:uppercase;
}
.tpj-placar-parcial[hidden]{ display:none; }

/* Forma compacta (player estreito, retrato): sigla no lugar do nome. */
.tpj-placar[data-forma="compacto"] .tpj-placar-nome{ display:none; }
.tpj-placar[data-forma="compacto"] .tpj-placar-sigla{ display:inline; }
.tpj-placar[data-forma="compacto"] .tpj-placar-faixa{ padding:.25em .4em; border-radius:14px; }
.tpj-placar[data-forma="compacto"] .tpj-placar-time{ flex:none; gap:.3em; }
.tpj-placar[data-forma="compacto"] .tpj-placar-centro{ min-width:3.4em; padding:0 .4em; }
.tpj-placar[data-forma="compacto"] .tpj-placar-numeros{ font-size:1.5em; }

/* O lapis do dono da arena: o unico pedaco do placar que recebe toque. */
.tpj-placar-lapis{
  pointer-events:auto; flex:none; align-self:stretch; box-sizing:border-box;
  width:2.5em; min-height:2.5em; margin:0; padding:0; cursor:pointer;
  display:grid; place-items:center; color:#FFFFFF;
  background:rgba(12,10,9,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2); border-radius:12px;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
  -webkit-tap-highlight-color:transparent;
}
.tpj-placar-lapis svg{ width:1.25em; height:1.25em; }
.tpj-placar-lapis:hover, .tpj-placar-lapis[aria-expanded="true"]{ background:#E8621F; border-color:#E8621F; }
.tpj-placar-lapis:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }

/* ---- Editor flutuante do placar (dono da arena) -------------------------- */
.tpj-pl-ed{
  position:absolute; z-index:66; left:8px; top:66px; box-sizing:border-box;
  width:min(300px, calc(100% - 16px)); max-height:calc(100% - 16px); overflow:auto; overscroll-behavior:contain;
  padding:0 10px 10px; pointer-events:auto;
  background:rgba(20,17,15,.95); color:#FFFFFF;
  border:1px solid rgba(255,255,255,.16); border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  font:500 13px/1.3 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-user-select:none; user-select:none; text-align:left;
}
.tpj-pl-ed.arrastando{ opacity:.92; }
.tpj-pl-ed button{ font:inherit; -webkit-tap-highlight-color:transparent; }
.tpj-pl-ed button:focus-visible, .tpj-pl-ed input:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }
.tpj-pl-ed button:disabled{ opacity:.45; cursor:default; }
.tpj-pl-ed-topo{ display:flex; align-items:center; gap:8px; padding:8px 0 6px; cursor:move; touch-action:none; }
.tpj-pl-ed-topo b{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.tpj-pl-ed-dica{ flex:1; font-size:11px; opacity:.5; }
.tpj-pl-ed-x{
  flex:none; width:34px; height:34px; padding:0; border:0; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.1); color:#FFFFFF; font-size:20px; line-height:1;
}
.tpj-pl-ed-aviso{ margin:2px 0 6px; font-size:12px; color:#FFC27A; }
.tpj-pl-ed-liga{ display:flex; align-items:center; gap:8px; padding:4px 0 6px; cursor:pointer; }
.tpj-pl-ed-liga input{ width:18px; height:18px; margin:0; accent-color:#E8621F; }
.tpj-pl-ed-lados{ display:flex; align-items:stretch; gap:6px; margin:4px 0 6px; }
.tpj-pl-ed-vs{ align-self:center; font-weight:800; opacity:.5; }
.tpj-pl-ed-lado{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:6px;
  padding:6px; border-radius:10px; background:rgba(255,255,255,.06);
}
.tpj-pl-ed-time{
  display:flex; align-items:center; gap:6px; min-width:0; min-height:34px; padding:2px; margin:0;
  border:0; border-radius:8px; background:transparent; color:#FFFFFF; text-align:left; cursor:pointer;
}
.tpj-pl-ed-marca{ flex:none; width:22px; height:26px; display:grid; place-items:center; }
.tpj-pl-ed-nome{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
}
.tpj-pl-ed-time small{ flex:none; font-size:10px; font-weight:700; color:#FF9A66; }
.tpj-pl-ed-pts{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.tpj-pl-ed-pts button{
  flex:none; width:40px; height:38px; padding:0; border:0; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.12); color:#FFFFFF; font-weight:800;
}
.tpj-pl-ed-pts button[data-d="1"]{ background:#E8621F; }
.tpj-pl-ed-pts output{ min-width:2ch; text-align:center; font-size:20px; font-weight:900; font-variant-numeric:tabular-nums; }
.tpj-pl-ed input[type="text"], .tpj-pl-ed input[type="search"]{
  box-sizing:border-box; min-width:0; height:36px; margin:0; padding:0 10px;
  border:1px solid rgba(255,255,255,.22); border-radius:9px; background:rgba(0,0,0,.35); color:#FFFFFF;
  font:inherit; font-size:14px; -webkit-user-select:text; user-select:text;
}
.tpj-pl-ed input::placeholder{ color:rgba(255,255,255,.45); }
.tpj-pl-ed-campo{ display:flex; align-items:center; gap:8px; margin:4px 0 6px; }
.tpj-pl-ed-campo span{ flex:1; font-size:12px; opacity:.8; }
.tpj-pl-ed-campo input{ width:100px; }
.tpj-pl-ed-busca{ display:flex; flex-direction:column; gap:6px; margin:0 0 6px; padding:8px; border-radius:10px; background:rgba(255,255,255,.06); }
.tpj-pl-ed-busca[hidden]{ display:none; }
.tpj-pl-ed-rot{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
.tpj-pl-ed-lista{ display:flex; flex-direction:column; gap:2px; max-height:132px; overflow:auto; }
.tpj-pl-ed-op{
  display:flex; align-items:center; gap:8px; min-height:38px; padding:4px 6px; margin:0;
  border:0; border-radius:8px; background:transparent; color:#FFFFFF; text-align:left; cursor:pointer;
}
.tpj-pl-ed-op:hover{ background:rgba(255,255,255,.1); }
.tpj-pl-ed-op .tpj-pl-ed-marca{ width:26px; height:30px; }
.tpj-pl-ed-vazio{ margin:2px 0; font-size:12px; opacity:.65; }
.tpj-pl-ed-livre{ display:flex; gap:6px; }
.tpj-pl-ed-livre input{ flex:1; }
.tpj-pl-ed-livre button{ flex:none; height:36px; padding:0 12px; border:0; border-radius:9px; background:#E8621F; color:#FFFFFF; font-weight:800; cursor:pointer; }
.tpj-pl-ed-sec{ height:34px; border:0; border-radius:9px; background:rgba(255,255,255,.1); color:#FFFFFF; cursor:pointer; }
.tpj-pl-ed-acoes{ display:flex; justify-content:flex-end; }
.tpj-pl-ed-perigo{
  height:36px; padding:0 14px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(255,138,138,.6); background:transparent; color:#FF8A8A; font-weight:800;
}
.tpj-pl-ed-perigo.armado{ background:#D64545; border-color:#D64545; color:#FFFFFF; }
.tpj-pl-ed-sit{ margin:6px 0 0; font-size:11px; opacity:.7; }
.tpj-pl-ed-sit.ruim{ color:#FF8A8A; opacity:1; }

@media (prefers-reduced-motion: reduce){
  .tpj-pat img{ transition:none; }
  .tpj-placar-pts.mudou{ animation:none; }
}