/* =============================================================================
   TO PRO JOGO - Ao vivo das quadras (selo, cartao da quadra e folha do player)
   Usa as cores do app.css: --live (vermelho de "agora") e a .tag.lv.
   ========================================================================== */

/* O selo nos cartoes: e um botao (abre o player), com cara de tag. */
.aovivo-selo{
  border:0; cursor:pointer; font-family:inherit; line-height:1;
  display:inline-flex; align-items:center; gap:5px;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.tag.lv i, .aovivo-selo i{
  width:6px; height:6px; border-radius:50%; background:#fff; display:inline-block;
  margin-right:5px; animation:aovivo-pulso 1.4s ease-in-out infinite;
}
.aovivo-selo i{ margin-right:0; }
@keyframes aovivo-pulso{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){ .tag.lv i, .aovivo-selo i{ animation:none; } }

.aovivo-cartao-marcado{ position:relative; }
/* O selo fica no canto superior ESQUERDO do cartao: o direito e da estrela de
   arena favorita (favorita.js). Altura fixa para a etiqueta "Quadra coberta"
   (.selo, abaixo) saber onde comecar sem sobrepor. */
.destaque > .aovivo-selo{ position:absolute; top:13px; left:13px; right:auto; height:22px; z-index:4; }
html[data-visual="novo"] .destaque > .aovivo-selo{ top:16px; left:16px; }
/* Com as duas etiquetas, o AO VIVO vem primeiro e "Quadra coberta" desce para
   baixo dele (22px de altura + 8px de espaco). */
.destaque.aovivo-cartao-marcado > .selo{ top:43px; }
html[data-visual="novo"] .destaque.aovivo-cartao-marcado > .selo{ top:46px; }
/* Na lista da aba Quadras: aba pendurada na borda de cima do cartao, no canto
   esquerdo (o cartao corta o que passa da borda, entao fica toda dentro). */
.card > .aovivo-selo{ position:absolute; top:0; left:11px; right:auto; z-index:2; border-radius:0 0 8px 8px; }

/* O cartao na tela da quadra */
.aovivo-cartao{
  border:1px solid rgba(229,37,42,.4); background:rgba(229,37,42,.07);
  border-radius:16px; padding:14px 15px; margin:14px 0 6px;
}
.aovivo-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.aovivo-tempo{ font-size:11px; color:var(--dim); font-weight:700; }
.aovivo-cartao b{ display:block; font-size:13.5px; font-weight:800; color:var(--txt); margin-bottom:10px; }
.aovivo-fonte{ font-size:10px; line-height:1.5; color:var(--dim); margin-top:10px; }

/* v6: "Ver a live" no jogo marcado (ver-live.js). Na tela do jogo, o mesmo
   cartao vermelho da tela da quadra; nos cartoes de partida, um botao
   vermelho com o ponto que pulsa (parado com movimento reduzido). */
.vl-partida{ margin:0 0 16px; }
.vl-partida .btn{ width:100%; }
.btn.vl-cartao, html[data-visual="novo"] .btn.vl-cartao{
  display:inline-flex; align-items:center; gap:7px; width:auto; margin-top:12px;
  background:var(--live); color:#FFFFFF;
}
.vl-cartao i{
  width:7px; height:7px; border-radius:50%; background:#FFFFFF; display:inline-block; flex:none;
  animation:aovivo-pulso 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .vl-cartao i{ animation:none; } }

/* A folha do player */
.aovivo-folha .aovivo-titulo{ display:flex; align-items:center; gap:9px; min-width:0; }
.aovivo-folha h3{ margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 16:9 responsivo, como no exemplo oficial do player (padding-top 56.25%). */
.aovivo-tela{ position:relative; width:100%; padding-top:56.25%; background:#000;
  border-radius:14px; overflow:hidden; }
.aovivo-tela iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Video preenchendo o player (object-fit: cover feito por fora, 03/10/2026):
   o TPJ_LivePlayer (mic-live.js) da ao iframe 16:9 o menor tamanho que
   cobre o conteiner, centrado; o overflow:hidden do conteiner corta a sobra. */
.aovivo-tela > iframe.aovivo-cobre{ right:auto; bottom:auto; max-width:none; max-height:none; }
/* "Ativar som": so quando o navegador barrou o som da live. Chip pequeno e
   discreto (04/10/2026), no canto de baixo a direita, acima do botao de
   replay (ou no de baixo a esquerda, se ali cobrir algo): o lugar e do
   TPJ_LivePlayer (mic-live.js). Some ao tocar ou quando o som liga. */
.tpj-som{
  position:absolute; z-index:65; right:12px; bottom:12px; margin:0;
  display:flex; align-items:center; gap:6px; height:32px; padding:0 12px 0 10px; border:0; border-radius:999px; cursor:pointer;
  color:#FFFFFF; background:rgba(12,10,9,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px -12px rgba(0,0,0,.6);
  font:inherit; font-size:12.5px; font-weight:700; line-height:1; white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.tpj-som[style*="left"]{ right:auto; bottom:auto; }
.tpj-som:hover{ background:rgba(12,10,9,.78); }
.tpj-som:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }
.tpj-som svg{ flex:none; color:#FF7A3D; }

/* Selo "AO VIVO" dentro do video (04/10/2026): o mesmo dos cartoes das
   quadras (vermelho --live, ponto branco pulsando, a pilula do visual
   novo), no canto de cima a esquerda, centrado na altura do dock (botoes
   em 12 px, 44 de altura: centro em 34), dentro do espaco de 200 x 56
   reservado para ele. Classe propria (sem .tag): a pagina inicial da a
   .tag.lv do #aovivo position:relative, o que tiraria o selo do lugar.
   Nao recebe toque. */
.aovivo-tela > .tpj-selo-vivo{
  position:absolute; z-index:58; margin:0; pointer-events:none; box-sizing:border-box;
  left:calc(12px + var(--tc-sa-l, 0px)); top:calc(22px + var(--tc-sa-t, 0px)); height:24px; padding:0 10px 0 9px;
  display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  background:var(--live, #E5252A); color:#FFFFFF;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:11px; font-weight:800; letter-spacing:.08em; line-height:1; white-space:nowrap;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.55);
  -webkit-user-select:none; user-select:none;
}
.aovivo-tela > .tpj-selo-vivo i{
  width:6px; height:6px; border-radius:50%; background:#FFFFFF; display:inline-block; flex:none;
  animation:aovivo-pulso 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .aovivo-tela > .tpj-selo-vivo i{ animation:none; } }

/* Marca d'agua (04/10/2026): "toprojogo.com" no canto de baixo a esquerda,
   pequena, branca com leve sombra. Nao recebe toque; o painel de quem fala
   fica logo acima dela (mic-live.js). */
.aovivo-tela > .tpj-marca{
  position:absolute; z-index:56; margin:0; pointer-events:none;
  left:calc(12px + var(--tc-sa-l, 0px)); bottom:calc(12px + var(--tc-sa-b, 0px));
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:11.5px; font-weight:600; line-height:16px; letter-spacing:.01em; white-space:nowrap;
  color:#FFFFFF; opacity:.85; text-shadow:0 1px 2px rgba(0,0,0,.65), 0 0 8px rgba(0,0,0,.35);
  -webkit-user-select:none; user-select:none;
}
.aovivo-parado{ position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  font-size:12px; padding:16px; text-align:center; }

/* O pino da arena com quadra transmitindo (mapa.js) */
.pin .pin-aovivo{
  position:absolute; left:50%; top:-9px; transform:translateX(-50%); z-index:2;
  background:var(--live); color:#fff; font-size:8px; font-weight:900; letter-spacing:.06em;
  padding:2px 5px; border-radius:4px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.4);
}

/* ---- Tela cheia do player (UI.entrarTelaCheia, ui.js) --------------------
   Quem entra em tela cheia e o conteiner .aovivo-tela, com o player, o botao
   virtual de lance e o aviso dentro dele. Nativa (Fullscreen API, com a tela
   travada deitada onde da) ou simulada (iPhone: fixo na tela toda e, com o
   celular em pe, girado 90 graus). As margens seguras (env safe-area-inset)
   mudam de lado quando o quadro gira: o alto do quadro fica na direita da
   tela fisica, a direita do quadro fica embaixo, e assim por diante. */
.tc-botao{
  position:absolute; z-index:64; top:10px; right:10px; width:40px; height:40px; padding:0; border:0; border-radius:12px;
  display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(12,10,9,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-tap-highlight-color:transparent; transition:background .15s ease, transform .15s ease;
}
.tc-botao svg{ width:22px; height:22px; }
/* O aviso do botao de lance (lance.css) deixa o canto do botao de tela cheia livre. */
.aovivo-tela > .tc-botao ~ .lance-aviso, .aovivo-tela > .lance-aviso{ right:58px; }
.tc-botao .tc-fecha, .tc-botao.on .tc-abre{ display:none; }
.tc-botao.on .tc-fecha{ display:block; }
.tc-botao:hover{ background:rgba(12,10,9,.75); }
.tc-botao:active{ transform:scale(.94); }
.tc-botao:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
/* No player da live, o botao de tela cheia e a peca da direita do dock
   (03/10/2026): 44 x 44, como o Chat (a chave do microfone tem 72 x 44). O
   fundo semitransparente passa a ser o do dock (.live-dock, mic-live.css).
   12 px da borda tambem fora da tela cheia (04/10/2026), como dentro dela. */
.aovivo-tela > .tc-botao{ width:44px; height:44px; top:12px; right:12px; }
.aovivo-tela.tem-dock > .tc-botao{ background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.aovivo-tela.tem-dock > .tc-botao:hover{ background:rgba(255,255,255,.12); }

.tc-on{ --tc-sa-t:env(safe-area-inset-top, 0px); --tc-sa-r:env(safe-area-inset-right, 0px);
  --tc-sa-b:env(safe-area-inset-bottom, 0px); --tc-sa-l:env(safe-area-inset-left, 0px); }
.aovivo-tela.tc-on, .aovivo-tela:fullscreen{ padding-top:0; border-radius:0; background:#000; }
.aovivo-tela.tc-nativa{ width:100%; height:100%; }
.tc-on .tc-botao{ top:calc(12px + var(--tc-sa-t)); right:calc(12px + var(--tc-sa-r)); width:46px; height:46px; }
.aovivo-tela.tc-on > .tc-botao{ width:44px; height:44px; }
.tc-on > .lance-fab.no-player{ right:calc(18px + var(--tc-sa-r)); bottom:calc(64px + var(--tc-sa-b)); width:68px; height:68px; }
.tc-on > .lance-fab.no-player .lance-ic{ width:32px; height:32px; }
.tc-on > .lance-dica.no-player{ right:calc(96px + var(--tc-sa-r)); bottom:calc(84px + var(--tc-sa-b)); }
/* Abaixo do selo AO VIVO e do dock (04/10/2026: o selo agora existe de verdade). */
.tc-on > .lance-aviso{ top:calc(64px + var(--tc-sa-t)); left:calc(12px + var(--tc-sa-l)); right:auto; max-width:min(440px, calc(100% - 96px)); }

html.tc-aberta, html.tc-aberta body{ overflow:hidden !important; }
.tc-ancestral{ transform:none !important; filter:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  perspective:none !important; contain:none !important; clip-path:none !important; will-change:auto !important; }
.tc-ancestral.tc-sem-z{ z-index:auto !important; isolation:auto !important; }
.tc-simulada{
  position:fixed !important; inset:0 !important; z-index:9500 !important; margin:0 !important;
  width:100vw !important; height:100vh !important; height:100dvh !important; max-width:none !important;
}
@media (orientation: portrait){
  .tc-simulada{
    inset:auto !important; top:50% !important; left:50% !important;
    width:100vh !important; width:100dvh !important; height:100vw !important; height:100dvw !important;
    transform:translate(-50%, -50%) rotate(90deg) !important; transform-origin:50% 50%;
    --tc-sa-t:env(safe-area-inset-right, 0px); --tc-sa-r:env(safe-area-inset-bottom, 0px);
    --tc-sa-b:env(safe-area-inset-left, 0px); --tc-sa-l:env(safe-area-inset-top, 0px);
  }
}
.tc-dica{
  position:absolute; z-index:63; left:50%; top:50%; transform:translate(-50%, -50%); pointer-events:none;
  display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; white-space:nowrap;
  color:#fff; background:rgba(12,10,9,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:14px; font-weight:700; box-shadow:0 16px 40px -12px rgba(0,0,0,.6); transition:opacity .5s ease;
}
.tc-dica svg{ animation:tc-gira 1.6s ease-in-out infinite; transform-origin:50% 50%; }
.tc-dica.sumiu{ opacity:0; }
@media (orientation: landscape){ .tc-dica{ display:none; } }
@keyframes tc-gira{ 0%,30%{ transform:rotate(0); } 60%,100%{ transform:rotate(90deg); } }
@media (prefers-reduced-motion: reduce){ .tc-dica svg{ animation:none; } .tc-botao{ transition:none; } }