/* Lymos TV · sensação de app nativo no celular: barra de abas embaixo, áreas seguras (notch), toque sem efeitos de mouse,
   rolagem com encaixe e player com gestos. Carregado por último. */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none;touch-action:manipulation}
.tab .ic{display:none}
.p-flash{position:absolute;top:50%;z-index:6;padding:.9rem 1.3rem;border-radius:999px;background:rgba(0,0,0,.6);font:700 1.1rem var(--display);opacity:0;pointer-events:none;transform:translateY(-50%) scale(.85);transition:opacity .15s,transform .15s}
.p-flash.l{left:12%}.p-flash.r{right:12%}
.p-flash.on{opacity:1;transform:translateY(-50%) scale(1)}
.p-top{padding-top:calc(1.2rem + env(safe-area-inset-top,0px));padding-left:max(clamp(1rem,4vw,3.5rem),env(safe-area-inset-left,0px));padding-right:max(clamp(1rem,4vw,3.5rem),env(safe-area-inset-right,0px))}
.p-bottom{padding-bottom:calc(1.4rem + env(safe-area-inset-bottom,0px));padding-left:max(clamp(1rem,4vw,3.5rem),env(safe-area-inset-left,0px));padding-right:max(clamp(1rem,4vw,3.5rem),env(safe-area-inset-right,0px))}
.p-osd{left:max(clamp(1rem,4vw,3.5rem),env(safe-area-inset-left,0px))}
.gate{padding:calc(1.5rem + env(safe-area-inset-top,0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
.d-back{top:calc(1.2rem + env(safe-area-inset-top,0px))}
.hint-ios{color:var(--muted);font-size:.82rem;line-height:1.35}

/* toque: sem realce, sem seleção de texto nos botões, sem “hover” grudado */
@media (hover:none) and (pointer:coarse){
  *{-webkit-tap-highlight-color:transparent}
  .card,.tab,.btn,.round,.crow,.ep,.chip,.season,.cat,.pbtn,.avatar{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  img{-webkit-user-drag:none;user-select:none}
  .card:hover{transform:none}
  .card:hover .art{box-shadow:none;border-color:rgba(233,240,235,.2)}
  .card:active{transform:scale(.96);transition-duration:.08s}
  .btn:active,.round:active,.crow:active,.ep:active{transform:scale(.97)}
  input,select,textarea{font-size:16px}   /* o iPhone não dá zoom ao tocar no campo */
  #pVol{display:none}                       /* volume é pelos botões do aparelho */
  .pbtn{width:3.4rem;height:3.4rem}
  .pbtn.big{width:4.2rem;height:4.2rem}
  .seek{height:.65rem}
  .seek input{inset:-1rem 0;height:2.7rem}
  .row{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .row .card{scroll-snap-align:start}
}

@media (max-width:820px){
  /* topo enxuto: marca à esquerda, busca e conta à direita */
  .topbar{flex-wrap:nowrap;gap:.6rem;padding:calc(.6rem + env(safe-area-inset-top,0px)) var(--gutter) 1.2rem;background:linear-gradient(rgba(8,11,10,.96) 55%,transparent)}
  .brand b{display:inline}
  .round,.avatar{width:2.6rem;height:2.6rem}

  /* barra de abas fixa embaixo, com ícones */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;order:0;width:auto;margin:0;gap:0;justify-content:space-around;overflow:visible;
    padding:.35rem .3rem calc(.35rem + env(safe-area-inset-bottom,0px));background:rgba(8,11,10,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line-strong)}
  .tab{flex:1;display:grid;justify-items:center;gap:.15rem;min-width:0;padding:.4rem .15rem;border-radius:12px;background:none;color:var(--muted);font-size:.66rem;font-weight:600}
  .tab .ic{display:block;width:1.5rem;height:1.5rem}
  .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab:hover{background:none;color:var(--muted)}
  .tab.on{background:none;color:var(--primary)}
  .tab.on .ic{fill:rgb(var(--primary-rgb)/.2)}
  .tab:focus-visible{outline-offset:-3px;border-radius:12px}

  #view{padding-top:calc(4.2rem + env(safe-area-inset-top,0px))}
  #app{padding-bottom:calc(5.4rem + env(safe-area-inset-bottom,0px))}
  .hero{margin-top:calc(-4.2rem - env(safe-area-inset-top,0px));height:min(66vh,30rem)}
  .slide-body{bottom:2.2rem}
  .menu{top:calc(3.6rem + env(safe-area-inset-top,0px))}
  .toast{bottom:calc(5.8rem + env(safe-area-inset-bottom,0px))}
  .page-head{padding-top:.4rem}
  .detail{padding-bottom:env(safe-area-inset-bottom,0px)}
  .d-body{padding-top:calc(5rem + env(safe-area-inset-top,0px))}
  .grid{gap:1.2rem .8rem;grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr))}
  .grid:has(.tile){grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
  .p-title h3{font-size:1.05rem}
}

/* celular deitado: controles do player mais compactos para não cobrir o vídeo */
@media (max-height:480px){
  .p-top{padding-bottom:1.2rem}
  .p-bottom{gap:.4rem;padding-top:2rem}
  .p-epg{display:none}
  .pbtn{width:2.8rem;height:2.8rem}
  .pbtn.big{width:3.4rem;height:3.4rem}
  .p-osd{top:3.4rem}
}