/* ============================================================
   PLAYER NETFLIX — skin completa sobre o player custom.
   Escopado em .player-pro.
   ============================================================ */

/* ---- 1. Botão VOLTAR (canto superior esquerdo, overlay) ---- */
.player-pro .nfx-back {
  position: absolute; top: 28px; left: 32px; z-index: 9;
  background: none !important; border: 0 !important;
  color: #fff; cursor: pointer;
  width: 56px; height: 56px; min-width: 56px;
  display: flex; align-items: center; justify-content: center;
  opacity: .9; transition: opacity .25s, transform .2s;
}
.player-pro .nfx-back:hover { opacity: 1; transform: scale(1.12); background: none !important; }
.player-pro .nfx-back svg { width: 36px !important; min-width: 36px !important; height: 36px !important; }
.player-pro.ui-hidden .nfx-back { opacity: 0; pointer-events: none; }

/* ---- 1b. Container: full viewport, sem borda, sem radius ---- */
.modal:has(.player-pro) {
  padding: 0 !important; background: #000 !important;
  backdrop-filter: none !important;
}
.player-pro {
  width: 100% !important; max-width: none !important;
  height: 100% !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
}

/* ---- 2. Palco: vídeo preenche toda a tela (Netflix style, sem fullscreen) ---- */
.player-pro .video-stage {
  width: 100% !important; height: 100% !important;
  min-height: 100% !important; max-height: none !important;
}
.player-pro #vid, .player-pro video {
  width: 100% !important; height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  background: #000;
  /* Toque no vídeo é 100% nosso (gestos): impede o WebView de roubar o arrasto
     vertical p/ scroll — sem isso o deslize de volume/brilho falha no celular. */
  touch-action: none;
}
.player-pro .video-stage::before { display: none !important; }
.player-pro .video-stage::after {
  height: 60% !important; min-height: 320px;
  background: linear-gradient(0deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 38%, transparent 100%) !important;
}

/* ---- 3. Barra: sem fundo, sem borda, largura total, muito padding ---- */
.player-pro .bar {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; max-width: none !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 0 48px 28px !important;
  display: flex !important; flex-direction: column !important;
  gap: 4px !important;
  grid-template-columns: none !important; grid-template-areas: none !important;
  transition: opacity .3s ease !important;
}

/* ---- 4. Timeline: barra + tempo à DIREITA (igual Netflix) ---- */
.player-pro .player-timeline {
  display: flex !important; align-items: center; gap: 18px;
  grid-template-columns: none !important;
  color: #fff; font-weight: 700;
  padding-bottom: 4px;
  width: 100% !important;
}
.player-pro .bar-ctrl { width: 100% !important; }
.player-pro .seek-wrap { flex: 1; height: 32px; display: flex; align-items: center; }

.player-pro .nfx-time {
  white-space: nowrap; font-size: 17px; font-weight: 700;
  color: #fff; font-variant-numeric: tabular-nums;
  flex-shrink: 0; letter-spacing: .02em;
}
.player-pro .nfx-sep { opacity: .5; margin: 0 3px; }

/* Esconde o vcur (deixa só o vdur igual Netflix) */
.player-pro .nfx-time #vcur, .player-pro .nfx-time .nfx-sep { display: none; }

/* ---- 5. Progress bar ROXA (combina com o site), GROSSA ---- */
.player-pro #vseek::-webkit-slider-runnable-track {
  height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #8b5cf6 var(--pct,0%), rgba(255,255,255,.28) var(--pct,0%)) !important;
  transition: height .14s ease;
}
.player-pro .seek-wrap:hover #vseek::-webkit-slider-runnable-track { height: 10px; }
.player-pro #vseek::-webkit-slider-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #8b5cf6 !important; box-shadow: 0 0 10px rgba(139,92,246,.7) !important;
  margin-top: -7px; opacity: 0; transition: opacity .14s ease;
}
.player-pro .seek-wrap:hover #vseek::-webkit-slider-thumb { opacity: 1; margin-top: -5px; }

.player-pro #vseek::-moz-range-track {
  height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #8b5cf6 var(--pct,0%), rgba(255,255,255,.28) var(--pct,0%));
}
.player-pro #vseek::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #8b5cf6; border: 0;
  opacity: 0; transition: opacity .14s ease;
}
.player-pro .seek-wrap:hover #vseek::-moz-range-thumb { opacity: 1; }

.player-pro .seek-buffer { background: rgba(255,255,255,.16) !important; height: 6px !important; }

/* ---- 6. Controles (linha inferior: esq + dir) ---- */
.player-pro .bar-ctrl {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px;
}
.player-pro .bar-left {
  display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1;
}
.player-pro .bar-right {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}

/* ---- 7. Botões: GRANDES estilo Netflix ---- */
.player-pro .bar .pbtn {
  background: transparent !important; border: 0 !important;
  width: 56px; height: 56px; min-width: 56px !important;
  color: #fff; opacity: .95; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .15s, transform .15s;
}
.player-pro .bar .pbtn:hover {
  background: transparent !important;
  opacity: 1; transform: scale(1.12);
}
.player-pro .bar .pbtn:disabled { opacity: .28; transform: none; }
.player-pro .bar .pbtn svg { width: 40px !important; min-width: 40px !important; height: 40px !important; }

/* Play/Pause: o maior de todos */
.player-pro #vplay { width: 64px; height: 64px; min-width: 64px !important; }
.player-pro #vplay svg { width: 48px !important; min-width: 48px !important; height: 48px !important; }

/* Skip 10s (circular arrows) */
.player-pro .nfx-skip { width: 60px !important; height: 60px !important; min-width: 60px !important; }
.player-pro .bar .pbtn.nfx-skip svg { width: 44px !important; min-width: 44px !important; height: 44px !important; display: block; }
.player-pro .nfx-skip text { fill: currentColor; }

/* Speed */
.player-pro .speed-btn {
  font-size: 17px !important; font-weight: 800 !important;
  width: auto !important; min-width: auto !important;
  padding: 0 12px !important; opacity: .85;
}
.player-pro .speed-btn:hover { opacity: 1; }

/* Quality badge */
.player-pro #vquality {
  font-size: 14px !important; font-weight: 800 !important;
  letter-spacing: .04em;
}

/* ---- 8. Título inline com controles ---- */
.player-pro .bar .t {
  min-width: 0; flex: 1; margin-left: 16px;
  grid-area: unset !important;
}
.player-pro .bar .t b {
  display: block; font-size: 20px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.01em;
}
.player-pro .bar .t small {
  display: block; font-size: 14px; color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

/* ---- 9. Volume: slider escondido, revela no hover ---- */
@media (min-width: 760px) {
  .player-pro .volume-group input[type=range] {
    width: 0 !important; min-width: 0 !important; flex-basis: 0 !important;
    opacity: 0; overflow: hidden;
    transition: width .2s ease, opacity .2s ease, min-width .2s ease;
  }
  .player-pro .volume-group:hover input[type=range] {
    width: 96px !important; min-width: 96px !important; flex-basis: 96px !important;
    opacity: 1;
  }
}

/* ---- 10. Flash central (feedback play/pause) ---- */
.player-pro .player-flash { width: 96px; height: 96px; }
.player-pro .player-flash svg { width: 44px; height: 44px; }

/* ---- 11. OSD central estilo YouTube: ícone + valor, fade rápido ---- */
.player-pro .player-osd {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 22px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .28);
  border: 0;
  color: #fff; font-size: 26px; font-weight: 800;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
  /* fade curto controlado pela classe .show (JS) — some rápido pra não atrapalhar */
  opacity: 0;
  transition: opacity .18s ease;
}
.player-pro .player-osd.show { opacity: 1; }

/* Posições: volume no topo, voltar à esquerda, avançar à direita — pra nenhum
   deles tapar o loader/ícone da série que fica no centro. (center = padrão) */
.player-pro .player-osd.osd-left  { left: 6%;  right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
.player-pro .player-osd.osd-right { left: auto; right: 6%;  top: 50%; bottom: auto; transform: translateY(-50%); }
.player-pro .player-osd.osd-top   { left: 50%; right: auto; top: 15%; bottom: auto; transform: translateX(-50%); }
.player-pro .player-osd .osd-ic {
  display: inline-flex; align-items: center; justify-content: center;
}
.player-pro .player-osd .osd-ic svg {
  width: 42px; height: 42px; display: block; fill: currentColor;
}
.player-pro .player-osd .osd-tx {
  font-size: 28px; font-weight: 800; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; line-height: 1;
  display: inline-block; transform-origin: center;
}
/* "Pop" suave e rápido no número a cada atualização/acúmulo (+10 → +20). */
@keyframes osdPop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.player-pro .player-osd .osd-tx.osd-pop { animation: osdPop .24s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce) {
  .player-pro .player-osd .osd-tx.osd-pop { animation: none; }
}

/* ---- 11b. Info ao PAUSAR: título + sinopse discretos no canto ESQUERDO ---- */
.player-pro .pause-info {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  text-align: left; gap: 9px;
  padding: 0 8vw clamp(186px, 20vh, 236px) clamp(32px, 6vw, 76px);
  pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateX(-12px);
  transition: opacity .45s ease, visibility .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.player-pro .pause-info::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6,8,13,.66) 0%, rgba(6,8,13,.24) 34%, transparent 58%);
}
.player-pro .pause-info.on { opacity: 1; visibility: visible; transform: none; }
/* Ao pausar, o nome do ep migra pro overlay: some o título da barra (cross-fade). */
.player-pro .bar .t { transition: opacity .4s ease; }
.player-pro.pause-info-on .bar .t { opacity: 0; }
.player-pro .pi-kicker {
  font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.7); text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.player-pro .pi-title {
  font-size: clamp(26px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.82); max-width: 17ch; text-wrap: balance;
}
.player-pro .pi-plot {
  margin: 3px 0 0; font-size: clamp(15px, 1.5vw, 20px); font-weight: 500; line-height: 1.55;
  color: rgba(255,255,255,.84); text-shadow: 0 2px 10px rgba(0,0,0,.8); max-width: 48ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .player-pro .pause-info { transition: opacity .01s, visibility .01s; transform: none; }
}
@media (max-width: 759px), (max-height: 540px) {
  .player-pro .pause-info { padding: 0 10vw clamp(116px, 15.5vh, 148px) clamp(16px, 5vw, 40px); gap: 6px; }
  .player-pro .pi-title { font-size: clamp(20px, 5.6vw, 30px); }
  .player-pro .pi-plot { font-size: 14px; -webkit-line-clamp: 2; max-width: 38ch; }
}

/* ---- 12. Tela cheia: ainda mais generoso ---- */
.player-pro:fullscreen .bar {
  padding: 0 64px 42px !important;
}
.player-pro:fullscreen .nfx-back { top: 40px; left: 48px; width: 64px; height: 64px; }
.player-pro:fullscreen .nfx-back svg { width: 40px !important; height: 40px !important; }
.player-pro:fullscreen .bar .t b { font-size: 22px; }
.player-pro:fullscreen .bar .t small { font-size: 15px; }
.player-pro:fullscreen .bar .pbtn { width: 60px; height: 60px; min-width: 60px !important; }
.player-pro:fullscreen .bar .pbtn svg { width: 44px !important; min-width: 44px !important; height: 44px !important; }
.player-pro:fullscreen #vplay { width: 72px; height: 72px; min-width: 72px !important; }
.player-pro:fullscreen #vplay svg { width: 54px !important; min-width: 54px !important; height: 54px !important; }
.player-pro:fullscreen .nfx-skip { width: 66px !important; height: 66px !important; min-width: 66px !important; }
.player-pro:fullscreen .bar .pbtn.nfx-skip svg { width: 50px !important; min-width: 50px !important; height: 50px !important; }
.player-pro:fullscreen .nfx-time { font-size: 19px; }
.player-pro:fullscreen #vseek::-webkit-slider-runnable-track { height: 7px; }
.player-pro:fullscreen .seek-wrap:hover #vseek::-webkit-slider-runnable-track { height: 12px; }

/* ---- 13. Seek hover tooltip ---- */
.player-pro .seek-hover {
  background: rgba(0,0,0,.9); border: 0;
  border-radius: 6px; font-size: 14px; font-weight: 700;
  padding: 6px 12px;
}

/* ---- 14. Episódios panel ---- */
.player-pro #veps-panel {
  border-left: 1px solid rgba(255,255,255,.08);
}

/* ---- 15. Stats overlay ---- */
.player-pro .player-stats {
  background: rgba(0,0,0,.82) !important;
  border: 0 !important; border-radius: 8px !important;
  backdrop-filter: blur(12px);
}

/* ---- 16. Mobile / Android ---- (celular em pé OU deitado: landscape do
   celular tem largura > 759px, então miramos por ALTURA baixa também). */
@media (max-width: 759px), (max-height: 540px) {
  .player-pro .bar { padding: 0 14px 12px !important; gap: 2px !important; }
  .player-pro .bar-ctrl { flex-wrap: nowrap; gap: 3px; min-height: 42px; }
  .player-pro .bar-left { gap: 2px; min-width: 0; }
  .player-pro .bar-right { gap: 2px; }
  .player-pro .bar .pbtn { width: 38px; height: 38px; min-width: 38px !important; }
  .player-pro .bar .pbtn svg { width: 22px !important; min-width: 22px !important; height: 22px !important; }
  .player-pro #vplay { width: 42px; height: 42px; min-width: 42px !important; }
  .player-pro #vplay svg { width: 26px !important; min-width: 26px !important; height: 26px !important; }
  .player-pro .nfx-skip { width: 40px !important; height: 40px !important; min-width: 40px !important; }
  .player-pro .bar .pbtn.nfx-skip svg { width: 26px !important; min-width: 26px !important; height: 26px !important; }
  .player-pro .speed-btn { font-size: 13px !important; padding: 0 6px !important; }
  .player-pro #vquality { font-size: 12px !important; }
  /* Idioma: no celular mostra SÓ o ícone (globo), sem o texto do idioma — cabe tudo. */
  .player-pro #vlang span { display: none !important; }
  .player-pro #vlang { width: 38px !important; min-width: 38px !important; padding: 0 !important; }
  /* Volume: no celular usa os botões físicos — esconde o slider p/ ganhar espaço. */
  .player-pro .volume-group input[type=range] { display: none !important; }
  .player-pro .bar .t b { font-size: 13px; }
  .player-pro .bar .t small { font-size: 11px; }
  .player-pro .bar .t { margin-left: 6px; }
  .player-pro .nfx-back { top: 10px; left: 10px; width: 42px; height: 42px; }
  .player-pro .nfx-back svg { width: 24px !important; min-width: 24px !important; height: 24px !important; }
  .player-pro .nfx-time { font-size: 12px; }
  .player-pro .bar-right { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .player-pro .bar-right::-webkit-scrollbar { display: none; }
}
/* Landscape do celular bem baixinho: título some p/ sobrar espaço aos controles. */
@media (max-height: 430px) {
  .player-pro .bar .t { display: none !important; }
}

/* ---- 17. CAM badge ---- */
.player-pro .player-cam {
  font-size: 10px; font-weight: 700;
  color: #f59e0b; background: rgba(245,158,11,.12);
  padding: 1px 6px; border-radius: 4px;
  margin-left: 8px; vertical-align: middle;
}

/* ---- 18. Loader minimalista: logo pulsante + spinner ---- */
.player-pro .nfx-loader {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  grid-template-columns: none !important;
  width: auto !important;
  max-width: min(520px, calc(100% - 48px)) !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-align: center !important;
  overflow: visible !important;
}
.player-pro .nfx-loader-ring { overflow: visible; }
/* Usa flex quando visível — sem !important pra hideSpin (style.display='none') funcionar */
.player-pro .nfx-loader { display: flex; }
.player-pro .nfx-loader::before { display: none !important; }

.player-pro .nfx-loader-ring {
  position: relative;
  width: 180px; height: 180px;
  display: grid; place-items: center;
}
.player-pro .nfx-loader-spinner {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(139, 92, 246, .18);
  border-top-color: #a78bfa;
  border-right-color: rgba(167, 139, 250, .55);
  animation: nfxLoaderSpin 1.4s linear infinite;
  box-shadow: 0 0 42px rgba(139, 92, 246, .3);
}
.player-pro .nfx-loader-logo {
  width: 118px; height: 118px;
  object-fit: contain;
  animation: nfxLoaderPulse 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(139, 92, 246, .55));
}
@keyframes nfxLoaderSpin { to { transform: rotate(360deg); } }
@keyframes nfxLoaderPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.06); opacity: .88; }
}

.player-pro .nfx-loader-copy {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; min-width: 0; max-width: 100%;
}
/* Esconde textos redundantes — deixamos só a frase (tip) pra ficar bem clean */
.player-pro .nfx-loader-copy b,
.player-pro .nfx-loader-copy small { display: none !important; }
/* Barra de progresso + ETA escondidas no skin Netflix — mantemos só logo, spinner e frase */
.player-pro .nfx-loader .player-loader-bar,
.player-pro .nfx-loader .player-loader-eta { display: none !important; }
.player-pro .nfx-loader .player-loader-tip {
  margin-top: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  color: rgba(255,255,255,.78) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Rebuffer/seek: enquanto o loader aparece, escurece e desfoca o quadro congelado.
   Sem isto, o frame parado logo após o pulo (macroblocos/borrado do decode
   pós-seek, típico de GOP aberto) fica visível ATRÁS do loader e parece bug.
   Com o blur, lê como "carregando" — intencional. transform:scale esconde a borda
   transparente que o blur cria. Só no rebuffer; a abertura tem tela preta. */
.player-pro .video-stage.is-rebuffering > #vid {
  filter: brightness(.5) blur(10px);
  transform: scale(1.03);
  transition: filter .18s ease;
}

/* ============================================================
   19. PAINEL DE EPISÓDIOS (lateral direita)
   ============================================================ */
.player-pro .veps-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 88%);
  z-index: 8;
  background: rgba(10, 10, 15, .96);
  border-left: 1px solid rgba(255,255,255,.06);
  box-shadow: -12px 0 60px rgba(0,0,0,.7);
  padding: 24px 20px 32px;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  color: #fff;
  /* Aberto: no lugar e opaco. Fecha via .hidden com slide+fade (rápido). */
  transform: translateX(0);
  opacity: 1;
  transition: opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility .24s;
}
/* Fechado: desliza um pouco pra direita + some. visibility mantém não-clicável
   sem usar display:none (que mataria a animação). O display:flex !important
   sobrepõe o utilitário global `.hidden{display:none!important}` do theme.css. */
.player-pro .veps-panel.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  pointer-events: none;
}

.player-pro .veps-panel::-webkit-scrollbar { width: 8px; }
.player-pro .veps-panel::-webkit-scrollbar-track { background: transparent; }
.player-pro .veps-panel::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, .3); border-radius: 4px;
}
.player-pro .veps-panel::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, .5); }

.player-pro .veps-header {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 18px;
  flex-shrink: 0;
}
.player-pro .veps-title {
  font-size: 15px; font-weight: 800; color: #fff;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.player-pro .veps-close-btn {
  position: absolute; right: 0; top: 0;
  width: 34px; height: 34px;
  background: transparent; border: 0;
  color: rgba(255,255,255,.7); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.player-pro .veps-close-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.player-pro .veps-close-btn svg { width: 20px; height: 20px; }

.player-pro .veps-seasons {
  display: flex; gap: 8px;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none; cursor: grab;
  user-select: none; -webkit-user-select: none;
  margin-bottom: 22px; padding-bottom: 4px;
  flex-shrink: 0; min-height: 46px;
}
.player-pro .veps-seasons::-webkit-scrollbar { display: none; }
.player-pro .veps-season-btn {
  flex: 0 0 auto;
  padding: 11px 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(30,30,42,.7);
  color: rgba(255,255,255,.75);
  border-radius: 8px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  line-height: 1;
  min-height: 40px;
}
.player-pro .veps-season-btn:hover { background: rgba(139,92,246,.15); color: #fff; }
.player-pro .veps-season-btn.active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px rgba(139,92,246,.4);
}

.player-pro .veps-list {
  display: flex; flex-direction: column; gap: 22px;
}

.player-pro .veps-ep {
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: transform .15s ease;
}
.player-pro .veps-ep:last-child { border-bottom: 0; padding-bottom: 0; }
.player-pro .veps-ep:hover { transform: translateX(-2px); }

/* Linha superior: thumb à ESQUERDA + título à direita */
.player-pro .veps-ep-top {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
}
.player-pro .veps-ep-heading {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}

.player-pro .veps-ep-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 140px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}
.player-pro .veps-ep.is-current .veps-ep-thumb {
  border-color: rgba(139,92,246,.6);
  box-shadow: 0 0 0 2px rgba(139,92,246,.4);
}
.player-pro .veps-ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-pro .veps-ep-thumb-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55);
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-align: center;
  background: #0a0a0f;
}
.player-pro .veps-ep-runtime {
  position: absolute; bottom: 8px; right: 8px;
  padding: 3px 8px;
  background: rgba(0,0,0,.78); color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.player-pro .veps-ep-playing {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  background: rgba(0,0,0,.7);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  backdrop-filter: blur(6px);
}
.player-pro .veps-ep-playing svg { width: 22px; height: 22px; }
.player-pro .veps-ep-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(255,255,255,.16);
}
.player-pro .veps-ep-progress i {
  display: block; height: 100%;
  background: #8b5cf6;
  box-shadow: 0 0 8px rgba(139,92,246,.6);
}

.player-pro .veps-ep-status {
  font-size: 11px; font-weight: 800;
  color: rgba(255,255,255,.75);
  letter-spacing: .06em; text-transform: uppercase;
}
.player-pro .veps-ep.is-watched .veps-ep-status { color: rgba(255,255,255,.5); }
.player-pro .veps-ep-title {
  display: block;
  font-size: 15px; font-weight: 800;
  color: #a78bfa;
  line-height: 1.3;
  letter-spacing: -.005em;
}
.player-pro .veps-ep-overview {
  margin: 0;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}

/* ============================================================
   20. Sem "caixa" de foco/seleção nos controles (feel de app)
   O tema aplica um glow roxo (var(--focus)) no :focus-visible de
   .focusable — em sliders (seek/volume) isso dispara já no clique e
   fica feio. Aqui zeramos isso SÓ dentro do player; hover/thumb/scale
   já dão o feedback visual. (Home e navegação por TV seguem com o anel.)
   ============================================================ */
.player-pro .focusable:focus,
.player-pro .focusable:focus-visible,
.player-pro .focusable.tv-focus,
.player-pro .pbtn:focus,
.player-pro .nfx-back:focus,
.player-pro input[type=range]:focus,
.player-pro input[type=range]:focus-visible,
.player-pro .seek-wrap:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
/* Sliders (seek/volume) herdam border 1px var(--border) do input genérico do tema,
   criando uma "boxinha" fininha ao redor da barra. Zeramos — Netflix é só a barra. */
.player-pro input[type=range] {
  border: 0 !important;
  background: transparent !important;
}
/* Sem flash de toque no Android/WebView e sem seleção de texto acidental */
.player-pro .bar,
.player-pro .nfx-back,
.player-pro .bar * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================================
   21. Botão "Pular abertura/encerramento" (AniSkip) — canto inf. direito
   ============================================================ */
.player-pro .nfx-skip-intro {
  position: absolute;
  right: 48px; bottom: 118px;
  z-index: 7;
  padding: 13px 28px;
  border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff; font-size: 16px; font-weight: 800;
  letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 10px 30px rgba(124, 58, 237, .45);
  opacity: .97;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease, bottom .25s ease;
  animation: nfxSkipIn .22s ease-out;
}
.player-pro .nfx-skip-intro:hover {
  opacity: 1; transform: scale(1.04);
  box-shadow: 0 12px 38px rgba(124, 58, 237, .62);
}
.player-pro .nfx-skip-intro[hidden] { display: none; }
/* Barra some (ui-hidden): desce um pouco pra não ficar flutuando alto */
.player-pro.ui-hidden .nfx-skip-intro { bottom: 44px; }
@keyframes nfxSkipIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: .97; transform: translateY(0); }
}
@media (max-width: 759px), (max-height: 540px) {
  .player-pro .nfx-skip-intro { right: 16px; bottom: 84px; padding: 9px 18px; font-size: 13px; }
  .player-pro.ui-hidden .nfx-skip-intro { bottom: 24px; }
}

/* ============================================================
   WATCH PARTY ("Party Play") — painel, indicador e botão.
   ============================================================ */
/* O botão da barra fica roxo quando a party está ativa e ganha um contador
   (quantidade de participantes) no canto — sem balão flutuante separado. */
.player-pro #vparty { position: relative; }
.player-pro #vparty.party-on { color: #a78bfa; }
.player-pro #vparty .vparty-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #7c4dff; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(10, 10, 14, .9); box-sizing: content-box;
}

/* Overlay "Esperando fulano carregar…" — aparece quando a sala segura (buffer). */
.player-pro .party-hold {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-radius: 14px;
  background: rgba(10, 10, 16, .86); border: 1px solid rgba(167, 139, 250, .4);
  color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.player-pro .party-hold-spin {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .22); border-top-color: #a78bfa;
  animation: party-hold-spin .8s linear infinite;
}
@keyframes party-hold-spin { to { transform: rotate(360deg); } }

/* Painel (criar / entrar / membros) — flutua acima da barra, à direita. */
.player-pro .party-menu {
  position: absolute; right: 16px; bottom: 78px; z-index: 12;
  width: 320px; max-width: calc(100vw - 32px);
  background: rgba(16, 16, 22, .98); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; padding: 18px; color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: pm-in .16s ease;
}
@keyframes pm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.player-pro .pm-head { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; }
.player-pro .pm-head svg { width: 20px; height: 20px; color: #a78bfa; }
.player-pro .pm-sub { margin: 8px 0 14px; font-size: 12.5px; line-height: 1.45; color: #a9a9b8; }
.player-pro .pm-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.player-pro .pm-btn:hover { background: rgba(255, 255, 255, .12); }
.player-pro .pm-btn svg { width: 18px; height: 18px; }
.player-pro .pm-primary { background: #7c4dff; border-color: #7c4dff; }
.player-pro .pm-primary:hover { background: #8b5cff; }
.player-pro .pm-or {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  font-size: 11.5px; color: #7a7a8a; text-transform: uppercase; letter-spacing: .04em;
}
.player-pro .pm-or i { flex: 1; height: 1px; background: rgba(255, 255, 255, .1); }
.player-pro .pm-join { display: flex; gap: 8px; }
.player-pro .pm-join input {
  flex: 1; min-width: 0; padding: 0 12px; height: 42px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px; color: #fff; font-size: 18px; font-weight: 800;
  letter-spacing: .28em; text-align: center; text-transform: uppercase;
}
.player-pro .pm-join input::placeholder { letter-spacing: .1em; font-weight: 600; color: #6a6a7a; }
.player-pro .pm-join input:focus { outline: none; border-color: #7c4dff; }
.player-pro .pm-join .pm-btn { width: auto; padding: 0 18px; }
.player-pro .pm-err { margin-top: 10px; font-size: 12.5px; color: #ff8f8f; }
.player-pro .pm-code-box {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  background: rgba(124, 77, 255, .14); border: 1px solid rgba(167, 139, 250, .4);
  border-radius: 12px; padding: 10px 12px;
}
.player-pro .pm-code-box b {
  flex: 1; font-size: 30px; font-weight: 800; letter-spacing: .22em; text-align: center; color: #fff;
}
.player-pro .pm-copy {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.player-pro .pm-copy:hover { background: rgba(255, 255, 255, .16); }
.player-pro .pm-copy svg { width: 15px; height: 15px; }
.player-pro .pm-members-t { font-size: 11.5px; color: #7a7a8a; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.player-pro .pm-members { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow: auto; }
.player-pro .pm-members li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.player-pro .pm-members li svg { width: 16px; height: 16px; color: #a9a9b8; }
.player-pro .pm-members li em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #a78bfa; background: rgba(124, 77, 255, .18); padding: 2px 7px; border-radius: 6px; }
.player-pro .pm-leave { background: transparent; border-color: rgba(255, 120, 120, .4); color: #ff9b9b; }
.player-pro .pm-leave:hover { background: rgba(255, 90, 90, .12); }

@media (max-width: 759px) {
  .player-pro .party-menu { right: 8px; left: 8px; width: auto; bottom: 70px; padding: 15px; }
}