/* Mosaico: a grade de todas as transmissoes ao mesmo tempo. */

/* mosaico: grade que se ajusta ao numero de transmissoes */
/* A largura do quadradinho vem do ajustaGrade(): auto-fit/minmax so olhava
   a largura e ignorava que sobrava altura, e por isso 5 fontes viravam 4+1
   com meio palco vazio embaixo. Flex em vez de grid porque grid alinha a
   ultima linha incompleta a esquerda; aqui ela fica centrada. */
.mosaico{position:absolute;inset:0;padding:56px var(--palcoR,316px) 96px var(--palcoL,292px);
         display:flex;flex-wrap:wrap;gap:10px;
         align-content:center;justify-content:center;overflow:auto;z-index:2}
/* Sem proporcao fixa o tile estica na altura e o video vira uma tira fina:
   16/9 faz a altura seguir a largura da coluna. */
.mosaico .tile{position:relative;width:var(--tw,300px);flex:0 0 auto;aspect-ratio:16/9;
               border-radius:var(--rlg);
               overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--linha2);
               cursor:pointer;min-height:0}
.mosaico .tile:hover{box-shadow:0 0 0 2px var(--ac)}
.mosaico .tile video{width:100%;height:100%;object-fit:contain;background:#000;
                     border-radius:0;aspect-ratio:auto;position:absolute;inset:0}
.mosaico .rot{position:absolute;left:8px;bottom:8px;z-index:2;display:flex;align-items:center;gap:6px;
              padding:3px 8px;border-radius:6px;background:hsl(var(--vidroBRaw)/calc(var(--opq) + .10));
              backdrop-filter:blur(calc(var(--vidro) * .5));-webkit-backdrop-filter:blur(calc(var(--vidro) * .5));
              font-size:11px;font-weight:500;color:var(--tx)}
.mosaico .rot .pt{width:5px;height:5px;border-radius:50%;background:var(--ac3);
                  animation:livePulse 1.8s ease-in-out infinite}