/* Versão web: só no build web (tools/build-web.sh). */
html.web, html.web body { overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
html.web [data-f] { cursor: pointer; }
html.web:not(.touch) [data-f]:hover:not(.focused) { box-shadow: 0 0 0 3px rgba(255,255,255,.35) !important; }
/* Categorias (Filmes, Séries e Ao vivo): a coluna corta o que passa da borda, então a marca do mouse fica por dentro
   da categoria (Meza 08/10: o contorno em volta de "Cinema" aparecia cortado do lado esquerdo). */
html.web:not(.touch) .lv-groups .cat:hover:not(.focused) { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35) !important; }
html.web .lv-back { cursor: pointer; }
#web-back { position: fixed; left: 14px; bottom: 14px; z-index: 9999; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(20,20,23,.72); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.45); opacity: .75; }
#web-back:hover { opacity: 1; background: #FFB547; }
#web-rotate { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; background: #0b0b0d; color: #fff; align-items: center; justify-content: center; text-align: center; font: 600 20px Manrope, sans-serif; }
#web-rotate svg { margin-bottom: 12px; }
@media (orientation: portrait) and (max-width: 900px) { html.touch #web-rotate { display: flex; } }

/* Modo leve: TV com navegador antigo (Media Station X na Samsung/LG). Ligado no <head> do index.html da web (classe "lite"). */
html.lite *, html.lite *::before, html.lite *::after { -webkit-transition: none !important; transition: none !important; }
html.lite .hero-bg.blur, html.lite .detail-bg.blur, html.lite .vod-bg.blur { display: none; }
html.lite #web-back, html.lite #web-rotate { display: none !important; }
html.lite [data-f]:hover:not(.focused) { box-shadow: none !important; }

/* Ao vivo: ícones da coluna recolhida clicáveis com o mouse (web.js abre as categorias). */
html.web #lv-rail .rail-btn { cursor: pointer; }
html.web:not(.touch) #lv-rail .rail-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Celular no navegador, tela cheia: imagem inteira por padrão (Meza 2026-10-08: o "preencher" da 0.6.79 cortava
   demais em celular comprido, ~20% em cima e embaixo). O vídeo continua ocupando a tela toda, até o recorte da câmera
   (viewport-fit=cover). html.m-fill (opção "Preencher", junto com o app Android) volta a cortar para encher a tela.
   Mais específico que a regra de css/mobile.css, que carrega depois. */
html.web.mobile:not(.m-fill) body.media-full #media video { object-fit: contain; }

/* PC com mouse (0.7.3, teste; classe "pc" do js/web.js): as listas rolam com a rodinha, como num site, sem barra de
   rolagem aparecendo. O cursor do controle continua igual; as setas seguem rolando a lista como na TV. */
html.web.pc [data-scroll-y] { overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; scrollbar-width: none; }
html.web.pc [data-scroll-x] { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; } /* sem "contain": a rodinha em cima de uma fileira rola a página */
html.web.pc [data-scroll-y]::-webkit-scrollbar, html.web.pc [data-scroll-x]::-webkit-scrollbar { display: none; }

/* Player no PC: mouse parado 3 s some a setinha. */
html.web.pc.web-idle, html.web.pc.web-idle * { cursor: none !important; }

/* Volume no player do PC (no alto à direita, aparece junto com a barra do player ou ao mudar o volume). */
#web-vol { position: absolute; top: 72px; right: 72px; z-index: 5; height: 84px; padding: 0 30px 0 22px; border-radius: 42px; background: rgba(20,20,23,.72);
  display: flex; align-items: center; gap: 16px; color: #fff; font: 600 24px Manrope, sans-serif; opacity: 0; pointer-events: none; transition: opacity .25s; }
#player .osd.show ~ #web-vol, #web-vol.on, #web-vol:hover { opacity: 1; pointer-events: auto; }
#web-vol .wv-btn { width: 56px; height: 56px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#web-vol .wv-btn:hover { background: rgba(255,255,255,.14); }
#web-vol .wv-n { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
#web-vol input { -webkit-appearance: none; appearance: none; width: 220px; height: 8px; border-radius: 4px; cursor: pointer; outline: none;
  background: linear-gradient(to right, #FFB547 var(--p, 100%), rgba(255,255,255,.28) var(--p, 100%)); }
#web-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; }
#web-vol input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; }

/* Telas em tela cheia no PC: a dica "Esc menu" vira o botão "Menu" (js/web.js abre a barra de cima). */
html.web.pc .lv-fs-top .fs-menu.pc-btn { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 16px; margin-right: 30px; border-radius: 24px;
  background: rgba(255,255,255,.08); color: #F5F5F7; font-size: 21px; font-weight: 600; cursor: pointer; transition: background .15s; }
html.web.pc .lv-fs-top .fs-menu.pc-btn:hover { background: #FFB547; }
html.web.pc .lv-fs-top .fs-menu.pc-btn b { margin: 0 0 0 4px; padding: 2px 8px; font-size: 15px; background: rgba(255,255,255,.16); }