/* player.css — estilo do player do portfólio (portado do Goiás Tec +).
 *
 * Prefixo `pl-` para não esbarrar no resto do site. As cores vêm das variáveis
 * do tema (--cor-*), então a mesa de admin também recolore o player. Sobre o
 * quadro de vídeo o controle é claro (--cor-texto) e o destaque é a lua
 * (--cor-lua): barra tocada, bolinha, reforço de volume, chip de legenda ativo.
 */
body.fm-teatro .player { width: min(99vw, 1900px); }

.pl {
  font-family: var(--fonte-texto);
  position: relative; width: 100%; height: 100%; background: #000;
  /* Gestos (fase 5). `pan-y` entrega a rolagem VERTICAL da página ao
     navegador e fica com o resto: é o que faz o arrasto horizontal da linha
     do tempo (item 11) funcionar sem que o vídeo vire um buraco onde a ficha
     não rola. `pinch-zoom` fica com o navegador de propósito — o zoom da
     página é acessibilidade, e a pinça do item 7 é da fase 8.
     Em tela cheia não há página para rolar e todo gesto é nosso. */
  touch-action: pan-y pinch-zoom;
}
.pl:focus { outline: none; }
.pl-cheia { touch-action: none; }

/* Os controles somem sozinhos depois de alguns segundos de quietude (03/09) e
   voltam ao primeiro sinal de vida. O tempo vem do /admin; quem decide SE pode
   sumir é o player-core, que recusa com o vídeo parado, com o painel de som
   aberto, no meio de um arrasto e com o foco dentro dos controles.

   `opacity` e não `display: none`: os controles continuam no lugar, e o Tab
   ainda chega neles — o `focusin` traz tudo de volta antes de o foco pousar
   num controle invisível. `pointer-events: none` é o que faz um toque naquela
   faixa cair na camada de gestos em vez de num botão que ninguém está vendo. */
.pl-controles { transition: opacity .2s ease; }
.pl-sem-controles .pl-controles { opacity: 0; pointer-events: none; }
/* O ponteiro some junto, como em qualquer player — o quadro fica limpo. */
.pl-sem-controles { cursor: none; }
@media (prefers-reduced-motion: reduce) {
  .pl-controles { transition: none; }
}

.pl-video {
  width: 100%; height: 100%; display: block; object-fit: contain;
  /* Pressionar e segurar (item 3) é o gesto do 2×. Sem estas duas linhas o
     iOS responde ao mesmo gesto com a lupa e o menu de "copiar", e o
     `pointercancel` derruba o 2× no meio. */
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}

/* O BRILHO (item 10a) SAIU em 09/09/2026, e havia aqui uma regra
   `.pl-brilho .pl-video { filter: brightness(...) }`.

   Ele nunca foi o brilho da TELA — navegador nenhum alcança isso, e não é
   questão de permissão. Era um filtro sobre a imagem, que é muito menos do que
   o nome prometia, e ocupava a zona esquerda do arrasto vertical em tela
   cheia: a única superfície livre do player no celular. Ela fica reservada
   para os dois gestos da fase 7. */

/* Zoom da IMAGEM (item 7, fase 8), e ele SÓ existe em tela cheia. Fora dela a
   pinça continua sendo do navegador, que a usa para ampliar a página — esse
   zoom é acessibilidade e não se disputa: quem precisa de letra maior no site
   inteiro tem que continuar conseguindo em cima do vídeo. É a mesma razão pela
   qual `touch-action` acima entrega `pinch-zoom`, e é por isso que a linha
   `.pl-cheia { touch-action: none }` é o que liga o gesto.

   A ORDEM das duas funções importa e não é gosto: `scale` é aplicada primeiro,
   ao elemento, e `translate` depois, em pixels de TELA — que é a unidade em que
   o player-core faz a conta e limita o arrasto contra a borda da imagem.
   Invertê-las faria o deslocamento crescer junto com a ampliação, e o limite
   calculado lá viraria outro número aqui.

   `transform-origin` é o padrão do navegador, escrito à mão porque a conta do
   player-core parte dele: a ampliação cresce em volta do CENTRO do quadro, e é
   o deslocamento que leva o ponto de interesse para lá.

   A classe só entra quando alguém ampliou de verdade:
   `transform` obriga o navegador a compor o vídeo numa camada própria. */
.pl-zoom { overflow: hidden; }
.pl-zoom .pl-video {
  transform: translate(var(--pl-zoom-x, 0px), var(--pl-zoom-y, 0px))
             scale(var(--pl-zoom, 1));
  transform-origin: 50% 50%;
}

.pl-controles {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 26px 12px 10px;
  color: var(--cor-texto);
  /* Degradê e não faixa sólida: o rodapé do quadro tem imagem, e uma barra
     opaca cortaria legenda queimada e crédito. */
  background: linear-gradient(to top, color-mix(in srgb, var(--cor-sombra) 78%, transparent), rgba(0, 0, 0, 0));
}

.pl-b {
  flex: none; width: 44px; height: 44px;   /* alvo de toque: a mesma medida da lista de capítulos */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  border-radius: 999px;
}
.pl-b:hover { background: color-mix(in srgb, var(--cor-texto) 16%, transparent); }
.pl-b:focus-visible { outline: 2px solid var(--cor-lua); outline-offset: -3px; }

.pl-ic { width: 24px; height: 24px; display: block; }
.pl-ic-pause, .pl-ic-mudo { display: none; }
.pl-tocando .pl-ic-play { display: none; }
.pl-tocando .pl-ic-pause { display: block; }
.pl-mudo-ativo .pl-ic-som { display: none; }
.pl-mudo-ativo .pl-ic-mudo { display: block; }

/* Botão CC (fase 2). "CC" escrito num retângulo — o símbolo que todo mundo
   reconhece. Preenchido quando a legenda está ligada. */
.pl-cc-marca {
  font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .04em; padding: 3px 4px; border-radius: 3px;
  border: 1.5px solid currentColor;
}
.pl-legenda-ativa .pl-cc-marca { background: var(--cor-lua); color: var(--cor-mesa); border-color: var(--cor-lua); }
.pl-b:disabled { opacity: .4; cursor: default; }
.pl-b:disabled:hover { background: none; }

/* Bloqueio de tela (item 9, fase 5). O botão SÓ existe em tela cheia, e é o
   CSS que decide isso — a medida da fase 3 continua valendo: em 375 px os
   quatro botões e o relógio comem 317 dos 349 px da linha, e um quinto botão
   a quebraria em três. Deitado em tela cheia sobra largura de sobra, e é lá
   que travar a tela serve para alguma coisa. */
.pl-trava { display: none; }
.pl-cheia .pl-trava { display: inline-flex; }
.pl-trava[aria-pressed="true"] { background: color-mix(in srgb, var(--cor-texto) 22%, transparent); }

/* Travado, os controles somem inteiros: é isso que um bloqueio de tela é.
   O caminho de volta é o toque duplo, e o cadeado no canto é quem diz que o
   player está travado e não morto. */
.pl-travado .pl-controles { display: none; }
.pl-cadeado {
  position: absolute; right: 12px; top: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  color: var(--cor-texto); background: color-mix(in srgb, var(--cor-sombra) 62%, transparent); pointer-events: none;
}
.pl-cadeado[hidden] { display: none; }

/* O painel de som (fase 4). Pendurado no botão de mudo que já existe, e não
   numa posição nova da barra: em 375 px a linha de controles não tem onde
   crescer — os quatro botões e o relógio já comem 317 dos 349 px (medido na
   fase 3), e um quinto botão de 44 px quebraria a linha em três.

   Onde há ponteiro ele abre ao passar por cima e o clique continua
   silenciando; onde não há — `(hover: none)`, que é a pergunta certa —, o
   botão abre o painel e o mudo mora dentro dele.

   AO LADO DO ÍCONE, E ENCOSTADO NELE (04/09) — e isso é correção de um
   defeito, não gosto. O painel nascia ACIMA do botão, com 8 px de respiro
   entre os dois: esses 8 px não pertencem a `somCaixa` nem a nenhum filho
   dela, então o ponteiro que subisse do alto-falante até o controle deslizante
   atravessava um vão que dispara `pointerleave` — e o painel fechava na cara
   de quem ia usá-lo. Quanto mais reto o caminho do mouse, pior.

   Agora o painel cresce para a ESQUERDA a partir da borda do botão
   (`right: 100%`, zero de vão) e o controle deslizante fica DEITADO na mesma
   altura do ícone. O caminho do ponteiro é uma reta horizontal de 0 px de
   espaço vazio, e não há mais como escorregar para fora no meio.

   Para a esquerda, e não para a direita, porque à direita só existe o botão de
   tela cheia e a borda do quadro logo depois: um painel de 232 px ali vazaria
   para fora. À esquerda ele passa por cima do CC, que é overlay e volta assim
   que o painel fecha. */
.pl-som-caixa { position: relative; flex: none; display: inline-flex; }

.pl-som {
  position: absolute; right: 100%; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 9px;
  width: 232px;
  /* Teto de largura: num quadro estreito o painel encolhe em vez de vazar. */
  max-width: calc(100vw - 32px);
  /* Os 9 px de baixo são medida, não gosto: o botão tem 44 px de altura e a
     linha do volume tem 26. (44 − 26) / 2 = 9 é o que põe o controle
     deslizante exatamente no meio do ícone, deitado ao lado dele. */
  padding: 10px 12px 9px;
  border-radius: 10px;
  /* Fundo sólido, ao contrário do degradê da barra: aqui há texto pequeno e
     uma caixinha de marcar, que precisam de contraste garantido sobre
     qualquer quadro. */
  background: color-mix(in srgb, var(--cor-ceu-meio) 96%, transparent);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--cor-sombra) 50%, transparent);
  color: var(--cor-texto);
  font: 400 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* ARMADILHA JÁ PAGA na fase 3: `display` do autor ganha do `hidden` do
   navegador. Sem esta linha o painel nasceria aberto e não fecharia nunca. */
.pl-som[hidden] { display: none; }

.pl-som-linha { display: flex; align-items: center; gap: 8px; }

/* O mudo do painel: texto, não ícone. Duplicar o alto-falante em SVG faria
   dois lugares para manter o mesmo desenho. */
.pl-som-mudo {
  flex: none; width: auto; height: 26px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid currentColor; border-radius: 4px;
  background: none; color: inherit; cursor: pointer;
  font: 600 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .04em;
}
.pl-som-mudo:hover { background: color-mix(in srgb, var(--cor-texto) 16%, transparent); }
.pl-som-mudo:focus-visible { outline: 2px solid var(--cor-lua); outline-offset: 2px; }
.pl-som-mudo[aria-pressed="true"] { background: var(--cor-lua); color: var(--cor-mesa); border-color: var(--cor-lua); }

/* `margin: 0` NÃO é enfeite: o navegador dá 2 px de margem de brinde a todo
   `input[type=range]`, e com eles a linha do volume mede 30 px em vez de 26 —
   o alinhamento com o meio do ícone sai 2 px torto, e o número é diferente em
   cada navegador. Zerando, a conta dos 9 px de padding fecha e fecha igual em
   todos. Medido no navegador em 04/09. */
.pl-som-faixa {
  flex: 1 1 auto; min-width: 0; height: 26px; margin: 0; accent-color: var(--cor-lua);
}
.pl-som-faixa:disabled { opacity: .4; }

.pl-som-valor {
  flex: none; min-width: 42px; text-align: right;
  /* `tabular-nums` pelo mesmo motivo do relógio: sem ele o painel inteiro
     treme a cada 5% enquanto o dedo arrasta. */
  font-variant-numeric: tabular-nums;
}
/* Acima de 100% o número muda de cor. Reforço tem que ser VISÍVEL: um 200%
   guardado da sessão passada, invisível, vira susto no próximo vídeo. */
.pl-reforco .pl-som-valor { color: var(--cor-lua); font-weight: 700; }

.pl-som-rotulo { cursor: pointer; gap: 8px; }
.pl-som-caixinha { flex: none; width: 16px; height: 16px; accent-color: var(--cor-lua); }
.pl-som-caixinha:disabled { opacity: .4; }

.pl-som-recado { font-size: 12px; line-height: 1.35; opacity: .85; }


/* A legenda. Fica acima da barra de controles — nunca por baixo dela. */
.pl-legenda {
  position: absolute; left: 0; right: 0; bottom: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 5%; text-align: center;
  /* O dedo e o ponteiro atravessam: tocar o quadro tem que dar play mesmo
     quando o toque cai em cima da legenda. */
  pointer-events: none;
}
.pl-legenda-linha { max-width: 100%; }
.pl-legenda-texto {
  display: inline-block;
  /* --pl-leg é o multiplicador das teclas + e -, escrito pelo player. */
  font-size: calc(var(--pl-leg, 1) * 19px);
  line-height: 1.34;
  color: var(--cor-texto);
  background: color-mix(in srgb, var(--cor-sombra) 78%, transparent);
  padding: .1em .38em; border-radius: 4px;
  /* A legenda do Bunny é ASR: vem em caixa baixa e sem pontuação confiável.
     Nada de `text-transform` aqui — o texto é o que é. */
  text-wrap: balance;
}
@media (max-width: 700px) {
  /* 82 px = os 54 px da linha de botões + os 22 px da barra, que no celular
     ganhou linha própria (fase 3), + 6 px de folga. A legenda nunca encosta na
     barra de controles. */
  .pl-legenda { bottom: 82px; }
  .pl-legenda-texto { font-size: calc(var(--pl-leg, 1) * 15px); }
}
/* Em tela cheia o quadro é muito maior: 19px viraria formiga. */
.pl:fullscreen .pl-legenda-texto,
.pl:-webkit-full-screen .pl-legenda-texto { font-size: calc(var(--pl-leg, 1) * 30px); }

.pl-tempo {
  flex: none; font-size: 13px; font-variant-numeric: tabular-nums;
  /* `tabular-nums` impede a barra inteira de tremer a cada segundo, quando o
     "1" é mais estreito que o "8". */
  white-space: nowrap; opacity: .95;
}
.pl-tempo-sep { opacity: .6; }

/* As duas setas de capítulo, encostadas uma na outra (08/09). Pular capítulo é
   uma função só com duas direções, e o vão de 10 px que separa os OUTROS
   controles as faria ler como dois botões sem parentesco. Aqui são 2 px, que
   com os 10 px de respiro que cada alvo de 44 já tem em volta do desenho de 24
   viram 22 px entre um ícone e o outro — contra os 15 ou mais que o
   `space-between` do celular põe entre os itens vizinhos.

   Ele também é o que faz o par SOBREVIVER a esse `space-between`: a linha
   distribui a sobra entre os ITENS, e sem o par ser um item só as duas setas
   se afastariam exatamente onde deviam se juntar. */
.pl-cap-par { display: flex; align-items: center; gap: 2px; flex: none; }

/* O relógio e a barra, juntos (08/09). No computador o contêiner é inerte —
   ele ocupa a mesma largura que os dois ocupavam soltos. Ele existe pelo
   celular, onde é ele que sobe inteiro para a linha da barra e devolve à linha
   dos botões os 66,9 px do relógio, que é onde as setas de capítulo cabem.

   `min-width: 0` porque um filho de flex não encolhe abaixo do conteúdo sem
   isso, e a barra tem largura mínima de conteúdo zero — sem a linha, uma
   janela estreita empurraria a barra para fora em vez de encolhê-la. */
.pl-tempo-barra {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;
}

.pl-barra {
  flex: 1 1 auto; position: relative; height: 20px; cursor: pointer;
  /* Sem isto, arrastar na barra rola a página no celular em vez de procurar. */
  touch-action: none;
}

/* No celular a barra vai para uma LINHA SÓ DELA, acima dos botões.
   Medido em 375 px: quatro botões de 44 px, o relógio e os vãos comem 317 dos
   349 px da linha, e sobravam 32 px de barra. Numa barra de 32 px os 11 vãos
   de 2 px dos 12 capítulos do Bombeiro não deixam nada para desenhar — sete
   segmentos ficavam com largura zero. É a mesma linha própria que o YouTube e
   o Vimeo usam no celular, e ela também dá área de arrasto para a fase 5. */
@media (max-width: 700px) {
  /* O topo do degradê e o vão entre as duas linhas encolhem: numa tela de
     375 px o vídeo tem 195 px de altura, e a barra numa linha própria fazia os
     controles cobrirem 56% do quadro. Com o corte ficam em 45%, perto dos 41%
     que cobriam antes — com a barra dez vezes maior. */
  .pl-controles { flex-wrap: wrap; padding-top: 12px; row-gap: 2px; }
  .pl-barra { order: -1; flex-basis: 100%; }

  /* A linha dos botões DISTRIBUI a sobra, em vez de amontoar tudo à esquerda
     (08/09, depois de ver num Android). O vão é um MÍNIMO, não a medida final:
     em 375 px os botões enchem a linha e o `space-between` não tem o que
     distribuir, mas num aparelho de 412 px em tela cheia sobravam 68 px — e
     eles ficavam todos num vazio à direita, do tamanho de um botão, como se
     faltasse alguma coisa ali. A barra da linha de cima já vai de ponta a
     ponta; a dos botões passa a ir também. */
  .pl-controles { justify-content: space-between; }

  /* Com capítulo, o RELÓGIO sobe junto com a barra, e é daí que sai a largura
     das duas setas (08/09). Medido em 375 px: a linha tem 325 px de conteúdo,
     e os seis botões de 44 px com cinco vãos de 10 comem 314 — antes eram
     282,9 com o relógio dentro, e as duas setas pediam 108 para 42,1 livres.

     O relógio e a barra andam juntos porque estão no mesmo contêiner, e não
     por um `flex-basis` calculado: `calc(100% - 77px)` daria o mesmo desenho
     hoje e mentiria no dia em que o relógio mudar de largura — um título de
     mais de uma hora, ou a fonte do sistema aumentada. O contêiner mede o
     relógio sozinho. */
  .pl-tempo-barra { order: -1; flex-basis: 100%; }
  /* Dentro do contêiner a barra volta a ser o que era antes da regra acima:
     sem ela, o `flex-basis: 100%` herdado empurraria o relógio para uma linha
     só dele e a barra para outra — três linhas de novo. */
  .pl-tempo-barra .pl-barra { order: 0; flex-basis: auto; }

  /* Tela cheia em RETRATO é a linha mais apertada que existe, porque é a única
     em que o cadeado (fase 5) divide 325 px com todo o resto. Ela já quebrava
     em TRÊS linhas antes desta entrega — os controles iam de 88 px de altura
     para 134, e a tela cheia ia sozinha para o terceiro andar. O comentário do
     `.pl-trava` dizia "deitado em tela cheia sobra largura": deitado sobra,
     em pé não.

     Com sete botões de 44 px sobram 17 px para os cinco vãos (o par de capítulo
     conta como um item). O vão cai para 2 px, e ele é o PISO: onde a tela é
     mais larga que 375 px, o `space-between` acima distribui o resto. Antes
     de ele existir, este 2 px era a medida final e a sobra toda ia para a
     direita — foi o que se viu num Android e o que mandou consertar. */
  .pl-cheia .pl-controles { column-gap: 2px; }
}
/* Os trilhos (fase 3). A barra é SEMPRE feita de segmentos: um por capítulo
   quando o título tem, um só quando não tem — 22 dos 33 no ar. Assim existe um
   caminho de desenho só, e a barra de quem não tem capítulo continua idêntica
   à de antes desta fase.

   Quem posiciona cada pedaço é o player.js, em porcentagem da duração, com o
   vão saindo da LARGURA e não de uma margem: a esquerda é o relógio. */
.pl-trilhos {
  position: absolute; left: 0; right: 0; top: 8px; height: 4px;
  pointer-events: none;
}
.pl-seg {
  position: absolute; top: 0; height: 100%; overflow: hidden;
  background: color-mix(in srgb, var(--cor-texto) 30%, transparent); border-radius: 2px;
  transition: top .12s ease, height .12s ease;
}
.pl-seg-carregado, .pl-seg-tocado {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
}
.pl-seg-carregado { background: color-mix(in srgb, var(--cor-texto) 45%, transparent); }
.pl-seg-tocado { background: var(--cor-lua); }
/* O pedaço sob o ponteiro engorda. Sem esse retorno os vãos parecem sujeira
   na barra em vez de divisões — e o capítulo que se vai clicar fica sem
   confirmação nenhuma antes do clique. */
.pl-seg-sob { top: -2px; height: 8px; }

/* A dica que segue o ponteiro: título do capítulo e o tempo daquele ponto.
   É o hover que o embed do Bunny dava de graça dentro do iframe. */
.pl-dica {
  position: absolute; bottom: 22px; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  max-width: 260px; padding: 5px 9px;
  border-radius: 6px; background: color-mix(in srgb, var(--cor-sombra) 82%, transparent);
  color: var(--cor-texto); font-size: 12px; line-height: 1.3; white-space: nowrap;
  /* A dica fica DENTRO da barra, que é quem recebe o arrasto: sem isto ela
     roubaria o ponteiro do próprio controle que está descrevendo. */
  pointer-events: none;
}
.pl-dica-titulo {
  display: block; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; font-weight: 600;
}
.pl-dica-tempo { font-variant-numeric: tabular-nums; opacity: .85; }
/* `display` declarado pelo autor ganha do `display: none` que o navegador dá
   ao atributo `hidden`. Sem esta linha, `hidden = true` não esconde nada —
   vale para a dica, para o título dela e para a camada de legenda. */
.pl-dica[hidden], .pl-dica-titulo[hidden], .pl-legenda[hidden] { display: none; }
.pl-barra-bolinha {
  position: absolute; top: 10px; left: 0; width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--cor-lua); pointer-events: none;
  transform: scale(0); transition: transform .12s ease;
}
.pl-barra:hover .pl-barra-bolinha,
.pl-barra:focus-visible .pl-barra-bolinha,
.pl-barra-ativa .pl-barra-bolinha { transform: scale(1); }
.pl-barra:focus-visible { outline: 2px solid var(--cor-lua); outline-offset: 2px; border-radius: 2px; }

.pl-recado {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 80%; text-align: center; color: var(--cor-texto); font-size: 14px;
  background: color-mix(in srgb, var(--cor-sombra) 72%, transparent); padding: 10px 14px; border-radius: 4px;
}

/* Selo passageiro do teclado (fase 1) e, depois, do zoom (fase 8).
   Fica no ALTO e à esquerda para não disputar espaço com a barra de controles
   nem cobrir legenda, que na fase 2 vem embaixo. */
.pl-selo {
  position: absolute; left: 12px; top: 12px;
  color: var(--cor-texto); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  background: color-mix(in srgb, var(--cor-sombra) 72%, transparent); padding: 7px 12px; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
  /* O selo passou a mostrar título de capítulo (fase 3), que é texto de
     tamanho livre vindo do catálogo — sem o corte, um título comprido
     atravessaria o quadro inteiro. */
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
/* A prévia do arrasto — item 6, o scrubber (fase 6).

   NO CANTO SUPERIOR ESQUERDO, e o motivo é o dedo: arrastando na horizontal a
   mão cobre o meio e a metade de baixo do quadro, e na barra ela cobre
   justamente a dica que a fase 3 desenhou logo acima dela. O canto de cima é o
   único que sobra. Fica no MESMO lugar do selo de propósito — durante o
   arrasto quem fala é a moldura, que já mostra o relógio; os dois nunca
   aparecem juntos. */
.pl-previa {
  position: absolute; left: 12px; top: 12px;
  border-radius: 6px; overflow: hidden; pointer-events: none;
  background: color-mix(in srgb, var(--cor-sombra) 82%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cor-sombra) 45%, transparent);
  /* A LARGURA é a do quadro, e não a do texto (04/09). Sem isto um título de
     capítulo comprido esticava a moldura para além da imagem — 269 px de caixa
     para 200 px de quadro, medido no navegador —, e sobrava uma faixa preta à
     direita que parecia defeito. Com a largura presa, quem se aparta é o
     título, que já tem reticências. E a moldura para de mudar de tamanho a
     cada capítulo enquanto o ponteiro anda, que no hover era pior ainda. */
  width: 200px;
  /* O teto é do QUADRO, não da tela: num player embutido estreito a moldura
     encolhe junto, em vez de vazar por cima dos controles. */
  max-width: 58%;
  transition: opacity .12s ease;
}
.pl-previa[hidden] { display: none; }
.pl-previa-quadro {
  width: 200px; max-width: 100%; aspect-ratio: 16 / 9;
  object-fit: contain; background: #000;
  /* Enquanto o primeiro quadro não chega, o vídeo é um retângulo preto que
     parece defeito. A moldura só mostra a imagem depois do primeiro `seeked`;
     até lá sobram o capítulo e o relógio, que já valem sozinhos. */
  display: none;
}
.pl-previa-viva .pl-previa-quadro { display: block; }
.pl-previa-cap {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 9px 6px; color: var(--cor-texto); font-size: 13px; line-height: 1.3;
}
.pl-previa-titulo {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-previa-titulo[hidden] { display: none; }
.pl-previa-tempo { font-variant-numeric: tabular-nums; opacity: .9; white-space: nowrap; }

/* O SEGUNDO lugar da moldura (04/09): com o mouse ela sai do canto e vai para
   cima da barra, seguindo o ponteiro. O canto existia por causa da MÃO — ela
   cobre a barra e o que está logo acima dela —, e o mouse não cobre nada: ali
   o quadro fica onde o olho já está, em cima do ponto que se vai clicar.

   Quem posiciona é o player.js, em px, a cada movimento do ponteiro; o CSS só
   desfaz a âncora do canto. Sem `top: auto` o `top: 12px` da regra de cima
   ganharia do `bottom` em linha e a moldura ficaria no alto do quadro. */
.pl-previa-barra { top: auto; }

/* Em tela cheia o quadro é muito maior e 200 px viram selo. A moldura cresce
   junto: a largura dela é a da imagem, e as duas medidas andam sempre iguais. */
.pl-cheia .pl-previa { width: 340px; }
.pl-cheia .pl-previa-quadro { width: 340px; }
.pl-cheia .pl-previa-cap { font-size: 14px; }

/* Jogando o dedo para baixo: a moldura desbota ANTES de o arrasto ser
   desfeito. É o aviso que torna o gesto aprendível — sem ele, cancelar seria
   um segredo de quem leu o código. */
/* Enquanto se procura, os BOTÕES saem da frente da moldura — ninguém aperta
   play no meio de um arrasto. A barra NÃO desbota: ela é a única coisa que
   mostra para onde o ponteiro do vídeo está indo. */
.pl-procurando .pl-b,
.pl-procurando .pl-tempo,
.pl-procurando .pl-som-caixa {
  opacity: .2; transition: opacity .12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .pl-procurando .pl-b,
  .pl-procurando .pl-tempo,
  .pl-procurando .pl-som-caixa { transition: none; }
}

.pl-previa-indo { opacity: .45; }
.pl-previa-indo .pl-previa-tempo { opacity: 1; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .pl-previa { transition: none; }
}
.pl-selo-vivo { animation: pl-selo-sumir .9s ease forwards; }
@keyframes pl-selo-sumir {
  0%, 62% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-selo-vivo { animation: none; }
}


/* Rodinha de espera. Só aparece quando o vídeo está esperando rede — não no
   estado parado, que é onde 100% das sessões começam por causa do preload. */
.pl-esperando::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 3px solid color-mix(in srgb, var(--cor-texto) 35%, transparent); border-top-color: var(--cor-lua);
  border-radius: 50%; animation: pl-girar .8s linear infinite;
}
@keyframes pl-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pl-esperando::after { animation-duration: 2.4s; }
  .pl-barra-bolinha, .pl-seg { transition: none; }
}