/* ========================================================================== */
/*  SINGLE ANIME / EPISÓDIO — WRAPPER GERAL                                   */
/* ========================================================================== */

/* Container padrão do conteúdo (NÃO coloca background aqui) */
.rl-anime{
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}

/* Mobile: um pouco menos de “gutter” */
@media (max-width: 600px){
  .rl-anime{
    width: calc(100% - 24px);
  }
}

/* ========================================================================== */
/*  HERO — BACKGROUND FULL-BLEED + VINHETA                                    */
/*  Objetivo: imagem ocupar a tela toda, com bordas escuras (sem blur)         */
/* ========================================================================== */

/* HERO full-bleed (vai até as bordas da tela) */
.rl-animeHeroWrap{
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--rl-bg);
  padding-top: calc(var(--rl-header-h) + -25px);
  padding-bottom: 28px;
  margin: 0 0 22px;
}

.rl-animeHeroWrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.rl-animeHeroWrap::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 130px;
  z-index: 3;
  pointer-events:none;

  /* o fundo do site (use sua var) */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    var(--rl-bg) 100%
  );
}

.rl-animeHero{
  position: relative;
  z-index: 3;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.rl-animeHero::before{ content:none !important; }

/* A camada da imagem */
.rl-animeHero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.03);
  opacity: .78;
}

/* Vinheta + sombras + fade (o “escurecer nas bordas”) */
.rl-animeHero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;         /* overlay acima da imagem */
  pointer-events:none;

  /* Vinheta + fade suave (sem faixa dura) */
  background:
    /* vinheta suave (centro mais aberto) */
    radial-gradient(
      70% 85% at 50% 45%,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.55) 60%,
      rgba(0,0,0,0.92) 100%
    ),

    /* laterais mais escuras (efeito das setas) */
    linear-gradient(
      90deg,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.25) 28%,
      rgba(0,0,0,0.25) 72%,
      rgba(0,0,0,0.92) 100%
    ),

    /* topo/baixo mais leve */
    linear-gradient(
      180deg,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.18) 38%,
      rgba(0,0,0,0.78) 100%
    );

  /* sombra interna BEM mais leve pra não criar “barra” */
  box-shadow: inset 0 0 90px rgba(0,0,0,.55);
}

/* Conteúdo do hero acima do background */
.rl-animeHeroWrap .rl-anime{
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------
   TEXTURA MODERNA (grain + brilho sutil)
   ----------------------------------------------------- */

.rl-animeHero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 2;
  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.04) 100%
    ),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.06) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 38%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 72%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 78%, rgba(255,255,255,.03) 0 1px, transparent 2px);

  background-size:
    100% 100%,
    120px 120px,
    140px 140px,
    160px 160px,
    180px 180px;

  mix-blend-mode: overlay;
  opacity: .22;
}

/* =====================================================
   HERO — LAYOUT INTERNO
   ===================================================== */

.rl-animeHero-inner{
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  gap: 12px;

  /* evita ficar largo demais */
  max-width: 920px;
  margin: 0 auto;
}

/* -----------------------------------------------------
   POSTER
   ----------------------------------------------------- */
.rl-animePoster{
  width: 170px;
  position: relative; /* âncora para badges (dublado/legendado) */
}

.rl-animePoster img{
  width: 100%;
  height: auto;
  display: block;

  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  transform: translateZ(0);
}

/* -----------------------------------------------------
   TÍTULO + META
   ----------------------------------------------------- */

.rl-animeTitle{
    margin: 8px 0 0;
    font-size: 25px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 500;
    color: #fff;
}

.rl-animeMetaRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;

  color: var(--rl-muted);
  font-size: 13px;
}

.rl-animeMetaRow > span{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* =====================================================
   TRAILER MODAL
   ===================================================== */

.rl-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.rl-modal.is-open{
  display: block;
}

.rl-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.rl-modal__panel{
  position: relative;
  width: min(860px, calc(100% - 28px));
  margin: calc(var(--rl-header-h) + 24px) auto 0;

  background: rgba(15,15,15,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;

  box-shadow: 0 18px 60px rgba(0,0,0,.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  overflow: hidden;
}

.rl-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 38px;
  height: 38px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: var(--rl-text);

  cursor: pointer;
}

.rl-modal__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* iframe */
.rl-modal__frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* mobile: modal um pouco mais alto/baixo */
@media (max-width: 640px){
  .rl-modal__panel{
    width: calc(100% - 22px);
    margin-top: 12px;
    border-radius: 14px;
  }
}


/* =====================================================
   HERO — RESPONSIVO
   ===================================================== */

@media (max-width: 720px){
  .rl-animeHero{
    padding: 18px 0;
  }

  .rl-animeHero-inner{
    grid-template-columns: 120px 1fr;
    gap: 14px;
  }

  .rl-animePoster{
    width: 120px;
  }

  .rl-animeTitle{
    font-size: 22px;
  }
}

@media (max-width: 560px){
  .rl-anime{
    width: min(1200px, calc(100% - 28px));
    padding-bottom: 22px;
  }

  .rl-animeHero-inner{
    grid-template-columns: 1fr;
  }

  .rl-animePoster{
    width: 170px;
    margin: 0 auto;
  }

  .rl-animeMeta{
    text-align: center;
  }

  .rl-animeMetaRow{
    justify-content: center;
  }

  .rl-animeGenres{
    justify-content: center;
  }

  .rl-animeActions{
    justify-content: center;
  }
}

/* =====================================================
   Anime facts — Qualidade | Ano | Status
   ===================================================== */

.rl-animeFacts{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  margin-top: 8px;
  margin-bottom: 12px;

  flex-wrap: wrap;
}

/* item genérico */
.rl-animeFact{
  font-size: 15px;
  color: rgba(255,255,255,.88);
  line-height: 1;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: capitalize;
}

/* separador visual (·) automático */
.rl-animeFact + .rl-animeFact::before{
  content: '·';
  opacity: .45;
  margin-right: 4px;
}

/* status em exibição */
.rl-animeFact.is-airing{
  color: rgba(255,255,255,.95);
}

/* ============================================
   Status "Lançamento" — marcador à direita
   ============================================ */

.rl-animeFact--status.is-airing{
  position: relative;
  padding-right: 18px; /* espaço para o marcador */
}

/* bolinha */
.rl-animeFact--status.is-airing .rl-statusDot{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 8px;
  height: 8px;
  border-radius: 999px;

  background: #3cff66;
  opacity: .9;

  /* fica “atrás” do texto */
  z-index: -1;

  /* pulso mais presente */
  box-shadow: 0 0 0 4px rgba(60,255,102,.25);

  animation: rl-statusPulse 1.4s ease-in-out infinite;
}

/* animação de pulso */
@keyframes rl-statusPulse{
  0%{
    opacity: .55;
    box-shadow: 0 0 0 3px rgba(60,255,102,.18);
  }
  50%{
    opacity: 1;
    box-shadow: 0 0 0 7px rgba(60,255,102,.35);
  }
  100%{
    opacity: .55;
    box-shadow: 0 0 0 3px rgba(60,255,102,.18);
  }
}

.rl-animeFact.rl-animeFact--quality {
    text-transform: uppercase;
}

/* animação suave (não agressiva) */
@keyframes rl-pulse{
  0%   { opacity: .35; }
  50%  { opacity: 1; }
  100% { opacity: .35; }
}

/* mobile: fonte levemente menor */
@media (max-width: 640px){
  .rl-animeFact{
    font-size: 14px;
  }
}

/* =====================================================
   GÊNEROS — estilo "filter" (baseado no exemplo)
   ===================================================== */

.filter-container{
  position: relative;
  margin: 10px 0 12px;
  display:flex;
  flex-direction: column;
  align-items: center;
}

/* linha dos chips */
.filter-items{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* botão padrão */
.show-more-filter,
.filter-btn-destaque,
.filter-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: .38rem .85rem;
  border-radius: .45rem;

  font-size: 0.875rem;
  white-space: nowrap;
  line-height: 1;

  color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);

  text-decoration:none; /* para <a> */
}

.filter-container .filter-btn{
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.filter-container .filter-btn:hover{
  color: var(--rl-muted);
}

/* destaque "Gêneros" */
.filter-btn-destaque{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
}

/* ícone dentro do destaque */
.filter-icon{
  width: 16px;
  height: 16px;
  display:inline-flex;
}
.filter-icon svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
  display:block;
}

/* botão "Mais" */
.show-more-filter{
  margin-top: 10px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
}

.show-more-filter.hidden{
  display:none;
}

/* =====================================================
   GÊNEROS — sem botão: limitar quantidade por breakpoint
   (1 label + N gêneros)
   ===================================================== */

/* MOBILE: label + 2 gêneros = 3 itens visíveis */
@media (max-width: 767px){
  .filter-items > :nth-child(n+4){
    display:none;
  }
}

/* TABLET: label + 4 gêneros = 5 itens visíveis */
@media (min-width: 768px) and (max-width: 1023px){
  .filter-items > :nth-child(n+6){
    display:none;
  }
}

/* PC: label + 5 gêneros = 6 itens visíveis */
@media (min-width: 1024px){
  .filter-items > :nth-child(n+7){
    display:none;
  }
}



/* ========================================================================== */
/*  MAL — CARD DA NOTA (MyAnimeList)                                       */
/* ========================================================================== */

/* Container geral do MAL */
.rl-malCard{
  display:flex;
  align-items:center;
  gap: 14px;

  /* tamanho “premium” (não gigante) */
  width: auto;
  max-width: 520px;
  margin-inline: auto;

  padding: 12px 14px;
  border-radius: 16px;

  background: rgba(0,0,0,.58);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 45px rgba(0,0,0,.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* cor padrão (será sobrescrita pelas faixas) */
  color: #d6d6d6;
}

/* --- coluna da nota (esquerda) --- */
.rl-malCard__score{
  display:flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
}

.rl-malCard__value{
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.rl-malCard__label{
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .75;
}

/* divisor */
.rl-malCard__divider{
  width: 1px;
  height: 46px;
  background: rgba(255,255,255,.14);
}

.rl-rating-row{
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* --- lado direito (estrelas + link) --- */
.rl-malCard__right{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.rl-malCard__stars{
  display:flex;
  align-items:center;
  gap: 6px;
}

.rl-malCard__right a:hover{
  color: inherit;
}

/* estrela SVG */
.rl-star{
  width: 22px;
  height: 22px;
  display:block;
  fill: currentColor;
  opacity: .95;
}

/* wrapper de cada estrela */
.rl-starWrap{
  display:inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
/* =====================================================
   Cores por faixa de nota
   - low: prata
   - mid: amarelado
   - high: dourado
   ===================================================== */

.rl-malCard.is-low{  color: #c9c9c9; }
.rl-malCard.is-mid{  color: #f2d36b; }
.rl-malCard.is-high{ color: #ffbe2e; }

/* =====================================================
   Responsivo (mobile)
   ===================================================== */

@media (max-width: 560px){
  .rl-malCard{
    max-width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    gap: 12px;
  }

  .rl-malCard__value{
    font-size: 28px;
  }

}

/* =====================================================
   3.3 AÇÕES — Trailer / Compartilhar
   ===================================================== */

.rl-animeActions{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
}

/* botão base */
.rl-actionBtn{
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .08);
    background: var(--rl-surface-2);
    color: var(--rl-text);
    padding: 19px 29px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

/* ícone */
.rl-actionBtn__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.rl-actionBtn__icon svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* texto */
.rl-actionBtn__text{
  white-space: nowrap;
}

/* ============================================
   Action buttons — hover discreto (igual sinopse)
   ============================================ */

.rl-actionBtn{
  transition: background-color .18s ease,
              border-color .18s ease,
              box-shadow .18s ease;
}

.rl-actionBtn:hover{
    color: inherit;
    background: var(--rl-hover);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

@media (max-width: 640px){

  .rl-animeActions{
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        max-width: 520px;
        align-items: center;
  }

  /* força virar "botão de verdade" */
  .rl-animeActions .rl-actionBtn{
    display: flex;              /* não inline-flex */
    width: 70%;
    max-width: none;

    justify-content: center;
    align-items: center;

    padding: 14px 16px;
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.55);

    text-decoration: none;      /* caso Trailer seja <a> */
  }

  /* garante ícone + texto alinhados */
  .rl-animeActions .rl-actionBtn__icon{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .rl-animeActions .rl-actionBtn__text{
    display:inline-block;
    text-align:center;
  }
}

/* -----------------------------------------------------
   4.1 SINOPSE
   ----------------------------------------------------- */

.rl-animeSynopsis{
  max-width: 820px;
  margin: 0 auto 28px;
  color: var(--rl-text);
  line-height: 1.65;
  font-size: 15px;
  text-align: center;
}

.rl-animeSynopsis h2{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

.rl-animeSynopsis p{
  margin: 0;
  color: var(--rl-muted);
}

/* =====================================================
   SINOPSE — "Ver mais / Ver menos" (sem JS)
   ===================================================== */

.rl-animeSynopsis{
  margin-top: 18px;
  margin-bottom: 18px;
}

.rl-synopsis{
  position: relative;
}

.rl-synopsis__check{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Texto encurtado (clamp) */
.rl-synopsis__text{
  color: var(--rl-muted);
  line-height: 1.65;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* quantas linhas aparecem “encurtadas” */
  overflow: hidden;
}

/* Botão */
.rl-synopsis__toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 45px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--rl-surface-2);
  color: var(--rl-text);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.rl-synopsis__toggle:hover{
  background: var(--rl-hover);
}

/* Estado expandido */
.rl-synopsis__check:checked ~ .rl-synopsis__text{
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Alternar textos do botão */
.rl-synopsis__toggle .is-less{ display: none; }
.rl-synopsis__check:checked ~ .rl-synopsis__toggle .is-more{ display: none; }
.rl-synopsis__check:checked ~ .rl-synopsis__toggle .is-less{ display: inline; }

@media (max-width: 740px){
  .rl-synopsis__text{
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* opcional: esconde botão no mobile */
  .rl-synopsis__toggle{
    display: none !important;
  }
}

/* =====================================================
   5. LISTA DE EPISÓDIOS
   ===================================================== */
.rl-episodes-nav{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  margin: 12px 0 10px;

  justify-content: space-between; /* <<< empurra right pro final */
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

/* Centro (busca) ocupa o espaço e fica centralizado */
.rl-episodes-nav__center{
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}

/* Direita vai pro canto */
.rl-episodes-nav__right{
  margin-left: auto;
  flex: 0 0 auto;
}

/* FIX: Busca de episódios (valores rgba válidos) */
.rl-search--nav{
    width: 250px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: var(--rl-surface-2);
	z-index: 1;
}

.rl-search--nav .rl-search__icon{
  opacity: .75;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rl-search--nav .rl-input--search{
  width: 100% !important;
  height: 100%;
  min-width: 0;

  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  color: inherit;
}

.rl-search--nav:hover{
    background: var(--rl-hover);
    border-color: rgba(255, 255, 255, .18);
}

.rl-search--nav:focus-within{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
}

/* mantém center no meio e não “puxa” */
/* ===== Temporada (botão) ===== */
.rl-episodes-nav__left{
  position: relative; /* ancora o dropdown */
}

.rl-season-picker{
  width: 250px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--rl-surface-2);
  color: inherit;
  cursor: pointer;
}

.rl-season-picker:hover{
  background: var(--rl-hover);
}

.rl-season-picker__name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-season-picker__count{
  opacity: .70;
  font-size: 12px;
  white-space: nowrap;
}

.rl-season-picker__chev{
  opacity: .70;
  font-size: 12px;
  transition: transform .2s ease;
}

.rl-season-picker[aria-expanded="true"] .rl-season-picker__chev{
  transform: rotate(180deg);
}

/* ===== Dropdown ===== */
.rl-season-list{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 250px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: var(--rl-hover);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .40);
    z-index: 60;
}

.rl-season-list:hover{
    background: #3c3c3c;
    border-color: rgba(255, 255, 255, .18);
}

/* Itens */
.rl-season-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 8px;

  text-decoration: none;
  color: inherit;
}

.rl-season-item:hover{
  background: rgba(255,255,255,.06);
}

.rl-season-item.is-active{
  background: rgba(255,255,255,.10);
  cursor: default;
  color: inherit;
}

.rl-season-item__count{
  opacity: .65;
  font-size: 12px;
  white-space: nowrap;
}

.rl-episodes-layout{ overflow: visible; }

/* =====================================================
   Toggle Eps
   ===================================================== */

.rl-view-btn{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--rl-surface-2);
  color: inherit;
  cursor: pointer;
  opacity: .75;
  z-index: 1;
}

.rl-view-btn:hover{
  opacity: 1;
  background: var(--rl-hover);
  z-index: 1;
}

.rl-view-btn.is-active{
  opacity: 1;
  background: rgba(255,255,255,.10);
  z-index: 1;
}

/* ===========================
   MODO PADRÃO (grid) — default
   (Se você já tem grid pronto, pode até pular esta parte)
=========================== */

/* Linha do título (left) + tempo (right) */
.rl-episode-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rl-episode-age{
  opacity: .70;
  font-size: 12px;
  white-space: nowrap;
}

/* Subtítulo opcional */
.rl-episode-subtitle{
  margin-top: 6px;
  font-size: 13px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Remove roxo e underline do <a> */
.rl-episode-card,
.rl-episode-card:visited,
.rl-episode-card:hover,
.rl-episode-card:active{
  color: inherit !important;
  text-decoration: none !important;
}


.rl-episodes-layout.rl-view--grid .rl-ep-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* =====================================================
   EPISÓDIO (GRID) — fade perfeito sem borda
===================================================== */

/* mata qualquer borda/sombra herdada no thumb */
.rl-episodes-layout.rl-view--grid .rl-episode-thumb{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}

/* overlay corrigido */
.rl-episodes-layout.rl-view--grid .rl-episode-thumb::after{
  content: "";
  position: absolute;
  inset: 0; /* cobre TUDO */

  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 55%,
    var(--rl-bg) 100%
  );
}
/* anti-aliasing (reduz contorno em alguns browsers) */
.rl-episodes-layout.rl-view--grid .rl-episode-thumb{
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
}

/* =====================================================
   MODO LISTA — Linha com thumb + texto + ação à direita
===================================================== */

.rl-episodes-layout.rl-view--list .rl-ep-grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rl-episodes-layout.rl-view--list .rl-episode-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: var(--rl-surface);
    z-index: 1;
}

/* thumb pequeno (igual print) */
.rl-episodes-layout.rl-view--list .rl-episode-thumb{
  width: 112px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 12px;
}

/* bloco de texto */
.rl-episodes-layout.rl-view--list .rl-episode-info{
  flex: 1 1 auto;
  min-width: 0;
}

/* “1º Episódio” (label) — se você tiver um span pra isso */
.rl-episodes-layout.rl-view--list .rl-episode-kicker{
  font-size: 12px;
  opacity: .75;
  margin-bottom: 4px;
}

/* título forte */
.rl-episodes-layout.rl-view--list .rl-episode-title{
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* data embaixo */
.rl-episodes-layout.rl-view--list .rl-episode-meta{
  margin-top: 4px;
  font-size: 12px;
}

/* área da direita (toggle/ícone) — se existir */
.rl-episodes-layout.rl-view--list .rl-episode-right{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

/* =====================================================
   FIX – Modo LISTA (neutraliza CSS antigo)
===================================================== */

/* Garante que o container vira lista mesmo */
.rl-episodes-layout.rl-view--list .rl-ep-grid{
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

/* Card não herda grid/altura antiga */
.rl-episodes-layout.rl-view--list .rl-episode-card{
  display: flex !important;
  align-items: center;
  height: auto !important;
  min-height: unset !important;
}

/* Thumb não respeita aspect-ratio antigo */
.rl-episodes-layout.rl-view--list .rl-episode-thumb{
  aspect-ratio: unset !important;
  height: 56px;
  max-height: 56px;
}

/* Imagem não estica */
.rl-episodes-layout.rl-view--list .rl-episode-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Remove padding/margins herdadas */
.rl-episodes-layout.rl-view--list .rl-episode-card > *{
  margin: 0;
}

/* =====================================================
   FIX: Episódios não podem virar layout lateral
===================================================== */
.rl-episodes-layout{
  display: flex;
  flex-direction: column;
  width: 100%;
}



.rl-ep-grid{
  width: 100%;
  margin-left: 0 !important;
  float: none !important;
  max-width: none !important;
}

.rl-episodes-layout.rl-view--list .rl-episode-card{
  width: 100%;
}

/* =====================================================
   MODO GRID — Cards
===================================================== */

.rl-episodes-layout.rl-view--grid .rl-ep-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

/* se o halo vem do próprio link/card */
.rl-episodes-layout.rl-view--grid .rl-episode-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* thumb grande 16:9 */
.rl-episodes-layout.rl-view--grid .rl-episode-thumb{
  aspect-ratio: 16 / 9;
  border-radius: 16px;
}

/* info embaixo */
.rl-episodes-layout.rl-view--grid .rl-episode-info{
  margin-top: 10px;
}

.rl-episodes-layout.rl-view--grid .rl-episode-title{
  font-size: 16px;
}

.rl-episodes-layout.rl-view--grid .rl-episode-meta{
  margin-top: 6px;
}


/* =====================================================
   EPISÓDIOS — Card base (grid + lista)
===================================================== */

.rl-episode-card{
  color: inherit;
  text-decoration: none;
}

.rl-episode-thumb{
  border-radius: 14px;
  overflow: hidden;
}

.rl-episode-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rl-episode-title{
  font-weight: 600;
  letter-spacing: .2px;
}

.rl-episode-meta{
  opacity: .70;
  font-size: 12px;
}

/* =====================================================
   HOVER — GRID (cards)
===================================================== */

/* prepara animação */
.rl-episodes-layout.rl-view--grid .rl-episode-thumb img{
  transition: transform .35s ease, filter .35s ease;
}

/* hover geral do card */
.rl-episodes-layout.rl-view--grid .rl-episode-card:hover
  .rl-episode-thumb img{
  transform: scale(1.06);
  filter: brightness(1.05) contrast(1.05);
}

/* opcional: deixa o título um pouco mais vivo */
.rl-episodes-layout.rl-view--grid .rl-episode-card:hover
  .rl-episode-title{
  text-decoration: none;
}

/* =====================================================
   BADGES + ASSISTIDO (grid e lista)
===================================================== */

/* thumb precisa ser referência */
.rl-episode-thumb{
  position: relative;
}

/* Badge "Novo" */
.rl-ep-badge{
  position: absolute;
  top: 10px;
  left: 10px;

  height: 22px;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);

  backdrop-filter: blur(6px);
}

.rl-episodes-nav__right{
    grid-area: right; !important
    margin-left: 0; /* grid cuida do alinhamento */
    justify-self: end;
  }

.rl-ep-badge--new{
  /* “novo” mais vivo sem virar neon */
    background: var(--rl-accent);
    border-color: rgb(255 99 40);
}

/* Botão "assistido" (overlay) */
.rl-ep-watchedBtn{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 30px;
  height: 30px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: inherit;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  opacity: .85;
  transition: background .15s ease, opacity .15s ease, transform .15s ease;
}

.rl-ep-watchedBtn:hover{
  opacity: 1;
  background: rgba(0,0,0,.50);
  transform: translateY(-1px);
}

.rl-ep-watchedDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
}

/* Estado assistido (classe aplicada no card) */
.rl-episode-card.is-watched{
  opacity: .65;
}

.rl-episode-card.is-watched .rl-episode-thumb img{
  filter: grayscale(.25) brightness(.92);
}

.rl-episode-card.is-watched .rl-ep-watchedBtn{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

.rl-episode-card.is-watched .rl-ep-watchedDot{
  background: rgba(140,255,140,.95); /* verde discreto */
}

/* =====================================================
   HOVER — LISTA
===================================================== */

.rl-episodes-layout.rl-view--list .rl-episode-card{
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

/* hover do card */
.rl-episodes-layout.rl-view--list .rl-episode-card:hover{
  background: var(--rl-surface-2);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-1px);
}

/* thumb reage de leve */
.rl-episodes-layout.rl-view--list .rl-episode-thumb img{
  transition: transform .25s ease, filter .25s ease;
}

.rl-episodes-layout.rl-view--list .rl-episode-card:hover
  .rl-episode-thumb img{
  transform: scale(1.03);
  filter: brightness(1.03);
}

/* =====================================================
   Paginação numérica (1 2 Próxima)
===================================================== */

.rl-ep-pagination{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rl-pageBtn{
  height: 40px;
  min-width: 40px;
  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);

  color: inherit !important;
  text-decoration: none !important;

  opacity: .85;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease, transform .15s ease;
}

.rl-pageBtn:hover{
  opacity: 1;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.rl-pageBtn.is-active{
  opacity: 1;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  cursor: default;
  transform: none;
}

.rl-pageDots{
  opacity: .6;
  padding: 0 6px;
  user-select: none;
}

/* MAL + Classificação (lado a lado) */


.rl-age-card{
  width: 100px;
  border-radius: 14px;
  padding: 12px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);

  text-align: center;
}

.rl-age-top{
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
}

.rl-age-value{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .5px;
}

/* cores suaves por idade */
.rl-age-L  { background: rgb(70 200 120); border-color: rgb(70 200 120); }
.rl-age-10 { background: rgb(70 160 255); border-color: rgb(70 160 255); }
.rl-age-12 { background: rgb(70 200 255); border-color: rgb(70 200 255); }
.rl-age-14 { background: rgb(255 200 70); border-color: rgb(255 200 70); }
.rl-age-16 { background: rgb(255 140 70); border-color: rgba(255, 140, 70, .24); }
.rl-age-18 { background: rgb(249 20 20); border-color: rgb(255 140 70); }
.rl-age-na { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* Badge Dublado/Legendado no poster */
.rl-audio-badges{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  pointer-events: none; /* não atrapalha clique no poster */
}

.rl-audio-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 24px;
  padding: 0 10px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  color: #fff;
  background: var(--rl-accent);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;

  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);

  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Hover no POSTER (como no exemplo) */
.rl-animePoster:hover .rl-audio-badge{
  background: var(--rl-accent-hover);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.55);
}

@media (max-width: 700px){
  .rl-episodes-layout.rl-view--grid .rl-ep-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rl-episodes-layout.rl-view--list .rl-episode-thumb{
    width: 96px;
    height: 56px;
  }
}

@media (max-width: 420px){
  .rl-episodes-layout.rl-view--grid .rl-ep-grid{
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== */
/*  MOBILE FIXES — EPISÓDIOS (NAV + GRID/LISTA)                                */
/* ========================================================================== */

@media (max-width: 700px){
  /* Nav vira grid (temporada + toggle em cima, busca embaixo) */
  .rl-episodes-nav{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "left right"
      "search search";
    gap: 10px;
    align-items: center;
  }

  /* Mantém o seletor com boa pegada no dedo, mas deixa flexível */
  .rl-episodes-nav__left{
    grid-area: left;
    min-width: 0;
  }

  .rl-episodes-nav__right{
    grid-area: right;
    margin-left: 0; /* grid cuida do alinhamento */
    justify-self: end;
  }

  /* Busca ocupa a linha inteira no mobile */
  .rl-search--nav{
    grid-area: search;
    width: 100%;
    max-width: none;
  }

  /* Season picker pode ocupar toda a largura (melhor usabilidade) */
  .rl-season-picker{
    width: 100%;
    max-width: none;
  }

  /* Paginação centralizada e com wrap */
  .rl-ep-pagination{
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 480px){
  /* Cards ficam 2 colunas bem equilibradas */
  .rl-episodes-layout.rl-view--grid .rl-ep-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Ajuste de thumb na lista pra não estourar */
  .rl-episodes-layout.rl-view--list .rl-episode-thumb{
    width: 92px;
    height: 54px;
  }

  /* Poster menor pra não esmagar o hero */
  .rl-animePoster{
    width: 132px;
  }
}



/* Episódios a partir daqui */


/* =========================================================
   SINGLE EPISÓDIO — BASE (ISOLADO)
   Arquivo: single-epi.php
   Namespace: .rl-epi
========================================================= */

.rl-epi {
  background: var(--rl-bg);
  color: var(--rl-text);
  font-family: var(--rl-font);
}

/* Layout geral */
.rl-epi .rl-epi-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;

  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;

  /* ✅ permite filhos ocuparem toda a altura */
  min-height: calc(100vh - var(--rl-header-h));
}

/* Área principal */
.rl-epi .rl-epi-main {
  min-width: 0;
}

/* =========================
   PLAYER
========================= */

.rl-epi .rl-epi-player {
  background: var(--rl-surface);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
  overflow: hidden;
}

.rl-epi .rl-player-wrap {
  aspect-ratio: 16 / 9;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-epi .rl-player-placeholder {
  color: var(--rl-muted);
  font-size: 14px;
}

/* =========================================================
   SINGLE EPISÓDIO — PLAYER STATES (loading / error)
========================================================= */

.rl-epi .rl-player-wrap{ position: relative; }

.rl-epi .rl-player-state{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: var(--rl-bg);
  color: var(--rl-text);
  z-index: 5;
}

.rl-epi .rl-player-state[hidden]{ display: none; }

.rl-epi .rl-player-state__text{
  font-size: 14px;
  color: var(--rl-muted);
}

.rl-epi .rl-player-state__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--rl-accent);
  box-shadow: 0 0 0 6px var(--rl-focus);
  animation: rlDotPulse 1.2s ease-in-out infinite;
}

@keyframes rlDotPulse{
  0%{ transform: scale(.9); opacity: .65; }
  50%{ transform: scale(1.05); opacity: 1; }
  100%{ transform: scale(.9); opacity: .65; }
}

.rl-epi .rl-player-state--error{
  background: var(--rl-bg);
}

/* =========================
   META DO EPISÓDIO
========================= */

.rl-epi .rl-epi-meta {
  margin-top: 16px;
}

.rl-epi .rl-epi-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

/* =========================
   ASIDE — LISTA DE EPISÓDIOS
========================= */

.rl-epi .rl-epi-aside {
  background: var(--rl-surface);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rl-epi .rl-epi-list {
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}

.rl-epi .rl-epi-item {
  display: block;
  padding: 12px 14px;
  color: var(--rl-text);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--rl-border);
  transition: background var(--rl-fast);
}

.rl-epi .rl-epi-item:hover {
  background: var(--rl-hover);
}

.rl-epi .rl-epi-item.is-active {
  background: var(--rl-accent);
}


/* =========================
   RESPONSIVO
========================= */

@media (max-width: 1024px) {
  .rl-epi .rl-epi-layout {
    grid-template-columns: 1fr;
  }

  .rl-epi .rl-epi-aside {
    order: 2;
  }

  .rl-epi .rl-epi-main {
    order: 1;
  }
}

/* =========================================================
   SINGLE EPISÓDIO — PLAYER RESPONSIVO (FIX IFRAME)
========================================================= */

.rl-epi .rl-player-wrap iframe,
.rl-epi .rl-player-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* =========================================================
   SINGLE EPISÓDIO — BARRA DE PLAYERS (MINIMALISTA)
========================================================= */

.rl-epi .rl-epi-player-options {
  position: relative;
  margin-bottom: 10px;
}

/* botão principal */
.rl-epi .rl-epi-player-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 14px 34px;
  background: var(--rl-hover);
  color: var(--rl-text);

  border-radius: 10px;
  border: 0;

  font-size: 13px;
  line-height: 1;
  cursor: pointer;

  transition: background var(--rl-fast);
}

.rl-epi .rl-epi-player-toggle:hover {
  background: var(--rl-surface-2);
}

.rl-epi .rl-epi-player-toggle span {
  color: var(--rl-muted);
}

.rl-epi .rl-epi-player-toggle strong {
  color: var(--rl-text);
  font-weight: 600;
}

/* dropdown */
.rl-epi .rl-epi-player-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  background: var(--rl-hover);
  border-radius: 12px;
  box-shadow: var(--rl-shadow);

  padding: 8px;
  min-width: 220px;

  display: none;
  z-index: 30;

  /* animação */
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transition: opacity var(--rl-fast), transform var(--rl-fast);
}

.rl-epi .rl-epi-player-dropdown.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* setinha */
.rl-epi .rl-epi-player-dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 14px;
  width: 14px;
  height: 14px;
  background: var(--rl-hover);
  transform: rotate(45deg);
  border-radius: 3px;
}

/* opções */
.rl-epi .rl-epi-player-option {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  padding: 10px 12px;

  background: var(--rl-surface);
  color: var(--rl-text);

  border: 0;
  border-radius: 10px;

  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13px;

  transition: background var(--rl-fast), transform var(--rl-fast);
}

.rl-epi .rl-epi-player-option + .rl-epi-player-option {
  margin-top: 6px;
}

.rl-epi .rl-epi-player-option:last-child {
  margin-bottom: 0;
}

.rl-epi .rl-epi-player-option:hover {
  background: var(--rl-surface-2);
  transform: translateY(-1px);
}

.rl-epi .rl-epi-player-option:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .rl-epi .rl-epi-player-toggle {
    padding: 10px 20px;
    font-size: 12px;
  }
}

/* botões do dropdown como links */

.rl-epi .rl-epi-player-option-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--rl-muted);
}

.rl-epi .rl-epi-player-option:hover .rl-epi-player-option-ico{
  color: var(--rl-text);
}
/* =========================================================
   SINGLE EPISÓDIO — SIDEBAR (CAPA + TEXTO OVERLAY)
   - sem bordas
   - sem hover
   - somente a capa com texto por cima
========================================================= */

.rl-epi .rl-epi-side{
  display: flex;
  flex-direction: column;
  min-height: 0; /* 🔥 ESSENCIAL para scroll funcionar */
}

.rl-epi .rl-epi-side__list{
  display: flex;
  flex-direction: column;
  gap: 14px;

  overflow-y: auto;
  padding-right: 10px;

  /* ✅ "suspensa": nem pequena, nem gigante */
  max-height: clamp(968px, 62vh, 640px);
}

/* FORÇA: qualquer card com [hidden] some, mesmo com CSS antigo */
.rl-epi .rl-epi-sideCard[hidden]{
  display: none !important;
}



.rl-epi .rl-epi-sideCard{
  display: block;
  text-decoration: none;
  color: inherit;
}

.rl-epi .rl-epi-sideCard__thumb{
  position: relative;
  display: block;

  /* tamanho “sidebar” */
  width: 100%;
  aspect-ratio: 16 / 9;

  border-radius: 16px;
  overflow: hidden;

  /* sem bordas e sem sombra */
  box-shadow: none;
  border: 0;
}

.rl-epi .rl-epi-sideCard__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* ✅ libera hover (leve e premium) */
  transition: transform .35s ease, filter .35s ease;
}

.rl-epi .rl-epi-sideCard:hover .rl-epi-sideCard__thumb img{
  transform: scale(1.06);
  filter: brightness(1.05) contrast(1.05);
}

/* overlay igual ao print: texto em cima */
.rl-epi .rl-epi-sideCard__overlay{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;

  /* sem “caixa”, só texto */
  padding: 0;
}

.rl-epi .rl-epi-sideCard__title{
    font-size: 14px;
    font-weight: 600;
    color: rgb(255 255 255 / 58%);
    text-shadow: 0 8px 24px rgba(0, 0, 0, .75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

.rl-epi .rl-epi-sideCard__age{
    font-size: 12px;
    color: rgb(255 255 255 / 58%);
    text-shadow: 0 8px 24px rgba(0, 0, 0, .75);
    white-space: nowrap;
    z-index: 1;
}

/* fade escuro no rodapé da thumb (igual card do site) */
.rl-epi .rl-epi-sideCard__thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 55%,
    var(--rl-bg) 100%
  );
}

/* Episódio atual — destaque sutil */
.rl-epi .rl-epi-sideCard.is-current .rl-epi-sideCard__thumb::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 16px;
}

/* Scrollbar discreto */
.rl-epi .rl-epi-side__list{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}

.rl-epi .rl-epi-side__list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 999px;
}

.rl-epi .rl-epi-side__list::-webkit-scrollbar{
  width: 10px;
}
.rl-epi .rl-epi-side__list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.25);
  border-radius: 6px;
}
.rl-epi .rl-epi-side__list::-webkit-scrollbar-track{
  background: transparent;
}
.rl-epi .rl-epi-sideCard__overlay{
  bottom: 14px; /* antes era 10px */
}

/* Sidebar: itens bloqueados (não exibidos ainda) */
.rl-epi .rl-epi-sideCard.is-locked{
  display: none;
}

.rl-epi .rl-epi-sideCard.is-watched .rl-epi-sideCard__thumb{
  opacity: .72;
}



/* =========================================================
   SINGLE EPISÓDIO — NAVEGAÇÃO (ANTERIOR / VOLTAR / PRÓXIMO)
========================================================= */

.rl-epi .rl-epi-nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  margin: 14px 0 18px;
}

.rl-epi .rl-epi-nav-btn{
  background: var(--rl-surface-2);
  color: var(--rl-text);
  text-decoration: none;

  padding: 12px 14px;
  border-radius: 14px;

  text-align: center;
  font-size: 13px;
  line-height: 1;

  transition: background var(--rl-fast);
}

.rl-epi .rl-epi-nav-btn:hover{
  background: var(--rl-hover);
}

.rl-epi .rl-epi-nav-center{
  background: var(--rl-accent);
}

.rl-epi .rl-epi-nav-center:hover{
  background: var(--rl-accent-hover);
}

.rl-epi .rl-epi-nav-btn.is-disabled{
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* =========================================================
   SINGLE EPISÓDIO — NAV COMPACTA (Anterior | Lista | Próximo)
   estilo tipo print (capsule)
========================================================= */

.rl-epi .rl-epi-nav2{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 18px;
}

.rl-epi .rl-epi-nav2__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--rl-surface-2);
  color: var(--rl-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--rl-fast), border-color var(--rl-fast);
  z-index: 1;
}

.rl-epi .rl-epi-nav2__ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

/* Botão do meio mais “importante” (como no print) */
.rl-epi .rl-epi-nav2__btn--list{
  background: rgba(255,255,255,.06);
}

/* Desabilitado */
.rl-epi .rl-epi-nav2__btn.is-disabled{
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* =========================
   HOVER — troca clara de cor
========================= */

.rl-epi .rl-epi-nav2__btn:hover{
  background: (var(--rl-hover));
  color: #fff;
}

/* =========================
   BOTÃO CENTRAL (Lista)
========================= */

.rl-epi .rl-epi-nav2__btn--list{
  background: var(--rl-surface-2);
}

.rl-epi .rl-epi-nav2__btn--list:hover{
  background: var(--rl-hover);
}

/* =========================
   ESTADO DESTACADO (ex: Próximo)
========================= */

.rl-epi .rl-epi-nav2__btn.is-hot:hover{
  background: var(--rl-hover);
}

/* =========================================================
   SINGLE EPISÓDIO — INFO (abaixo do player)
========================================================= */

.rl-epi .rl-epi-info{
  margin-top: 18px;
}

.rl-epi .rl-epi-info__inner{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: start;
}

/* poster */
.rl-epi .rl-epi-info__poster{
  position: relative;
  display: block;

  width: 130px;
  height: 180px;
  aspect-ratio: 9 / 16;

  border-radius: 12px;
  overflow: hidden;

  background: transparent; /* remove “caixa” */
}

.rl-epi .rl-epi-info__poster img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* topo: idade + gêneros */
.rl-epi .rl-epi-info__top{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
  margin-bottom: 6px;
}

.rl-epi .rl-epi-age{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--rl-cor);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.rl-epi .rl-epi-genres{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--rl-muted);
  font-size: 13px;
}

.rl-epi .rl-epi-genre{
  color: var(--rl-muted);
}

/* título */
.rl-epi .rl-epi-h1{
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--rl-text);
}

.rl-epi .rl-epi-h1__sep{
  opacity: .45;
  margin: 0 8px;
}

.rl-epi .rl-epi-h1__sub{
  font-weight: 600;
  color: rgba(255,255,255,.92);
}

/* JP title */
.rl-epi .rl-epi-jp{
  margin-top: 6px;
  color: var(--rl-muted);
  font-size: 13px;
}

/* sinopse (bem curtinha) */
.rl-epi .rl-epi-synopsis{
  margin-top: 10px;
  color: var(--rl-muted);
  font-size: 14px;
  line-height: 1.6;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* right stats */
.rl-epi .rl-epi-stats{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.rl-epi .rl-epi-stat{
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.rl-epi .rl-epi-stat__num{
  font-size: 18px;
  font-weight: 800;
  color: var(--rl-text);
}

.rl-epi .rl-epi-stat__lbl{
  font-size: 12px;
  color: var(--rl-muted);
}

/* reactions (preparado) */
.rl-epi .rl-epi-reactions{
  display: flex;
  gap: 10px;
}

.rl-epi .rl-epi-react{
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 0;
  background: var(--rl-hover);
  color: var(--rl-text);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  cursor: pointer;
  transition: background var(--rl-fast);
}

.rl-epi .rl-epi-react:hover{
  background: var(--rl-surface-2);
}

.rl-epi .rl-epi-react__num{
  font-weight: 700;
  font-size: 13px;
}

.rl-epi .rl-epi-reactions.is-voted{
  opacity: .65;
  pointer-events: none;
}

.rl-epi .rl-epi-react.is-active{
  background: var(--rl-surface-2);
}

/* =========================================================
   PLAYER — UX EXTRA
========================================================= */

/* foco de teclado bonito */
.rl-epi .rl-epi-player-toggle:focus-visible{
  outline: 2px solid var(--rl-focus);
  outline-offset: 2px;
}

/* hover troca cor do ícone */
.rl-epi .rl-epi-player-option{
  color: var(--rl-text);
}

.rl-epi .rl-epi-player-option:hover{
  color: var(--rl-text);
}

.rl-epi .rl-epi-player-option:hover
.rl-epi-player-option-ico{
  color: #fff;
}

/* ícone normal mais apagado */
.rl-epi .rl-epi-player-option-ico{
  color: var(--rl-muted);
  transition: color var(--rl-fast);
}

/* Fade topo/baixo da sidebar quando rola */
.rl-epi .rl-epi-side{ position: relative; }

.rl-epi .rl-epi-side::before,
.rl-epi .rl-epi-side::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height: 18px;
  pointer-events:none;
  z-index: 6;
}

.rl-epi .rl-epi-side::before{
  top: 0;
  background: linear-gradient(to bottom, var(--rl-bg), rgba(0,0,0,0));
}

.rl-epi .rl-epi-side::after{
  bottom: 0;
  background: linear-gradient(to top, var(--rl-bg), rgba(0,0,0,0));
}

/* =========================================================
   SIDEBAR — MARCADORES (Assistindo / Assistido)
========================================================= */

.rl-epi .rl-epi-sideCard__thumb{ position: relative; }

.rl-epi .rl-epi-sideCard__marks{
  position:absolute;
  top: 10px;
  right: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 3;
  pointer-events:none;
}

/* por padrão, nada aparece */
.rl-epi .rl-epi-mark{ display:none; }

/* =========================================================
   ASSISTINDO — bolinha pulsando (igual “Lançamento”)
========================================================= */

.rl-epi .rl-epi-sideCard.is-watching .rl-epi-mark--watching{
  display:block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #3cff66;
  opacity: .95;

  box-shadow: 0 0 0 4px rgba(60,255,102,.22);
  animation: rl-epiPulse 1.4s ease-in-out infinite;
}

@keyframes rl-epiPulse{
  0%{ opacity: .55; box-shadow: 0 0 0 3px rgba(60,255,102,.16); }
  50%{ opacity: 1;   box-shadow: 0 0 0 7px rgba(60,255,102,.32); }
  100%{ opacity: .55; box-shadow: 0 0 0 3px rgba(60,255,102,.16); }
}

/* =========================================================
   ASSISTIDO — check duplo (discreto)
========================================================= */

.rl-epi .rl-epi-sideCard.is-watched .rl-epi-mark--watched{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.92);
}

.rl-epi .rl-epi-sideCard.is-watched .rl-epi-mark--watched svg{
  display:block;
}

/* =========================================================
   SIDEBAR — EPISÓDIO ASSISTIDO (CHECK DUPLO)
========================================================= */

.rl-epi .rl-epi-mark--watched{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 24px;
  height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  /* 🔴 vermelho translúcido */
  background: rgba(180, 30, 30, .35);

  /* leve destaque sem virar neon */
  box-shadow: 0 4px 14px rgba(180, 30, 30, .35);

  color: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
}

/* SVG do check */
.rl-epi .rl-epi-mark--watched svg{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* segurança: só aparece se for assistido */
.rl-epi .rl-epi-sideCard:not(.is-watched) .rl-epi-mark--watched{
  display: none;
}

.rl-epi .rl-epi-info__poster{
  position: relative;
  overflow: hidden;
}

.rl-epi .rl-epi-info__poster::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 55%,
    var(--rl-bg) 100%
  );
}

/* =========================================================
   SINGLE EPISÓDIO — COMENTÁRIOS (ACCORDION)
========================================================= */

.rl-epi .rl-epi-comments{
  margin-top: 18px;
}

.rl-epi .rl-epi-comments__toggle{
  width: 100%;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 0 16px;
  border-radius: 14px;
  border: 0;

  background: var(--rl-hover);
  color: var(--rl-text);

  cursor: pointer;
}

.rl-epi .rl-epi-comments__title{
  font-weight: 700;
  font-size: 14px;
}

.rl-epi .rl-epi-comments__chev{
  position: absolute;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rl-text);
  transition: transform var(--rl-fast);
}

.rl-epi .rl-epi-comments__toggle{
  position: relative;
}

.rl-epi .rl-epi-comments__toggle[aria-expanded="true"] .rl-epi-comments__chev{
  transform: rotate(180deg);
}

.rl-epi .rl-epi-comments__body{
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--rl-surface);
  border: 1px solid rgba(255,255,255,.08);
}

.rl-epi .rl-epi-comments__empty{
  color: var(--rl-muted);
  font-size: 14px;
}

/* =========================================================
   FIX — remove título duplicado dentro do comments.php
========================================================= */
.rl-epi .az-comments__body > h3,
.rl-epi .az-comments__body .comments-title,
.rl-epi .az-comments__body .az-comments__heading{
  display: none !important;
}

/* =========================================================
   SINGLE EPISÓDIO — COMENTÁRIOS
========================================================= */

.rl-epi-comments{
  margin-top: 18px;
}

/* corpo do accordion */
.rl-epi-comments__body{
  margin-top: 12px;
  padding: 16px;
  background: var(--rl-surface);
  border-radius: 16px;
}

/* título padrão do WP (remove visual feio) */
.rl-epi-comments .comments-title{
  display: none;
}

/* lista de comentários */
.rl-epi-comments .comment-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.rl-epi-comments .comment{
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.rl-epi-comments .comment:last-child{
  border-bottom: 0;
}

/* autor */
.rl-epi-comments .comment-author{
  font-weight: 600;
  color: var(--rl-text);
  margin-bottom: 4px;
}

/* texto do comentário */
.rl-epi-comments .comment-content{
  color: var(--rl-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* formulário */
.rl-epi-comments #respond{
  margin-top: 18px;
}

.rl-epi-comments textarea,
.rl-epi-comments input[type="text"]{
  width: 100%;
  background: var(--rl-hover);
  border: 0;
  border-radius: 12px;
  padding: 12px;
  color: var(--rl-text);
  font-family: inherit;
}

.rl-epi-comments textarea{
  min-height: 120px;
}

/* botão */
.rl-epi-comments input[type="submit"]{
  margin-top: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 0;
  background: var(--rl-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.rl-epi-comments input[type="submit"]:hover{
  background: var(--rl-accent-hover);
}

/* ======================================================================
   PATCH SAFE — HERO (evita conflito flex x grid no responsivo)
   Não muda o visual, só impede quebra/estilo fantasma no mobile
====================================================================== */
@media (max-width: 720px){
  .rl-animeHero-inner{
    display: flex;              /* garante que continua flex */
    flex-direction: column;     /* mantém o layout atual */
    align-items: center;
    text-align: center;

    grid-template-columns: unset; /* neutraliza o que não é usado no flex */
  }
}

/* Evita scroll horizontal acidental */
.rl-animeHeroWrap{
  overflow-x: clip; /* fallback: alguns browsers tratam como hidden */
}
@supports not (overflow: clip){
  .rl-animeHeroWrap{ overflow-x: hidden; }
}

@media (max-width: 640px){
  .rl-animeActions .rl-actionBtn{
     min-width: 257px;
     min-height: 65px;
  }
}

@media (max-width: 420px){
  .rl-animePoster{ width: 140px; } /* leve, não muda conceito */

  .rl-audio-badge{
    height: 22px;
    font-size: 11px;
    padding: 0 8px;
  }
}