/* 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, .58);
  color: #fff;
  text-align: center;
}
.player-overlay[hidden] { display: none; }
.player-overlay-card {
  max-width: 22rem;
  padding: .85rem 1rem;
  border-radius: .25rem;
  background: rgba(0, 0, 0, .42);
}
.player-overlay-ico {
  display: block;
  margin-bottom: .35rem;
  line-height: 1;
}
.player-overlay-ico .grade-ico { font-size: 2.25rem; }
.player-overlay-msg {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}
.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; }

@media (max-width: 575.98px) {
  .player-tv-vol { display: none; }
  .player-tv-center { width: 2.8rem; height: 2.8rem; }
}

/* 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;
}
.grade-legado-faixa {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0 .5rem;
}
.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: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  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;
}
/* A linha de estado repetia o nome do canal, que já está na faixa. */
.grade-legado-player > .player-foot { display: none; }
.grade-legado-erro { margin: 0; padding: .5rem .75rem; color: #ff8a80; }
.grade-legado-erro:empty { display: none; }