/* Campo do Match Up: dois times frente a frente no mesmo campo horizontal,
   estilo escalação de transmissão de TV.

   Extraído de analisar.css para ser compartilhado por três telas:
   a aba Match Up de /Relatorios, a aba Match-up do modal Pré-jogo em
   /Jogos/Analisar e a página pública /creators/escalacao.

   Depende de .player-circle / .player-name (site.css) e das variáveis de tema.
   O comportamento (arrasto, setas, formas) mora em js/matchup.js. */

    /* ── Setas de movimentação dos jogadores ── */
    .setas-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

        .setas-svg line {
            stroke: #facc15;
            stroke-width: 3;
            stroke-linecap: round;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
            pointer-events: none;
        }

    body.modo-seta .setas-svg line {
        pointer-events: stroke;
        cursor: pointer;
    }

    /* ── Aba Match-up: mesmo campo horizontal da tela de Relatórios, com os
       dois times frente a frente (estilo escalação de transmissão de TV). ── */
    .mu-header {
        display: flex; align-items: center; justify-content: center; gap: 1.5rem;
        margin-bottom: 1rem; flex-wrap: wrap;
    }
    .mu-time-info { display: flex; align-items: center; gap: 10px; text-align: left; }
    .mu-time-info.mu-dir { text-align: right; flex-direction: row-reverse; }
    .mu-time-info img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
    .mu-time-nome { font-size: 16px; font-weight: 800; color: var(--text-strong); }
    .mu-time-jogo { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .mu-vs { font-size: 20px; font-weight: 900; color: var(--gold-ink); }

    .mu-campo {
        position: relative; width: 100%; aspect-ratio: 1.8 / 1;
        background: linear-gradient(90deg, #14532d 0%, #166534 50%, #14532d 100%);
        border: 2px solid rgba(255,255,255,.15); border-radius: 10px; overflow: hidden;
    }
    .mu-linha-meio { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.22); }
    .mu-circulo {
        position: absolute; left: 50%; top: 50%; height: 46%; aspect-ratio: 1;
        border: 1.5px solid rgba(255,255,255,.2); border-radius: 50%; transform: translate(-50%,-50%);
    }
    .mu-area-esq, .mu-area-dir { position: absolute; top: 18%; bottom: 18%; width: 11%; border: 1.5px solid rgba(255,255,255,.2); }
    .mu-area-esq { left: -1px; border-left: none; }
    .mu-area-dir { right: -1px; border-right: none; }
    .mu-gol-esq, .mu-gol-dir { position: absolute; top: 32%; bottom: 32%; width: 4.5%; border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
    .mu-gol-esq { left: -1px; border-left: none; }
    .mu-gol-dir { right: -1px; border-right: none; }

    .mu-slot {
        position: absolute; text-align: center; cursor: grab; color: #fff;
        font-size: 11px; text-shadow: 1px 1px 2px #000;
        /* --mu-base: escala do modo transmissão (1 fora dele), ver muAjustarTamanho */
        transform: translate(-50%,-50%) scale(var(--mu-base, 1));
        width: 62px; user-select: none;
        /* pointer events cuidam do arrasto no campo; sem isto o navegador
           tentaria rolar/gesticular em touch em vez de mover o jogador */
        touch-action: none;
    }
    .mu-slot:active { cursor: grabbing; }
    /* Slot sendo arrastado: acima dos demais (o elementsFromPoint do soltar
       pula o próprio arrastado no JS para achar o alvo por baixo) */
    .mu-slot.mu-arrastando { z-index: 20; cursor: grabbing; opacity: .85; }
    /* Sem isto o dragover/drop (banco→campo) dispararia nos filhos (círculo/
       nome) e o slot nunca receberia o drop — mesmo truque do campo principal. */
    .mu-slot * { pointer-events: none; }
    /* Exceção: o ℹ precisa receber o mouse para abrir o tooltip. O arrasto do
       slot ignora cliques nele (ver muPointerDown). */
    .mu-slot .btn-info-jogador { pointer-events: all; }
    /* × do slot: tira o jogador do campo e devolve ao elenco (muRemoverDoCampo).
       Canto oposto ao ℹ. Com mouse só aparece no hover, para não poluir os 22
       jogadores; em touch (sem hover) fica sempre visível. */
    .mu-slot .mu-btn-remover {
        pointer-events: all; position: absolute; top: -6px; right: -4px;
        width: 16px; height: 16px; padding: 0; border: none; border-radius: 50%;
        background: #ef4444; color: #fff; font-size: 12px; font-weight: 700;
        line-height: 16px; text-align: center; text-shadow: none; cursor: pointer; z-index: 2;
    }
    .mu-slot .mu-btn-remover:hover { background: #b91c1c; }
    @media (hover: hover) {
        .mu-slot .mu-btn-remover { opacity: 0; transition: opacity .12s; }
        .mu-slot:hover .mu-btn-remover { opacity: 1; }
        .mu-slot.mu-arrastando .mu-btn-remover { opacity: 0; }
    }
    /* Marcações do campo nunca participam de hit-test */
    .mu-linha-meio, .mu-circulo, .mu-area-esq, .mu-area-dir, .mu-gol-esq, .mu-gol-dir { pointer-events: none; }
    .mu-slot-sigla {
        font-size: 9px; font-weight: 700; color: var(--gold-ink);
        text-shadow: 1px 1px 2px #000; display: block; margin-bottom: 1px;
    }
    /* O .player-name global limita largura a 64px; dentro do slot já cabe */
    .mu-slot .player-circle {
        width: 34px; height: 34px; font-size: 12px; position: relative;
        display: flex; align-items: center; justify-content: center; overflow: visible;
    }
    /* Com foto o círculo vira a moldura da imagem e o número vai pro canto */
    .mu-slot .player-circle.mu-com-foto { background: #0b1220; }
    /* Borda na cor do time (esquerda x direita): com foto o fundo do círculo some
       e, sem isso, os 22 jogadores viram uma massa só de bordas brancas iguais */
    .mu-slot .player-circle-casa {
        border-color: var(--cor-camisa-casa, #dc2626);
        box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
    }
    .mu-slot .player-circle-vis {
        border-color: var(--cor-camisa-vis, #2563eb);
        box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
    }
    .mu-slot .mu-foto {
        position: absolute; inset: 0; width: 100%; height: 100%;
        border-radius: 50%; object-fit: cover; object-position: top center;
    }
    .mu-slot .mu-com-foto .mu-num {
        position: absolute; left: -7px; top: -5px; min-width: 16px; height: 16px;
        padding: 0 3px; border-radius: 8px; font-size: 10px; font-weight: 800;
        line-height: 16px; text-align: center; background: rgba(0,0,0,.8); color: #fff;
        border: 1px solid rgba(255,255,255,.5); text-shadow: none;
    }
    /* Média do jogador na competição do jogo, no canto de cima do círculo */
    .mu-slot .mu-media {
        position: absolute; right: -9px; top: -5px; min-width: 21px; height: 15px;
        padding: 0 3px; border-radius: 7px; font-size: 9.5px; font-weight: 800;
        line-height: 15px; text-align: center; color: #0b1220; background: #94a3b8;
        border: 1px solid rgba(0,0,0,.5); text-shadow: none;
    }
    .mu-media-alta { background: #22c55e; color: #0b1220; }
    .mu-media-media { background: #facc15; color: #0b1220; }
    .mu-media-baixa { background: #f87171; color: #0b1220; }
    /* Gols (bola) e assistências (chuteira) na competição, logo abaixo do
       círculo — sobe um pouco para encostar nele, como num card de jogador */
    .mu-stats {
        display: inline-flex; align-items: center; gap: 5px; margin-top: -5px;
        padding: 1px 5px; border-radius: 8px; background: rgba(2,6,23,.82);
        border: 1px solid rgba(255,255,255,.14); position: relative; z-index: 2;
    }
    .mu-stat {
        font-size: 9px; font-weight: 700; line-height: 13px; color: #e2e8f0;
        white-space: nowrap; text-shadow: none;
    }

    /* Layout: banco do time 1 | campo | banco do time 2.
       As colunas dos bancos são "auto" e quem manda na largura é o próprio
       .mu-banco — é isso que deixa o recolher (mu-banco-fechado) encolher a
       coluna e devolver a largura para o campo. */
    .mu-layout { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
    @media (max-width: 900px) {
        .mu-layout { grid-template-columns: 1fr; }
        .mu-banco, .mu-banco-fechado { width: auto; }
    }

    .mu-banco { width: 185px; }
    .mu-banco {
        background: var(--p-1); border: 1px solid var(--line); border-radius: 10px;
        overflow: hidden;
    }
    /* Cabeçalho do elenco em tokens do tema: o preto translúcido de antes virava
       uma faixa cinza apagada no modo claro */
    .mu-banco-header {
        display: flex; align-items: center; gap: 6px; padding: 8px 10px;
        background: var(--p-3); border-bottom: 1px solid var(--line);
        font-size: .8rem; font-weight: 700; color: var(--text-strong);
    }
    /* Recolhido: sobra a tira com a setinha para reabrir */
    .mu-banco-fechado { width: 34px; }
    .mu-banco-fechado .mu-banco-nome-time,
    .mu-banco-fechado .mu-banco-cor,
    .mu-banco-fechado .mu-btn-add,
    .mu-banco-fechado .mu-banco-lista,
    .mu-banco-fechado .mu-form-ficticio,
    .mu-banco-fechado .mu-busca { display: none; }
    .mu-banco-fechado .mu-banco-header { padding: 8px 0; justify-content: center; }
    .mu-banco-fechado .mu-banco-toggle { width: 24px; height: 24px; font-size: 15px; }

    .mu-banco-nome-time { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mu-banco-toggle {
        flex: 0 0 auto; width: 18px; height: 18px; padding: 0; line-height: 1;
        background: var(--p-1); border: 1px solid var(--line-strong);
        border-radius: 5px; color: var(--text-2); font-size: 12px; cursor: pointer;
    }
    .mu-banco-toggle:hover { background: var(--p-4); color: var(--text-strong); }
    /* Seletor da cor do time (borda dos jogadores no campo) — só aparece nas
       telas que pedem opts.cores em muRender */
    .mu-banco-cor {
        flex: 0 0 auto; width: 20px; height: 18px; padding: 0; cursor: pointer;
        background: transparent; border: 1px solid var(--line-strong); border-radius: 5px;
    }
    .mu-banco-cor::-webkit-color-swatch-wrapper { padding: 2px; }
    .mu-banco-cor::-webkit-color-swatch { border: none; border-radius: 3px; }
    .mu-banco-cor::-moz-color-swatch { border: none; border-radius: 3px; }

    .mu-banco-lista { max-height: 430px; overflow-y: auto; }
    .mu-banco-lista::-webkit-scrollbar { width: 5px; }
    .mu-banco-lista::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
    .mu-banco-lista::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
    .mu-banco-item {
        display: flex; align-items: center; gap: 8px; padding: 5px 10px;
        font-size: 12px; color: var(--text-2); cursor: grab; user-select: none;
        border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .mu-banco-item:hover { background: rgba(255,255,255,.07); }
    .mu-banco-item:active { cursor: grabbing; }
    .mu-banco-item * { pointer-events: none; }
    .mu-banco-num {
        flex: 0 0 24px; text-align: center; font-weight: 700; color: var(--gold-ink);
    }
    .mu-banco-nome { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mu-banco-pos { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--text-muted); }
    /* Média na competição também no elenco: o critério de quem entra */
    .mu-banco-media {
        flex: 0 0 28px; text-align: center; font-size: 10px; font-weight: 800;
        border-radius: 6px; padding: 1px 0; color: var(--text-muted);
        background: rgba(148,163,184,.18);
    }
    .mu-dica { text-align: center; color: var(--text-dim); font-size: 11px; margin-top: 8px; }

    /* ── Match-up: modo seta (mesmo visual das setas da análise) ── */
    .mu-toolbar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
    /* Seletor Fotos/Números, igual ao "Jogadores" da barra da análise */
    .mu-visual { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-muted); }
    .mu-visual select { width: auto; padding-top: 3px; padding-bottom: 3px; font-size: 12.5px; }

    /* Modo Números: sem foto, o círculo é a camisa (fundo e número nas cores do
       time) e o número volta para o meio, em vez do badge do canto */
    .mu-sem-fotos .mu-slot .mu-foto { display: none; }
    .mu-sem-fotos .mu-slot .player-circle.mu-com-foto.player-circle-casa { background: var(--cor-camisa-casa, #dc2626); }
    .mu-sem-fotos .mu-slot .player-circle.mu-com-foto.player-circle-vis { background: var(--cor-camisa-vis, #2563eb); }
    .mu-sem-fotos .mu-slot .player-circle { border-color: rgba(255,255,255,.85); }
    .mu-sem-fotos .mu-slot .mu-com-foto .mu-num {
        position: static; min-width: 0; height: auto; padding: 0; border: none; border-radius: 0;
        background: none; color: inherit; font-size: 12px; line-height: 1;
    }
    #muBtnSeta.ativo { background: #facc15; border-color: #facc15; color: #111; font-weight: 700; }
    .mu-campo.mu-modo-seta { cursor: crosshair; }
    .mu-campo.mu-modo-seta .mu-slot { cursor: pointer; }
    .mu-campo.mu-modo-seta .setas-svg line { pointer-events: stroke; cursor: pointer; }
    .mu-slot.mu-seta-origem .player-circle { outline: 3px solid #facc15; outline-offset: 2px; }

    /* ── Match-up: modo formas (áreas anotadas sobre o campo) ── */
    #muBtnForma.ativo { background: #ef4444; border-color: #ef4444; color: #fff; font-weight: 700; }
    .mu-forma-tipo {
        background: none; border: 1px solid rgba(239,68,68,.4); color: var(--bad); border-radius: 6px;
        width: 26px; height: 25px; padding: 0; font-size: 13px; line-height: 1; cursor: pointer;
    }
    .mu-forma-tipo.ativo { background: #ef4444; border-color: #ef4444; color: #fff; }
    .mu-campo.mu-modo-forma { cursor: crosshair; }
    .mu-forma { stroke: #ef4444; stroke-width: 2.5; fill: rgba(239,68,68,.07); pointer-events: none; }
    polyline.mu-forma { fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .mu-forma-texto {
        fill: #f87171; font-size: 13px; font-weight: 700; pointer-events: none;
        paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 3px;
    }
    .mu-campo.mu-modo-forma .mu-forma { pointer-events: all; cursor: pointer; }
    .mu-campo.mu-modo-forma .mu-forma-texto { pointer-events: all; cursor: move; }
    .mu-forma-input {
        position: absolute; transform: translate(-50%,-50%); z-index: 30; width: 180px;
        background: rgba(0,0,0,.78); border: 1px solid #ef4444; border-radius: 6px;
        color: #fff; font-size: 12px; padding: 4px 8px; text-align: center;
    }

    /* ── Match-up: jogador avulso (fora da API) ── */
    .mu-btn-add {
        margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px; padding: 0; line-height: 1;
        background: rgba(212,165,32,.15); border: 1px solid rgba(212,165,32,.4); border-radius: 6px;
        color: var(--gold-ink); font-size: 14px; font-weight: 700; cursor: pointer;
    }
    .mu-btn-add:hover { background: rgba(212,165,32,.3); }
    .mu-form-ficticio {
        display: flex; gap: 6px; padding: 8px 10px;
        background: rgba(0,0,0,.25); border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .mu-form-ficticio input {
        background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: 6px;
        color: var(--text-strong); font-size: 12px; padding: 4px 6px; min-width: 0;
    }
    .mu-form-ficticio .mu-fic-num { flex: 0 0 40px; }
    .mu-form-ficticio .mu-fic-nome { flex: 1 1 auto; }
    .mu-form-ficticio button {
        background: #d4a520; border: none; border-radius: 6px; color: #111;
        font-size: 11px; font-weight: 700; padding: 4px 8px; cursor: pointer;
    }

    /* Buscar jogador no acervo todo (só /creators/escalacao, ver muBuscarJogador) */
    .mu-busca {
        padding: 6px 10px; background: rgba(0,0,0,.18);
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .mu-busca-input {
        width: 100%; box-sizing: border-box;
        background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: 6px;
        color: var(--text-strong); font-size: 12px; padding: 4px 6px;
    }
    .mu-busca-res {
        margin-top: 6px; max-height: 240px; overflow-y: auto;
        border: 1px solid rgba(255,255,255,.1); border-radius: 6px; background: rgba(0,0,0,.35);
    }
    .mu-busca-item {
        display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 6px;
        background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.05);
        color: var(--text-strong); text-align: left; cursor: pointer;
    }
    .mu-busca-item:last-child { border-bottom: none; }
    .mu-busca-item:hover { background: rgba(212,165,32,.15); }
    .mu-busca-item img, .mu-busca-sem-foto {
        flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
    }
    .mu-busca-sem-foto {
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,.1); font-size: 10px; color: var(--text-muted);
    }
    .mu-busca-txt { display: flex; flex-direction: column; min-width: 0; }
    .mu-busca-nome, .mu-busca-clube { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mu-busca-nome { font-size: 12px; font-weight: 600; }
    .mu-busca-clube { font-size: 10px; color: var(--text-muted); }
    .mu-busca-vazio { padding: 6px; font-size: 11px; color: var(--text-muted); }

    /* Destaque rápido no jogador que acabou de entrar (ou que já estava lá) */
    @keyframes mu-piscar { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 2px #d4a520; } }
    .mu-piscar { animation: mu-piscar .9s ease 2; }

    /* ══ Modo estádio: gramado em perspectiva ═══════════════════════════════
       Ligado só por quem chama muRender com opts.campo3d (hoje /creators/escalacao).
       Sem a classe, tudo aqui embaixo fica inerte e o campo continua chapado —
       é assim que a aba Match Up de /Relatorios e o modal Pré-jogo seguem iguais.

       O gramado inclina de verdade (rotateX + preserve-3d), então as traves e a
       rede são PLANOS levantados dele, não desenhos fingindo profundidade. Os jogadores, ao contrário, são contra-rotacionados e
       reescalados (--mu-k, calculado em matchup.js) para sair todos do mesmo
       tamanho: gramado em fuga, escalação legível — o padrão de transmissão. */

    /* Sem o modo estádio a cena some do layout e o grid fica exatamente como era */
    .mu-cena { display: contents; }

    .mu-cena-3d {
        display: block; position: relative; width: 100%;
        /* 1.56 inclinado por 30° volta a ler como o 1.8 do campo chapado */
        /* 1.5 inclinado por 30° volta a ler como o 1.8 do campo chapado */
        aspect-ratio: 1.5 / 1;
        /* Teto de altura, via largura: com aspect-ratio fixo, numa tela larga
           (ainda mais com os elencos recolhidos) o campo passava de 900px de
           altura e não cabia mais na janela. */
        max-width: min(100%, calc((100vh - 250px) * 1.5));
        /* respiro para a borda de baixo, que a perspectiva aproxima e alarga */
        margin: 10px auto 30px;
    }

    /* Entorno: o piso escuro em volta do gramado, no MESMO plano dele (o JS
       aplica o rotateX). Vem antes do campo no HTML, então fica por baixo. */
    .mu-cena-3d > .mu-campo-3d {
        position: absolute; inset: 0; width: auto; aspect-ratio: auto;
        /* preserve-3d é o que permite levantar as traves e a rede do gramado;
           por isso overflow tem de ser visible (overflow:hidden achata o 3D) e
           a borda vira box-shadow, que não entra no cálculo de layout. */
        transform-style: preserve-3d; overflow: visible;
        /* Linha lateral branca, o entorno de grama mais escura (onde as goleiras
           ficam apoiadas: antes elas flutuavam sobre o fundo da página, e no
           tema claro viravam blocos cinza no branco) e um fio para o entorno
           não se dissolver no fundo. --mu-entorno vem de muAjustarGol3d. */
        /* Cantos retos: o box-shadow herda o arredondamento e o aumenta junto
           com o entorno, e o campo virava uma pílula */
        border: none; border-radius: 0;
        box-shadow:
            0 0 0 2px rgba(255,255,255,.6),
            0 0 0 var(--mu-entorno, 40px) #0f4224,
            0 0 0 calc(var(--mu-entorno, 40px) + 1px) rgba(0,0,0,.35);
        background:
            /* fundo do campo mais escuro: distância */
            linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 42%),
            /* faixas de corte do gramado */
            repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 6.25%, transparent 6.25% 12.5%),
            linear-gradient(90deg, #14532d 0%, #166534 50%, #14532d 100%);
    }

    /* Forro do gramado. Em preserve-3d o Chrome corta o gramado pelo plano de
       cada jogador em pé (a árvore BSP que ordena os planos) e desenha os pedaços
       separados; na emenda sobra uma fresta de ~1px em que aparecia o fundo
       escuro — as "linhas pretas" que surgiam ao arrastar alguém, mais na parte
       de baixo. Uma cópia do gramado 3px abaixo tem as emendas em outro lugar
       (o mesmo plano do jogador a corta ~5px ao lado), então pela fresta passa
       grama. O inset de 2px mantém o forro escondido sob a borda do gramado. */
    .mu-cena-3d > .mu-campo-3d::before {
        content: ""; position: absolute; inset: 2px; pointer-events: none;
        background: inherit; transform: translateZ(-3px);
    }

    /* Marcações 1px acima do gramado. No mesmo plano dele, o Chrome (que corta o
       gramado em pedaços para ordenar contra os jogadores em pé) às vezes pinta
       a grama por cima da linha: a linha do meio sumia num trecho perto do fundo. */
    .mu-campo-3d .mu-linha-meio, .mu-campo-3d .mu-area-esq, .mu-campo-3d .mu-area-dir,
    .mu-campo-3d .mu-gol-esq, .mu-campo-3d .mu-gol-dir, .mu-campo-3d .setas-svg { transform: translateZ(1px); }
    .mu-campo-3d .mu-circulo { transform: translate(-50%, -50%) translateZ(1px); }

    /* O retângulo do gol vira a trave de verdade, e no lugar dele entra a
       pequena área, que faltava para o gol ter onde "pousar" no gramado */
    .mu-campo-3d .mu-gol-esq, .mu-campo-3d .mu-gol-dir { display: none; }
    @media (min-width: 901px) {
        .mu-campo-3d .mu-gol-esq, .mu-campo-3d .mu-gol-dir {
            display: block; top: 30%; bottom: 30%; width: 5.2%; background: none;
            border-color: rgba(255,255,255,.3);
        }
    }

    /* Jogador: desfaz a inclinação do gramado e a escala da perspectiva, para
       ficar de frente e do mesmo tamanho em qualquer ponto do campo.
       O --mu-z de 30px NÃO é enfeite: em pé, o slot atravessa o plano do
       gramado e a metade de baixo (nome, gols/assistências) fica enterrada
       sob a grama. Levantar meia altura resolve — e é o mesmo destaque que a
       escalação de transmissão dá, com o jogador flutuando sobre o campo. */
    /* Resolução do jogador (--mu-res): com perspective o Chrome rasteriza cada
       slot no tamanho de layout (círculo de 34px) e depois inclina e estica essa
       textura — --mu-k e, na transmissão, --mu-base de até 2,4× —, e as fotos
       saíam borradas perto das da Analisar, que é chapada. O zoom desenha o
       slot N vezes maior e o scale devolve ao mesmo tamanho na tela: posição e
       tamanho iguais, textura com N vezes mais pixels. O zoom também multiplica
       os px do transform, daí o translateZ dividido por N. */
    .mu-campo-3d .mu-slot {
        --mu-res: 3;
        zoom: var(--mu-res);
        /* A altura que o jogador sobe acompanha o tamanho dele (--mu-base): na
           transmissão o slot dobra de tamanho e, com os 30px fixos, a metade de
           baixo (o nome) dos jogadores do fundo afundava na grama. */
        /* --mu-frente: o arrastado vem na direção da câmera (eixo do próprio
           slot, já de frente), então cresce um pouco sem subir nem descer na tela */
        transform: translate(-50%, -50%) translateZ(calc(var(--mu-z, 30px) * var(--mu-base, 1) / var(--mu-res)))
                   rotateX(calc(-1 * var(--mu-ang, 30deg)))
                   translateZ(calc(var(--mu-frente, 0px) / var(--mu-res)))
                   scale(calc(var(--mu-k, 1) * var(--mu-base, 1) / var(--mu-res)));
    }
    /* Em preserve-3d o z-index não ordena: quem está sendo arrastado vem para
       a frente (em direção à câmera) para passar por cima dos outros. Antes ele
       subia no eixo do gramado, e ao soltar descia de volta: parecia afundar no
       campo. Para a frente ele só cresce um pouco, e ao soltar volta ao tamanho
       no mesmo lugar. Só o transform anima; left/top seguem o cursor sem atraso. */
    .mu-campo-3d .mu-slot { transition: transform .14s ease-out; }
    .mu-campo-3d .mu-slot.mu-arrastando { --mu-frente: 60px; }
    @media (prefers-reduced-motion: reduce) { .mu-campo-3d .mu-slot { transition: none; } }
    .mu-campo-3d .mu-forma-input {
        transform: translate(-50%, -50%) translateZ(50px)
                   rotateX(calc(-1 * var(--mu-ang, 30deg)));
    }

    /* ── Gol: quatro planos levantados do gramado ───────────────────────────
       --mu-golh (a altura do gol, em px) vem do JS; todo o resto é medido nela.
       A boca ocupa --mu-boca-h do eixo de profundidade e a rede tem profundidade
       igual à altura, como num gol de verdade. Os 24% são o dobro da proporção
       real (7,32m em 68m dá 11%): o suficiente para o gol se ver, sem virar a
       caricatura que os 36% do desenho 2D viravam quando ganharam volume.

       Boca:     plano vertical na linha de fundo. rotateY(±90°) com a origem na
                 própria linha leva a LARGURA do elemento para o eixo Z, que
                 vira a altura do gol. Sem malha: é vazada, como o gol de verdade.
       Teto:     sai do travessão (translateZ até o alto) e cai para trás até o
                 chão. 135° é o ângulo que aponta o elemento para
                 (−profundidade, −altura) — por isso a largura dele é a
                 hipotenusa, √2 × altura.
       Laterais: planos perpendiculares à boca (rotateX(90°) em torno da aresta
                 de cima, que passa a ser a linha do chão), recortados em
                 triângulo: altura cheia no poste, zero na barra de trás. */
    .mu-campo-3d { --mu-boca-top: 38%; --mu-boca-h: 24%; }
    .mu-gol-frame, .mu-gol-teto, .mu-gol-lado, .mu-gol-sombra {
        position: absolute; pointer-events: none;
        top: var(--mu-boca-top); height: var(--mu-boca-h);
    }

    /* Malha: 5px e traço de 1px. Mais grosso que isso e a perspectiva
       transforma a rede num alambrado. */
    /* Rede em losango, como a de estádio: a malha quadrada em perspectiva
       virava listras grossas e escurecia o gol inteiro */
    .mu-gol-teto, .mu-gol-lado {
        background-color: rgba(255,255,255,.06);
        background-image:
            repeating-linear-gradient(45deg,  rgba(255,255,255,.3) 0 1px, transparent 1px 7px),
            repeating-linear-gradient(-45deg, rgba(255,255,255,.3) 0 1px, transparent 1px 7px);
        border: 1px solid rgba(255,255,255,.5);
    }

    /* Boca: os dois postes (top/bottom) e o travessão (a aresta que vai pro alto).
       A aresta que encosta no gramado não leva borda. */
    /* Traves na grossura proporcional ao gol (12cm num gol de 2,44m, aqui
       um pouco mais, para se ler de longe) */
    .mu-gol-frame {
        width: var(--mu-golh, 34px);
        border: max(3px, calc(var(--mu-golh, 34px) * .09)) solid #fff;
        box-shadow: 0 0 8px rgba(0,0,0,.45);
    }
    .mu-gol-frame-esq { left: 0;  transform-origin: left center;  transform: rotateY(-90deg); border-left: none; }
    .mu-gol-frame-dir { right: 0; transform-origin: right center; transform: rotateY(90deg);  border-right: none; }

    .mu-gol-teto { width: calc(var(--mu-golh, 34px) * 1.4142); }
    .mu-gol-teto-esq { left: 0;  transform-origin: left center;  transform: translateZ(var(--mu-golh, 34px)) rotateY(135deg); }
    .mu-gol-teto-dir { right: 0; transform-origin: right center; transform: translateZ(var(--mu-golh, 34px)) rotateY(-135deg); }

    /* height aqui é a altura do gol (vira o eixo Z), não a boca */
    .mu-gol-lado {
        width: var(--mu-golh, 34px); height: var(--mu-golh, 34px);
        transform-origin: center top; transform: rotateX(90deg);
    }
    /* O triângulo é cheio do lado do poste: à direita no gol da esquerda,
       à esquerda no da direita. */
    .mu-gol-lado-esq { right: 100%; clip-path: polygon(0 0, 100% 0, 100% 100%); }
    .mu-gol-lado-dir { left: 100%;  clip-path: polygon(0 0, 100% 0, 0 100%); }
    .mu-gol-lado-a { top: var(--mu-boca-top); }
    .mu-gol-lado-b { top: calc(var(--mu-boca-top) + var(--mu-boca-h)); }

    /* Sombra da goleira no gramado, atrás da linha de fundo */
    .mu-gol-sombra { width: var(--mu-golh, 34px); background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.12)); }
    .mu-gol-sombra-dir { background: linear-gradient(-90deg, rgba(0,0,0,.35), rgba(0,0,0,.12)); }
    .mu-gol-sombra-esq { right: 100%; }
    .mu-gol-sombra-dir { left: 100%; }

    /* Em tela estreita a perspectiva atrapalha mais do que ajuda: o fundo do
       campo fica pequeno demais para arrastar. Volta ao campo chapado. */
    @media (max-width: 900px) {
        .mu-cena-3d { aspect-ratio: 1.8 / 1; perspective: none !important; margin: 0; }
        .mu-cena-3d > .mu-campo-3d { transform: none !important; overflow: hidden; box-shadow: none; }
        .mu-gol-frame, .mu-gol-teto, .mu-gol-lado, .mu-gol-sombra { display: none; }
        .mu-campo-3d .mu-gol-esq, .mu-campo-3d .mu-gol-dir { display: block; }
        .mu-campo-3d .mu-slot { zoom: 1; transform: translate(-50%, -50%) scale(var(--mu-base, 1)); }
    }

    /* Dicas e avisos da barra (cores por classe; o tema claro do modo TV
       troca abaixo, o amarelo sobre branco não se lia) */
    .mu-hint { font-size: 11px; }
    .mu-hint-seta { color: #facc15; }
    .mu-hint-forma { color: #f87171; }
    .mu-hint-aviso { font-size: 12px; color: #fbbf24; }
    .mu-tx-dica { display: none; }

    /* ══ Visual de transmissão (.mu-tv) ══════════════════════════════════════
       Ligado por muRender quando a tela oferece o modo transmissão (hoje só
       /creators/escalacao). O modal Pré-jogo e /Relatorios não têm a classe e
       ficam como sempre foram. A ideia é que a própria página já sirva de
       imagem de live: placa dos times como as de TV, nomes em pílula com a cor
       do time e elencos da mesma altura do campo. */

    /* Placa dos times: escudo encostado no ×, faixa da cor de cada time
       embaixo (acompanha o seletor de cor do elenco). Sempre escura. */
    .mu-tv { --mu-faixa: 4px; }
    .mu-tv .mu-header {
        display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0;
        max-width: 980px; margin: 0 auto 10px; flex-wrap: nowrap;
        background: linear-gradient(180deg, #17233a 0%, #0e1727 100%);
        border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden;
        box-shadow: 0 8px 24px rgba(2,6,23,.16);
    }
    .mu-tv .mu-time-info {
        flex-direction: row-reverse; justify-content: flex-start; text-align: right;
        gap: 12px; padding: 10px 18px 12px; min-width: 0;
        box-shadow: inset 0 calc(-1 * var(--mu-faixa)) 0 var(--cor-camisa-casa, #dc2626);
    }
    .mu-tv .mu-time-info.mu-dir {
        flex-direction: row; text-align: left;
        box-shadow: inset 0 calc(-1 * var(--mu-faixa)) 0 var(--cor-camisa-vis, #2563eb);
    }
    .mu-tv .mu-time-info > div { min-width: 0; }
    .mu-tv .mu-time-info img { width: 44px; height: 44px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
    .mu-tv .mu-time-nome {
        font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 1.75rem; font-weight: 800;
        line-height: 1.05; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mu-tv .mu-time-jogo {
        font-size: .74rem; color: #9fb0c7; margin-top: 3px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mu-tv .mu-vs {
        display: flex; align-items: center; padding: 0 8px 4px;
        font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 1.7rem; font-weight: 800; color: #d4a520;
    }
    /* Celular: placa mais baixa e sem a linha do último jogo, para o nome caber */
    @media (max-width: 600px) {
        .mu-tv .mu-time-info { gap: 8px; padding: 8px 10px 10px; }
        .mu-tv .mu-time-info img { width: 28px; height: 28px; }
        .mu-tv .mu-time-nome { font-size: 1.15rem; }
        .mu-tv .mu-time-jogo { display: none; }
        .mu-tv .mu-vs { font-size: 1.2rem; padding: 0 4px 3px; }
    }

    /* Barra: ferramentas à esquerda, o modo transmissão (a ação principal da
       tela) em dourado na ponta direita */
    .mu-tv .mu-toolbar { justify-content: flex-start; gap: 8px; max-width: 980px; margin: 0 auto 4px; }
    .mu-tv .mu-toolbar .btn {
        height: 34px; padding: 0 14px; border-radius: 8px;
        font-family: inherit; font-size: .86rem; font-weight: 600;
        background: var(--p-0); border: 1px solid var(--line-strong); color: var(--text-2);
    }
    .mu-tv .mu-toolbar .btn:hover { border-color: #d4a520; color: var(--text-strong); background: var(--p-0); }
    .mu-tv .mu-toolbar .mu-btn-alternar.ativo {
        background: rgba(212,165,32,.14); border-color: rgba(212,165,32,.6); color: var(--gold-ink);
    }
    .mu-tv .mu-toolbar .mu-btn-transmissao {
        margin-left: auto; background: #d4a520; border-color: #d4a520; color: #111; font-weight: 700;
    }
    .mu-tv .mu-toolbar .mu-btn-transmissao:hover { background: #e2b53a; border-color: #e2b53a; color: #111; }
    .mu-tv .mu-hint { font-size: .8rem; font-weight: 600; }
    .mu-tv .mu-hint-seta { color: var(--gold-ink); }
    .mu-tv .mu-hint-forma { color: var(--bad); }
    .mu-tv .mu-hint-aviso { color: var(--warn, #b45309); }

    /* Elenco no tema da página (antes era um cinza escuro fixo, que no tema
       claro virava uma tarja), com a cor do time na lateral do cabeçalho */
    .mu-tv .mu-banco { background: var(--p-0); border: 1px solid var(--line); border-radius: 12px; }
    .mu-tv .mu-banco-header {
        background: var(--p-1); border-bottom: 1px solid var(--line); padding: 8px 10px;
        font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 1.05rem; font-weight: 700;
        letter-spacing: 0; text-transform: none; color: var(--text-strong);
        box-shadow: inset 4px 0 0 var(--cor-camisa-casa, #dc2626);
    }
    .mu-tv #muBancoBox2 .mu-banco-header { box-shadow: inset -4px 0 0 var(--cor-camisa-vis, #2563eb); }
    .mu-tv .mu-banco-toggle { background: var(--p-0); border-color: var(--line-strong); color: var(--text-muted); }
    .mu-tv .mu-banco-toggle:hover { background: var(--p-3); color: var(--text-strong); }
    .mu-tv .mu-banco-cor { border-color: var(--line-strong); }
    .mu-tv .mu-banco-item { font-size: 13px; padding: 6px 10px; color: var(--text-2); border-bottom-color: var(--line-soft); }
    .mu-tv .mu-banco-item:hover { background: var(--p-1); }
    .mu-tv .mu-banco-pos { color: var(--text-dim); }
    .mu-tv .mu-banco-lista::-webkit-scrollbar-track { background: transparent; }
    .mu-tv .mu-banco-lista::-webkit-scrollbar-thumb { background: var(--line-strong); }
    .mu-tv .mu-busca, .mu-tv .mu-form-ficticio { background: transparent; border-bottom-color: var(--line-soft); }
    .mu-tv .mu-busca-res { border-color: var(--line); background: var(--p-0); }
    .mu-tv .mu-busca-item { border-bottom-color: var(--line-soft); }

    /* Elenco da mesma altura do campo: contain:size tira a lista do cálculo da
       linha do grid (quem manda é o campo) e ela rola por dentro. Antes os 30
       nomes desciam bem abaixo do gramado. */
    @media (min-width: 901px) {
        .mu-tv .mu-layout { align-items: stretch; }
        .mu-tv .mu-banco { contain: size; display: flex; flex-direction: column; }
        .mu-tv .mu-banco-lista { flex: 1 1 0; min-height: 0; max-height: none; }
    }

    /* Campo na página: cabe na altura da janela junto com o topo, a placa e a
       barra. O 1,68 é a proporção do gramado já inclinado (a margem negativa
       que muEncostarCena aplica come a faixa vazia de cima) e o ÷1,2 deixa
       espaço para a borda de baixo, que a perspectiva alarga. */
    .mu-tv .mu-cena-3d { max-width: min(calc(100% / 1.36), max(560px, calc((100vh - 365px) * 1.6))); }
    /* Celular/tablet em pé: uma coluna, campo primeiro e os elencos embaixo,
       na largura toda (o width:auto da regra de 900px perdia para o 185px
       declarado depois dela) e com a lista mais curta */
    @media (max-width: 900px) {
        .mu-tv .mu-cena-3d { max-width: 100%; }
        .mu-tv #muCena { order: -1; }
        .mu-tv .mu-banco, .mu-tv .mu-banco-fechado { width: auto; }
        .mu-tv .mu-banco-lista { max-height: 280px; }
    }

    /* Jogador: nome numa pílula escura com a cor do time embaixo. Só com
       text-shadow o nome se perdia na grama assim que o vídeo comprime. */
    .mu-tv .mu-slot .player-name {
        font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 12px; font-weight: 600;
        line-height: 15px; color: #fff; text-shadow: none;
        background: rgba(6,10,18,.8); border-radius: 4px; padding: 0 5px 2px;
        width: fit-content; max-width: 96px; margin: 2px 0 0;
        position: relative; left: 50%; transform: translateX(-50%);
        box-shadow: inset 0 -2px 0 var(--cor-camisa-casa, #dc2626);
    }
    .mu-tv .mu-t2 .player-name { box-shadow: inset 0 -2px 0 var(--cor-camisa-vis, #2563eb); }
    .mu-tv .mu-slot-sigla {
        font-family: 'Barlow Condensed', Arial, sans-serif; font-size: 10px; font-weight: 700; color: #f5c842;
    }
    /* Times no campo: os dois, só o da esquerda ou só o da direita
       (muMostrarTime). Some o jogador, a metade da placa e o elenco do outro. */
    .mu-times-campo { display: inline-flex; }
    .mu-tv .mu-toolbar .mu-btn-time { border-radius: 0; margin-left: -1px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mu-tv .mu-toolbar .mu-btn-time:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
    .mu-tv .mu-toolbar .mu-btn-time:last-child { border-radius: 0 8px 8px 0; }
    .mu-tv .mu-toolbar .mu-btn-time.ativo {
        position: relative; z-index: 1;
        background: rgba(212,165,32,.14); border-color: rgba(212,165,32,.6); color: var(--gold-ink);
    }
    .mu-so-1 .mu-t2, .mu-so-2 .mu-t1,
    .mu-so-1 #muBancoBox2, .mu-so-2 #muBancoBox1 { display: none !important; }
    .mu-so-1 .mu-header .mu-dir, .mu-so-2 .mu-header .mu-time-info:not(.mu-dir),
    .mu-so-1 .mu-header .mu-vs, .mu-so-2 .mu-header .mu-vs { display: none; }
    /* Placa com um time só: encolhe em volta dele, centrada */
    .mu-tv.mu-so-1 .mu-header, .mu-tv.mu-so-2 .mu-header { grid-template-columns: auto; justify-content: center; }
    .mu-tv.mu-so-1 .mu-header .mu-time-info, .mu-tv.mu-so-2 .mu-header .mu-time-info { padding-left: 32px; padding-right: 32px; }
    /* Sem o elenco do outro lado, o grid perde uma coluna: o campo fica
       centrado ocupando o resto */
    @media (min-width: 901px) {
        .mu-so-1 .mu-layout { grid-template-columns: auto 1fr; }
        .mu-so-2 .mu-layout { grid-template-columns: 1fr auto; }
    }
    .mu-transmissao.mu-so-1 .mu-layout, .mu-transmissao.mu-so-2 .mu-layout { display: block; }

    /* Botão Posições: some a sigla sem mexer na altura do jogador (o slot é
       centrado no ponto do campo; mudar a altura o deslocaria) */
    .mu-tv.mu-sem-posicoes .mu-slot-sigla { visibility: hidden; }
    /* ℹ em 22 jogadores polui a imagem: com mouse, só no jogador sob o cursor */
    @media (hover: hover) {
        .mu-tv .mu-slot .btn-info-jogador { opacity: 0; transition: opacity .12s; }
        .mu-tv .mu-slot:hover .btn-info-jogador,
        .mu-tv .mu-slot .btn-info-jogador:focus-visible { opacity: 1; }
    }

    /* ══ Modo transmissão (OBS) ═══════════════════════════════════════════════
       Ligado pelo botão Modo transmissão (muToggleTransmissao). O container do
       match-up vira uma camada fixa do tamanho da janela, por cima do site, e
       sempre escura (theme-dark-zone). Na imagem fica só a placa e o campo: a
       barra e as tiras dos elencos aparecem quando o mouse mexe e somem com o
       cursor 2,5s depois (mu-ui-ativa, ver muMostrarControles). */
    .mu-so-transmissao { display: none; }
    .mu-transmissao .mu-so-transmissao { display: inline-block; }

    html.mu-transmissao-aberta, html.mu-transmissao-aberta body { overflow: hidden; }
    .mu-transmissao {
        --mu-faixa: 6px;
        position: fixed; inset: 0; z-index: 3000;
        display: flex; flex-direction: column;
        padding: 14px 20px 0; overflow: hidden;
        background: radial-gradient(ellipse 80% 65% at 50% 40%, #163052 0%, #0a1526 58%, #050a14 100%);
    }
    .mu-transmissao:not(.mu-ui-ativa),
    .mu-transmissao:not(.mu-ui-ativa) * { cursor: none !important; }

    .mu-transmissao .mu-header {
        flex: 0 0 auto; width: 100%; max-width: 1180px; margin: 0 auto 4px;
        background: linear-gradient(180deg, rgba(23,35,58,.94) 0%, rgba(14,23,39,.94) 100%);
        box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    .mu-transmissao .mu-time-info { padding: 12px 26px 16px; gap: 16px; }
    .mu-transmissao .mu-time-info img { width: 60px; height: 60px; }
    .mu-transmissao .mu-time-nome { font-size: 2.6rem; }
    .mu-transmissao .mu-vs { font-size: 2.3rem; padding: 0 16px 6px; }
    .mu-transmissao .mu-time-jogo,
    .mu-transmissao .mu-dica { display: none; }

    /* Barra flutuando no canto, fora do fluxo: não rouba altura do campo */
    .mu-transmissao .mu-toolbar {
        position: absolute; top: 12px; right: 16px; z-index: 40;
        max-width: min(680px, calc(100vw - 32px)); margin: 0; padding: 8px;
        justify-content: flex-end;
        background: rgba(8,13,24,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,.45);
        opacity: 0; transition: opacity .2s;
    }
    .mu-transmissao.mu-ui-ativa .mu-toolbar,
    .mu-transmissao .mu-toolbar:hover,
    .mu-transmissao .mu-toolbar:focus-within { opacity: 1; }
    .mu-transmissao .mu-toolbar .mu-btn-transmissao { margin-left: 0; }

    /* Elencos por cima do campo, nas laterais: fechados viram tiras que somem
       com os controles; abertos ficam até o creator fechar */
    .mu-transmissao .mu-layout { flex: 1 1 auto; min-height: 0; display: block; position: relative; }
    .mu-transmissao .mu-banco {
        position: absolute; top: 0; z-index: 30; max-height: calc(100% - 12px);
        contain: none; display: flex; flex-direction: column;
        box-shadow: 0 10px 30px rgba(0,0,0,.5);
    }
    .mu-transmissao #muBancoBox1 { left: 0; }
    .mu-transmissao #muBancoBox2 { right: 0; }
    .mu-transmissao .mu-banco-lista { flex: 1 1 auto; min-height: 0; max-height: none; }
    .mu-transmissao .mu-banco-fechado { opacity: 0; transition: opacity .2s; }
    .mu-transmissao.mu-ui-ativa .mu-banco-fechado,
    .mu-transmissao .mu-banco-fechado:hover,
    .mu-transmissao .mu-banco-fechado:focus-within { opacity: 1; }

    /* O campo usa a altura que sobra abaixo da placa (~100px) */
    .mu-transmissao .mu-cena-3d {
        max-width: min(calc(100% / 1.36), calc((100vh - 235px) * 1.6));
        margin-left: auto; margin-right: auto;
    }
    .mu-transmissao .mu-campo:not(.mu-campo-3d) {
        max-width: min(100%, calc((100vh - 128px) * 1.8)); margin: 0 auto;
    }
    /* Linhas do campo um pouco mais fortes: o vídeo comprimido apaga o fino */
    .mu-transmissao .mu-linha-meio { background: rgba(255,255,255,.34); }
    .mu-transmissao .mu-circulo,
    .mu-transmissao .mu-area-esq,
    .mu-transmissao .mu-area-dir { border-color: rgba(255,255,255,.32); }

    /* Aviso de entrada: como sair e como achar os controles. Some em 3,5s. */
    .mu-transmissao.mu-tx-entrando .mu-tx-dica {
        display: block; position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 40;
        background: rgba(8,13,24,.92); color: #e2e8f0; border: 1px solid rgba(255,255,255,.14);
        border-radius: 10px; padding: 10px 16px; font-size: .95rem; font-weight: 600; white-space: nowrap;
    }