/*
 * A cara do player: Plyr 3.8.4 (o Panda e Plyr 3.7.3 por baixo) com as medidas
 * do player DELES, tiradas em Chrome em 23/09/2026 por spike/medir_panda.mjs:
 * botoes de 40 px (icone 24) com 8 de intervalo, barra de progresso numa linha
 * propria acima dos botoes, tempo em 600 16px, menu escuro em Plus Jakarta
 * Sans, botao grande de 100 px com icone de 57, e as camadas que o Plyr nao
 * tem (barra ficticia, tarja do autoplay mudo, tela de continuar). As cores e
 * tamanhos de cada video chegam como variaveis, do embed.js.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/embed/plus-jakarta-sans-latin.woff2") format("woff2");
}

:root {
  --plyr-color-main: #faa62f;
  --plyr-video-control-color: #fff;
  --plyr-control-icon-size: 24px;
  --plyr-control-radius: 50%;
  --plyr-menu-background: rgba(20, 20, 20, 0.92);
  --plyr-menu-color: rgba(255, 255, 255, 0.8);
  --plyr-menu-arrow-color: #fff;
  --plyr-menu-radius: 8px;
  --plyr-menu-back-border-color: rgba(255, 255, 255, 0.15);
  --plyr-menu-back-border-shadow-color: transparent;
  --plyr-font-size-menu: 14px;
  --plyr-font-size-time: 16px;
  --hp-play: 100px;
  --hp-play-icone: 57px;
  --hp-barra: 0px;
  --hp-legenda: 20px;
  --hp-tarja-fundo: rgba(72, 116, 241, 0.7);
  --hp-tarja-cor: #fff;
  --hp-tarja-borda: 2px;
  --hp-tarja-fonte: 22px;
  --hp-retomar-opacidade: 1;
}

/* As duas regras abaixo tambem vao no <style> do <head> do index.html: elas pintam a capa
   enquanto esta folha nao chega, que vem depois do inicio.js embutido (05/10/2026). Mudou
   aqui, muda la: tests/test_cabecalhos_embed.py reprova a regra de la que nao esta aqui. */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
#v { width: 100%; height: 100%; background: #000; object-fit: contain; display: block; }
.plyr { height: 100%; font-family: Rubik, sans-serif; }
.plyr__video-wrapper { height: 100%; }
.plyr video { object-fit: contain; }

/* A barra de botoes: 40 px por botao, 8 de intervalo, 10 da borda. Com a barra
   ficticia o Panda sobe os botoes para 5 px acima dela. A faixa escura tem a
   altura da do Panda (35 px acima dos botoes; 20 abaixo de 480 px, o corte do
   proprio Plyr), e a regua passa por cima dela: com 70 px a faixa cobria o
   centro de um player de celular, e o clique no video nao tocava (medido a
   360 px, a faixa recebia o clique). */
.plyr--video .plyr__controls {
  padding: 35px 10px calc(var(--hp-barra) + 10px);
  gap: 8px;
}
@media (max-width: 479px) {
  .plyr--video .plyr__controls { padding-top: 20px; }
}
.plyr.hp-com-barra .plyr__controls { padding-bottom: calc(var(--hp-barra) + 5px); }
.plyr__controls .plyr__controls__item { margin-left: 0; }
/* So os botoes da barra: os itens do menu tambem sao .plyr__control, e com 8 px
   de padding a seta do submenu encavalava no valor ("Normal", "Auto (360p)"). */
.plyr__controls > .plyr__control, .plyr__controls > .plyr__controls__item > .plyr__control { padding: 8px; }
.plyr__controls .hp-espaco { flex: 1; }
/* A barra de progresso de verdade (quando o profile a pede) numa linha propria,
   acima dos botoes, na largura toda -- nao espremida entre eles. As margens sao
   tortas porque o Plyr desloca a regua dentro do container (medido: ela sai 3 px
   a direita dele e 2 px mais curta); com 7 e 12 ela fica em [10, 463, 939, 19]
   num player de 960x540, onde o Panda a desenha. */
.plyr__controls .plyr__progress__container {
  position: absolute; left: 7px; right: 12px; margin: 0; padding: 0;
  bottom: calc(var(--hp-barra) + 58px);
}
.plyr.hp-com-barra .plyr__controls .plyr__progress__container { bottom: calc(var(--hp-barra) + 53px); }
.plyr__time { font-weight: 600; font-family: Rubik, sans-serif; }
/* O volume e so o botao de som, numa pilula de 10% de preto (52x40 no Panda, a
   960 px); a regua aparece com o mouse em cima. */
.plyr__controls .plyr__volume { min-width: 52px; max-width: none; width: auto;
  background: rgba(0, 0, 0, 0.1); border-radius: 80px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
/* min-width e margens zeradas: o Plyr da 60 px de minimo a regua, e ela ocupava
   espaco mesmo invisivel (volume com 105 px de largura no lugar dos 52 do Panda). */
.plyr__volume input[type="range"] { width: 0; min-width: 0; margin-left: 0; margin-right: 0; opacity: 0; transition: width 0.2s, opacity 0.2s; }
.plyr__volume:hover input[type="range"], .plyr__volume:focus-within input[type="range"] { width: 70px; margin-left: 6px; opacity: 1; }

/* Player estreito, com os cortes do Panda (styles.css dele, lido em 23/09/2026):
   abaixo de 840 px legenda e MiniPlayer saem da barra (la vao para um menu de
   tres pontos, que aqui nao existe: a legenda fica no menu de configuracoes,
   quando ele a tem), abaixo de 660 saem voltar e avancar, e abaixo de 560 os
   botoes vao a 32 px com
   icone de 16, o tempo a 14 px e o intervalo a 4. Sem isso, a 360 px a barra da
   biblioteca passava da largura e o play ficava FORA da tela (medido). */
@media (max-width: 839px) {
  .plyr.hp-legenda-no-menu .plyr__controls > [data-plyr="captions"], .plyr__controls > [data-plyr="pip"] { display: none; }
}
@media (max-width: 659px) {
  .plyr__controls > [data-plyr="rewind"], .plyr__controls > [data-plyr="fast-forward"] { display: none; }
}
@media (max-width: 559px) {
  .plyr--video .plyr__controls { padding-left: 5px; padding-right: 5px; gap: 4px; }
  .plyr--video .plyr__controls, .plyr.hp-com-barra .plyr__controls { padding-bottom: calc(var(--hp-barra) + 5px); }
  .plyr__controls > .plyr__control, .plyr__controls > .plyr__controls__item > .plyr__control { --plyr-control-icon-size: 16px; }
  /* A pilula do som vai a 51x32: 4 px de cada lado e 8 ate a regua (medido no Panda). */
  .plyr__controls .plyr__volume { min-width: 32px; height: 32px; padding: 0 4px; gap: 8px; }
  .plyr__controls .plyr__volume > .plyr__control svg { width: 19px; height: 19px; }
  .plyr__time { font-size: 14px; }
  .plyr__controls .plyr__progress__container,
  .plyr.hp-com-barra .plyr__controls .plyr__progress__container { bottom: calc(var(--hp-barra) + 48px); }
}

/* Celular (pelo UA, como o Panda; o embed.js decide): voltar, play e avancar no
   centro do video, na cor do player. Medido em 26/09/2026 com UA de Android num
   player de 358x201: play de 64 px com icone de 32 entre dois de 40 com icone de
   24, 40 px de intervalo, o grupo 10 px acima do meio; abaixo de 300 px, 48 e 32
   com 20 de intervalo. Some junto com os controles, e com a tarja na tela. */
.hp-centro { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 10px));
  align-items: center; justify-content: center; gap: 40px; z-index: 3; pointer-events: none; transition: opacity 0.3s ease; }
.plyr.hp-celular .hp-centro { display: flex; }
.plyr.hp-celular, .plyr.hp-celular .plyr__control { -webkit-tap-highlight-color: transparent; }
.plyr .hp-centro > .plyr__control { pointer-events: auto; display: flex; align-items: center; justify-content: center;
  margin: 0; border: 0; border-radius: 40px; box-shadow: none; opacity: 1;
  background: var(--plyr-color-main); color: var(--plyr-video-control-color);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.plyr .hp-centro > [data-plyr="play"] { width: 64px; height: 64px; min-width: 64px; padding: 12px; }
.plyr .hp-centro > [data-plyr="play"] svg { width: 32px; height: 32px; }
.plyr .hp-centro > [data-plyr="rewind"], .plyr .hp-centro > [data-plyr="fast-forward"] { width: 40px; height: 40px; min-width: 40px; padding: 8px; }
.plyr .hp-centro > [data-plyr="rewind"] svg, .plyr .hp-centro > [data-plyr="fast-forward"] svg { width: 24px; height: 24px; }
@media (max-width: 299px) {
  .hp-centro { gap: 20px; }
  .plyr .hp-centro > [data-plyr="play"] { width: 48px; height: 48px; min-width: 48px; padding: 10px; }
  .plyr .hp-centro > [data-plyr="play"] svg { width: 24px; height: 24px; }
  .plyr .hp-centro > [data-plyr="rewind"], .plyr .hp-centro > [data-plyr="fast-forward"] { width: 32px; height: 32px; min-width: 32px; padding: 6px; }
  .plyr .hp-centro > [data-plyr="rewind"] svg, .plyr .hp-centro > [data-plyr="fast-forward"] svg { width: 18px; height: 18px; }
}
/* hp-sem-controles e o hideControlsOnStart: os tres sairam da barra, entao somem com ela. */
.plyr.plyr--hide-controls .hp-centro, .plyr.hp-esconde-centro .hp-centro, .plyr.hp-forcar-oculto .hp-centro, .plyr.hp-sem-controles .hp-centro { opacity: 0; }
.plyr.plyr--hide-controls .hp-centro > *, .plyr.hp-esconde-centro .hp-centro > *, .plyr.hp-forcar-oculto .hp-centro > *, .plyr.hp-sem-controles .hp-centro > * { pointer-events: none; }
.plyr.hp-celular.hp-esconde-centro .plyr__controls { opacity: 0; pointer-events: none; }
/* Com o play grande: ele sozinho ate o primeiro play, e depois o do centro. */
.plyr.hp-celular .plyr__control--overlaid { display: none !important; }
.plyr.hp-celular.hp-antes-do-play .plyr__control--overlaid { display: flex !important; }
.plyr.hp-celular.hp-antes-do-play .plyr__controls, .plyr.hp-celular.hp-antes-do-play .hp-centro { display: none !important; }
.plyr .hp-centro > .hp-pula { animation: hp-pula 200ms ease-out; }
@keyframes hp-pula { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

.plyr__menu__container { font-family: "Plus Jakarta Sans", Rubik, system-ui, sans-serif; font-weight: 600; }
.plyr__menu__container .plyr__control { color: var(--plyr-menu-color); }
.plyr__menu__container .plyr__menu__value { color: rgba(255, 255, 255, 0.8); }

/* Botao grande: o tamanho vem do profile (bigPlayButtonSize/IconSize). O
   `.plyr` na frente vence o `.plyr button { width: auto }` do Plyr, que
   encolhia o botao para a largura do icone (57 x 100, medido). */
.plyr .plyr__control--overlaid {
  width: var(--hp-play); height: var(--hp-play); padding: 0;
  display: flex !important; align-items: center; justify-content: center;
}
.plyr__control--overlaid svg { width: var(--hp-play-icone); height: var(--hp-play-icone); left: 2px; }
.plyr--playing .plyr__control--overlaid, .plyr.hp-forcar-oculto .plyr__control--overlaid { opacity: 0; visibility: hidden; }

/* Enquanto a tarja do autoplay mudo esta na tela o Panda some com os controles
   (plyr--force-hide-controls): o unico clique possivel e o que liga o som. */
.plyr.hp-forcar-oculto .plyr__controls, .plyr.hp-sem-controles .plyr__controls { opacity: 0; pointer-events: none; transform: translateY(100%); }

.plyr__caption { font-size: var(--hp-legenda); }

/* A barra ficticia: mesma cor, colada no rodape, por cima de tudo. */
.hp-barra { position: absolute; left: 0; bottom: 0; height: var(--hp-barra); width: 0; z-index: 4;
  background: var(--plyr-color-main); pointer-events: none; transition: width 0.25s linear; }
.hp-barra[hidden] { display: none; }

/* A tarja: 400x216 num player de 960x540 e 288x123 num de 360 (medido). Texto
   700 22px Arial, 12px no celular; o icone vai de 137 a 67 px de largura. A reta
   da fonte passa um pouco ABAIXO de 12 a 360 e ACIMA de 22 a 960, para o clamp
   cravar os dois tamanhos medidos (com a reta exata sai 12,0001 e 21,9994). */
#tarja { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10;
  width: min(400px, 80%); box-sizing: border-box; padding: 8px; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  border: var(--hp-tarja-borda) solid #fff; border-radius: 10px; cursor: pointer;
  background: var(--hp-tarja-fundo); color: var(--hp-tarja-cor);
  font: 700 clamp(12px, calc(5.8px + 1.7vw), var(--hp-tarja-fonte)) / 2.1 Arial, Helvetica, sans-serif; }
#tarja[hidden], #tarja-pequena[hidden], #retomar[hidden] { display: none; }
#tarja svg { width: clamp(40px, calc(25px + 11.667vw), 137px); height: auto; margin-bottom: clamp(4px, 1vw, 9px); }
#tarja.hp-impacto .onda { animation: hp-onda 1.2s ease-in-out infinite; }
#tarja.hp-impacto .onda:nth-of-type(3) { animation-delay: 0.2s; }
#tarja.hp-impacto .onda:nth-of-type(4) { animation-delay: 0.4s; }
@keyframes hp-onda { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* O "ATIVAR SOM" do autoplay sem tarja: canto de cima, na cor do player com
   transparencia (o texto fica opaco), 181x54 no Panda (medido). */
#tarja-pequena { position: absolute; left: 10px; top: 10px; z-index: 10; margin: 0;
  display: flex; align-items: center; gap: 11px; padding: 10px 19px 10px 7px; border: 0; border-radius: 3px;
  background: none; color: #fff; cursor: pointer; font: 700 16px Rubik, sans-serif; text-transform: uppercase; }
#tarja-pequena::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--plyr-color-main); opacity: 0.8; }
#tarja-pequena svg { width: 48px; height: 34px; }

/* "Voce ja comecou a assistir": a cor do player com a opacidade do profile. */
#retomar { position: absolute; inset: 0; z-index: 11; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; color: #fff; font-family: Arial, Helvetica, sans-serif; }
#retomar::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--plyr-color-main); opacity: var(--hp-retomar-opacidade); }
#retomar p { margin: 0; font-size: clamp(14px, 2.1vw, 20px); font-weight: 700; text-align: center; padding: 0 16px; }
#retomar > div { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
#retomar button { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff;
  font: 400 clamp(13px, 1.8vw, 18px) Arial, Helvetica, sans-serif; cursor: pointer; padding: 6px; }
#retomar button svg { width: 1.6em; height: 1.6em; }

#aviso { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 20;
  color: #e7ecf3; font: 15px system-ui, sans-serif; text-align: center; padding: 24px; }
#aviso.on { display: flex; }
/* O widget do Turnstile (appearance interaction-only): invisivel ate o
   Cloudflare precisar de um clique; ai aparece no centro, sobre o video. */
#ts { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; }