/* =============================================================================
   TO PRO JOGO - Microfone da torcida na live (mic-live.js)
   =============================================================================
   Tudo mora DENTRO do conteiner do player (.aovivo-tela), entao vai junto
   para a tela cheia. O lugar (left/top) de cada coisa e decidido pelo
   mic-live.js, medindo o player: o botao fica a esquerda do "Chat" e do
   botao de tela cheia (mesma altura deles), sem cobrir o selo AO VIVO, o
   placar, o chat aberto, a logo do patrocinador nem o botao de replay.
   Camadas: os botoes do player sao z-index 64; o chat 62; o .lance-fab 60;
   o placar 58 e a logo 57. O botao do microfone e 64; a faixa 63; o menu e
   o aviso 66 (por cima de tudo, por instantes); a legenda 59.

   Vidro unico (04/10/2026): dock, painel, menu, aviso, legenda, placar e
   chat em tela cheia com o mesmo fundo escuro translucido (12,10,9 a 55 a
   62%), desfoque de 12 px, contorno de 1 px branco a 14% e sombra suave;
   superficies com cantos de 16 px, chips em pilula, botoes do dock 12 px.
   ========================================================================== */

/* ---- O dock: o fundo atras de [chave] [Chat] [tela cheia] ------------------
   Os tres botoes sao 44 x 44 com 6 px entre eles; o mic-live.js mede e poe o
   fundo 4 px em volta. So fundo: nao recebe toque. */
.live-dock{
  position:absolute; z-index:63; pointer-events:none; margin:0; box-sizing:border-box; border-radius:16px;
  background:rgba(12,10,9,.55); -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);
}
.live-dock[hidden]{ display:none; }
/* Mede as margens seguras da tela cheia (aovivo.css: --tc-sa-*). */
.mic-sonda{
  position:absolute; visibility:hidden; pointer-events:none; z-index:-1;
  top:var(--tc-sa-t, 0px); right:var(--tc-sa-r, 0px); bottom:var(--tc-sa-b, 0px); left:var(--tc-sa-l, 0px);
}

/* ---- A chave do microfone (role="switch") ----------------------------------
   Icone e trilho NA MESMA LINHA (04/10/2026): 72 x 44 dentro do dock. */
.mic-botao{
  position:absolute; z-index:64; top:12px; right:62px; width:72px; height:44px; padding:0 9px; margin:0;
  border:0; border-radius:12px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:7px;
  cursor:pointer; color:#FFFFFF; background:transparent; box-sizing:border-box;
  font:inherit; line-height:1; -webkit-tap-highlight-color:transparent; transition:background .15s ease, transform .15s ease;
}
.mic-botao[style*="left"]{ right:auto; }
.mic-botao:hover{ background:rgba(255,255,255,.12); }
.mic-botao .mic-ic{ display:grid; place-items:center; flex:none; }
.mic-botao .mic-ic svg{ width:18px; height:18px; display:block; }
.mic-trilho{
  position:relative; flex:none; width:30px; height:16px; border-radius:999px; box-sizing:border-box;
  background:#8E8E93; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); transition:background .18s ease, box-shadow .18s ease;
}
.mic-bolinha{
  position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#FFFFFF;
  box-shadow:0 1px 3px rgba(0,0,0,.45); transition:transform .18s ease;
}
/* Ligada: laranja, bolinha a direita. */
.mic-botao[aria-checked="true"] .mic-trilho{ background:#EA580C; box-shadow:none; }
.mic-botao[aria-checked="true"] .mic-bolinha{ transform:translateX(14px); }
.mic-botao[data-estado="ligando"] .mic-trilho{ opacity:.75; }
/* Enquanto a MINHA voz passa do limiar: pulso leve (vermelho-laranja). */
.mic-botao.falando .mic-trilho{ background:#DC2626; animation:mic-pulso 1.1s ease-in-out infinite; }
@keyframes mic-pulso{
  0%, 100%{ box-shadow:0 0 0 0 rgba(234,88,12,.7); }
  50%{ box-shadow:0 0 0 5px rgba(234,88,12,0); }
}
/* Sem permissao ou indisponivel: microfone riscado, chave apagada. */
.mic-botao[data-estado="bloqueado"]{ color:rgba(255,255,255,.7); }
.mic-botao[data-estado="bloqueado"] .mic-trilho{ background:rgba(142,142,147,.45); }
/* Player estreito: a chave desce para baixo do dock e leva o proprio fundo. */
.mic-botao.mic-sozinha{
  background:rgba(12,10,9,.55); -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);
}
.mic-botao:active{ transform:scale(.94); }
.mic-botao:focus-visible{ outline:3px solid #FFFFFF; outline-offset:2px; }
.mic-botao:disabled{ cursor:progress; }

/* ---- O painel de quem esta falando ----------------------------------------
   Flutua sobre o video; arrastavel (mic-live.js) e minimizavel (chip). */
.mic-faixa{
  position:absolute; z-index:61; left:12px; bottom:36px; margin:0; padding:8px 30px 8px 8px; box-sizing:border-box;
  max-width:calc(100% - 24px); border-radius:16px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  background:rgba(12,10,9,.55); -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);
}
.mic-faixa[style*="top"]{ bottom:auto; }
.mic-faixa.arrastando{ cursor:grabbing; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 16px 34px -12px rgba(0,0,0,.75); }
.mic-lista{ display:flex; flex-wrap:nowrap; align-items:flex-start; gap:6px; }
.mic-pessoa{
  --mic-nivel:0; flex:none; display:flex; flex-direction:column; align-items:center; gap:5px; width:62px; padding:2px 0 0; margin:0; border:0;
  background:none; color:#FFFFFF; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mic-pessoa:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; border-radius:10px; }
.mic-av{
  position:relative; flex:none; width:52px; height:52px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--btn-laranja, #C2410C); color:#FFFFFF; font-size:16px; font-weight:800; letter-spacing:.02em;
  box-shadow:0 0 0 2px rgba(255,255,255,.28); transition:box-shadow .12s linear;
}
.mic-av img{ width:100%; height:100%; object-fit:cover; display:block; }
/* O anel: acende com o nivel do audio (mic-live.js poe .som e --mic-nivel). */
.mic-pessoa.som .mic-av{
  box-shadow:0 0 0 calc(2px + var(--mic-nivel) * 3px) #22C55E, 0 0 calc(6px + var(--mic-nivel) * 14px) rgba(34,197,94,.75);
}
.mic-nome{ max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.mic-pessoa.mudo .mic-av{ box-shadow:0 0 0 2px rgba(255,255,255,.2); opacity:.5; }
.mic-pessoa.mudo .mic-nome{ text-decoration:line-through; opacity:.7; }
.mic-mais{ flex:none; align-self:center; padding:0 4px; color:rgba(255,255,255,.86); font-size:12px; font-weight:800; }
/* Compacta (pouco espaco): foto de 44 px, sem nome. */
.mic-faixa.mic-compacta{ padding:6px 28px 6px 6px; }
.mic-faixa.mic-compacta .mic-pessoa{ width:44px; }
.mic-faixa.mic-compacta .mic-av{ width:44px; height:44px; font-size:14px; }
.mic-faixa.mic-compacta .mic-nome{ display:none; }
/* Player grande: foto de 56 px. */
.tc-on > .mic-faixa:not(.mic-compacta) .mic-av{ width:56px; height:56px; }
.tc-on > .mic-faixa:not(.mic-compacta) .mic-pessoa{ width:64px; }
.mic-minimizar{
  position:absolute; top:5px; right:5px; width:22px; height:22px; padding:0; margin:0; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#FFFFFF; background:rgba(255,255,255,.16);
}
.mic-minimizar:focus-visible, .mic-chip:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }
/* Minimizado: so o chip "N falando". */
.mic-chip{ display:none; }
.mic-faixa.min{ padding:0; border-radius:999px; }
.mic-faixa.min .mic-lista, .mic-faixa.min .mic-minimizar{ display:none; }
.mic-faixa.min .mic-chip{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 13px 0 10px; margin:0; border:0; border-radius:999px;
  background:none; color:#FFFFFF; font:inherit; font-size:12.5px; font-weight:800; white-space:nowrap; cursor:pointer;
}
.mic-min-anel{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.45); flex:none; transition:background .12s linear, box-shadow .12s linear; }
.mic-min-anel.som{ background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.35); }

/* ---- O que o navegador bloqueou, o menu e o aviso ---------------------- */
.mic-ouvir{
  position:absolute; z-index:63; top:96px; right:10px; margin:0; border:0; border-radius:999px; padding:8px 12px;
  background:var(--btn-laranja, #C2410C); color:#FFFFFF; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.3); white-space:nowrap;
}
.mic-ouvir[style*="left"]{ right:auto; }
.mic-menu{
  position:absolute; z-index:66; margin:0; padding:6px; min-width:200px; max-width:calc(100% - 16px); box-sizing:border-box;
  display:flex; flex-direction:column; gap:2px; border-radius:16px;
  background:rgba(12,10,9,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 16px 40px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.14);
}
.mic-menu button{
  border:0; background:none; color:#FFFFFF; font:inherit; font-size:13px; font-weight:600; text-align:left;
  padding:10px 12px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.mic-menu button:hover, .mic-menu button:focus-visible{ background:rgba(255,255,255,.12); outline:none; }
.mic-menu button.perigo{ color:#FFB4B6; }
.mic-aviso{
  position:absolute; z-index:66; left:50%; top:42%; transform:translate(-50%, -50%); margin:0;
  max-width:min(420px, calc(100% - 32px)); padding:10px 14px; border-radius:16px; box-sizing:border-box;
  background:rgba(12,10,9,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#FFFFFF;
  font-size:13px; font-weight:600; line-height:1.4; text-align:center; box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
}
.mic-aviso[hidden]{ display:none; }
.mic-aviso.erro{ box-shadow:0 16px 40px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,146,149,.6); }
.mic-entrar{
  display:inline-block; margin-left:4px; padding:5px 12px; border:0; border-radius:999px;
  background:var(--btn-laranja, #C2410C); color:#FFFFFF !important; font:inherit; font-size:12.5px; font-weight:700;
  text-decoration:none; cursor:pointer;
}

/* "Com fone não dá eco": junto da dica, na primeira vez. */
.mic-fone{
  display:table; margin:8px auto 0; padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#FFFFFF; font-size:12px; font-weight:700;
}

/* "Legendas ligadas": junto da dica, na primeira vez (laranja suave). */
.mic-fone.mic-leg-aviso{ background:rgba(255,122,61,.22); }

/* ---- Legendas (beta): faixa estilo TV ----------------------------------------
   Fundo preto translucido, texto branco, nome curto em laranja; as 2 ultimas
   linhas; centralizada acima da marca d'agua e da logo, ate 70% da largura.
   O lugar (left/top/width) e do mic-live.js, no espaco que sobra. */
.mic-legenda{
  position:absolute; z-index:59; pointer-events:none; margin:0; box-sizing:border-box;
  left:50%; bottom:calc(36px + var(--tc-sa-b, 0px)); transform:translateX(-50%);
  width:max-content; max-width:70%; padding:6px 12px; border-radius:12px;
  background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
  color:#FFFFFF; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px; font-weight:600; line-height:1.35; text-align:center; text-wrap:balance;
  -webkit-user-select:none; user-select:none;
}
.mic-legenda[style*="top"]{ bottom:auto; transform:none; }
.mic-legenda-linha{
  margin:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
}
.mic-legenda-linha + .mic-legenda-linha{ margin-top:2px; }
.mic-legenda-linha b{ color:#FF7A3D; font-weight:800; margin-right:.25em; }
.tc-on > .mic-legenda{ font-size:15px; padding:8px 14px; }

/* O audio de cada pessoa: toca, mas nao aparece. */
.mic-audio{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:0; top:0; }

@media (prefers-reduced-motion: reduce){
  .mic-botao.falando .mic-trilho{ animation:none; box-shadow:0 0 0 2px rgba(255,255,255,.85); }
  .mic-botao, .mic-trilho, .mic-bolinha, .mic-av, .mic-min-anel{ transition:none; }
}