/* ===== O topo do DRAMIPLAY =====
 *
 * Um arquivo so, usado por /inicio, /dorama, /assistir, /assine e
 * /configuracoes. Antes cada pagina tinha o proprio topo, com classes
 * diferentes (.nav-r num lugar, .nav-right no outro, .nav-canto num terceiro)
 * e alturas diferentes -- por isso o site parecia remendado ao trocar de tela.
 *
 * As tres mudancas que mais pesam no visual:
 *
 * 1. O topo fica TRANSPARENTE em cima da arte e so ganha fundo quando a pagina
 *    rola (a classe .rolou entra pelo JS). E o jeito que todo streaming faz: a
 *    capa do dorama vai ate o topo da tela em vez de comecar depois de uma
 *    barra cinza.
 * 2. Configuracoes e Sair sairam da barra e viraram um menuzinho atras do
 *    nome da pessoa. Antes eram tres coisas competindo do lado direito, com o
 *    "Sair" de moldura vermelha puxando mais atencao que o "Assinar".
 * 3. O "Assinar" virou pilula vermelha cheia, que e a acao que da dinheiro.
 *    Estava em verde de texto, brigando com a marca.
 */

:root{
  --topo-h:60px;
  --topo-h-cel:54px;
}

.topo{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--topo-h);
  display:flex;align-items:center;justify-content:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
}
/* o degrade segura o texto branco quando o topo esta por cima de uma capa clara */
.topo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,0) 100%);
  transition:opacity .25s ease;
}
.topo.rolou{
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.07);
}
.topo.rolou::before{opacity:0}
/* paginas sem arte no topo (assine, configuracoes) ja nascem com fundo */
.topo.solido{background:rgba(0,0,0,.92);backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.07)}
.topo.solido::before{opacity:0}

.topo-inner{
  position:relative;z-index:1;
  width:100%;max-width:1320px;padding:0 24px;
  display:flex;align-items:center;gap:22px;
}

/* ---- logo ---- */
.topo-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0;
  transition:opacity .15s}
.topo-logo:hover{opacity:.85}
.topo-logo img{width:26px;height:26px;object-fit:contain;display:block}
.topo-logo b{font-family:'Outfit',sans-serif;font-weight:900;font-size:19px;letter-spacing:-.045em;
  white-space:nowrap;color:#fff;line-height:1}
.topo-logo b i{color:#e5151f;font-style:normal}

/* ---- botao de voltar (paginas internas) ---- */
.topo-voltar{display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:var(--tx2,#a0a0b8);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:background .15s,color .15s,border-color .15s;flex-shrink:0}
.topo-voltar:hover{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.2)}
.topo-voltar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ---- menu de categorias ---- */
.topo-cat{position:relative;flex-shrink:0}
.topo-cat-btn{display:flex;align-items:center;gap:6px;background:none;border:none;padding:8px 4px;
  color:var(--tx2,#a0a0b8);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:color .15s}
.topo-cat-btn:hover{color:#fff}
.topo-cat-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .2s}
.topo-cat.aberto .topo-cat-btn{color:#fff}
.topo-cat.aberto .topo-cat-btn svg:last-child{transform:rotate(180deg)}
.topo-cat-icone{display:none}
.topo-cat-menu{display:none;position:absolute;top:calc(100% + 14px);left:-8px;min-width:238px;
  background:rgba(17,17,24,.97);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:7px;
  box-shadow:0 22px 50px rgba(0,0,0,.6);z-index:300}
.topo-cat.aberto .topo-cat-menu{display:block;animation:topoCai .18s ease both}
@keyframes topoCai{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.topo-cat-menu a{display:block;padding:9px 12px;border-radius:9px;color:var(--tx2,#a0a0b8);
  font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.topo-cat-menu a:hover{background:rgba(229,21,31,.14);color:#fff}

/* ---- lado direito ---- */
.topo-dir{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}

/* a acao que da dinheiro: pilula vermelha cheia */
.topo-assinar{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;
  background:linear-gradient(135deg,#ff3b47 0%,#e5151f 55%,#af0010 100%);
  color:#fff;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:800;text-decoration:none;
  white-space:nowrap;box-shadow:0 6px 20px rgba(229,21,31,.34);
  transition:transform .18s,box-shadow .18s,filter .18s}
.topo-assinar:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 10px 28px rgba(229,21,31,.5)}
.topo-assinar svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6}

/* botao redondo (busca no celular) */
.topo-ico{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--tx2,#a0a0b8);
  cursor:pointer;transition:background .15s,color .15s;flex-shrink:0;text-decoration:none}
.topo-ico:hover{background:rgba(255,255,255,.14);color:#fff}
.topo-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}

/* ---- a pessoa, com o menuzinho ---- */
.topo-eu{position:relative;flex-shrink:0}
.topo-eu-btn{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:var(--tx,#fff);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s;max-width:210px}
.topo-eu-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.topo-eu.aberto .topo-eu-btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
.topo-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#ff3b47 0%,#e5151f 55%,#af0010 100%);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12.5px}
.topo-eu-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo-eu-seta{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;flex-shrink:0;
  opacity:.6;transition:transform .2s}
.topo-eu.aberto .topo-eu-seta{transform:rotate(180deg)}
.topo-eu-menu{display:none;position:absolute;top:calc(100% + 12px);right:0;min-width:214px;
  background:rgba(17,17,24,.97);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:7px;
  box-shadow:0 22px 50px rgba(0,0,0,.6);z-index:300}
.topo-eu.aberto .topo-eu-menu{display:block;animation:topoCai .18s ease both}
.topo-eu-menu a,.topo-eu-menu button{display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border-radius:9px;border:none;background:none;text-align:left;
  color:var(--tx2,#a0a0b8);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
  text-decoration:none;transition:background .15s,color .15s}
.topo-eu-menu a:hover,.topo-eu-menu button:hover{background:rgba(255,255,255,.07);color:#fff}
.topo-eu-menu svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.topo-eu-menu .sai{color:#ff6b73}
.topo-eu-menu .sai:hover{background:rgba(229,21,31,.14);color:#ff8a90}
.topo-eu-linha{height:1px;background:rgba(255,255,255,.08);margin:5px 8px}
.topo-eu-cabeca{padding:9px 12px 4px;font-size:11px;color:var(--tx3,#606075);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- entrar (quem nao tem conta) ---- */
.topo-entrar{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;
  font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:background .15s,border-color .15s}
.topo-entrar:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
.topo-entrar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* o espaco que o topo fixo ocupa */
.topo-espaco{height:var(--topo-h)}

@media(max-width:768px){
  :root{--topo-h:var(--topo-h-cel)}
  .topo{height:var(--topo-h-cel)}
  .topo-espaco{height:var(--topo-h-cel)}
  .topo-inner{padding:0 14px;gap:10px}
  .topo-logo img{width:23px;height:23px}
  .topo-logo b{font-size:16.5px}
  .topo-dir{gap:8px}
  /* no celular o texto sai e ficam so os icones: nao cabe tudo em 390px */
  .topo-cat-label{display:none}
  .topo-cat-icone{display:block;width:17px;height:17px}
  .topo-cat-btn{padding:9px}
  .topo-cat-btn svg:last-child{display:none}
  /* O menu era ancorado no botao de categorias, que no celular fica colado
     na borda esquerda: com right:-60px ele comecava em x=-75px numa tela de
     390 e um terco dele nascia fora da tela. Agora ele se ancora na TELA
     (position:fixed), entao cabe em qualquer largura. O topo ja e fixed,
     entao nada corta ele. */
  .topo-cat-menu{position:fixed;left:12px;right:12px;top:calc(var(--topo-h-cel) + 8px);
    min-width:0;width:auto;max-height:calc(100vh - var(--topo-h-cel) - 24px);overflow-y:auto}
  .topo-assinar{padding:8px 13px;font-size:12.5px}
  .topo-assinar svg{display:none}
  .topo-eu-btn{padding:4px;gap:0;max-width:none}
  .topo-eu-nome,.topo-eu-seta{display:none}
  .topo-ico{width:34px;height:34px}
  .topo-ico svg{width:16px;height:16px}
  .topo-entrar{padding:8px 14px;font-size:12.5px}
}

/* O nome da marca sumia em qualquer tela de ate 400px -- ou seja, na maioria
   dos telefones, inclusive o do Matheus (390px). Medido com o nome ligado numa
   tela de 390: os elementos do topo somam 347px de 362 disponiveis. Cabe.
   Um ponto a menos na letra compra mais folga. So sai mesmo abaixo de 360px. */
@media(max-width:768px){
  .topo-logo b{font-size:15.5px;letter-spacing:-.05em}
}
@media(max-width:359px){
  .topo-logo b{display:none}
  .topo-inner{gap:8px}
}

@media(prefers-reduced-motion:reduce){
  .topo,.topo::before,.topo-assinar,.topo-eu-seta,.topo-cat-btn svg{transition:none}
  .topo-cat.aberto .topo-cat-menu,.topo-eu.aberto .topo-eu-menu{animation:none}
}

/* ══════════════════════════════════════════════════════════════════
   BUSCA E BARRA DE BAIXO
   ══════════════════════════════════════════════════════════════════

   A busca NAO abre uma tabua por cima da pagina. Ela cresce de dentro da
   propria lupa, ali no topo, e vira um campo fininho e translucido -- o
   conteudo continua aparecendo por tras dele.

   Foi feita assim depois da primeira tentativa, que era um painel preto
   ocupando 100px de altura: ficava pesado e escondia justamente os
   resultados que a pessoa estava tentando ver enquanto digitava.

   No celular quem manda abrir e a barra de baixo, mas o campo continua em
   cima -- de proposito. Campo embaixo fica atras do teclado na hora que ele
   sobe, que e exatamente quando a pessoa precisa enxergar o que digitou.
*/

.topo-busca{display:flex;align-items:center;flex-shrink:0;
  height:44px;width:44px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:width .26s cubic-bezier(.32,.72,0,1),background .2s,border-color .2s}
.topo-busca:hover{background:rgba(255,255,255,.1)}
.topo-busca.aberta{width:min(330px,38vw);background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.2)}
.topo-busca.aberta:focus-within{border-color:rgba(229,21,31,.5);box-shadow:0 0 0 3px rgba(229,21,31,.1)}

.topo-busca-btn{width:42px;height:42px;flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;background:none;border:none;padding:0;cursor:pointer;
  color:var(--tx2,#a0a0b8);transition:color .15s}
.topo-busca-btn:hover{color:#fff}
.topo-busca-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}

/* O campo so existe pra valer quando a caixa abre. Enquanto fechada ele fica
   com largura zero, senao empurraria a caixa e a animacao nao teria pra onde ir. */
/* 16px nao e so pra ler melhor: abaixo disso o iPhone DA ZOOM na pagina
   sozinho quando o campo recebe o cursor, e a pessoa fica com o site todo
   ampliado sem ter pedido. */
.topo-busca input{flex:1;min-width:0;width:0;background:none;border:none;outline:none;
  color:var(--tx,#fff);font-family:'Inter',sans-serif;font-size:16px;padding:0}
.topo-busca input::placeholder{color:var(--tx3,#606075)}
.topo-busca.aberta input{width:auto;padding-right:6px}

.topo-busca-x{display:none;width:36px;height:42px;flex-shrink:0;background:none;border:none;
  padding:0;cursor:pointer;color:var(--tx3,#606075);line-height:0}
.topo-busca-x:hover{color:#fff}
.topo-busca.com-texto .topo-busca-x{display:inline-flex;align-items:center;justify-content:center}
.topo-busca-x svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ── A barra flutuante de baixo, so no celular ──
   Ela flutua (nao encosta nas bordas) de proposito: encostada, o dedo
   esbarra nela ao rolar e o canto arredondado do celular come o canto dela. */
.barra-baixo{display:none}
@media(max-width:768px){
  /* Estreita e centralizada, nao de ponta a ponta. Comparando lado a lado com
     o app que ele usou de referencia, a barra de la tem o dobro do respiro em
     volta -- e e isso que faz ela parecer "arrumadinha" em vez de uma regua
     grudada na beirada. O teto de 400px e pra ela nao esticar num celular
     grande e voltar a parecer regua. */
  .barra-baixo{display:flex;position:fixed;left:50%;transform:translateX(-50%);
    width:calc(100% - 44px);max-width:400px;bottom:30px;z-index:210;
    background:rgba(14,14,14,.72);-webkit-backdrop-filter:blur(26px) saturate(170%);
    backdrop-filter:blur(26px) saturate(170%);
    border:1px solid rgba(255,255,255,.09);border-radius:22px;
    padding:7px 5px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  /* Icone e letra maiores de proposito: boa parte de quem assiste aqui tem
     mais idade, e 9px de legenda com icone de 20px vira borrao. Isto poe cada
     aba em ~58px de altura, bem acima dos 44px que e o minimo pro dedo. */
  .bb-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;border-radius:16px;cursor:pointer;
    color:var(--tx3,#606075);font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
    padding:9px 2px 8px;transition:color .15s,background .15s}
  .bb-item svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
  .bb-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .bb-item:active{background:rgba(255,255,255,.07)}
  .bb-item.ativo{color:#fff}
  .bb-item.ativo svg{stroke:var(--red,#e5151f)}

  /* Buscando no celular, o campo toma a barra de cima inteira: numa tela
     estreita nao cabe logo + categorias + campo, e o campo e o que importa
     naquele momento. */
  /* No celular a lupa SAI do topo: quem busca ali embaixo e a barra. Ter o
     mesmo botao em dois lugares na mesma tela so ocupa espaco. A caixa
     continua existindo (o campo mora nela), mas so aparece quando abre. */
  .topo-busca{display:none;position:static}
  .topo.buscando .topo-busca{display:flex}
  .topo-busca.aberta{width:100%}
  .topo.buscando .topo-logo,
  .topo.buscando .topo-cat,
  .topo.buscando .topo-dir{display:none}
  .topo.buscando .topo-busca{flex:1}
  /* Com o campo tomando a barra inteira, some tudo que era caminho de volta.
     O X fica visivel mesmo com o campo vazio pra sempre existir uma saida
     obvia -- a lupa, ali do lado, le como "buscar" e nao como "fechar". */
  .topo.buscando .topo-busca-x{display:inline-flex;align-items:center;justify-content:center}

  body.tem-barra-baixo{padding-bottom:112px}
  /* Os dois botoes flutuantes sobem pra nao ficar por baixo da barra. O da
     engrenagem (atalho do admin) nasce em bottom:28px e caia bem em cima do
     "Inicio" -- o !important e porque ele traz o estilo escrito na propria
     tag. */
  body.tem-barra-baixo #atv-btn{bottom:116px!important}
  body.tem-barra-baixo #gear-float{bottom:116px!important}
  /* As janelinhas que abrem desses botoes sobem junto, senao nascem por tras
     da barra. */
  body.tem-barra-baixo #atv-painel,
  body.tem-barra-baixo #dp-dica,
  body.tem-barra-baixo #av-ren{bottom:186px!important}
}
@media(prefers-reduced-motion:reduce){
  .topo-busca{transition:none}
}