/* Chrome de TV ao vivo — sem os controles nativos de filme. */
.player-box video::-webkit-media-controls { display: none !important; }
.player-box.is-native video::-webkit-media-controls { display: flex !important; }

.player-tv {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.player-box.is-native .player-tv,
.player-box.is-idle:not(.is-paused) .player-tv { opacity: 0; pointer-events: none; }
.player-box.is-idle:not(.is-paused) .player-tv { transition: opacity .35s ease; }

.player-tv-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.4rem;
  height: 3.4rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #000 62%, transparent);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.player-box.is-paused .player-tv-center { display: inline-flex; }
.player-tv-center .silk { width: 22px; height: 22px; flex-basis: 22px; }

.player-tv-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.4rem;
  padding: .35rem .55rem .4rem;
  background: color-mix(in srgb, #000 78%, transparent);
}
.player-tv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 0;
  flex: 0 0 auto;
}
/* `:hover` e `:focus-visible` em regras separadas, e `rgba` no lugar de `color-mix` (o mesmo branco a 14%):
   a TV box (Chrome 52) não conhece nenhum dos dois e descartava a regra inteira — o botão perdia o destaque
   também sob o ponteiro. O foco do controle remoto lá é o anel do modo TV (vem no `/controle-remoto.js`). */
.player-tv-btn:hover,
.player-tv-center:hover,
.player-tv-live:hover {
  background: rgba(255, 255, 255, .14);
  outline: none;
}
.player-tv-btn:focus-visible,
.player-tv-center:focus-visible,
.player-tv-live:focus-visible {
  background: rgba(255, 255, 255, .14);
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.player-box:not(.is-paused) .player-tv .is-play,
.player-box.is-paused .player-tv .is-pause,
.player-box:not(.is-muted) .player-tv .is-muted,
.player-box.is-muted .player-tv .is-vol,
.player-box:not(.is-full) .player-tv .is-in,
.player-box.is-full .player-tv .is-out { display: none; }

.player-tv-live {
  flex: 0 0 auto;
  border: 0;
  background: #b71c1c;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  padding: .18rem .45rem;
  border-radius: .15rem;
  line-height: 1.2;
}
.player-tv-live.is-behind { background: #3a3a3a; color: #ddd; }
.player-tv-delay {
  font-size: .75rem;
  color: #ddd;
  white-space: nowrap;
}
.player-tv-grow { flex: 1 1 auto; min-width: .5rem; }
.player-tv-vod {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1 1 auto;
  min-width: 0;
}
.player-tv-time {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: #ddd;
  min-width: 2.4rem;
}
.player-tv-seek,
.player-tv-vol {
  accent-color: #e0e0e0;
  height: 0.35rem;
  margin: 0;
}
.player-tv-seek { flex: 1 1 auto; min-width: 4rem; }
.player-tv-vol { width: 4.2rem; flex: 0 0 auto; }
.player-tv-q { display: inline-flex; flex: 0 0 auto; }
.player-tv-q .player-q { padding-right: 0; }

.player-box:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* A sobreposição da falha e do clique de tocar. O chão é o Chrome 52 da TV box: os quatro lados no lugar de `inset` e
   `rgba` no lugar de `color-mix` (os dois não existem lá, e a sobreposição saía sem tamanho nem fundo). */
.player-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  text-align: center;
}
.player-overlay[hidden] { display: none; }
/* O cartão do aviso (`sobreposicao.jsx`): o fundo escuro em degradê, a faixa de cor do tom no alto e o sinal num círculo
   da mesma cor; vermelho na falha, âmbar no aviso (dono, 09/11/2026: "mais elaborado e elegante e colorido"). Sem `gap`
   nem `inset`: a TV box roda o Chrome 52. */
.player-overlay-card {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  max-width: 27rem;
  max-height: 100%;
  padding: 1.5rem 1.25rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--ui-border-radius-xl);
  background: linear-gradient(180deg, rgba(36, 38, 50, .96), rgba(17, 18, 25, .96));
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .55);
}
.player-overlay-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff5f6d, #ffa94d);
}
.player-overlay-card.is-aviso::before { background: linear-gradient(90deg, #f59f00, #ffe066); }
.player-overlay-card.is-tocar,
.player-overlay-card.is-ok {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.player-overlay-card.is-tocar::before,
.player-overlay-card.is-ok::before { display: none; }
.player-overlay-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: .8rem;
  border-radius: 50%;
  background: rgba(255, 95, 109, .16);
  box-shadow: 0 0 0 .4rem rgba(255, 95, 109, .07);
  line-height: 1;
}
.player-overlay-card.is-aviso .player-overlay-ico {
  background: rgba(245, 159, 0, .18);
  box-shadow: 0 0 0 .4rem rgba(245, 159, 0, .07);
}
.player-overlay-ico .grade-ico { font-size: 1.85rem; }
.player-overlay-card.is-erro .player-overlay-ico .grade-ico { color: #ff8787; }
.player-overlay-card.is-aviso .player-overlay-ico .grade-ico { color: #ffd43b; }
.player-overlay-msg {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.35;
}
.player-overlay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: .85rem -.25rem 0;
}
/* A janela da escolha de servidor (`<dialog>` da SDK) é filha do grupo e fica com a margem dela: com esta, ela abria
   presa no canto da tela, e não no meio. */
.player-overlay-actions > :not(dialog) { margin: .25rem; }
.player-overlay-card.is-tocar .player-overlay-actions { margin-top: 0; }
.player-overlay-fonte { margin-top: .5rem; }
.player-overlay-fonte summary { cursor: pointer; }
.player-overlay-fonte code {
  display: block;
  color: #fff;
  word-break: break-all;
}
.player-overlay-actions .btn { pointer-events: auto; }
/* Na falha, a barra da TV e o letreiro do canal saem: sem vídeo, a barra não serve, e no celular o cartão a cobria pela
   metade (revisão de tela, 09/11/2026); o letreiro repetia o título e passava por trás do cartão. O Chrome 52 da TV box
   não lê o `:has` e fica com os dois, que lá não encostam no cartão. */
.player-box:has(.player-overlay-card.is-erro) .player-tv,
.player-box:has(.player-overlay-card.is-erro) .player-osd { display: none; }
/* No celular, o vídeo tem uns 220 px de altura, e o cartão inteiro não cabia: passava por baixo do cabeçalho. Ali, o
   sinal fica menor e ao lado da frase, e os botões embaixo, no tamanho de toque: dois por linha, metade cada um, na
   tela baixa; no retrato, um por linha (abaixo). Se ainda faltar altura, o cartão rola dentro do quadro (`max-height`
   acima). A TV box não entra aqui: a tela dela é larga e alta. */
@media (max-width: 575.98px), (max-height: 600px) {
  .player-overlay { padding: .5rem; }
  .player-overlay-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: .9rem .9rem .65rem;
  }
  .player-overlay-ico { width: 2.1rem; height: 2.1rem; margin: 0 .7rem 0 0; }
  .player-overlay-ico .grade-ico { font-size: 1.2rem; }
  .player-overlay-msg { font-size: 1rem; }
  .player-overlay-actions { flex: 1 0 100%; margin-top: .45rem; }
  .player-overlay-card:not(.is-tocar) .player-overlay-actions > :not(dialog) {
    flex: 1 1 40%;
    min-width: 0;
    white-space: normal;
  }
}

@media (max-width: 575.98px) {
  .player-tv-vol { display: none; }
  .player-tv-center { width: 2.8rem; height: 2.8rem; }
  /* No retrato do celular, a metade da largura não cabia o rótulo, que quebrava em duas linhas: cada botão fica numa
     linha, na largura do cartão, com a escolha do servidor em cima (revisão de tela, 09/11/2026). */
  .player-overlay-card:not(.is-tocar) .player-overlay-actions > :not(dialog) { flex-basis: 100%; }
}

/* O PLAYER LEGADO (`src/lib/legacy-page.js`; dono, 14/10/2026: "o player manda na ui ... deixa uma faixa compacta"):
   uma faixa de uma linha com o Voltar e o nome do canal, e o player no resto da tela. O chão é o Chrome 52 da TV box:
   sem `gap`, `inset` nem `aspect-ratio` — a altura vem do flex. */
body.grade-legado {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  background: #000;
  color: #eee;
}
/* A faixa tem o que o cabeçalho da janela da Grade tem (dono, 09/11/2026): o nome com a linha do canal embaixo (ou ao
   lado, quando cabe) e, à direita, o Configure seu aparelho com os logos. Fundo e borda os do cabeçalho da janela. */
.grade-legado-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: .2rem .5rem;
  background: #111;
  border-bottom: 1px solid #2a2a2a;
}
.grade-legado-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.grade-legado-aparelhos { flex: 0 0 auto; margin-left: auto; padding-left: .5rem; }
.grade-legado-aparelhos:empty { display: none; }
.grade-legado-voltar {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0 .85rem 0 .45rem;
  margin-right: .5rem;
  border-radius: var(--ui-border-radius-pill);
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}
.grade-legado-voltar svg { margin-right: .3rem; }
.grade-legado-voltar:hover,
.grade-legado-voltar:focus-visible {
  background: rgba(255, 255, 255, .14);
  color: inherit;
  outline: none;
}
.grade-legado-titulo {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 .75rem 0 0;
  font-size: 1rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grade-legado-player {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.grade-legado-player > .player-palco {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.grade-legado-player .player-box {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}
/* O vídeo enche a caixa (no player da casa ele fica no tamanho do stream), com as faixas pretas do `contain`. */
.grade-legado-player .player-box video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
/* The shared footer contains the regional choice, including when playback fails. */
.grade-legado-player > .player-foot { flex: 0 0 auto; }
.grade-legado-erro { margin: 0; padding: .5rem .75rem; color: #ff8a80; }
.grade-legado-erro:empty { display: none; }
/* No celular, como no cabeçalho da janela (`app-watch.css`), três linhas: o Voltar com o nome; os logos; e a linha do
   canal, que já desce pela regra do `.watch-sub`. A TV box não entra aqui: a tela dela é larga. */
@media (max-width: 575.98px) {
  .grade-legado-cabeca { display: contents; }
  .grade-legado-titulo { flex: 1 1 0; margin-right: 0; }
  .grade-legado-aparelhos { order: 2; flex: 1 0 100%; margin-left: 0; padding: 0 0 .25rem; }
  .grade-legado-sub { padding-bottom: .25rem; }
}