* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ---------- CANVAS DE TV ----------
A UI é desenhada numa largura fixa de 1280px e escalada por transform até
encher a largura da tela. A ALTURA do canvas é elástica: app.js a calcula
como altura_real / escala, então o canvas cobre a tela inteira em qualquer
proporção, sem faixa preta e sem distorcer (a escala é a mesma nos dois
eixos — só o espaço vertical disponível muda).
Em 16:9 o canvas dá exatamente 1280x720, que é a medida em que todo este
arquivo foi desenhado. Num painel mais alto sobra espaço vertical; num mais
largo, o canvas fica mais baixo — por isso nada aqui pode assumir 720px
fixos de altura (ver #dynamic-hero-banner, que usa min()).
Consequência útil: dentro de #tv-canvas, position:fixed passa a se resolver
contra o canvas, não contra a janela — modais e player cobrem exatamente a
área da UI. Por isso 100vw/100vh viram var(--tv-w)/var(--tv-h). */
:root {
--tv-w: 1280px;
--tv-h: 720px; /* sobrescrito por app.js conforme a tela */
--tv-scale: 1;
/* ---------- Acabamento "Carvão Suave" ----------
Vidro fosco (translúcido + blur) mantido, mas sem matiz de cor
nenhuma — cinza puro em vez do lavanda/dourado de antes, a pedido
(mockup testado: 3 opções em cinza, essa foi a escolhida). Mantém
os nomes --vf- (ainda é "vidro fosco" estruturalmente, só mudou a
cor de dentro). */
--vf-void: #141414; /* fundo mais escuro */
--vf-void-2: #232323; /* meio do gradiente de fundo */
--vf-panel: rgba(255, 255, 255, .05); /* painel/coluna — translúcido, some sem o blur */
--vf-item: rgba(255, 255, 255, .04); /* item de lista em repouso */
--vf-item-hover: rgba(255, 255, 255, .12); /* item em foco/hover */
--vf-item-active: rgba(255, 255, 255, .18); /* item ativo+foco */
--vf-accent: #e8e8e8; /* cinza bem claro no lugar do lavanda */
--vf-accent-soft: #ffffff; /* branco, parceiro de gradiente */
--vf-accent-glow: rgba(255, 255, 255, .35);
--vf-text: #f2f2f2; /* branco neutro (sem tingimento) */
--vf-text-dim: #999999; /* cinza neutro pra texto secundário */
--vf-glass-border: rgba(255, 255, 255, .08);
--vf-blur: 16px;
/* Item ATIVO (categoria/canal que está tocando de verdade) - gradiente
laranja→roxo da referência, de propósito. É o único elemento com cor
saturada no app: o resto (fundo, painéis, foco comum) continua Carvão
Suave neutro - a cor aqui marca especificamente "isto está no ar
agora", não é uma repaleta geral. */
--vf-active-start: #ff5a3c;
--vf-active-end: #b13cff;
}
/* Fundo preto puro no PC: quando a janela nao e 16:9 sobra margem ao lado do
#tv-canvas, e o radial-gradient cinza do Android aparecia ali como duas
faixas claras (reportado). Preto igual ao canvas faz a sobra desaparecer. */
html, body { background: #000 !important; }
/* Barra de rolagem some em todo lugar: e uma interface de TV, a navegacao e
por foco/seta. A WebView do Android ja nao desenha; o Chromium do PC sim, e
ela aparecia por cima das grades de Filmes/Series (reportado). O conteudo
continua rolando normalmente. */
*::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }
html, body {
width: 100%;
height: 100%;
/* ajustarEscalaTv (app.js) calcula --tv-scale a partir de
document.documentElement.clientWidth, que ENCOLHE se aparecer barra
de rolagem (padrão do navegador). Qualquer elemento que passe 1px da
altura da tela (ex.: modal movido pra fora de #tv-canvas enquanto o
player toca, ver abrirExitModal) fazia a barra aparecer e encolhia
o app inteiro (#tv-canvas usa esse --tv-scale) — reportado como
"tudo ficou pequeno" ao abrir o popup de sair do player. Numa TV
nunca deve existir scroll na página em si (só dentro de containers
como .home-scroll-area), então bloquear aqui é sempre seguro. */
overflow: hidden;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* Fundo premium aplicado globalmente — login, sync, home, filmes, series, detalhe.
Fica no body para preencher também a faixa de letterbox.
Carvão Suave: só o radial cinza, sem os dois radiais coloridos que o
Vidro Fosco tinha (lavanda/dourado) - acabamento neutro de propósito. */
background: radial-gradient(circle at 70% 30%, var(--vf-void-2) 0%, var(--vf-void) 60%, #000000 100%);
background-attachment: fixed;
color: var(--vf-text);
overflow: hidden;
}
#tv-canvas {
position: absolute;
top: 0;
left: 0;
width: var(--tv-w);
height: var(--tv-h);
/* Preto próprio: sem isto, qualquer folga de sub-pixel entre as camadas
internas deixaria passar o #1a1a1a do radial-gradient do body, que
aparece como risco claro. */
background: #000;
transform: scale(var(--tv-scale));
/* Ancorado no canto: a escala cresce a partir de 0,0 e o canvas cobre a
tela toda. Centralizar exigiria sobra dos dois lados — ou seja, faixa. */
transform-origin: top left;
overflow: hidden;
}
/* ---------- LOADER: símbolo VICTUS pulsando ----------
Mesmo elemento em todas as telas (sync, player, grades, detalhe).
Tamanho via --loader-size. Nada gira nem desliza: só respira. */
/* Logomarca VICTUS como loader. Largura via --loader-size; altura acompanha
a proporção original (380x120), então a marca nunca distorce. */
.app-loader {
width: var(--loader-size, 200px);
height: auto;
display: block;
animation: loader-respira 1.8s ease-in-out infinite;
will-change: opacity, transform;
}
.app-loader img,
.app-loader svg {
width: 100%;
height: auto;
display: block;
image-rendering: -webkit-optimize-contrast;
/* Sem mix-blend-mode: screen. Ele existia para esconder fundo opaco da PNG,
mas o arquivo é palette com chunk tRNS — já tem transparência. O blend
somava luminância sobre o branco da marca e estourava em TV com contraste
agressivo (modo Vivid/Dinâmico). */
/* Sem drop-shadow: pesava a marca. Clean e leve, sem glow por trás. */
filter: none;
}
@keyframes loader-respira {
0%, 100% { opacity: 0.65; transform: scale(0.95); }
50% { opacity: 1; transform: scale(1); }
}
/* ---------- SPINNER (canais, filmes e séries) ----------
Anel simples compatível com Android TV antigos (sem mask ou conic-gradient) */
.spinner {
--spinner-size: 46px;
width: var(--spinner-size);
height: var(--spinner-size);
border-radius: 50%;
border: 4px solid rgba(243, 156, 18, 0.2);
border-top-color: var(--vf-accent);
animation: spinner-gira 0.9s linear infinite;
}
@keyframes spinner-gira {
to { transform: rotate(360deg); }
}
/* Área centralizada para o spinner ocupar o espaço do conteúdo */
.spinner-area {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
/* Centraliza o loader quando ele ocupa uma área (player, grades, detalhe) */
.loader-area {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
/* Ocultar barra de rolagem globalmente para a UI de TV */
::-webkit-scrollbar {
display: none;
}
* {
scrollbar-width: none; /* Firefox */
}
.app-container {
width: 100%;
height: 100%;
background-color: #000000;
}
.screen {
width: 100%;
height: 100%;
position: relative;
background-color: transparent;
}
/* =======================================================
LOGIN SCREEN
======================================================= */
/* Manteve-se o estilo do login (adicionado gradiente apenas no login) */
#login-screen {
background: radial-gradient(circle at 70% 30%, #1a1a1a 0%, #050505 60%, #000000 100%);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 60px 100px;
}
.login-left {
flex: 1;
max-width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
}
.logo {
height: 65px;
margin-bottom: 40px;
object-fit: contain;
align-self: flex-start;
}
.main-title {
font-size: 24px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 30px;
}
.info-list {
list-style: none;
margin-bottom: 40px;
}
.info-list li {
font-size: 15px;
color: #a0a0a0;
margin-bottom: 12px;
font-weight: 400;
}
.terms-text {
font-size: 12px;
color: #555555;
margin-bottom: 40px;
}
.demo-button {
align-self: flex-start;
background-color: transparent;
border: 1px solid #444;
color: #ffffff;
padding: 12px 35px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.demo-button:hover, .demo-button:focus {
background-color: #222;
border-color: #fff;
outline: none;
transform: scale(1.05);
}
.login-right {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
.login-box {
background-color: rgba(18, 18, 18, 0.85);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 35px 35px;
width: 380px;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
}
.login-box > * + * { margin-top: 16px; }
.input-group {
position: relative;
width: 100%;
}
.input-group .icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: #666;
font-size: 18px;
pointer-events: none;
}
.input-group input {
width: 100%;
padding: 16px 55px 16px 55px;
background-color: transparent;
border: 2px solid #333;
border-radius: 8px;
color: #fff;
font-size: 16px;
font-family: inherit;
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
}
.input-group input::placeholder {
color: #555;
}
/* O navegador pinta campo autopreenchido com fundo claro próprio, ignorando
background-color. A única forma de neutralizar é uma box-shadow interna
gigante na cor certa, com o texto forçado por -webkit-text-fill-color.
Sem isto os campos apareciam brancos no meio do login escuro. */
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #0d0d0d inset !important;
box-shadow: 0 0 0 1000px #0d0d0d inset !important;
-webkit-text-fill-color: #fff !important;
caret-color: #fff;
/* Atrasa a animação interna do autofill para ela nunca chegar a pintar */
transition: background-color 100000s ease-in-out 0s;
}
/* Enquanto o teclado virtual está aberto, o foco fica nas teclas e o campo
perderia qualquer destaque — a pessoa não saberia onde está digitando.
Esta classe mantém o campo em evidência durante a digitação. */
.input-group input.digitando {
border-color: #fff;
background-color: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.input-group input.digitando + .toggle-password-btn,
.input-group input.digitando ~ .icon {
color: #fff;
}
/* Rótulo "digitando" no canto do campo ativo */
.input-group.digitando::after {
content: 'DIGITANDO';
position: absolute;
top: -9px;
right: 16px;
background: #fff;
color: #000;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.2px;
padding: 2px 8px;
border-radius: 4px;
pointer-events: none;
}
.input-group input:focus {
outline: none;
border-color: #fff;
background-color: rgba(255, 255, 255, 0.05);
transform: scale(1.02);
}
.input-group .toggle-password-btn {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: #666;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
z-index: 10;
}
.input-group .toggle-password-btn:focus {
outline: none;
color: #fff;
transform: translateY(-50%) scale(1.15);
}
.input-group .toggle-password-btn:hover {
color: #fff;
}
.btn-entrar {
width: 100%;
padding: 16px;
/* 5px próprio + 16px do gap do .login-box (Chrome 79 do webOS não
aplica flex gap — ver .login-box > * + *) — precisa somar aqui na
mão pra não perder o gap: mesma especificidade, quem ganha é a regra
mais tardia no arquivo, então .btn-entrar sempre venceria sozinho. */
margin-top: 21px;
background-color: transparent;
text-align: center;
/* Estado normal discreto: borda branca cheia fazia o botão parecer
selecionado mesmo com o foco em outro lugar (ex.: no teclado),
competindo com o seletor e confundindo quem navega pelo controle. */
color: rgba(255, 255, 255, 0.72);
border: 2px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
}
/* Só ao receber o foco o botão assume o destaque total */
.btn-entrar:hover, .btn-entrar:focus {
background-color: #fff;
color: #000;
border-color: #fff;
outline: none;
transform: scale(1.02);
box-shadow: 0 5px 15px rgba(255,255,255,0.2);
}
#login-status {
color: #ff4d4d;
font-size: 14px;
text-align: center;
min-height: 20px;
}
.tv-controls-hint {
display: flex;
justify-content: center;
/* 5px próprio + 16px do gap do .login-box, mesmo motivo do .btn-entrar
acima. */
margin-top: 21px;
}
.tv-controls-hint > * + * { margin-left: 25px; }
.hint-item {
color: #666;
font-size: 12px;
display: flex;
align-items: center;
}
.hint-item > * + * { margin-left: 6px; }
.key {
background-color: #222;
padding: 3px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: bold;
color: #aaa;
}
.version {
position: absolute;
bottom: 30px;
right: 40px;
font-size: 12px;
color: #444;
}
/* =======================================================
HOME SCREEN (Estilo Nativo)
======================================================= */
/* NavBar Superior */
.top-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 110px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 64px 12px 24px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0) 100%);
z-index: 9999;
}
.nav-left {
display: flex;
align-items: center;
}
.nav-left > * + * { margin-left: 4px; }
.nav-logo {
height: 35px;
margin-right: 12px;
}
.nav-right {
display: flex;
align-items: center;
}
.nav-right > * + * { margin-left: 20px; }
.action-btn {
background: transparent;
border: none;
color: rgba(255,255,255,0.7);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 8px;
/* Sem background-color/border-color/box-shadow na transição (mesmo motivo
do .live-channel-item): fileira de ícones navegada rápido deixava dois
acesos ao mesmo tempo por um instante (rastro/seletor fantasma). */
transition: transform 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
outline: none;
}
.action-btn:hover {
color: #fff;
background: rgba(255,255,255,0.1);
}
.action-btn:focus {
background-color: #fff;
color: #000;
outline: none;
transform: scale(1.02);
box-shadow: 0 4px 10px rgba(255,255,255,0.25);
}
.action-btn .icon {
width: 16px;
height: 16px;
}
.divider {
width: 1px;
height: 24px;
background-color: rgba(255,255,255,0.2);
/* margin-left 5px próprio + 20px do gap do .nav-right (Chrome 79 do
webOS não aplica flex gap) — soma aqui, mesmo motivo do .btn-entrar.
margin-right fica só 5px: do outro lado quem soma os 20px é a regra
do próprio .nav-right em cima do botão de Logout (propriedade
diferente, margin-left dele — não colide, já soma sozinho). */
margin: 0 5px 0 25px;
}
/* Celular: área de toque real do ícone/aba é maior que a caixa visível
(pseudo-elemento invisível, sem mudar o desenho). Position:relative só
entra junto da classe pra não interferir em nada na TV. */
html.modo-toque .action-btn,
html.modo-toque .nav-item {
position: relative;
}
html.modo-toque .action-btn::after,
html.modo-toque .nav-item::after {
content: '';
position: absolute;
top: -14px; right: -14px; bottom: -14px; left: -14px;
}
/* Barra de navegação maior no celular — cliente relatou dificuldade de
acertar o toque nos ícones/abas (área de toque invisível acima já
ajudava, mas o alvo em si aparecia pequeno demais na tela real). */
html.modo-toque .top-nav {
height: 130px;
padding: 0 64px 8px 24px;
}
html.modo-toque .nav-logo {
height: 42px;
}
html.modo-toque .nav-item {
font-size: 17px;
padding: 12px 18px;
}
html.modo-toque .action-btn {
width: 44px;
height: 44px;
}
html.modo-toque .action-btn .icon {
width: 22px;
height: 22px;
}
html.modo-toque .nav-right > * + * { margin-left: 24px; }
.nav-item {
background: transparent;
border: 1px solid transparent;
color: rgba(255,255,255,0.7);
font-size: 14px;
font-weight: 700;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
/* Sem background-color/border-color/box-shadow na transição (mesmo motivo
do .live-channel-item): fileira de abas navegada rápido deixava duas
acesas ao mesmo tempo por um instante (rastro/seletor fantasma). */
transition: transform 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
outline: none;
}
/* Foco e seção atual são coisas diferentes e precisam de visuais diferentes.
Antes os dois eram o mesmo pill branco: ao navegar do "Início" para "TV ao
vivo" pelo controle, os dois itens ficavam brancos e o usuário perdia a
referência de onde estava o cursor.
Pill branco = FOCO, onde o controle está agora (só um por vez)
Traço laranja = seção ABERTA, para onde o app já navegou */
.nav-item:focus,
.nav-item:hover {
background-color: #fff;
color: #000;
border-color: #fff;
outline: none;
transform: scale(1.02);
box-shadow: 0 4px 10px rgba(255,255,255,0.22);
}
.nav-item.active {
background: transparent;
color: #ffffff;
border-color: transparent;
}
/* Item que está aberto E com foco: pill branco vence, e o traço inverte para
preto porque laranja sobre branco quase não aparece. */
.nav-item.active:focus,
.nav-item.active:hover {
background: #fff;
color: #000;
border-color: #fff;
}
.icon-btn {
background: transparent;
border: 2px solid transparent;
color: rgba(255,255,255,0.7);
padding: 7px;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
font-size: 16px;
}
.icon-btn:hover {
background: #fff;
color: #000;
}
/* Área de Scroll */
.home-scroll-area {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
padding-top: 0; /* Remove compensation so banner starts behind top-nav */
padding-bottom: 30px;
}
/* =========================================
HERO CAROUSEL - Modelo Netflix/Stremio
========================================= */
.hero-carousel-inner {
display: flex;
height: 100%;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-slide {
flex: 0 0 100%;
position: relative;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
}
.hero-slide-bg {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-size: cover;
background-position: center;
background-image: linear-gradient(135deg, #151522 0%, #07070a 100%);
filter: brightness(0.65);
transition: filter 0.3s;
}
.hero-slide-gradient {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 45%, transparent 75%);
z-index: 2;
}
/* Ruído em SVG, mesmo truque do banner de streaming — sem isso, painéis de
TV reais (8-bit, sem dithering na saída) mostram o degradê como faixas
sólidas visíveis ("quadriculado") em vez de uma transição suave. Opacity
subiu de 0.05 pra 0.12 — o valor anterior era fraco demais pra quebrar a
faixa em TVs reais (confirmado por foto de cliente), mesmo já existindo. */
.hero-slide-gradient::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
opacity: 0.12;
mix-blend-mode: overlay;
}
.hero-slide-content {
position: relative;
z-index: 3;
padding: 0 50px;
max-width: 560px;
}
.hero-slide-logo {
max-height: 90px;
max-width: 380px;
object-fit: contain;
margin-bottom: 12px;
filter: drop-shadow(0 3px 8px rgba(0,0,0,0.7));
}
.hero-slide-title {
font-size: 32px;
font-weight: 900;
letter-spacing: -0.5px;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
margin-bottom: 10px;
line-height: 1.1;
text-transform: uppercase;
}
.hero-slide-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.75);
}
.hero-slide-meta > * + * { margin-left: 10px; }
.hero-meta-chip {
display: flex;
align-items: center;
padding: 3px 8px;
border-radius: 100px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.15);
font-size: 11px;
color: #fff;
}
.hero-meta-chip > * + * { margin-left: 4px; }
.hero-meta-chip.rating {
background: rgba(245,197,24,0.2);
border-color: rgba(245,197,24,0.4);
color: #F5C518;
font-weight: 700;
}
.hero-slide-overview {
font-size: 13px;
color: rgba(255,255,255,0.75);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0;
}
/* Setas de Navegação */
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.2);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
outline: none;
}
.hero-arrow:hover, .hero-arrow:focus {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.6);
transform: translateY(-50%) scale(1.1);
}
.hero-arrow-prev { left: 12px; }
.hero-arrow-next { right: 12px; }
/* Dots */
.hero-dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
align-items: center;
}
.hero-dots > * + * { margin-left: 6px; }
.hero-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.35);
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s, filter 0.3s;
}
.hero-dot.active {
background: #fff;
width: 20px;
border-radius: 4px;
}
/* Keep old classes for backward compat */
.hero-banner, .hero-bg, .hero-gradient-bottom, .hero-gradient-left { display: none; }
.hero-content {
position: absolute;
bottom: 10%;
left: 80px;
z-index: 20;
max-width: 600px;
}
.hero-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}
.hero-logo {
max-width: 450px;
max-height: 180px;
margin-bottom: 15px;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.hero-subtitle {
font-size: 24px;
font-weight: 700;
margin: 0 0 15px 0;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
/* Fonte da verdade: criarBotaoIconePlayer/criarFundoFoco/
criarFundoBotaoPrimario no MainActivity.kt (Android). O comentário lá
é explícito: "Era um círculo branco translúcido SEMPRE visível, mesmo
sem foco... Agora só... quando este botão específico está de fato
focado" — ou seja, o Android trocou de círculo permanente pra círculo
só-no-foco, e o webOS tinha ficado preso na versão antiga (permanente),
nunca atualizado. Replica o estado atual do Android exatamente:
- Play/Pause: transparente + ícone branco sem foco; branco sólido +
ícone preto só quando focado (nunca os dois ao mesmo tempo).
- Voltar/Avançar: transparente sem foco; branco translúcido (0x40
no Android = 25%) só quando focado. Sem glow, sem escala — o
Android troca o drawable na hora, sem animação. */
#fs-btn-play {
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
transition: background-color 0.15s ease;
}
#fs-btn-play svg,
#fs-btn-play svg path {
fill: #ffffff;
transition: fill 0.15s ease;
}
#fs-btn-play:focus {
outline: none;
background-color: #ffffff;
}
#fs-btn-play:focus svg,
#fs-btn-play:focus svg path {
fill: #000000;
}
.fs-control-btn {
padding: 10px;
border-radius: 50%;
background-color: transparent;
transition: background-color 0.15s ease;
}
.fs-control-btn:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.25);
}
/* Barra de progresso do player: fina, preenchimento vermelho (cor da marca)
até o ponto atual — igual ao player nativo Android. A cor em si vem via
JS (atualizarCorProgresso em app.js), aqui só a forma/espessura. */
#fs-progress {
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.3);
outline: none;
}
#fs-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
#fs-progress::-moz-range-track {
height: 4px;
border-radius: 2px;
background: transparent;
}
#fs-progress::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #ffffff;
border: none;
cursor: pointer;
}
.hero-meta {
display: flex;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
font-weight: 600;
}
.hero-meta > * + * { margin-left: 10px; }
.imdb-badge {
background-color: #F5C518;
color: #000;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
font-weight: 900;
}
.imdb-rating {
color: #F5C518;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.dot {
color: #666;
}
.meta-text {
color: #ccc;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.uhd-badge {
border: 1px solid #666;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
}
.age-badge {
background-color: #333;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
}
.btn-watch:hover, .btn-watch:focus {
background-color: white;
color: black;
border-color: white;
}
.btn-watch .icon {
font-size: 14px;
}
/* Streaming Section */
/* Explore Button */
.explore-btn-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
}
.explore-btn-container:hover {
opacity: 1;
}
.explore-text {
font-size: 11px;
font-weight: 900;
letter-spacing: 2px;
}
.explore-arrow {
font-size: 12px;
margin-top: 5px;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
/* Content Rows (Posters) */
.content-section {
padding: 0 0 20px 0;
}
.row-title {
font-size: 16px;
font-weight: 700;
padding-left: 64px;
}
.row-subtitle {
font-size: 12px;
color: #888;
padding-left: 64px;
margin-bottom: 12px;
margin-top: 2px;
}
.content-row {
display: flex;
overflow-x: auto;
padding: 10px 64px;
scroll-behavior: smooth;
}
.content-row > * + * { margin-left: 8px; }
.content-row::-webkit-scrollbar {
display: none;
}
/* Poster Card */
.poster-card {
width: 135px;
height: 200px;
background-color: #1E1E21;
border-radius: 6px;
position: relative;
overflow: hidden;
cursor: pointer;
border: 2px solid rgba(255,255,255,0.1);
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
flex-shrink: 0;
}
.poster-card:hover, .poster-card:focus {
transform: scale(1.05) translateZ(0);
border-color: #ffffff;
z-index: 10;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.poster-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.poster-title-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35px;
background-color: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.poster-title {
font-size: 9px;
font-weight: 700;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =======================================================
VIRTUAL KEYBOARD (OSK)
======================================================= */
.vk-container {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #1a1a1a;
border-radius: 12px;
padding: 15px;
display: flex;
flex-direction: column;
box-shadow: 0 15px 30px rgba(0,0,0,0.8);
z-index: 1000;
contain: layout paint;
}
.vk-container > * + * { margin-top: 10px; }
.vk-row {
display: flex;
justify-content: center;
}
.vk-row > * + * { margin-left: 8px; }
.vk-key {
background-color: #1e1e1e;
color: #f0f0f0;
border: 2px solid transparent;
border-radius: 8px;
height: 50px;
min-width: 50px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* Sem background-color/box-shadow/border-color na transição e sem scale no
foco (mesmo ajuste já feito em .sk-key/.live-category-item): teclado com
~30 teclas navegado rápido "piscava" duas teclas acesas ao mesmo tempo —
a tecla que perdia foco ainda tinha a borda branca com fade rodando
quando a próxima já acendia (rastro/seletor fantasma reportado). Cor do
texto continua suave, o resto troca na hora. */
transition: color 0.2s ease;
font-family: inherit;
contain: layout paint;
}
.vk-key:focus {
background-color: #ffffff;
color: #000000;
border-color: #ffffff;
outline: none;
z-index: 10;
}
/* Hover só em dispositivos com mouse real (evita destaque falso do cursor parado na TV/emulador) */
@media (hover: hover) and (pointer: fine) {
.vk-key:hover {
background-color: #2b2b2b;
color: #ffffff;
}
}
.vk-space {
width: 200px;
font-size: 16px;
}
.vk-action {
width: 65px;
font-size: 16px;
background-color: #333;
}
.vk-clear {
background-color: #f44336;
width: 90px;
font-size: 16px;
}
.vk-clear:hover, .vk-clear:focus {
background-color: #d32f2f;
border-color: #fff;
}
.vk-submit {
background-color: #4caf50;
width: 90px;
font-size: 16px;
}
.vk-submit:hover, .vk-submit:focus {
background-color: #388e3c;
border-color: #fff;
}
/* =======================================================
SYNC SCREEN
======================================================= */
#sync-screen {
/* absolute, não fixed — dentro de #tv-canvas (que tem transform), o
Chromium do webOS TV não resolve fixed contra o canvas de forma
confiável (mesma causa do vazamento na tela de Configurações);
absolute contra o ancestral já position:absolute é universal. */
position: absolute;
top: 0;
left: 0;
width: var(--tv-w);
height: var(--tv-h);
/* mesmo gradiente do body — não pode ser transparent pois fica em position:fixed sobre a home */
background: radial-gradient(circle at 70% 30%, #1a1a1a 0%, #050505 60%, #000000 100%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 99999;
}
.sync-content {
display: flex;
flex-direction: column;
align-items: center;
}
.sync-content > * + * { margin-top: 30px; }
#sync-status-text {
font-size: 15px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 2.5px;
/* Maiúsculas via CSS: as mensagens vêm tanto do JS quanto do Kotlin nativo,
assim o padrão vale para as duas origens sem duplicar a regra */
text-transform: uppercase;
}
.sync-progress-bar {
width: 340px;
height: 5px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100px;
overflow: hidden;
}
.sync-progress-fill {
height: 100%;
width: 0%;
border-radius: 100px;
background: linear-gradient(90deg, var(--vf-accent), var(--vf-accent-soft));
box-shadow: 0 0 12px rgba(243, 156, 18, 0.6);
transition: width 0.5s ease;
position: relative;
overflow: hidden;
}
/* Brilho que percorre a parte já preenchida da barra */
.sync-progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
animation: barra-brilho 1.4s ease-in-out infinite;
}
@keyframes barra-brilho {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
/* =======================================================
LIVE TV SCREEN (3-Column Layout)
======================================================= */
.live-tv-layout {
display: flex;
width: 100%;
height: var(--tv-h);
padding-top: 20px; /* Reduzido para ocupar o espaço do cabeçalho que agora é ocultado */
/* Vidro fosco precisa de algo atrás do blur pra desfocar - o gradient
do body não aparece aqui porque #tv-canvas (compartilhado por todo
o app) tem fundo preto sólido de propósito, por cima do body
inteiro. Repete um gradient cinza direto aqui em vez de mexer no
canvas compartilhado (mais arriscado, ver comentário em #tv-canvas
sobre risco de sub-pixel). Carvão Suave: cinza neutro, sem os
radiais coloridos que o Vidro Fosco tinha. */
background: linear-gradient(160deg, var(--vf-void-2), var(--vf-void));
/* Margens reduzidas (eram 20px/15px) - painéis ganham mais espaço,
menos moldura em volta. */
padding-left: 14px;
padding-right: 14px;
padding-bottom: 14px;
box-sizing: border-box;
}
.live-tv-layout > * + * { margin-left: 10px; }
.live-col-categories {
flex: 0 0 25%;
/* Sem painel/blur agrupando a coluna inteira (era vidro fosco com
fundo+borda+blur ao redor de tudo) - a pedido, cada item fica solto
no fundo escuro, só o card de cada categoria/canal marca a forma
(ver .live-category-item), sem "caixa dentro de caixa". */
overflow-y: auto;
box-sizing: border-box;
/* 8px lateral (era 0) — item virou 100% de largura fixa (ver
.live-category-item), então a folga pro seletor/borda branca não
depender mais de width:96%+margin:auto: aquele % fracionava o pixel
(largura da coluna nem sempre é múltiplo exato), e overflow-y:auto
aqui vira overflow-x:auto também pela spec (CSS Overflow §3 - eixo
"visible" some quando o outro não é visible), cortando o pixel da
borda que sobrava da conta. Com padding fixo no pai não sobra resto. */
padding: 16px 8px;
scroll-padding-top: 16px;
scroll-padding-bottom: 16px;
}
/* scroll-snap-type: y mandatory (removido) forçava TODO reposicionamento
de foco — inclusive scrollIntoView({block:'nearest'}) do D-pad — a
encostar o item no topo do container (snap-align:start), mesmo descendo
a lista: o item nunca ficava perto do fim visível, sempre pulava de
volta pro topo. Reportado: "desço e ele sobe sozinho". Sem scroll-snap,
'nearest' volta a rolar só o mínimo necessário, como já fazia a
intenção original da chamada. */
/* 32% (era 30%) — nome de canal tipo "DOIS HOMENS E MEIO - PART 01"
(comum em lista de provedor, canal-linear nomeado como série) estava
cortando em .channel-name numa coluna mais estreita. Categorias (coluna
ao lado) ficou de fora — estreitá-la também quebrava "CANAIS | EVENTOS
DO DIA" em 2 linhas, então o ganho vem só daqui + do padding/gap/width
menores de .live-channel-item logo abaixo. .live-col-preview (flex:1)
absorve a diferença sozinho, sem precisar mexer nele. */
.live-col-channels {
flex: 0 0 32%;
/* Mesmo motivo de .live-col-categories acima: sem painel/blur ao redor
da coluna inteira, só os cards individuais de cada canal. */
overflow-y: auto;
box-sizing: border-box;
padding: 16px 10px;
scroll-padding-top: 16px;
scroll-padding-bottom: 16px;
}
/* scroll-snap-type removido — ver comentário em .live-col-categories acima,
mesmo motivo, mesmo bug (mais visível aqui: lista pode ter 1000+ canais). */
/* Uma categoria pode trazer mais de mil canais. Sem isto, todos os itens
(com seus logos) eram desenhados de uma vez a cada troca de categoria. */
.live-col-channels .live-channel-item {
content-visibility: auto;
contain-intrinsic-size: auto 52px;
}
.live-col-preview {
flex: 1; /* roughly 45% */
display: flex;
flex-direction: column;
}
.live-col-preview > * + * { margin-top: 10px; }
.live-player-container {
width: 100%;
padding-top: 56.25%; /* Fixed 16:9 aspect ratio */
background-color: #000;
border-radius: 8px;
position: relative;
overflow: hidden;
}
/* Tela cheia do mini-player: só muda o enquadramento, o vídeo continua o mesmo
(não recria o elemento, então não recarrega o stream nem perde a categoria) */
.live-player-container.fullscreen {
/* absolute, não fixed — ver comentário em #sync-screen. */
position: absolute;
top: 0;
left: 0;
width: var(--tv-w);
height: var(--tv-h);
padding-top: 0;
border-radius: 0;
z-index: 9999;
}
.live-player-container.fullscreen .premium-video-player {
object-fit: contain;
border-radius: 0;
}
/* ---------- OVERLAY DE INFORMAÇÃO DO CANAL ----------
Faixa no rodapé do player: logo, nome e o que está no ar.
Só opacity e transform entram na transição — as duas que a GPU compõe sem
repintar. Numa Smart TV, animar sombra ou filtro custa um repinte por quadro
e é o que faz a interface engasgar. */
#canal-info-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
display: flex;
align-items: center;
text-transform: uppercase;
/* Padding-top alto: o degradê sobe bem mais que a faixa de texto, dando o
esmaecimento longo e harmonioso pedido. */
padding: 130px 22px 18px;
/* Degradê de baixo para cima, longo e com muitas paradas em curva suave —
poucas paradas criam degraus visíveis em painel de TV. */
background: linear-gradient(to top,
rgba(0,0,0,0.94) 0%,
rgba(0,0,0,0.9) 10%,
rgba(0,0,0,0.84) 20%,
rgba(0,0,0,0.76) 30%,
rgba(0,0,0,0.66) 40%,
rgba(0,0,0,0.55) 50%,
rgba(0,0,0,0.44) 60%,
rgba(0,0,0,0.32) 70%,
rgba(0,0,0,0.21) 80%,
rgba(0,0,0,0.1) 90%,
transparent 100%);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.28s ease-out, transform 0.28s ease-out;
pointer-events: none;
}
#canal-info-overlay > * + * { margin-left: 14px; }
#canal-info-overlay.visivel {
opacity: 1;
transform: translateY(0);
}
#canal-info-overlay .ci-logo {
flex: 0 0 auto;
width: 46px;
height: 46px;
object-fit: contain;
border-radius: 6px;
background: rgba(255,255,255,0.06);
padding: 4px;
}
#canal-info-overlay .ci-textos {
flex: 1 1 auto;
min-width: 0;
}
#canal-info-overlay .ci-nome {
font-size: 17px;
font-weight: 600;
color: #fff;
letter-spacing: 0.3px;
}
#canal-info-overlay .ci-programa {
margin-top: 3px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.72);
}
#canal-info-overlay .ci-programa:empty {
display: none;
}
/* Em tela cheia a faixa cresce junto com o player */
.live-player-container.fullscreen #canal-info-overlay {
padding: 220px 48px 42px;
}
.live-player-container.fullscreen #canal-info-overlay > * + * { margin-left: 20px; }
.live-player-container.fullscreen #canal-info-overlay .ci-logo {
width: 68px;
height: 68px;
}
.live-player-container.fullscreen #canal-info-overlay .ci-nome {
font-size: 26px;
}
.live-player-container.fullscreen #canal-info-overlay .ci-programa {
font-size: 17px;
}
.live-epg-container {
flex: 1;
background-color: #1A1A1A;
border-radius: 8px;
padding: 15px;
overflow-y: auto;
}
.epg-title {
font-size: 16px;
margin-bottom: 15px;
color: #fff;
}
/* Items inside lists */
.live-channel-item {
/* Camada propria: evita repintar a lista inteira ao mover o foco */
transform: translateZ(0);
backface-visibility: hidden;
/* Bloco de contenção para a barra de pressão (::before). O transform acima
já criaria um, mas deixar explícito evita que uma mudança nele quebre
o posicionamento sem que se perceba. */
position: relative;
/* Largura 100% do conteúdo da coluna (era 96%+margin:auto, mesma
fração de pixel cortando a borda branca do seletor — ver
.live-col-categories). Folga lateral já vem do padding da coluna. */
padding: 11px 10px;
margin-bottom: 8px;
border-radius: 6px;
cursor: pointer;
/* Mesmo cinza neutro puro do .live-category-item - cartão visível pra
cada canal (a coluna em volta não tem mais painel/fundo próprio). */
background-color: #1e1e1e;
color: #aaa;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-transform: uppercase;
/* Só transform e cor entram na transição — background-color, box-shadow,
filter e opacity mudam na hora. O comentário já dizia isso, mas o
background-color tinha ficado na lista por engano: navegando rápido
(lista pode ter 1000+ canais) o fade não terminava a tempo entre um
foco e outro, sobrando dois canais acesos ao mesmo tempo (a "flicada"
reportada — igual ao .live-category-item). Duração menor: 0,12s dá
resposta mais imediata segurando a seta. */
transition: transform 0.12s ease-out, color 0.12s ease-out;
border: 1px solid transparent;
outline: none;
display: flex;
align-items: center;
/* era 12px — mesmo motivo do padding/width acima */
scroll-margin: 15px; /* Ensures scale(1.05) doesn't clip when scrollIntoView runs */
}
.live-channel-item > * + * { margin-left: 8px; }
.live-channel-item:hover, .live-channel-item:focus {
/* Sem scale nem box-shadow: a sombra desfocada precisava ser rasterizada
de novo a cada canal percorrido (o mesmo problema já corrigido no
.vod-item) — pesado com o vídeo decodificando ao fundo ao mesmo tempo.
Fundo + borda branca já marcam a seleção sem custo de repaint. */
background-color: var(--vf-item-hover);
color: #fff;
border-color: rgba(255,255,255,0.2);
outline: none;
}
.live-channel-item.active {
/* Sem gradiente (era laranja→roxo, reportado como feio) - cinza neutro
mais claro que o repouso, mesma família do resto do app. */
background-color: #3a3a3a;
color: #fff;
}
/* Estrela só nos canais já favoritados, encostada na direita.
Voltou a ser ::after: a versão sempre visível e clicável poluía a lista.
Favoritar é por pressão longa — que no navegador funciona igual, segurando
o botão do mouse. */
.live-channel-item.is-favorito::after {
content: '★';
margin-left: auto;
padding-left: 8px;
color: var(--vf-accent);
font-size: 13px;
line-height: 1;
flex: 0 0 auto;
}
/* O nome ocupa o resto da linha, para a estrela não ser empurrada. Uma
linha só (não quebra) — pedido explícito: nome de canal quebrando em 2
linhas bagunçava a altura da lista tanto quanto cortar. Em vez de
quebrar, a coluna ganhou espaço (ver .live-col-channels/.live-col-categories
e o padding/gap menor de .live-channel-item logo abaixo) pra nome tipo
"DOIS HOMENS E MEIO - PART 01" (canal-linear nomeado como série,
comum em lista de provedor) caber inteiro numa linha só. Ellipsis
continua de fallback pro raríssimo nome ainda maior que isso. */
.live-channel-item .channel-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* FAVORITOS é categoria sintética — o peso maior a separa das do provedor,
sem destoar da paleta da lista */
.live-category-item.categoria-favoritos {
color: #ffffff;
font-weight: 800;
letter-spacing: 0.5px;
}
/* Preenchimento enquanto o OK está sendo segurado. Ancorado no ::before para
não brigar com o ::after, que é a estrela.
Duração e atraso vêm do app.js (--dur-barra / --atraso-barra), para o fim da
animação coincidir com o disparo do favorito. Durante o atraso a largura
fica em 0, então um toque curto não chega a mostrar nada. */
.live-channel-item.segurando::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
border-radius: 6px;
background: rgba(243, 156, 18, 0.28);
animation: segurar-favorito var(--dur-barra, 1000ms) linear var(--atraso-barra, 300ms) forwards;
pointer-events: none;
z-index: 0;
}
@keyframes segurar-favorito {
to { width: 100%; }
}
/* Pulso na estrela ao favoritar, para o olho ir até ela */
.live-channel-item.favorito-pulso::after {
animation: estrela-pulso 520ms ease-out;
}
@keyframes estrela-pulso {
0% { transform: scale(0.4); opacity: 0; }
55% { transform: scale(1.5); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* Lista sem itens: precisa dizer o que fazer, não ficar em branco */
.lista-vazia {
padding: 28px 18px;
font-size: 13px;
font-weight: 600;
line-height: 1.6;
color: rgba(255, 255, 255, 0.4);
text-align: center;
text-transform: none;
white-space: pre-line; /* respeita o \n da mensagem */
}
/* ---------- CONFIGURAÇÕES ----------
Mesmo padrão visual da TV ao vivo: fundo #121212, coluna #1A1A1A, itens com
texto #aaa que acendem em branco no foco. A aba/opção ativa usa a barra
branca à esquerda, idêntica à categoria selecionada em TV ao vivo. Só o
acento pontual (ícone do título) fica laranja. */
.cfg-layout {
display: flex;
width: 100%;
height: 100%;
background-color: #121212;
box-sizing: border-box;
}
.cfg-menu {
flex: 0 0 300px;
background-color: #1A1A1A;
border-radius: 8px;
margin: 20px 0 20px 20px;
padding: 16px 0;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.cfg-titulo {
display: flex;
align-items: center;
padding: 4px 22px 18px;
font-size: 21px;
font-weight: 700;
color: #fff;
}
.cfg-titulo > * + * { margin-left: 12px; }
.cfg-titulo svg { flex: 0 0 auto; stroke: currentColor; }
/* Item de menu = .live-category-item */
.cfg-aba {
display: flex;
align-items: center;
width: 100%;
padding: 14px 24px;
background: transparent;
border: 1px solid transparent;
border-left: 4px solid transparent;
color: #aaa;
font-family: inherit;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
text-align: left;
cursor: pointer;
outline: none;
/* background-color sem transição — mesmo motivo do .live-category-item
(ver comentário lá): navegando rápido pelas abas de configuração, o
fade dava a mesma "flicada" de duas abas acesas ao mesmo tempo. */
transition: color 0.15s ease;
}
.cfg-aba > * + * { margin-left: 14px; }
.cfg-aba svg { flex: 0 0 auto; width: 20px; height: 20px; }
.cfg-aba.active {
background-color: var(--vf-item-hover);
color: #fff;
border-left: 4px solid #ffffff;
}
.cfg-aba.active svg { stroke: currentColor; }
.cfg-aba:focus,
.cfg-aba:hover {
background-color: #2b2b2b;
color: #fff;
}
.cfg-aba.active:focus,
.cfg-aba.active:hover {
background-color: var(--vf-item-active);
color: #fff;
}
.cfg-menu-rodape {
margin-top: auto;
padding-top: 12px;
display: flex;
flex-direction: column;
}
.cfg-conteudo {
flex: 1 1 auto;
padding: 30px 34px;
overflow-y: auto;
min-width: 0;
}
.cfg-painel { display: none; }
/* flex + gap: espaça o título e os cartões de forma uniforme. Painéis com um
cartão só (Player, Adulto...) ficam iguais a antes; painéis com mais de um
cartão deixam de vir colados um no outro. */
.cfg-painel.active { display: flex; flex-direction: column;}
.cfg-painel.active > * + * { margin-top: 20px; }
.cfg-painel-titulo {
display: flex;
align-items: center;
font-size: 22px;
font-weight: 700;
color: #fff;
}
/* Título é , sem span — "> * + *" não enxerga nó de
texto (mesmo caso do .section-icon), o espaço tem que vir do ícone. */
.cfg-painel-titulo svg { width: 26px; height: 26px; stroke: currentColor; flex: 0 0 auto; margin-right: 12px; }
/* Cartão = coluna da TV ao vivo (#1A1A1A) */
.cfg-cartao {
background-color: #1A1A1A;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 20px;
}
.cfg-cartao-titulo {
display: flex;
align-items: center;
margin-bottom: 16px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: #aaa;
}
/* Mesmo caso do .cfg-painel-titulo acima: texto solto, sem span. */
.cfg-cartao-titulo svg { width: 19px; height: 19px; flex: 0 0 auto; margin-right: 10px; }
.cfg-opcoes {
display: flex;
flex-wrap: wrap;
}
.cfg-opcoes > * + * { margin-left: 14px; }
/* Opção = item de canal: fundo escuro, acende no foco */
.cfg-opcao {
flex: 1 1 240px;
display: flex;
align-items: center;
padding: 16px 18px;
background-color: #121212;
border: 2px solid transparent;
border-radius: 6px;
color: #aaa;
font-family: inherit;
font-size: 16px;
font-weight: 600;
cursor: pointer;
outline: none;
/* background-color sem transição — mesma "flicada" do .live-category-item
navegando rápido (ver comentário lá). */
transition: color 0.15s ease, border-color 0.15s ease;
}
.cfg-opcao > * + * { margin-left: 12px; }
.cfg-opcao svg { width: 21px; height: 21px; flex: 0 0 auto; }
.cfg-opcao.selecionada {
border-color: #ffffff;
color: #fff;
}
/* Enquanto verifica atualização */
.cfg-opcao.cfg-opcao-ocupada {
opacity: 0.6;
pointer-events: none;
}
.cfg-opcao:focus,
.cfg-opcao:hover {
background-color: #2b2b2b;
color: #fff;
}
/* Interruptor */
.cfg-switch-linha {
display: flex;
align-items: center;
padding: 14px 18px;
background-color: #121212;
border: 2px solid transparent;
border-radius: 6px;
color: #fff;
font-family: inherit;
font-size: 16px;
font-weight: 600;
cursor: pointer;
outline: none;
/* background-color sem transição — mesma "flicada" do .live-category-item
navegando rápido (ver comentário lá). */
transition: border-color 0.15s ease;
}
.cfg-switch-linha > * + * { margin-left: 16px; }
.cfg-switch-linha:focus,
.cfg-switch-linha:hover {
background-color: #2b2b2b;
}
.cfg-switch {
position: relative;
flex: 0 0 auto;
width: 52px;
height: 28px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.14);
transition: background-color 0.18s ease-out;
}
.cfg-switch-bola {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #f2f2f2;
transition: transform 0.18s ease-out;
}
.cfg-switch-linha.ligado .cfg-switch { background: #1f7a4d; }
.cfg-switch-linha.ligado .cfg-switch-bola { transform: translateX(24px); background: #46c98a; }
/* Grade de informações */
.cfg-grade {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.cfg-info-item {
background-color: #1A1A1A;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 16px 18px;
min-width: 0;
}
.cfg-info-item.largo { grid-column: 1 / -1; }
.cfg-info-rotulo {
display: flex;
align-items: center;
margin-bottom: 6px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
color: #888;
}
.cfg-info-rotulo > * + * { margin-left: 8px; }
.cfg-info-valor {
font-size: 19px;
font-weight: 700;
color: #fff;
word-break: break-word;
}
.cfg-info-valor.ok { color: #46c98a; }
.cfg-info-vazio {
grid-column: 1 / -1;
padding: 22px;
text-align: center;
color: #888;
font-weight: 600;
}
.cfg-nota {
margin-top: 14px;
font-size: 13px;
line-height: 1.5;
color: #888;
}
/* Lista de categorias — aba Dados. Grade de 2 colunas (não empilhado):
canvas da TV tem altura fixa (ver comentário no topo do arquivo) e as 3
seções desta aba (armazenamento+ações, categorias) precisam caber numa
tela só, sem depender de rolagem pra ver os botões de limpar. */
.cfg-categorias-lista {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.cfg-categoria-linha {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background-color: #121212;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: #ddd;
min-width: 0;
}
.cfg-categoria-linha > * + * { margin-left: 10px; }
.cfg-categoria-linha span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cfg-categoria-badge {
flex: 0 0 auto;
padding: 3px 9px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.08);
color: #aaa;
font-size: 12px;
font-weight: 700;
}
.cfg-categoria-badge.tem-dado {
background: rgba(243, 156, 18, 0.16);
color: var(--vf-accent);
}
/* Botões de ação mais baixos que .cfg-opcao padrão (usado no Player, onde
cada opção é a única coisa no cartão) — aqui dividem espaço com o resto
da aba Dados. */
.cfg-opcoes-compacto {
margin-top: 16px;
}
.cfg-opcoes-compacto .cfg-opcao {
flex: 1 1 200px;
padding: 12px 16px;
font-size: 14px;
}
.cfg-opcoes-compacto .cfg-opcao svg {
width: 18px;
height: 18px;
}
/* Sozinho na fileira (painel Adulto), flex:1 do .cfg-opcao esticava até a
largura toda do card - sem outro botão do lado pra dividir o espaço. */
#cfg-btn-trocar-senha-adulto {
flex: 0 1 200px;
}
/* Card "o que mudou" — aparece na aba Atualização quando há versão nova */
/* Aviso curto de confirmação */
#aviso-rapido {
position: absolute;
right: 32px;
bottom: 28px;
z-index: 12000;
padding: 12px 20px;
border-radius: 8px;
background: rgba(20, 20, 20, 0.95);
border: 1px solid rgba(243, 156, 18, 0.35);
color: #fff;
font-size: 15px;
font-weight: 700;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.22s ease-out, transform 0.22s ease-out;
pointer-events: none;
}
#aviso-rapido.visivel {
opacity: 1;
transform: translateY(0);
}
/* Aviso do painel remoto (ver mostrarAvisoRemoto em app.js) — faixa fixa no
topo, só fecha com ação do usuário (ao contrário do #aviso-rapido, que some
sozinho). */
#aviso-remoto-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 13000;
display: flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
background: rgba(20, 20, 20, 0.97);
border-bottom: 1px solid rgba(243, 156, 18, 0.5);
}
#aviso-remoto-overlay > * + * { margin-left: 18px; }
.aviso-remoto-texto {
flex: 1;
text-align: center;
color: #fff;
font-size: 15px;
font-weight: 600;
}
.aviso-remoto-fechar {
flex-shrink: 0;
padding: 7px 22px;
border: none;
border-radius: 6px;
background: #F39C12;
color: #000;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.aviso-remoto-fechar:focus {
outline: 2px solid #fff;
outline-offset: 2px;
transform: scale(1.05);
}
.live-channel-item.active:focus {
/* Sem scale/box-shadow (mesmo motivo do .live-channel-item:hover acima):
item ocupa 100% da largura sem margem lateral, e o scale(1.05) daqui
empurrava a borda branca pra fora da área visível da coluna
(overflow-x:auto corta) só quando o cursor caía no canal já no ar -
"o branco do seletor dá uma cortadinha" reportado. */
border-color: rgba(255,255,255,0.5);
}
/* Mesmo cartão arredondado/flutuante da lista de canais (.live-channel-item)
— antes era uma faixa reta de borda a borda, visualmente mais pobre. */
.live-category-item {
/* Largura 100% do conteúdo da coluna (era 96%+margin:auto) — a folga
lateral agora vem do padding fixo de .live-col-categories, não mais
de um % que podia sobrar fração de pixel e cortar a borda branca do
seletor (ver comentário lá). */
padding: 11px 10px;
margin-bottom: 8px;
border-radius: 6px;
cursor: pointer;
/* Cinza neutro puro (R=G=B), mesmo tom do fundo/painel de Programação -
era #1e1e21 (R30 G30 B33), o B mais alto que R/G dava um viés
azulado visível ("fundo meio azulado" reportado) mesmo sendo só 3
pontos de diferença. */
background-color: #1e1e1e;
color: #aaa;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-transform: uppercase;
/* background-color e border-color SEM transição (ver regras :hover/:focus
abaixo) — encurtar a duração (era 0.15s, tentamos 0.08s) não bastou:
navegando rápido o WebView às vezes atrasa a repintura sob a carga de
recalcular foco várias vezes em sequência, e mesmo uma transição curta
ainda pintava dois itens acesos ao mesmo tempo por um instante (rastro/
"flicada"/seletor fantasma reportado — a borda do item que perdia foco
ainda estava com o fade rodando quando o próximo já acendia). Trocar
na hora, sem fade, elimina fisicamente a sobreposição — não depende de
a repintura acontecer "a tempo". As outras propriedades (cor do texto
etc.) continuam suaves. */
transition: transform 0.08s ease, color 0.08s ease, opacity 0.08s ease, filter 0.08s ease;
border: 1px solid transparent;
outline: none;
display: flex;
align-items: center;
/* era 12px — mesmo motivo do width/padding acima */
scroll-margin: 15px;
}
.live-category-item > * + * { margin-left: 8px; }
/* Nome da categoria numa linha só — sem isto "CANAIS | FILMES E SÉRIES" e
afins quebravam em 2 linhas (nenhum white-space aqui herdava o nowrap de
.live-channel-item .channel-name, que é escopado só pra coluna de
canais). Ellipsis de fallback pro raro nome ainda maior que isso. */
.live-category-item .channel-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Cursor do D-pad aqui, mas ainda não é o item ATIVO - branco/cinza (segue
a paleta do app), o gradiente fica reservado só pro .active abaixo. */
.live-category-item:hover, .live-category-item:focus {
background-color: #26262a;
color: #fff;
border-color: #f2f2f2;
outline: none;
transform: none;
box-shadow: none;
transition: color 0.08s ease;
}
.live-category-item.active {
/* Sem gradiente (era laranja→roxo, reportado como feio) - cinza neutro
mais claro que o repouso, mesma família do resto do app. */
background-color: #3a3a3a;
color: #fff;
border-color: rgba(255,255,255,0.35);
}
.live-category-item.active:focus, .live-category-item.active:hover {
background-color: #3a3a3a;
color: #fff;
border-color: rgba(255,255,255,0.5);
transform: none;
box-shadow: none;
}
/* Premium Video Player Resets */
.premium-video-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-color: #000 !important;
border-radius: 8px;
outline: none;
border: none;
}
.premium-video-player::-webkit-media-controls,
.premium-video-player::-webkit-media-controls-start-playback-button,
.premium-video-player::-webkit-media-controls-overlay-play-button {
display: none !important;
-webkit-appearance: none !important;
}
/* Loader Animation */
.live-loader {
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid #fff;
border-radius: 50%;
width: 35px;
height: 35px;
animation: spin 1s linear infinite;
position: absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -17px;
z-index: 3;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.channel-logo {
width: 45px;
height: 35px;
border-radius: 4px;
object-fit: contain;
/* filter: drop-shadow permanente em cada logo (uma categoria pode ter
1200+) era o efeito mais caro pra GPU renderizar — pior ainda porque
content-visibility:auto só evita repintar o que já está fora da tela;
à medida que a navegação traz mais logos pra viewport, cada um paga
esse custo pela primeira vez, justo durante o D-pad. Sem filter aqui. */
}
/* Canal sem streamIcon do provedor, ou cuja URL não carrega (confirmado:
parte da lista do provedor aponta pra domínio fora do ar ou imagem
removida no servidor de origem — não tem como "puxar" uma logo que não
existe mais do lado de lá). Mesmo box/ícone genérico do .category-icon
em vez de simplesmente sumir a imagem — sem isto o nome do canal
começava mais à esquerda que os canais com logo, desalinhando a lista. */
.channel-logo-fallback {
width: 45px;
height: 35px;
border-radius: 4px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.06);
color: #aaa;
}
/* Mesmo "encaixe" do .channel-logo (ver acima) pro menu de categorias
ficar com a mesma cara do menu de canais — categoria não tem logo
própria do provedor, então é um ícone genérico num box, não uma foto. */
.category-icon {
width: 45px;
height: 35px;
border-radius: 4px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.06);
color: #aaa;
}
.live-category-item:hover .category-icon,
.live-category-item:focus .category-icon,
.live-category-item.active .category-icon {
color: #fff;
background: rgba(255,255,255,0.12);
}
.epg-item {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
.epg-time {
color: #888;
font-size: 12px;
margin-bottom: 4px;
}
.epg-program-title {
color: #fff;
font-size: 14px;
font-weight: bold;
}
/* Programa no ar agora (index 0 do EPG) — mesmo item, só com destaque e
barra de progresso. Sem trocar layout: continua a mesma lista vertical
de sempre, só o primeiro item ganha essa informação a mais. */
.epg-item.now {
padding: 10px;
margin: -10px -10px 10px;
border-radius: 8px;
border-bottom: none;
background: var(--vf-item-hover);
}
.epg-item.now .epg-time {
color: var(--vf-accent);
font-weight: 700;
}
.epg-progress-track {
margin-top: 8px;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, .15);
overflow: hidden;
}
.epg-progress-fill {
height: 100%;
border-radius: 2px;
background: var(--vf-accent);
}
/* =====================================
VOD & SERIES LAYOUT (2 Columns)
===================================== */
.vod-col-grid {
flex: 1;
/* Sem painel/blur ao redor da grade inteira (mesmo motivo de
.live-col-categories/.live-col-channels) - as capas falam por si,
não precisam de uma caixa arredondada agrupando tudo atrás. */
padding: 20px;
display: grid;
/* Capa menor pra caber pelo menos 8 colunas nas telas de Filmes/Séries
(antes 180px+1fr esticava demais e só cabiam ~4). */
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 14px;
overflow-y: auto;
align-content: start;
}
/* Categorias com centenas de títulos renderizavam todas as capas de uma vez.
content-visibility faz o navegador pular o que está fora da tela; o
contain-intrinsic-size reserva o espaço para a rolagem não "pular".
Vale só na grade — o carrossel da home é curto e não precisa. */
.vod-col-grid .vod-item {
content-visibility: auto;
contain-intrinsic-size: auto 285px;
}
.vod-item {
position: relative;
border-radius: 8px;
overflow: hidden;
padding-top: 150%; /* 150% = Aspect Ratio 2:3 garantido sem bugs no grid */
/* Sem transição na borda (mesmo motivo do .live-channel-item/.vk-key):
grade pode ter centenas de capas, navegar rápido deixava duas acesas
ao mesmo tempo por um instante (rastro/seletor fantasma). */
transition: none;
border: 3px solid transparent;
cursor: pointer;
background: var(--vf-item);
/* Sem isto, scrollIntoView({block:'nearest'}) empurra o item pra ficar
rente à borda do container ao rolar até a última/primeira fileira —
a borda de seleção branca ficava colada exatamente na borda
arredondada da grade, parecendo cortada. */
scroll-margin: 20px;
}
.vod-item:focus, .vod-item.active {
border-color: #ffffff;
outline: none;
z-index: 10;
}
.vod-item-poster {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.vod-item-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(255, 255, 255, 0.25);
z-index: 2;
}
.vod-item-progress-fill {
height: 100%;
background: #e50914;
}
.vod-item-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* 40% -> 55%: caixa cresceu (padding-top 20->32px), o degradê precisa
cobrir mais pixels reais pra continuar suave (era abrupto demais na
mesma proporção antiga). */
background: linear-gradient(transparent, rgba(0,0,0,0.95) 55%);
color: white;
/* 32px (era 20px) de respiro acima do texto — pedido explícito: nome
do filme ficava colado na capa, sem distância nenhuma até o pôster
acima. */
padding: 32px 10px 10px;
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
/* =====================================
VOD DETAILS MODAL
===================================== */
.vod-modal {
/* absolute, não fixed — ver comentário em #sync-screen. */
position: absolute;
top: 0;
left: 0;
width: var(--tv-w);
height: var(--tv-h);
background: rgba(0,0,0,0.93);
z-index: 100000; /* Must be > 99999 (fs-player-container) */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.vod-modal.show {
opacity: 1;
}
.exit-modal-content {
background-color: var(--vf-item);
border: 2px solid #333;
border-radius: 12px;
padding: 18px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
width: auto;
max-width: 280px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
z-index: 100001;
}
.exit-modal-content > * + * { margin-top: 14px; }
.exit-modal-title {
color: #fff;
font-size: 16px;
font-weight: 600;
margin: 0;
font-family: 'Inter', sans-serif;
}
.exit-modal-buttons {
display: flex;
justify-content: center;
}
.exit-modal-buttons > * + * { margin-left: 12px; }
/* ---------- Senha de categoria adulta ---------- */
.pin-modal-content {
max-width: 320px; /* .exit-modal-content é 280px - estreito demais pro teclado 3 colunas */
}
.pin-modal-sub {
color: #aaa;
font-size: 13px;
margin: -6px 0 0 0;
}
.pin-dots {
display: flex;
}
.pin-dots > * + * { margin-left: 14px; }
.pin-dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #555;
background: transparent;
/* Sem transição de background (mesmo motivo do .live-category-item -
ver comentário lá): digitar rápido não pode deixar ponto "atrasado". */
}
.pin-dot.preenchido {
background: #fff;
border-color: #fff;
}
.pin-modal-erro {
color: #ff6b6b;
font-size: 13px;
font-weight: 600;
margin: -8px 0 0 0;
}
.pin-keypad {
display: grid;
grid-template-columns: repeat(3, 56px);
gap: 10px;
}
.pin-key {
width: 56px;
height: 44px;
border-radius: 8px;
border: 1px solid transparent;
background-color: #1e1e1e;
color: #fff;
font-size: 16px;
font-weight: 600;
cursor: pointer;
outline: none;
/* Mesmo motivo do .live-category-item: sem transição de fundo/borda,
navegação rápida no teclado não pode deixar duas teclas acesas. */
}
.pin-key:hover, .pin-key:focus {
background-color: var(--vf-item-hover);
border-color: #f2f2f2;
}
.pin-key-action {
font-size: 12px;
}
.vod-modal-content {
width: 720px;
height: 360px;
background: #000;
border-radius: 16px;
overflow: hidden;
position: relative;
display: flex;
box-shadow: 0 25px 50px rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
}
.vod-modal-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0.3;
z-index: 1;
}
.vod-modal-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #000 30%, transparent 100%);
z-index: 2;
}
.vod-modal-info {
position: relative;
z-index: 3;
display: flex;
padding: 20px;
width: 100%;
}
.vod-modal-info > * + * { margin-left: 20px; }
.vod-modal-poster-img {
width: 120px;
height: 180px;
flex-shrink: 0;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.8);
object-fit: cover;
object-position: center top;
border: 1px solid rgba(255,255,255,0.1);
}
.vod-modal-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.vod-modal-text h2 {
font-size: 24px;
margin: 0 0 6px 0;
font-weight: 800;
}
.vod-modal-meta {
display: flex;
margin-bottom: 10px;
}
.vod-modal-meta > * + * { margin-left: 10px; }
.meta-tag {
background: rgba(255,255,255,0.1);
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
color: var(--vf-accent);
}
.hero-overview {
font-size: 13px;
line-height: 1.4;
color: #e0e0e0;
margin-bottom: 12px;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hero-actions {
display: flex;
align-items: center;
}
.hero-actions > * + * { margin-left: 14px; }
.btn-watch {
background-color: #ffffff;
color: #000000;
border: none;
padding: 8px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, filter 0.2s;
box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
.btn-watch > * + * { margin-left: 8px; }
.btn-watch:focus, .btn-watch:hover {
transform: scale(1.05);
background-color: #e6e6e6;
box-shadow: 0 6px 20px rgba(255,255,255,0.4);
outline: 3px solid rgba(255,255,255,0.5);
outline-offset: 2px;
}
.carousel-dots {
display: flex;
align-items: center;
}
.carousel-dots > * + * { margin-left: 8px; }
.c-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}
.c-dot.active {
width: 8px;
height: 8px;
background-color: #ffffff;
/* Glow contido: a 0.8 o ponto virava um borrão numa TV com contraste alto */
box-shadow: 0 0 6px rgba(255,255,255,0.45);
}
.vod-modal-desc {
font-size: 13px;
line-height: 1.4;
color: #ccc;
margin-bottom: 12px;
max-height: 80px;
overflow-y: auto;
}
.vod-modal-actions {
display: flex;
}
.vod-modal-actions > * + * { margin-left: 10px; }
.vod-btn {
padding: 7px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
border: 2px solid transparent;
display: flex;
align-items: center;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.vod-btn > * + * { margin-left: 8px; }
.vod-btn.primary {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.vod-btn.secondary {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
}
.vod-btn:focus, .vod-btn:hover {
transform: scale(1.05);
outline: none;
}
.vod-btn.primary:focus, .vod-btn.secondary:focus {
background: #ffffff;
color: #000;
border-color: #ffffff;
/* O fundo branco já marca o foco; o halo entra só como reforço sutil.
A 0.4 sobre um botão branco a TV clipava os dois num borrão só. */
box-shadow: 0 0 14px rgba(255, 255, 255, 0.22);
}
/* Item já favoritado: pílula vermelha com coração preenchido */
.vod-btn.is-favorito {
background: linear-gradient(135deg, #8a1c1c, #5c1212);
border-color: rgba(255, 90, 90, 0.4);
color: #ffffff;
}
.vod-btn.is-favorito svg {
fill: #ff6b6b;
}
.vod-btn.is-favorito:hover,
.vod-btn.is-favorito:focus {
background: linear-gradient(135deg, #a52222, #6b1414);
border-color: #ff4d4d;
color: #ffffff;
box-shadow: 0 0 14px rgba(255, 60, 60, 0.35);
}
.vod-btn.is-favorito:hover svg,
.vod-btn.is-favorito:focus svg {
fill: #ff6b6b;
}
.badge-container {
position: absolute;
top: 8px;
right: 8px;
display: flex;
flex-direction: column;
z-index: 10;
}
.badge-container > * + * { margin-top: 5px; }
/* 4K é o selo de destaque: dourado com texto escuro.
O roxo anterior era escuro demais e sumia sobre capas escuras — além de ser
idêntico ao CAM, que sinaliza o oposto (qualidade ruim). */
.badge-4k {
background: linear-gradient(135deg, #ffd97a 0%, #e6a817 45%, #c8860d 100%);
color: #1a1200;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.6px;
padding: 3px 8px;
border-radius: 4px;
/* Sombra escura para separar da capa + brilho dourado sutil */
box-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 10px rgba(230,168,23,0.45);
border: 1px solid rgba(255, 235, 170, 0.75);
text-align: center;
text-shadow: none;
}
.badge-leg {
background: linear-gradient(135deg, #0288d1, #01579b);
color: white;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 900;
padding: 3px 6px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
border: 1px solid rgba(255,255,255,0.2);
text-align: center;
}
/* HDR só aparece depois que ESSE aparelho já travou tentando decodificar
aquele título (ver window.onFalhaDecodificacao4k) — é aviso, não
destaque, por isso vermelho/laranja em vez do dourado do 4K. */
.badge-hdr {
background: linear-gradient(135deg, #ff7a59, #c0392b);
color: white;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.4px;
padding: 3px 6px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
border: 1px solid rgba(255,255,255,0.2);
text-align: center;
}
/* CAM avisa qualidade inferior: cinza discreto, sem competir com o 4K */
.badge-cam {
background: linear-gradient(135deg, #4a4a4a, #2e2e2e);
color: rgba(255,255,255,0.82);
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 900;
padding: 3px 6px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
border: 1px solid rgba(255,255,255,0.18);
text-align: center;
}
/* =====================================================
FAVORITOS - Categoria especial no topo
===================================================== */
.favorites-category-item {
display: flex;
align-items: center;
padding: 12px 24px;
border-radius: 0;
cursor: pointer;
border: 1px solid transparent;
border-bottom: 1px solid rgba(231, 76, 60, 0.2);
background: linear-gradient(135deg, rgba(231,76,60,0.12), rgba(192,57,43,0.06));
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
color: #e74c3c;
letter-spacing: 0.5px;
/* Sem border-color na transição — mesmo item fica na mesma coluna que
.live-category-item (categorias), então o mesmo seletor fantasma ao
navegar rápido também acontecia aqui. */
transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
outline: none;
width: 100%;
}
.favorites-category-item > * + * { margin-left: 8px; }
.favorites-category-item:hover, .favorites-category-item:focus {
background: linear-gradient(135deg, rgba(231,76,60,0.3), rgba(192,57,43,0.15));
border-color: transparent;
transform: none;
box-shadow: none;
}
.favorites-category-item.active {
background: linear-gradient(135deg, rgba(231,76,60,0.4), rgba(192,57,43,0.25));
border-left: 4px solid #e74c3c;
padding-left: 20px; /* Offset the 4px border-left (24px - 4px) */
color: #fff;
}
.fav-heart-icon {
font-size: 16px;
line-height: 1;
}
.fav-btn-vod {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0,0,0,0.7);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
z-index: 5;
}
.fav-btn-vod:hover {
background: #ffffff;
color: #000000;
transform: scale(1.1);
}
/* Mesmo padrão neutro dos outros botões de favoritar — sem vermelho. */
.fav-btn-vod.favorited {
background: rgba(255, 255, 255, 0.85);
color: #000000;
}
/* =======================================================
SEARCH SCREEN (Estilo Anexo 2)
======================================================= */
.search-layout {
display: flex;
width: 100%;
height: var(--tv-h);
margin-top: 0;
padding: 18px 40px;
background-color: #0b0b0d;
}
.search-layout > * + * { margin-left: 40px; }
.search-left-panel {
width: 360px;
display: flex;
flex-direction: column;
flex-shrink: 0;
/* Em janelas de navegador mais baixas que a altura de projeto da TV, o
teclado virtual (7 linhas) não cabia e a fileira de ações (backspace/
limpar/espaço) ficava cortada embaixo, fora da tela. Teclado menor
(abaixo) resolve a maioria dos casos; o scroll fica como rede de
segurança pra janelas realmente baixas. */
max-height: 100%;
overflow-y: auto;
padding-right: 4px;
}
.search-left-panel > * + * { margin-top: 8px; }
.search-input-wrapper {
position: relative;
width: 100%;
}
.search-input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.4);
pointer-events: none;
}
#search-input-field {
width: 100%;
height: 42px;
background-color: #16161a;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 0 16px 0 48px;
outline: none;
}
.search-keyboard {
display: flex;
flex-direction: column;
contain: layout paint;
}
.search-keyboard > * + * { margin-top: 5px; }
/* Grid de 6 colunas fluidas — não largura fixa em px — para a grade esticar
e ocupar a mesma largura do campo de busca acima (width: 100%). Com largura
fixa, 6 teclas pequenas ficavam bem mais estreitas que o campo, sobrando um
vão vazio à direita que não existe na tela de referência. Bônus: a linha do
"0" sozinho ocupa só a 1ª coluna do grid, do mesmo tamanho das outras
teclas, sem esticar para preencher a linha toda. */
.sk-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 5px;
}
/* A linha de ações (backspace/limpar/espaço) tem proporções próprias — cada
uma "pesa" diferente (flex-grow), não são 6 células iguais — então volta a
ser flex, não grid. */
.sk-row.action-row {
display: flex;
}
.sk-key {
width: auto;
height: 46px;
background-color: #16161a;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 6px;
color: #ffffff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* Sem background-color nem border-color na transição (mesmo motivo do
.live-category-item/.live-channel-item): num teclado de ~40 teclas,
navegar rápido deixava duas teclas "acesas" ao mesmo tempo por um
instante — a "piscada"/seletor fantasma relatado em aparelhos mais
fracos. Trocar fundo e borda na hora elimina a sobreposição. contain:
layout paint isola cada tecla, então focar uma não obriga o navegador
a repintar o teclado inteiro. */
transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
outline: none;
contain: layout paint;
}
.sk-key:focus, .sk-key:hover {
background-color: #ffffff;
color: #000000;
border-color: #ffffff;
outline: none;
}
/* Botões especiais do teclado virtual */
.sk-key.sk-action {
background-color: #212126;
flex-grow: 1;
width: auto;
min-width: 56px;
}
.sk-key.sk-space {
background-color: #212126;
flex-grow: 3;
width: auto;
min-width: 56px;
}
/* Depois de .sk-action/.sk-space de propósito: essas duas têm fundo próprio
(#212126) que, com a mesma especificidade, vencia o branco do :focus/:hover
— a tecla marcava a borda mas o fundo continuava escuro. */
.sk-key.sk-action:focus,
.sk-key.sk-action:hover,
.sk-key.sk-space:focus,
.sk-key.sk-space:hover {
background-color: #ffffff;
color: #000000;
}
.search-right-panel {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: auto;
}
.search-placeholder {
margin: auto;
font-size: 18px;
font-weight: 600;
color: rgba(255, 255, 255, 0.35);
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.02);
border-radius: 8px;
border: 1px dashed rgba(255, 255, 255, 0.05);
width: 80%;
max-width: 450px;
}
.search-section-title {
font-size: 18px;
font-weight: 800;
color: #ffffff;
margin-bottom: 20px;
letter-spacing: 1px;
border-left: 4px solid #ffffff;
padding-left: 12px;
text-transform: uppercase;
}
#search-movies-grid, #search-series-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 155px));
gap: 14px;
/* Padding do container igual ao gap entre capas — antes herdava 20px do
.vod-col-grid, folga maior que o espaçamento entre os cards. */
padding: 14px;
align-content: start;
width: 100%;
/* Sem card cinza de fundo herdado do .vod-col-grid: com poucos
resultados, aquele painel de largura total sobrava vazio à direita/
embaixo do único item, parecendo um bloco cinza "quebrado". */
background: transparent;
border-radius: 0;
}
/* =======================================================
SPOTLIGHT BANNER — TMDB (novo layout premium)
======================================================= */
#dynamic-hero-banner {
position: relative;
width: 100%;
/* 560px é a medida de projeto (16:9). O min() só entra quando o canvas
fica mais baixo que 720px — painel ultralargo, por exemplo — para o
banner não ultrapassar a tela e cortar as fileiras de baixo. */
height: min(560px, calc(var(--tv-h) * 0.79));
overflow: hidden;
background: #000;
/* Banner encosta nas bordas da tela: sem cantos arredondados nem margem,
que na TV desenhavam uma borda visível contra o fundo. */
border-radius: 0;
margin-bottom: 0;
}
/* Celular deitado é bem mais panorâmico que TV 16:9 — com a mesma regra
acima (0.79 de --tv-h), o herói ainda sobrava alto o bastante pra
empurrar "Escolha seu Streaming" pra fora da primeira tela (só aparecia
depois de rolar). Herói mais baixo só aqui — na TV a classe não existe,
regra acima continua valendo sozinha. */
html.modo-toque #dynamic-hero-banner {
height: min(384px, calc(var(--tv-h) * 0.64));
}
html.modo-toque .spotlight-info {
margin-top: 64px;
}
html.modo-toque .spotlight-info > * + * { margin-top: 8px; }
/* Sinopse de 3 linhas não cabia mais no bloco encolhido — 2 linhas some
menos texto, mas sem sobrepor o botão "Assista agora" logo abaixo. */
html.modo-toque .spotlight-overview {
-webkit-line-clamp: 2;
}
/* Respiro entre o herói (banner encolhido) e "Escolha seu Streaming" — só
esta seção, as de baixo (Novos Filmes etc) já têm respiro próprio. */
html.modo-toque #home-streaming-section {
margin-top: 56px;
}
.spotlight-backdrop {
position: absolute;
/* Sem gap no topo (pedido explícito) — a imagem cobre até a borda de
cima do banner, sem sombra ali (só embaixo, ver .spotlight-gradient). */
top: 0;
right: 0;
width: 75%;
height: 100%;
background-size: cover;
background-position: center top;
filter: brightness(0.95);
/* Dissolve a borda esquerda da imagem — sem camada extra, custo zero */
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 10%, #000 22%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 10%, #000 22%);
transition: background-image 0.8s ease;
}
.spotlight-gradient {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
/* Duas camadas: a primeira escurece da esquerda pra direita (cobre
título/meta/sinopse contra o fundo/imagem, que pode ser bem claro ou
cheio de detalhe atrás); a segunda funde o topo e o rodapé da própria
caixa da imagem (.spotlight-backdrop) pro preto sólido do banner —
sem isso a borda de cima/baixo da imagem aparecia como um corte reto. */
background:
linear-gradient(to right,
#000 0%, #000 30%,
rgba(0,0,0,0.92) 40%,
rgba(0,0,0,0.75) 50%,
rgba(0,0,0,0.5) 60%,
rgba(0,0,0,0.25) 70%,
transparent 82%),
linear-gradient(to bottom,
/* Só embaixo — em cima a imagem agora vai até a borda, sem
sombra nenhuma (pedido explícito). */
transparent 0, transparent calc(100% - 70px), #000 100%);
z-index: 1;
}
/* Ruído em SVG, ladrilhado 96x96 — quebra o platô de quantização que aparece
como faixas visíveis no degradê acima quando renderizado num painel 4K de
verdade. Poucos KB em data-URI, GPU ladrilha a textura, custo desprezível
(nada a ver com compor ruído numa superfície do tamanho do banner inteiro). */
.spotlight-gradient::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
opacity: 0.05;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
.spotlight-content {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 2;
display: flex;
/* Centralizado de novo, a pedido — a sinopse já está com clamp de 3
linhas e o banner mais baixo (500px), então o risco de encostar na
seção seguinte que motivou o flex-end de antes ficou bem menor. */
align-items: center;
padding: 90px 24px 24px;
}
.spotlight-content > * + * { margin-left: 48px; }
.spotlight-poster {
flex-shrink: 0;
width: 200px;
height: 300px;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08);
transition: transform 0.4s ease;
}
.spotlight-poster:hover { transform: scale(1.03); }
.spotlight-poster-placeholder {
flex-shrink: 0;
width: 200px;
height: 300px;
border-radius: 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.spotlight-info {
flex: 1;
display: flex;
flex-direction: column;
max-width: 560px;
margin-top: 90px;
animation: spotlightFadeIn 0.5s ease forwards;
}
.spotlight-info > * + * { margin-top: 14px; }
.spotlight-badge {
display: inline-flex;
align-items: center;
background: rgba(243,156,18,0.15);
border: 1px solid rgba(243,156,18,0.4);
border-radius: 20px;
padding: 4px 12px;
font-size: 11px;
font-weight: 700;
color: var(--vf-accent);
letter-spacing: 1.5px;
text-transform: uppercase;
width: fit-content;
}
.spotlight-badge > * + * { margin-left: 6px; }
.spotlight-title {
font-size: 38px;
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.5px;
color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.spotlight-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.spotlight-meta > * + * { margin-left: 15px; }
/* Linha de metadados do banner: ícone + texto (tipo, data, duração, nota, país, gênero) */
.spotlight-meta-item {
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
letter-spacing: 0.2px;
white-space: nowrap;
}
.spotlight-meta-item > * + * { margin-left: 7px; }
.spotlight-meta-item svg {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.78;
}
.spotlight-meta-item.rating {
color: var(--vf-accent);
}
.spotlight-meta-item.rating svg {
opacity: 1;
}
.spotlight-chip {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
padding: 3px 10px;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.85);
}
.spotlight-chip.rating {
background: rgba(243,156,18,0.2);
border-color: rgba(243,156,18,0.5);
color: var(--vf-accent);
}
.spotlight-overview {
font-size: 13.5px;
line-height: 1.65;
color: rgba(255,255,255,0.7);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.spotlight-watch-btn {
display: inline-flex;
align-items: center;
align-self: flex-start;
/* 4px próprio + 14px do gap do .spotlight-info (Chrome 79 do webOS não
aplica flex gap) — soma aqui, mesmo motivo do .btn-entrar no login. */
margin: 18px 0 14px;
padding: 12px 26px;
border-radius: 8px;
border: none;
background: #ffffff;
color: #000000;
font-size: 15px;
font-weight: 700;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Ícone é , texto solto sem span — mesmo caso do
.section-icon, "> * + *" não enxerga o nó de texto. */
.spotlight-watch-btn svg { margin-right: 10px; flex-shrink: 0; }
.spotlight-watch-btn:hover,
.spotlight-watch-btn:focus {
transform: scale(1.04);
box-shadow: 0 4px 18px rgba(255,255,255,0.35);
outline: none;
}
.spotlight-progress-bar {
display: none;
height: 2px;
background: rgba(255,255,255,0.15);
border-radius: 2px;
overflow: hidden;
width: 100%;
}
.spotlight-progress-fill {
height: 100%;
background: var(--vf-accent);
width: 0%;
transition: width 0.1s linear;
}
.spotlight-thumbnails {
position: absolute;
bottom: 20px;
right: 72px;
z-index: 3;
display: none;
gap: 10px;
}
.spotlight-thumb {
width: 72px;
height: 44px;
border-radius: 6px;
object-fit: cover;
cursor: pointer;
opacity: 0.4;
border: 2px solid transparent;
transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
background: rgba(255,255,255,0.05);
}
.spotlight-thumb:hover { opacity: 0.8; transform: scale(1.05); }
.spotlight-thumb.active { opacity: 1; border-color: var(--vf-accent); }
.spotlight-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
width: 44px;
height: 44px;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
transition: background 0.2s, transform 0.2s;
}
.spotlight-arrow:hover { background: rgba(243,156,18,0.3); transform: translateY(-50%) scale(1.1); }
.spotlight-arrow.prev { left: 24px; }
.spotlight-arrow.next { right: 24px; }
@keyframes spotlightFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.spotlight-logo {
max-width: 430px;
max-height: 112px;
object-fit: contain;
margin-bottom: 8px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
align-self: flex-start;
}
/* Seções da Home (Novos Filmes/Séries) */
.home-section {
padding: 0 18px 12px;
}
.home-section-title {
font-size: 20px;
font-weight: 800;
color: #ffffff;
margin-bottom: 14px;
display: flex;
align-items: center;
letter-spacing: 0.5px;
}
/* Não dá pra resolver com ">* + *" (mesmo padrão do resto do gap): o
título é , sem span
envolvendo o texto — nó de texto não é elemento, "* + *" nunca casa com
ele. Só dá pra empurrar espaço pelo lado do ícone mesmo. */
.section-icon {
width: 21px;
height: 21px;
margin-right: 10px;
stroke: var(--vf-accent);
}
.home-row {
/* Rolagem horizontal composta na GPU */
will-change: scroll-position;
transform: translateZ(0);
display: flex;
align-items: flex-start;
overflow-x: auto;
overflow-y: hidden;
padding: 10px 0;
scroll-behavior: smooth;
scrollbar-width: none;
}
.home-row > * + * { margin-left: 14px; }
.home-row::-webkit-scrollbar {
display: none;
}
.home-row .vod-item {
flex: 0 0 160px;
width: 160px;
height: 240px;
padding-top: 0;
}
.home-row .vod-item-title {
font-size: 15px;
padding: 16px 8px 8px;
}
.home-row::after {
content: '';
flex: 0 0 16px;
height: 1px;
}
/* =====================================================
Tela de Catálogo por Streaming (Netflix, etc. via TMDB)
===================================================== */
.provider-screen {
display: flex;
width: 100%;
height: var(--tv-h);
background-color: #000;
box-sizing: border-box;
overflow: hidden;
}
.provider-sidebar {
flex: 0 0 60px;
background-color: #0a0a0a;
border-right: 1px solid var(--vf-item);
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 0;
}
.provider-sidebar > * + * { margin-top: 20px; }
.provider-sidebar-logo {
width: 34px;
height: 34px;
object-fit: contain;
border-radius: 7px;
}
.provider-sidebar-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.08);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
/* Sem transição (mesmo motivo do .live-channel-item) — coluna navegada
rápido deixava dois ícones acesos ao mesmo tempo (rastro/fantasma). */
transition: none;
}
.provider-sidebar-btn:hover,
.provider-sidebar-btn:focus {
background: #fff;
color: #000;
outline: none;
}
.provider-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
}
.provider-hero {
position: relative;
width: 100%;
height: 46vh;
min-height: 320px;
background-color: var(--vf-item);
}
.provider-hero-backdrop {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-size: cover;
background-position: center top;
background-color: var(--vf-item);
}
/* Ruído em SVG, mesmo truque do banner da home — quebra o platô de
quantização que aparece como faixas visíveis num painel 4K de verdade. */
.provider-hero-backdrop::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
opacity: 0.05;
mix-blend-mode: overlay;
pointer-events: none;
}
.provider-hero::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(to top,
#000 0%, #000 8%,
rgba(0, 0, 0, 0.9) 16%, rgba(0, 0, 0, 0.78) 24%,
rgba(0, 0, 0, 0.64) 32%, rgba(0, 0, 0, 0.5) 40%,
rgba(0, 0, 0, 0.36) 48%, rgba(0, 0, 0, 0.24) 56%,
rgba(0, 0, 0, 0.14) 65%, rgba(0, 0, 0, 0.06) 75%,
rgba(0, 0, 0, 0.02) 85%, transparent 100%);
z-index: 1;
}
.provider-hero-info {
position: absolute;
left: 32px;
right: 32px;
bottom: 24px;
z-index: 2;
}
.provider-hero-title {
font-size: 28px;
font-weight: 800;
color: #fff;
letter-spacing: 0.5px;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.provider-hero-subtitle {
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
max-width: 640px;
margin-top: 8px;
line-height: 1.5;
}
.provider-hero-meta {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
margin-top: 10px;
}
/* Linha "Top 10": número grande vazado atrás do pôster */
.provider-top-item {
flex: 0 0 auto;
display: flex;
align-items: flex-end;
}
.provider-top-rank {
font-size: 84px;
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 2px rgba(255, 255, 255, 0.55);
margin-right: -16px;
user-select: none;
pointer-events: none;
}
.provider-top-poster {
width: 130px;
height: 195px;
border-radius: 6px;
object-fit: cover;
background-color: var(--vf-item);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
border: 3px solid transparent;
cursor: pointer;
/* Sem transição (mesmo motivo do .live-channel-item) — fileira "Top 10"
navegada rápido deixava dois pôsteres acesos ao mesmo tempo (rastro/
seletor fantasma). */
transition: none;
}
.provider-top-poster:hover,
.provider-top-poster:focus {
border-color: #ffffff;
outline: none;
}
/* Cards de logo na seção "Escolha seu Streaming" */
.streaming-row {
/* Respiro entre os cards, não dentro deles. */
gap: 20px;
}
.streaming-row .streaming-logo-card {
/* Tamanho fixo em vez de flex:1 1 0 — antes os 8 cards dividiam a
largura da tela entre si (~210px cada, mesmo com max-width de 258px
— nunca chegava lá), então "aumentar" não tinha efeito sem esbarrar
nos outros cards. Com largura fixa e a linha virando rolagem
horizontal (igual às outras fileiras da Home), os cards podem ficar
maiores de verdade; sobe até aqui e para antes da menor arte que
temos (Netflix, nativa em 300px) pra não perder nitidez. */
flex: 0 0 auto;
width: 176px;
/* height fixo, não aspect-ratio — webOS TV 22 roda Chromium 87, e
aspect-ratio só existe a partir do Chromium 88 (não suportado, sem
aviso nenhum: cada card caía pro tamanho "natural" da própria
imagem, ficando visualmente desalinhado dos outros). 176/1.78≈99px,
mesma proporção widescreen de todas as 8 artes — Paramount+ era
quase quadrada (300x300) e sofria corte feio; a arte foi
reexportada em 620x349 com o mesmo azul da marca estendido nas
laterais, sem costura visível, então agora bate igual às outras. */
height: 99px;
}
.streaming-logo-card {
border-radius: 10px;
overflow: hidden;
border: 3px solid transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* Sem transição (mesmo motivo do .live-channel-item) — fileira "Escolha
seu Streaming" navegada rápido deixava dois cards acesos ao mesmo
tempo (rastro/seletor fantasma). */
transition: none;
}
.streaming-logo-card:hover,
.streaming-logo-card:focus {
border-color: #ffffff;
outline: none;
}
.streaming-logo-card img {
width: 100%;
height: 100%;
/* cover: preenche o card inteiro, igual nas 8 logos — sem faixa vazia
sobrando de nenhum lado. Como a proporção do card agora é próxima da
proporção real das artes, o corte é só a margem de fundo ao redor do
logo (mais perceptível só no Paramount+, que é quase quadrado). */
object-fit: cover;
}
/* Cabeçalho da Busca */
.search-header {
display: flex;
align-items: center;
margin-bottom: 24px;
align-self: flex-start;
}
.search-header > * + * { margin-left: 16px; }
.search-back-round-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: none;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.12s linear, color 0.12s linear;
outline: none;
}
.search-back-round-btn:hover,
.search-back-round-btn:focus {
background: #ffffff;
color: #000000;
}
.search-header-title {
color: #ffffff;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Botões de seleção de temporada — estilo chip/pill */
.season-tab {
flex-shrink: 0;
background: rgba(255, 255, 255, 0.07);
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: rgba(255, 255, 255, 0.55);
padding: 6px 16px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
cursor: pointer;
font-family: 'Inter', sans-serif;
white-space: nowrap;
/* Sem background-color/border-color na transição (mesmo motivo do
.live-channel-item) — fileira de temporadas navegada rápido deixava
duas acesas ao mesmo tempo (rastro/seletor fantasma). */
transition: color 0.15s ease, transform 0.15s ease;
}
/* Foco (segue o controle) sempre vence como branco cheio — mesmo padrão do
.nav-item (topo). "Ativa" (temporada selecionada) sem foco usa só uma
borda laranja discreta, pra não competir com o branco do foco; antes era
o contrário (ativa fixa em branco, foco só um clarinho fraco), o que
fazia parecer que o seletor tinha ficado "invertido" ao mover. */
.season-tab.active {
background: #ffffff;
color: #000000;
border-color: #ffffff;
}
.season-tab:hover,
.season-tab:focus,
.season-tab.active:hover,
.season-tab.active:focus {
background: #ffffff;
color: #000000;
border-color: #ffffff;
outline: none;
}
/* Foco da aba apenas aumenta o tamanho estaticamente (sem pulsar) */
.season-tab:focus,
.season-tab.active:focus,
.season-tab:hover,
.season-tab.active:hover {
transform: scale(1.04);
}
/* Cards de episódio premium — thumbnail com zoom, título embaixo (item 5) */
.episode-card {
flex: 0 0 200px;
width: 200px;
background: #111111;
border-radius: 10px;
border: 3px solid transparent;
cursor: pointer;
overflow: hidden;
/* Sem border-color na transição (mesmo motivo do .live-channel-item) —
fileira de episódios navegada rápido deixava dois com a borda branca
acesa ao mesmo tempo (rastro/seletor fantasma). transform/box-shadow
continuam suaves — é o efeito de "levantar" o card, proposital. */
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.episode-card:hover,
.episode-card:focus,
.episode-card.active {
outline: none;
transform: translateY(-4px);
border-color: #ffffff;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
}
.episode-card-thumb-wrap {
position: relative;
width: 100%;
/* "padding-top trick" no lugar de aspect-ratio (largura em %, não dá
pra converter pra height fixo em px como nos cards de streaming) —
webOS TV 22 roda Chromium 87, aspect-ratio só existe a partir do
88. height:0 + padding-top:9/16 = mesma proporção 16:9, suporte
universal; o filho vira position:absolute pra preencher a caixa
resultante (senão colapsaria junto com height:0). */
height: 0;
padding-top: 56.25%;
overflow: hidden;
background: #000;
}
.episode-card-thumb {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.episode-card:hover .episode-card-thumb,
.episode-card:focus .episode-card-thumb {
transform: scale(1.08);
}
.episode-card-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.85);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 6px;
border-radius: 4px;
z-index: 2;
}
.episode-card-duration {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.85);
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
font-weight: 600;
padding: 3px 6px;
border-radius: 4px;
z-index: 2;
}
.episode-card-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(255, 255, 255, 0.25);
z-index: 2;
}
.episode-card-progress-fill {
height: 100%;
/* Vermelho, não o laranja de marca: as capas dos episódios são quase
todas laranja/amarelo, a barra laranja sumia em cima delas. */
background: #e50914;
}
.episode-card-title {
margin: 0;
padding: 10px 12px;
height: 54px;
box-sizing: border-box;
font-size: 12px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =====================================================
TELA DE DETALHES DE SÉRIE — página cheia com herói, separada do modal de
filme de propósito. Reaproveita o design system do resto do app: preto
#000/#0a0a0a, branco como única cor de seleção/hover, dourado (--vf-accent) só
como o acento já usado nos ícones de seção em todo lugar. Escala de
espaçamento fixa: 8 / 16 / 24 / 32 / 48px.
===================================================== */
.sd-screen {
display: none;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 9000;
background: #000;
overflow: hidden;
/* Sem isto, a fileira "Escolha seu Streaming" da Home (por trás,
intencionalmente não escondida — cobrimos só com overlay) piscava
por cima do modal no Simulator webOS: bug de composição/GPU do
Chromium mais antigo, onde duas camadas com position:absolute
disputam a ordem de pintura mesmo com z-index correto. Forçar esta
camada pra sua própria camada de composição resolve — confirmado
0 mutação de DOM no MutationObserver, então não é re-render JS. */
will-change: transform;
}
.sd-back-btn {
display: none !important;
}
.sd-main-loader {
position: absolute;
top: 50%;
left: 50%;
margin: -24px 0 0 -24px;
z-index: 15;
}
.sd-inner {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 40px 16px 24px 24px;
/* 4px era exagero pro outro lado: a coluna da esquerda ficou mais baixa
depois de tirar o botão Assistir, e as abas de temporada quase
encostavam no Favoritar. 18px dá respiro sem voltar a parecer sobra
de margem — o degradê vertical do próprio backdrop (.sd-hero-gradient)
continua fazendo a maior parte do trabalho de transição. */
opacity: 0;
transition: opacity 0.3s ease;
overflow-y: auto;
overflow-x: hidden;
position: relative;
box-sizing: border-box;
scrollbar-width: none;
}
.sd-inner > * + * { margin-top: 18px; }
/* As duas camadas do herói (foto + degradê) são position:absolute. O `gap`
que existia aqui antes do port pro webOS nunca afetava filho absoluto; o
shim `> * + *` que o substituiu afeta — e como o degradê é o 2º filho, ele
descia 18px em relação à foto, deixando uma faixa da imagem sem escurecer
no topo (o "vazamento do backdrop" reportado na ficha de série). Margem
zero aqui devolve exatamente o comportamento do gap. */
.sd-inner > .sd-hero-backdrop,
.sd-inner > .sd-hero-gradient { margin: 0; }
/* E o primeiro item que realmente ocupa fluxo (.sd-top-row, 3º filho no DOM,
logo depois das duas camadas absolutas) não pode ganhar margem nenhuma:
`gap` só separa itens ENTRE si, nunca põe respiro antes do primeiro. Sem
isto sobravam 18px a mais na ficha inteira, que era o bastante pra empurrar
a linha do elenco pra fora dos 720px do canvas. */
.sd-inner > .sd-hero-gradient + * { margin-top: 0; }
.sd-inner::-webkit-scrollbar {
display: none;
}
/* Capa + painel de informações lado a lado — era a antiga .sd-inner em
linha, agora só a fileira de cima. Temporadas/episódios ficam fora
daqui, em largura total (ver .sd-series-section). */
.sd-top-row {
position: relative;
display: flex;
flex-direction: row;
flex-shrink: 0;
width: 100%;
}
.sd-top-row > * + * { margin-left: 28px; }
/* Ancorado em .sd-inner (elemento absoluto ignora o padding do ancestral —
por isso volta pra cá em vez de .sd-top-row): vaza até a borda real da
tela nos três lados, em vez de ficar preso dentro do respiro que o
padding do painel dá pro conteúdo (era a "faixa preta grossa" que
sobrava nas laterais/topo). Altura FIXA (não 100%) em vez de acompanhar
a fileira de cima: garante que nunca alcança a fileira de temporadas/
episódios, sem depender da altura variável do conteúdo. */
.sd-hero-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 400px;
background-repeat: no-repeat;
/* 115% em vez de "contain" (100%): ainda sem esticar feio pra preencher
a caixa toda (era o "zoom" reportado), mas grande o bastante pra não
sobrar aquela quina de vazio bem visível entre a foto e o fundo — só
um pouquinho de corte no topo/base, imperceptível. "right top" mantém
encostada na borda direita. */
background-size: auto 115%;
background-position: right top;
transition: background-image 0.4s ease;
z-index: 0;
}
.sd-hero-backdrop::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
opacity: 0.05;
mix-blend-mode: overlay;
}
.sd-hero-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 400px;
/* Essa caixa agora é bem mais baixa que a antiga .sd-inner inteira (era
o que esse degradê cobria antes) — os mesmos stops em % comprimidos
numa altura menor viravam um corte seco em vez de transição suave.
Refeito do zero pra essa proporção: horizontal mais largo (0 solto
fica opaco só até 18%, some de vez só em 82% — sem costura visível
em lugar nenhum), e vertical como vinheta dos dois lados (escurece
um pouco no topo, pra casar com a borda arredondada do modal, e
escurece mais embaixo, pra a foto "se entregar" ao preto da fileira
de temporadas em vez de terminar num corte reto). */
background:
linear-gradient(to right,
#000 0%,
#000 34%,
rgba(0,0,0,0.92) 42%,
rgba(0,0,0,0.78) 50%,
rgba(0,0,0,0.55) 58%,
rgba(0,0,0,0.32) 68%,
rgba(0,0,0,0.12) 78%,
transparent 90%),
/* Antes terminava em 0.92 de opacidade — a foto ainda "vazava" um
pouco nos últimos pixels da caixa de 400px, e como esse é um
elemento à parte (absoluto) que termina num corte reto contra o
fundo #000 sólido do resto da tela, sobrava uma linha visível
bem fraca ali (a costura que o cliente reportou). Selado em preto
puro (#000, opacidade 1) bem antes do fim da caixa — a partir daí
casa exatamente com o fundo por trás, não importa onde o conteúdo
real (abas de temporada) realmente comece. */
linear-gradient(to bottom,
rgba(0,0,0,0.4) 0%,
transparent 20%,
transparent 60%,
#000 90%,
#000 100%);
z-index: 1;
}
.sd-left-panel {
position: relative;
width: 190px;
flex-shrink: 0;
display: flex;
flex-direction: column;
z-index: 2;
min-height: 0;
}
.sd-left-panel > * + * { margin-top: 12px; }
/* Idem: .sd-info original tem padding-top:20px (série usa isso pra dar
respiro do backdrop); no filme, com o pôster maior, isso empilhava altura
demais. Reduzido só aqui — série não é afetada (.sd-info sozinho, sem
.vod-info, mantém o valor original). */
.vod-info {
/* 0 (era 6px) — pedido explícito pra as informações começarem na
mesma linha do topo do pôster ao lado, não mais abaixo dele. */
padding-top: 0;
/* 8px (era 20px, herdado de .sd-info) — sobra de espaço vertical que o
filme não tem como série (sem fileira de temporadas competindo
embaixo, mas TEM "Recentemente Adicionados" e a moldura de 400px,
ver .sd-top-row). Devolve altura pro gap maior acima sem cortar a
sinopse pra fora da moldura de novo. */
padding-bottom: 8px;
}
.vod-info .sd-logo, #series-modal-inner .sd-logo {
/* 340x120 (era 280x80, sobra de quando o logo dividia espaço com o
pôster ao lado - herói cheio tem espaço de sobra agora). */
max-width: 340px;
max-height: 120px;
/* object-fit:contain (ver .sd-logo base) centraliza a imagem dentro
da caixa por padrão - como a caixa estica pra largura toda do
painel (.vod-info é flex-column, align-items:stretch padrão), o
logo ficava com um respiro à esquerda que o texto abaixo (título/
sinopse/botões, todos rente à margem) não tinha. Alinha à
esquerda pra bater com a mesma margem de tudo o resto. */
object-position: left center;
}
/* Altura-alvo (não mais fixa) pra fileira pôster+info do filme — sem isto,
filme com sinopse/elenco maior esticava .sd-top-row (altura por
conteúdo), o que empurrava "Recentemente Adicionados" pra baixo e mudava
o tamanho aparente do pôster de um filme pro outro (o pôster era
esticado junto pelo align-items:stretch padrão do flex). Overflow
escondido: a sinopse já tem line-clamp:3 (ver #vod-detail-overview),
mas 400px fixo ainda estourava em telas mais baixas (720p e afins) —
título gigante quebrando em 2 linhas, ou simplesmente pouca altura de
tela sobrando, e a fileira de baixo ia inteira pra fora da tela mesmo
assim. flex-shrink (sobrescrevendo o :0 de .sd-top-row) deixa esta
fileira ceder ANTES de #vod-detail-recent-section perder espaço —
corta o herói em vez de empurrar a página, previsível > variável, igual
antes, só que agora funciona também quando 400px não cabe de jeito
nenhum. */
#vod-modal-inner .sd-top-row {
/* 428px (era 400px) — o gap maior de .sd-info (14px, ver ali) cortava a
sinopse na 1ª linha, no meio da frase, sem nem completar o
line-clamp:3. flex-shrink continua protegendo #vod-detail-recent-
-section em telas mais baixas (ver comentário logo acima) — isto só
usa os 28px extra quando sobra espaço de verdade. */
flex: 0 1 428px;
min-height: 0;
overflow: hidden;
}
/* #vod-modal-inner (ID, maior especificidade que .sd-inner) — padding e gap
menores que a tela de série, pra sobrar altura pra "Recentemente
Adicionados" sem cortar na tela em telas de 720p/menores. Gap 20px (era
10px): sinopse e a fileira de baixo ficavam praticamente coladas —
reportado como "sinopse colada no container dos recentes". Ainda dá pra
caber em 720p (a fileira encolhe o herói acima antes de perder altura
própria, ver .sd-top-row). */
#vod-modal-inner {
/* Topo 32px (era 24px) - margem de segurança de TV pro herói cheio
(ver bloco "HERÓI CHEIO" mais abaixo); a proteção real contra
corte do logo é a altura fixa (flex-shrink:0) de .sd-top-row lá,
não este padding sozinho. */
padding: 32px 16px 16px 24px;
/* O respiro de 26px entre os filhos vive no shim
`#vod-modal-inner > * + *` logo abaixo, nao num `gap` aqui: o CSS
compartilhado com o webOS trocou gap por margem, e os dois juntos
somavam no Android. */
}
/* #vod-modal-inner não tem "display:flex" próprio (herda de .sd-inner,
que já converteu esse gap acima em margin-top) — sem esta regra o valor
se perdia, voltava pro genérico de .sd-inner. */
#vod-modal-inner > * + * {
margin-top: 26px;
}
/* Sinopse do filme com limite de linhas (a série não tem, mas lá não tem
uma fileira de cards embaixo disputando a mesma altura de tela) — sem
isto, uma sinopse de 4+ linhas empurrava tudo abaixo pra fora da tela. */
#vod-detail-overview {
/* 2 linhas (era 3) — resumo mais curto garante caber sem cortar no meio
da frase, mesmo em telas mais baixas onde .sd-top-row encolhe (ver
flex-shrink ali). */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Fileira "Recentemente Adicionados" com cards menores que os da Home
(.home-row sozinho continua 160x240 lá) — só reduz aqui, é o que sobra de
altura depois do herói + info do filme acima. */
.vod-recent-row.home-row .vod-item {
flex: 0 0 148px;
width: 148px;
height: 222px;
}
/* flex-shrink:0 — nunca cede espaço pro herói acima (ver .sd-top-row
acima), é a fileira que o cliente precisa ver sempre inteira. ::before
é a linha-fade acima do título: gradiente (não sólida) pra combinar com
o resto do modal (.sd-hero-gradient já usa o mesmo recurso) em vez de
um traço reto genérico. */
#vod-detail-recent-section {
flex-shrink: 0;
padding: 14px 16px 16px;
position: relative;
/* Sem painel/fundo (era herdado de .sd-series-section, mesmo cartão
cinza-arredondado que a fileira de temporadas da série usa) - pedido
explícito pra tirar essa "caixa" e deixar a fileira solta direto
sobre o fundo preto, igual o resto da página. */
background-color: transparent;
border-radius: 0;
}
/* Linha-fade acima do título removida (pedido explícito) - sem o painel
de fundo (ver acima), a régua ficava sozinha, sem caixa pra separar
de verdade. O próprio .sd-hero-gradient já escurece até #000 antes
daqui, então a transição continua limpa sem precisar de traço. */
.sd-poster-wrap {
width: 100%;
/* max-width em vez de max-height: com o padding-trick abaixo (altura
vem de padding-top, não de height), max-height não consegue mais
limitar o resultado — mas limitar a LARGURA em 180px (270 / 1.5)
trava a altura no mesmo teto de antes por consequência, já que a
proporção 2:3 é fixa. */
max-width: 180px;
position: relative;
/* "padding-top trick" no lugar de aspect-ratio em .sd-poster (largura
em %, não dá pra virar height fixo em px) — webOS TV 22 roda
Chromium 87, aspect-ratio só existe a partir do 88. height:0 +
padding-top:3/2 = mesma proporção 2:3 do pôster; a imagem (abaixo)
vira position:absolute pra preencher a caixa resultante. */
height: 0;
padding-top: 150%;
overflow: hidden;
}
/* Selo 4K/HDR/LEG etc no canto do pôster — só o modal de filme usa
(#vod-detail-badges-slot), série não tem essa metadata de qualidade.
construirBadges() (app.js) já envolve os selos num .badge-container com
position:absolute;right:8px próprio (pensado pra ficar dentro de um card
de grade, não aqui) — dentro deste wrapper (0x0, só filho absoluto) esse
"right:8px" empurrava o selo pra ESQUERDA da tela pela própria largura +
8px, em vez de ficar no canto do pôster. Neutraliza isso e deixa só ESTE
elemento controlar a posição. */
.sd-poster-badges {
position: absolute;
top: 8px;
left: 8px;
z-index: 5;
}
.sd-poster-badges .badge-container {
position: static;
display: flex;
flex-direction: column;
}
.sd-poster-badges .badge-container > * + * { margin-top: 5px; }
.sd-poster {
/* position:absolute preenchendo .sd-poster-wrap (ver comentário lá —
padding-trick no lugar de aspect-ratio, sem suporte no Chromium 87
do webOS TV 22). */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* cover (era contain) — contain evitava cortar a capa, mas quando a
proporção da imagem de origem não batia exatamente com 2:3 sobrava
uma tarja/borda cinza (o #111 do background aparecendo nos dois
lados ou em cima/embaixo) - reportado como "borda cinza nas capas".
Com cover a imagem sempre preenche a caixa 2:3 inteira, sem tarja;
o preço é cortar um pouco da capa quando a proporção não bate, mas
nunca sobra fundo visível. */
object-fit: cover;
border-radius: 8px;
background: var(--vf-item);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}
.sd-actions {
display: flex;
flex-direction: column;
}
.sd-actions > * + * { margin-top: 12px; }
.sd-action-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 6px;
border: 3px solid transparent;
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
/* Sem background-color/border-color na transição (mesmo motivo do
.live-channel-item) — rastro/seletor fantasma ao navegar rápido. */
transition: color 0.15s ease;
}
/* Ícone é (Assistir/Favoritar/Ver Episódios), sem
span — mesmo caso do .section-icon/.cfg-painel-titulo, "> * + *" não
enxerga o nó de texto. */
.sd-action-btn svg { margin-right: 10px; flex-shrink: 0; }
.sd-action-btn:hover,
.sd-action-btn:focus {
background: #ffffff;
color: #000000;
border-color: #ffffff;
outline: none;
}
.sd-action-primary {
background: rgba(255, 255, 255, 0.15);
}
.sd-action-primary:hover,
.sd-action-primary:focus {
background: #ffffff;
color: #000000;
}
/* O botão "Assistir" pode ter a largura ajustada ao texto e padding lateral. */
.vod-info-actions #vod-detail-btn-play, #series-modal-inner .sd-series-actions #series-detail-btn-play {
width: auto;
padding: 10px 22px;
}
/* Favoritado: pílula vermelha com coração preenchido, igual ao modal de filme/série. */
.sd-action-btn.is-favorito {
background: linear-gradient(135deg, #8a1c1c, #5c1212);
border-color: rgba(255, 90, 90, 0.4);
color: #ffffff;
}
.sd-action-btn.is-favorito svg {
fill: #ff6b6b;
}
.sd-action-btn.is-favorito:hover,
.sd-action-btn.is-favorito:focus {
background: linear-gradient(135deg, #a52222, #6b1414);
border-color: #ff4d4d;
color: #ffffff;
outline: none;
box-shadow: 0 0 14px rgba(255, 60, 60, 0.35);
}
.sd-action-btn.is-favorito:hover svg,
.sd-action-btn.is-favorito:focus svg {
fill: #ff6b6b;
}
/* Botões Assistir/Favoritar do modal de filme, ancorados junto ao
título/subtítulo (ver .sd-info) — série usa .sd-actions puro, empilhado
junto ao pôster; aqui vira linha horizontal, largura pelo conteúdo. */
.vod-info-actions {
flex-direction: row;
margin: 2px 0 4px;
}
/* .sd-actions > * + * (regra base) põe margin-TOP — certo pra coluna, mas
aqui a linha virou horizontal (flex-direction:row acima), então precisa
de margin-LEFT em vez disso, senão Assistir/Favoritar ficam grudados. */
.sd-actions.vod-info-actions > * + * {
margin-top: 0;
margin-left: 12px;
}
.sd-right-panel {
position: relative;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
z-index: 2;
}
.sd-info {
position: relative;
display: flex;
flex-direction: column;
/* 14px (era 10px, tentativa inicial de 18px cortava a sinopse pra fora
de .sd-top-row — ver altura-alvo dele mais abaixo) — título, botões,
metadados, elenco e sinopse ficavam praticamente colados um no
outro, sem hierarquia nenhuma entre os blocos (reportado como
"interface carregada"). Cada bloco agora respira, e a diferença de
peso (ver .sd-credits/.sd-meta abaixo) fica mais fácil de perceber
com mais espaço em volta — sem estourar a moldura do filme. */
margin-bottom: 24px;
/* Sem max-width: sinopse grande cresce pro lado (usa a largura toda do
painel direito) em vez de empurrar as temporadas/episódios pra baixo
com mais linhas de texto. */
z-index: 2;
padding: 20px 24px 20px 0;
}
.sd-info > * + * { margin-top: 14px; }
.sd-info-loader {
position: absolute;
top: 0;
right: 0;
}
.sd-logo {
max-width: 320px;
max-height: 100px;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9));
margin-bottom: 2px;
}
.sd-title {
margin: 0;
font-size: 28px;
font-weight: 900;
color: #fff;
line-height: 1.15;
letter-spacing: 0.5px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.sd-original {
margin: 0;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
}
.sd-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
}
.sd-meta > * + * { margin-left: 16px; }
.sd-meta span {
display: inline-flex;
align-items: center;
}
.sd-meta span > * + * { margin-left: 6px; }
.sd-meta svg {
flex-shrink: 0;
color: rgba(255, 255, 255, 0.6);
}
/* Retratos do elenco (TMDB) — linha de fotos abaixo da metadata do filme. */
.cast-photos-row {
display: flex;
margin-top: 16px;
flex-wrap: wrap;
}
.cast-photos-row > * + * { margin-left: 12px; }
.cast-photo-card {
width: 80px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cast-photo-card img {
width: 80px;
height: 80px;
border-radius: 8px;
object-fit: cover;
margin-bottom: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.cast-photo-name {
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.2;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Coluna (era linha com flex-wrap): Direção e Elenco lado a lado
competiam pela mesma linha e, com elenco grande, quebravam misturados —
sem separação clara entre os dois dados. Cada um na própria linha agora,
com respiro entre eles (gap). Cor mais apagada que .sd-meta (0.7 vs
0.85): dado objetivo (ano/duração/nota) fica hierarquicamente acima de
crédito (direção/elenco), que é secundário. */
.sd-credits {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.sd-credits > * + * { margin-top: 8px; }
.sd-credit-row {
display: flex;
align-items: flex-start;
/* Elenco pode passar de uma dezena de nomes — deixa quebrar em várias
linhas com respiro (era single-line implícito, sem line-height
ajustado, texto ficava denso demais). */
line-height: 1.6;
}
.sd-credit-row > * + * { margin-left: 8px; }
.sd-credit-row svg {
flex-shrink: 0;
color: rgba(255, 255, 255, 0.5);
margin-top: 2px;
}
.sd-overview-box {
display: flex;
align-items: flex-start;
/* Era um fundo quase opaco com borda própria — virou um retângulo bem
marcado agora que a foto de fundo aparece atrás. Sem borda, e o fundo
vira um degradê (mais escuro atrás do texto, esvaece na borda) em vez
de um bloco de cor sólido com aresta reta em todo canto. */
background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.28));
border-radius: 8px;
padding: 12px 16px;
margin-top: 8px;
}
.sd-overview-box > * + * { margin-left: 12px; }
.sd-overview-box svg {
flex-shrink: 0;
margin-top: 2px;
color: rgba(255, 255, 255, 0.6);
}
.sd-overview-content {
flex: 1;
min-width: 0;
}
/* Só o modal de filme (série usa .sd-overview-box puro, com ícone/caixa —
ver #series-detail-overview acima) — reportado: o ícone empurrava o
texto da sinopse pra direita, saindo do alinhamento com título/metadados
/elenco (que começam todos na mesma margem esquerda). Sem caixa/fundo/
ícone, texto solto na mesma coluna dos outros blocos. */
.vod-overview-plain {
background: none;
padding: 0;
/* 14px (era 0): com `gap` o zero aqui era inofensivo — gap nao e
margem, o respiro de .sd-info valia do mesmo jeito. Depois que o
gap virou shim de margem, o zero passou a APAGAR esse respiro e
meta/sinopse ficavam grudados (reportado). 14px = o mesmo valor do
gap original de .sd-info. */
margin-top: 14px;
gap: 0;
}
.vod-overview-plain svg {
display: none;
}
/* ============================================================
HERÓI CHEIO — pedido explícito: "inspire nos streaming como
netflix, prime etc", mantendo a paleta neutra do app (sem cor
nova). Só o modal de FILME (#vod-modal-inner/.vod-*) — a tela de
série continua com pôster + painel do jeito que já era.
A ideia de referência (Netflix/Prime): a foto ocupa a tela toda,
sem pôster ao lado, e o texto senta por cima dela, ancorado embaixo
à esquerda, com o degradê fazendo toda a legibilidade. Densidade
de informação (selo de qualidade, nota, elenco) sim; cor nova, não.
============================================================ */
.vod-left-panel {
/* Pôster lateral não existe mais nesse layout - a própria imagem de
fundo (.sd-hero-backdrop) já é o "retrato" do filme. */
display: none;
}
#vod-modal-inner .sd-hero-backdrop {
/* Cobre a tela toda (720px = canvas base inteiro) sem deixar faixa
de fundo exposta no rodapé. Antes era 705px, os 15px restantes
deixavam aparecer o fundo por trás.
image-rendering: high-quality — força o WebKit a usar interpolação
bilinear/bicúbica ao escalar, reduz o efeito de pixelização que
aparece em TVs 4K quando o poster original é ~1280px esticado num
canvas maior. */
height: 720px;
background-size: cover;
background-position: center 25%;
image-rendering: -webkit-optimize-contrast;
image-rendering: high-quality;
}
/* Celular: cabeça do personagem cortada rente à borda de cima (reportado
com várias artes — Nando, O Diabo Veste Prada). Não é falta de imagem —
é a caixa de 720px, mais ALTA que a tela real do celular (--tv-h fica
bem abaixo disso, tela mais panorâmica): cover escala a imagem pra
cobrir 720px de altura, e só uma fatia disso (a de cima) aparece de
fato na tela, cortando rente à cabeça. Encolhendo a caixa pra bater com
a tela real, sobra folga pro "cover" cortar embaixo em vez de em cima —
"top" (em vez dos 25% da TV) usa essa folga a favor. Chegou-se a tentar
empurrar a caixa pra baixo (top:48px) — sobrava faixa preta visível no
topo, pior que o corte. Só aqui, TV mantém 720px/25% originais. */
html.modo-toque #vod-modal-inner .sd-hero-backdrop,
html.modo-toque #vod-modal-inner .sd-hero-gradient {
height: var(--tv-h);
}
html.modo-toque #vod-modal-inner .sd-hero-backdrop {
background-position: center top;
}
#vod-modal-inner .sd-hero-gradient {
/* Mesma altura do backdrop — os dois precisam bater pra o gradiente
cobrir completamente até o rodapé, sem janela de fundo aparecendo.
margin-top:0 mesmo motivo do .sd-top-row logo abaixo — é o 2º filho
de #vod-modal-inner, herdava 18px de .sd-inner > * + * sem precisar. */
height: 720px;
margin-top: 0 !important;
/* Vertical (transparente em cima, preto embaixo) é quem faz a
legibilidade agora — o texto mora no rodapé da imagem.
O ramp final foi prolongado: opacidade 1 (#000) já em 90%,
garantindo que os últimos 10% (72px) sejam preto sólido mesmo em
TVs 4K onde o gradiente se estica junto com a escala do canvas. */
background:
linear-gradient(180deg,
rgba(0,0,0,.08) 0%,
rgba(0,0,0,0) 25%,
rgba(0,0,0,.35) 55%,
rgba(0,0,0,.75) 72%,
rgba(0,0,0,.95) 85%,
#000 90%,
#000 100%),
linear-gradient(90deg,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.5) 32%,
rgba(0,0,0,.1) 62%,
transparent 82%);
}
/* .sd-top-row perde a coluna do pôster (display:none acima) - vira só
o painel de texto, ancorado no rodapé da moldura de 720px (era
align-items:stretch padrão do flex, que esticava o conteúdo pro
topo).
flex-shrink:0 (era 0 1 660px, ainda deixava encolher) - #vod-detail-
-recent-section logo abaixo tem flex-shrink:0 (nunca cede espaço,
comentário lá: "é a fileira que o cliente precisa ver sempre
inteira"), então TODA a pressão de espaço sobrava pra cá: mesmo
pedindo 660/720px de base, .sd-inner espremia esta fileira pra ~500px
pra abrir espaço pros recentes, cortando o topo do bloco de texto
(ancorado embaixo) pra fora da tela. Sem encolher, a fileira de
recentes é que rola pra fora da tela quando não cabe (.sd-inner tem
overflow-y:auto) - mesmo comportamento do herói cheio de referência,
onde "mais como este" fica abaixo da dobra, não espremido ao lado. */
#vod-modal-inner .sd-top-row {
/* Altura do canvas MENOS o padding de #vod-modal-inner (32px topo +
16px base). No Android isto e 720px fixo, o que estoura o container
em 47px -- la o excesso ficava escondido atras de um overflow:hidden
(removido na limpeza do webOS). Com o calc a ficha cabe de verdade:
sem corte e sem a barra de rolagem que aparece no PC. */
flex: 0 0 calc(var(--tv-h) - 48px);
align-items: flex-end;
/* Zera o margin-top de 18px que .sd-inner > * + * (genérico, pensado
pra conteúdo empilhado normal) herda aqui por ser o 3º filho de
#vod-modal-inner (depois do backdrop/gradient absolutos) — medido
via DevTools: sozinho isso já empurrava os 720px fixos pra fora dos
720px disponíveis (scrollHeight 788 vs clientHeight 720). O herói
cheio cobre a tela toda, não deve ter respiro nenhum no topo. */
margin-top: 0 !important;
}
/* Casa com a altura real do backdrop no celular (ver acima) — sem isso a
fileira ficava 720px mesmo com a imagem menor, sobrando espaço vazio
embaixo do texto antes do elenco/gêneros. */
html.modo-toque #vod-modal-inner .sd-top-row {
/* align-items:flex-end (base) ancora o texto no rodapé da caixa — na
TV a caixa tem 720px fixos, sobra folga; no celular virou a tela
inteira e o texto quase saía pela borda física de baixo (reportado
corrigido). 82% depois ficou alto demais, sobrando vazio embaixo
(também reportado) — 92% é o ajuste fino entre os dois. */
flex-basis: calc(var(--tv-h) * 0.92);
align-items: flex-end;
}
/* Tudo (herói+texto+elenco/gêneros) já cabe na tela real do celular com os
ajustes acima — trava o scroll de vez, sem depender de sobra zerada
bater certinho em todo aparelho (relatado: ainda dava pra puxar/rolar
num aparelho real mesmo sem mais nada pra revelar). */
html.modo-toque #vod-modal-inner {
overflow-y: hidden;
}
.vod-info {
max-width: 640px;
}
/* Celular: bloco de texto um pouco maior e um pouco mais alto (afastado do
rodapé real da caixa) — pedido explícito depois de ver no aparelho. */
html.modo-toque .vod-info {
margin-bottom: 28px;
}
html.modo-toque .vod-info .sd-title {
font-size: 46px;
}
html.modo-toque .vod-info .sd-meta,
html.modo-toque .vod-info .vod-overview-plain {
font-size: 15px;
}
.vod-info .sd-title {
/* 40px (era 24px, ajustado pra dividir espaço com o pôster do lado -
sem ele, o título pode assumir o peso visual que tem nos apps de
referência). */
font-size: 40px;
font-weight: 800;
letter-spacing: -0.01em;
}
/* Selo de qualidade (4K/HDR/LEG) saiu do canto do pôster (que não
existe mais aqui) - agora mora dentro do bloco de texto, como uma
linha de selos acima do título. .badge-container por padrão empilha
vertical (pensado pro canto de um card pequeno) - aqui vira fileira
horizontal, plana (sem position:absolute, que só fazia sentido
sobrepondo a capa). */
#vod-detail-badges-slot {
position: static;
z-index: auto;
margin-bottom: 6px;
order: 1;
}
#vod-detail-badges-slot .badge-container {
position: static;
flex-direction: row;
}
/* Selo neutro (branco translúcido) em vez do dourado/vermelho padrão
(ver .badge-4k/.badge-hdr/.badge-leg/.badge-cam) - aquele estilo foi
pensado pro canto de um card pequeno na grade; aqui, solto dentro do
herói, precisa ficar discreto e na mesma paleta do resto da tela. */
#vod-detail-badges-slot .badge-4k,
#vod-detail-badges-slot .badge-hdr,
#vod-detail-badges-slot .badge-leg,
#vod-detail-badges-slot .badge-cam {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.24);
color: #fff;
box-shadow: none;
text-shadow: none;
}
/* Ordem visual do bloco de texto (mesma sequência dos apps de
referência): selo → título → subtítulo → metadados → sinopse →
botões → crédito discreto por último. .sd-info já é
flex-direction:column (ver .sd-info), então dá pra reordenar só com
`order`, sem mexer no HTML nem no app.js que preenche cada campo. */
.vod-info .sd-logo,
.vod-info .sd-title { order: 2; }
.vod-info .sd-original { order: 3; }
.vod-info .sd-meta { order: 4; }
.vod-info .vod-overview-plain { order: 5; }
.vod-info .vod-info-actions { order: 6; }
.vod-info .sd-credits { order: 7; }
.vod-info .cast-photos-row { order: 8; }
.vod-info .vod-info-actions .sd-action-btn {
padding: 12px 26px;
font-size: 15px;
}
/* Linha de metadados densa, sem ícone por item (texto corrido separado
por espaço, igual referência) - ver app.js (openVodModal) pra como
cada span é montado. */
.vod-info .sd-meta > * + * { margin-left: 14px; }
.vod-meta-score {
color: #4ade80;
font-weight: 800;
}
.vod-meta-hd {
border: 1px solid rgba(255, 255, 255, 0.35);
padding: 1px 6px;
border-radius: 3px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
}
/* Favoritar vira botão circular só com o ícone (igual "+"/like da
referência) - Assistir continua com texto, é a ação primária. O
texto (" Favoritar "/" Favoritado ", trocado via JS em openVodModal)
não sai do DOM, só zera visualmente - font-size:0 no botão não afeta
o ícone porque o svg tem width/height fixos em atributo, não em em. */
.vod-info-actions {
align-items: center;
}
#vod-detail-btn-fav, #series-detail-btn-fav {
width: 46px;
height: 46px;
padding: 0;
border-radius: 50%;
font-size: 0;
gap: 0;
flex: 0 0 auto;
}
/* .sd-action-btn svg tem margin-right:10px pro caso geral (ícone + texto
visível, ex.: Assistir) — aqui o texto é invisível (font-size:0 acima),
então essa margem só empurrava o coração pra fora do centro do círculo. */
#vod-detail-btn-fav svg, #series-detail-btn-fav svg {
margin-right: 0;
}
#series-detail-overview {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
/* Sem clamp: sinopse sempre visível completa */
}
#series-detail-overview.expanded {
-webkit-line-clamp: unset;
}
.sd-overview-toggle {
margin-top: 6px;
background: none;
border: none;
padding: 0;
color: #fff;
font-size: 12px;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
opacity: 0.7;
}
.sd-overview-toggle:hover,
.sd-overview-toggle:focus {
opacity: 1;
outline: none;
}
.sd-series-section {
flex-shrink: 0;
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
z-index: 2;
background-color: rgba(26, 26, 26, 0.75);
border-radius: 12px;
padding: 20px 20px 24px;
}
.sd-season-tabs {
display: flex;
align-items: center;
flex-wrap: nowrap;
padding: 4px 0 16px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
overflow-x: auto;
scrollbar-width: none;
}
.sd-season-tabs > * + * { margin-left: 8px; }
.sd-season-tabs::-webkit-scrollbar {
display: none;
}
.sd-season-title {
display: none;
}
/* ---------- 5. Episódios — cards premium com hover de zoom ---------- */
.sd-episodes-wrap {
position: relative;
}
.sd-episodes-row {
display: flex;
align-items: flex-start;
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: none;
}
.sd-episodes-row > * + * { margin-left: 10px; }
.sd-episodes-row::-webkit-scrollbar {
display: none;
}
.sd-ep-nav {
position: absolute;
top: 40%;
transform: translateY(-50%);
z-index: 5;
width: 36px;
height: 56px;
border: none;
background: rgba(255, 255, 255, 0.9);
color: #000;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease;
}
.sd-ep-nav:hover,
.sd-ep-nav:focus {
background: #ffffff;
outline: none;
}
.sd-ep-nav-prev {
left: 0;
border-radius: 0 8px 8px 0;
}
.sd-ep-nav-next {
right: 0;
border-radius: 8px 0 0 8px;
}
/* Related/Recently added cards */
.vod-item {
border-radius: 10px !important;
overflow: hidden;
/* A LARGURA da borda nunca muda — só a cor. Antes ia de 1px para 3px no
foco, e alterar a largura muda o modelo de caixa: o navegador refazia o
layout da grade a cada movimento do seletor. Trocar só a cor é repintura
simples, sem recalcular posição de nada.
Sem TRANSIÇÃO nenhuma na cor (era 0.12s): grade com centenas de capas
navegada rápido deixava a borda branca do item anterior com o fade
ainda rodando quando a próxima já acendia — rastro/seletor fantasma
reportado, mesmo padrão já corrigido em .live-channel-item/.vk-key. */
border: 3px solid transparent;
transition: none;
/* Camada própria na GPU: o movimento do foco não repinta a grade toda */
transform: translateZ(0);
backface-visibility: hidden;
}
.vod-item:hover,
.vod-item:focus,
.vod-item.active {
/* Sem box-shadow e sem transform: a sombra branca desfocada precisava ser
rasterizada de novo a cada item percorrido, e era o que mais travava.
A borda branca sozinha já é o padrão de seleção em TV. */
border-color: #ffffff;
outline: none;
z-index: 10;
}
/* =====================================================
DESEMPENHO DE NAVEGACAO (TV)
Limita o escopo de layout/paint: mudar o foco de um item
deixa de obrigar o navegador a recalcular a tela inteira.
===================================================== */
.live-category-item,
.live-channel-item,
.vod-item,
.episode-card,
.tmdb-card {
contain: layout paint;
}
/* Colunas com rolagem propria: isolam seu conteudo do resto da pagina */
.live-col-categories,
.live-col-channels,
.vod-col-grid,
.home-scroll-area {
contain: layout paint;
}
/* Poster decodifica fora da thread principal e nao dispara re-layout */
.vod-item-poster,
.channel-logo {
contain: paint;
}
.vod-focusable-text:focus {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 10px;
margin: -10px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
/* ============================================================
LAYOUT SÉRIE — MATCH EXATO COM O ANEXO
Canvas 720px × 1280px. Tudo scoped em #series-modal-inner.
Herói: 310px | Gap: 18px | Seção: 328px
============================================================ */
/* --- Estrutura base --- */
#series-modal-inner .sd-left-panel { display: none; }
#series-modal-inner .sd-hero-backdrop {
height: 450px;
background-size: 65% auto;
background-position: top right;
background-repeat: no-repeat;
}
/* Overlay extra de compatibilidade máxima (todas as webviews Android):
garante que a metade inferior do container de 450px seja preenchida
com preto gradualmente, engolindo qualquer borda seca da imagem. */
#series-modal-inner .sd-hero-backdrop::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(180deg, transparent 65%, #000 95%);
pointer-events: none;
}
/* Gradiente: escuro à esquerda (texto legível) + escurece verticalmente
antes dos 310px do herói. Igual ao Anexo: imagem visível à direita,
preto sólido abaixo onde ficam os episódios. */
#series-modal-inner .sd-hero-gradient {
height: 450px;
background:
linear-gradient(180deg,
rgba(0,0,0,.1) 0%,
rgba(0,0,0,.0) 20%,
rgba(0,0,0,.15) 50%,
rgba(0,0,0,.50) 65%,
rgba(0,0,0,.85) 78%,
#000 90%,
#000 100%),
linear-gradient(90deg,
#000 0%,
#000 35%,
rgba(0,0,0,.85) 45%,
rgba(0,0,0,.40) 55%,
transparent 80%);
}
/* Herói ocupa 310px — deixa 328px para a seção de episódios. */
/* Topo 24px em vez dos 40px genericos de .sd-inner: a ficha de serie tem um
elemento a mais que a de filme (a fileira de episodios) e estourava a altura
do canvas, empurrando a linha do elenco pra encostar na borda de baixo da
TV. Os 16px saem da faixa vazia acima do logo, que sobrava. */
#series-modal-inner {
padding-top: 24px;
}
#series-modal-inner .sd-top-row {
/* 0 1 (era 0 0): pode encolher se o conteúdo abaixo pedir mais altura.
Medido no PC: a caixa tem 310px pra 228px de conteúdo, ou seja 82px de
folga -- encolher aqui não corta nada e evita a barra de rolagem. */
flex: 0 1 310px;
min-height: 0;
align-items: flex-end;
}
/* Celular: mesmo tratamento "herói cheio" do filme (ver #vod-modal-inner
acima) — pedido explícito pra ficha de série ficar igual à de filme, em
vez do recorte 65%-à-direita pensado pro layout largo/baixo da TV. */
html.modo-toque #series-modal-inner .sd-hero-backdrop {
height: var(--tv-h);
background-size: cover;
background-position: center top;
}
html.modo-toque #series-modal-inner .sd-hero-gradient {
height: var(--tv-h);
background:
linear-gradient(180deg,
rgba(0,0,0,.08) 0%,
rgba(0,0,0,0) 25%,
rgba(0,0,0,.35) 55%,
rgba(0,0,0,.75) 72%,
rgba(0,0,0,.95) 85%,
#000 90%,
#000 100%),
linear-gradient(90deg,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.5) 32%,
rgba(0,0,0,.1) 62%,
transparent 82%);
}
html.modo-toque #series-modal-inner .sd-top-row {
/* Mesmo ajuste do #vod-modal-inner acima — 88% da altura da tela. */
flex-basis: calc(var(--tv-h) * 0.88);
align-items: flex-end;
}
/* Textura de ruído (::after) foi pensada pra disfarçar borda seca numa
caixa pequena de 450px — esticada pro var(--tv-h) inteiro do celular, o
tile de 96px repete muito mais vezes na vertical e virava listras
visíveis no degradê escuro embaixo (reportado). Sem efeito na TV. */
html.modo-toque #series-modal-inner .sd-hero-backdrop::after {
display: none;
}
/* Mesma trava de scroll do modal de filme (#vod-modal-inner) — ficha não
pode subir/descer sozinha ao abrir. Não afeta a tela de episódios (a
overlay é position:fixed, sai do fluxo daqui, com scroll próprio nas
colunas de temporada/episódios). */
html.modo-toque #series-modal-inner {
overflow-y: hidden;
}
#series-modal-inner .sd-right-panel {
width: 100%;
flex: 1;
}
/* Info ancorado no rodapé do herói — padding inferior 18px. */
#series-modal-inner .sd-info {
max-width: 850px;
/* 8px (era 18px): a ficha inteira estourava os 720px do canvas e a linha
do elenco, que e o ultimo elemento, encostava na borda de baixo da TV.
O respiro sai daqui, onde sobra espaco entre a sinopse e as abas. */
padding: 0 0 8px 0;
margin-bottom: 0;
}
#series-modal-inner .sd-info > * + * { margin-top: 8px; }
/* TÍTULO: all-caps, muito grande — idêntico ao Anexo "THE ROOKIE". */
#series-modal-inner .sd-title {
font-size: 44px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1;
}
/* META: linha inline sem ícones SVG — separadores via gap.
Cada gerado pelo JS aparece diretamente em texto. */
#series-modal-inner .sd-meta {
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.9);
}
#series-modal-inner .sd-meta > * + * { margin-left: 10px; }
#series-modal-inner .sd-meta svg { display: none; } /* remove ícones globais */
/* "XX% relevante" em verde — igual ao Anexo. Usa a cor do app. */
#series-modal-inner .series-meta-relevante {
color: #4ade80;
font-weight: 700;
}
/* Badges [14] e [HD] — pequena caixa com borda, texto bold. */
#series-modal-inner .series-meta-badge {
display: inline-block;
border: 1.5px solid rgba(255,255,255,0.55);
border-radius: 3px;
padding: 1px 5px;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.85);
line-height: 1.4;
}
/* Sinopse solta — sem caixa, sem ícone. */
#series-modal-inner .sd-overview-box {
background: none;
padding: 0;
margin-top: 0;
}
#series-modal-inner .sd-overview-box > * + * { margin-left: 0; }
#series-modal-inner .sd-overview-box > svg { display: none; }
#series-modal-inner #series-detail-overview {
font-size: 13px;
line-height: 1.55;
color: rgba(255,255,255,0.85);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Créditos: sempre ocultos no herói — Direção/Elenco já aparecem no
rodapé de elenco (series-cast-footer) perto dos episódios. */
#series-modal-inner .sd-credits { display: none !important; }
/* BOTÕES — linha horizontal, alinhada à esquerda. */
#series-modal-inner .sd-series-actions {
flex-direction: row;
align-items: center;
margin-top: 6px;
flex-wrap: nowrap;
}
/* Mesmo caso do .vod-info-actions: linha virou horizontal, "> * + *" da
regra base (.sd-actions, margin-top) não serve mais — precisa de
margin-left. Essa regra não tinha "display:flex" própria (herda de
.sd-actions), por isso escapou da primeira leva de correção de gap. */
#series-modal-inner .sd-series-actions > * + * {
margin-top: 0;
margin-left: 10px;
}
/* Assistir e Favoritar usam as classes globais .sd-action-btn e .sd-action-primary */
/* para herdar o mesmo hover, focus e seletor da aba de Filmes. */
/* ─────────────────────────────────────────────
SEÇÃO DE EPISÓDIOS
───────────────────────────────────────────── */
#series-modal-inner .sd-series-section {
background: transparent;
border-radius: 0;
padding: 0 0 16px 0;
}
/* Row de tabs de conteúdo: Episódios | Detalhes | Recomendados | Avaliações */
.series-content-tabs {
display: none; /* oculto por padrão fora do series-modal-inner */
}
#series-modal-inner .series-content-tabs {
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.15);
/* 10px (era 15px): mesmo motivo do .sd-info acima — recupera altura pra
linha do elenco nao encostar na borda de baixo. */
margin-bottom: 10px;
padding-bottom: 0;
}
#series-modal-inner .series-content-tabs > * + * { margin-left: 24px; }
.series-content-tab {
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -1px; /* sobrepõe o border-bottom do container */
padding: 12px 0;
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.6);
cursor: pointer;
transition: color 0.15s ease;
}
.series-content-tab:hover,
.series-content-tab:focus {
color: #fff;
outline: none;
}
.series-content-tab.active {
color: #fff;
border-bottom-color: #fff; /* app usa branco — sem vermelho Netflix */
}
/* Row de temporada: label "Temporada 1" + season-tabs ao lado */
.series-season-row {
display: none;
}
#series-modal-inner .series-season-row {
display: flex;
align-items: center;
margin-bottom: 10px;
flex-wrap: wrap;
}
#series-modal-inner .series-season-row > * + * { margin-left: 16px; }
/* Label "Temporada X" — bold, branco, igual ao Anexo. */
#series-modal-inner .sd-episodes-label {
display: block;
font-size: 18px;
font-weight: 700;
color: #fff;
margin: 0;
padding: 0;
flex-shrink: 0;
}
/* Season tabs dentro do series-season-row: compactos, sem background. */
#series-modal-inner .sd-season-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding: 6px; /* Espaço pro scale(1.04) não cortar */
margin: -6px; /* Compensa visualmente o padding */
border: none;
scrollbar-width: none;
}
#series-modal-inner .sd-season-tabs > * + * { margin-left: 6px; }
#series-modal-inner .sd-season-tabs::-webkit-scrollbar { display: none; }
/* Cards de episódio: 280px (maiores), número grande no canto. */
#series-modal-inner .episode-card {
flex: 0 0 280px;
width: 280px;
background: #1a1a1a;
}
/* Celular: 280px deixava sempre um 5º card cortado pela metade na borda
(largura útil não é múltiplo de 280+gap). 300px fecha em exatos 4 cards
inteiros, sem sobra cortada — ainda desliza pra ver os próximos, só não
fica com pedaço de card pela metade parado na tela. Só aqui, TV mantém
280px (lá é rolagem por D-pad, não importa). */
html.modo-toque #series-modal-inner .episode-card {
flex: 0 0 300px;
width: 300px;
}
/* Espaçamento extra no final do scroll */
#series-modal-inner .sd-episodes-row {
padding-right: 0;
}
#series-modal-inner .episode-card-title {
height: 48px;
padding: 8px 10px 4px;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Número do episódio — top-left da thumbnail. */
.episode-card-num { display: none; }
#series-modal-inner .episode-card-num {
display: block;
position: absolute;
top: 8px;
left: 10px;
font-size: 14px;
font-weight: 700;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 4px rgba(0,0,0,0.9);
line-height: 1;
z-index: 3;
}
/* Badge "Exx" oculto — substituído pelo número acima. */
#series-modal-inner .episode-card-badge { display: none; }
/* Descrição do episódio abaixo do título.
No PC ela sai: o card fica só com o nome do episódio e a duração (pedido),
e eram os 44px dela que faziam a ficha de série estourar os 720px do canvas
-- 783px de conteúdo em 721 disponíveis, com barra de rolagem e a fileira
de capítulos cortada. Ver também #series-modal-inner .sd-top-row, que
passou a poder encolher pra absorver o resto. */
.episode-card-desc { display: none; }
#series-modal-inner .episode-card-desc {
display: none;
margin: 0;
padding: 2px 10px 10px;
font-size: 11px;
color: rgba(255,255,255,0.5);
line-height: 1.45;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Elenco abaixo dos cards. */
.series-cast-footer { display: none; }
#series-modal-inner .series-cast-footer {
display: block;
margin: 10px 0 0;
font-size: 12px;
color: rgba(255,255,255,0.55);
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ============================================================
EPISÓDIOS — TELA PRÓPRIA NO CELULAR
Carrossel horizontal cortando card no meio (reportado, várias
séries) não dá pra resolver só com largura — a fileira de
episódios não cabe inteira ao lado do herói numa tela curta e
panorâmica. Mockup aprovado: botão "Episódios" abre uma tela
cheia própria, temporada numa coluna fixa, episódios em grade
(cada card inteiro). Só existe no celular — na TV os episódios
continuam do jeito de sempre, embaixo do herói, sem tela extra.
============================================================ */
/* Botão/back mobile-only: escondidos por padrão (TV nunca vê isso). */
#series-detail-btn-episodios-mobile,
.ep-mobile-back {
display: none;
}
html.modo-toque #series-detail-btn-episodios-mobile {
display: flex;
/* .sd-action-btn tem width:100% (pensado pra 1 botão de largura cheia
+ o círculo de favoritar, que já sobrescreve pra tamanho fixo) — com
3 botões na fileira, width:100% fazia Episódios esticar e engolir o
espaço todo. Mesmo tratamento do círculo: tamanho pelo conteúdo.
Padding idêntico ao Assistir — mesmo padrão visual dos dois.
IMPORTANTE: padding vertical não pode ser 0 — um "padding:0 20px"
aqui zerava a altura (só sobrava a altura do texto/ícone), e o
Assistir tem outra regra (#series-modal-inner .sd-series-actions
#series-detail-btn-play, 2 IDs) com especificidade MAIOR que
restaura 10px vertical por conta própria — Episódios não tinha essa
regra concorrente e ficava fino sozinho (bug real, achado depois de
vários reports "botão diferente"/"fino"). */
width: auto;
flex: 0 0 auto;
padding: 10px 20px;
}
/* Mesmo motivo acima — com 3 botões, Assistir também precisa de tamanho
pelo conteúdo em vez de disputar o width:100% da regra base. */
html.modo-toque #series-detail-btn-play {
width: auto;
flex: 0 0 auto;
padding: 10px 20px;
}
/* Assistir (.sd-action-primary) só fica branco cheio com foco/hover — na
TV isso é o normal (o D-pad chega focado nele ao abrir a ficha); no
celular ficava com visual bem diferente do Episódios do lado (branco
vs. cinza escuro), sem foco de D-pad pra justificar a diferença.
Mesmo fundo nos dois, sempre — reportado como "botão diferente". */
html.modo-toque #series-modal-inner #series-detail-btn-play,
html.modo-toque #series-modal-inner #series-detail-btn-play:hover,
html.modo-toque #series-modal-inner #series-detail-btn-play:focus,
html.modo-toque #series-detail-btn-episodios-mobile,
html.modo-toque #series-detail-btn-episodios-mobile:hover,
html.modo-toque #series-detail-btn-episodios-mobile:focus {
background: rgba(255, 255, 255, 0.16);
color: #fff;
border-color: transparent;
}
html.modo-toque .ep-mobile-back {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
margin-right: 4px;
background: none;
border: none;
color: #fff;
cursor: pointer;
flex-shrink: 0;
}
/* .sd-series-section vira a tela cheia de episódios: escondida até o
botão "Episódios" ser tocado (classe .episodios-aberto no #series-
modal-inner, ver abrirEpisodiosSerieMobile()/fecharEpisodiosSerieMobile()
em app.js), sem nenhum wrapper novo no HTML — grid-area encaixa os
filhos existentes (header/temporadas/episódios) direto no layout. */
html.modo-toque #series-modal-inner .sd-series-section {
display: none;
/* absolute, não fixed — ver comentário em #sync-screen. */
position: absolute;
top: 0;
left: 0;
width: var(--tv-w);
height: var(--tv-h);
z-index: 30;
background: #0d0d0d;
padding: 0;
/* Zera o `margin-top: 18px` que `.sd-inner > * + *` dá a esta seção por
ela ser irmã posterior do herói. Margem também vale em caixa
absoluta: com ela o topo:0 caía 18px pra baixo e sobrava uma faixa
do backdrop aparecendo por cima da tela de episódios no celular. */
margin: 0;
border-radius: 0;
}
html.modo-toque #series-modal-inner.episodios-aberto .sd-series-section {
display: grid;
/* 70px cortava "Temporada X" mesmo quebrando linha; 96px resolveu o
corte mas a lista de episódios ficava larga demais, com espaço
vazio enorme depois do título de cada linha (reportado) — divisória
mais pra direita encolhe a lista, título ocupa proporção melhor da
linha. */
grid-template-columns: 180px 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"header header"
"seasons episodes";
}
/* Cabeçalho: back + "Episódios" (reaproveita o .series-content-tab
existente como título, só o back é novo). */
html.modo-toque #series-modal-inner .series-content-tabs {
grid-area: header;
padding: 14px 16px 10px;
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
html.modo-toque #series-modal-inner .series-content-tab {
padding: 0;
border-bottom: none;
font-size: 15px;
font-weight: 800;
color: #fff;
cursor: default;
}
/* Coluna de temporadas: vertical, largura fixa, rola se tiver muitas. */
html.modo-toque #series-modal-inner .series-season-row {
grid-area: seasons;
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0;
padding: 8px 0;
overflow-y: auto;
border-right: 1px solid rgba(255,255,255,0.08);
}
html.modo-toque #series-modal-inner .sd-season-tabs {
flex-direction: column;
padding: 0;
margin: 0;
overflow: visible;
}
html.modo-toque #series-modal-inner .sd-season-tabs > * + * { margin-left: 0; }
html.modo-toque #series-modal-inner .season-tab {
width: 100%;
border-radius: 0;
border: none;
border-left: 2px solid transparent;
background: transparent;
padding: 10px 6px;
font-size: 11px;
text-transform: none;
letter-spacing: normal;
white-space: normal;
word-break: break-word;
line-height: 1.3;
text-align: center;
}
html.modo-toque #series-modal-inner .season-tab.active,
html.modo-toque #series-modal-inner .season-tab:hover,
html.modo-toque #series-modal-inner .season-tab:focus {
background: rgba(255,255,255,0.08);
color: #fff;
border-left-color: #fff;
transform: none;
}
/* Episódios em LISTA (uma linha cada: miniatura + título/sinopse ao
lado) em vez de carrossel horizontal — todo card sempre inteiro, sem
sobra cortada na borda. Referência: tela de episódios do ibo player
(aprovada pelo usuário) — miniatura à esquerda, texto preenchendo o
resto da linha, rolagem vertical. */
html.modo-toque #series-modal-inner .sd-episodes-row {
grid-area: episodes;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 14px;
}
html.modo-toque #series-modal-inner .sd-episodes-row > * + * { margin-top: 8px; }
html.modo-toque #series-modal-inner .episode-card {
width: 100%;
flex: none;
display: flex;
flex-direction: row;
align-items: stretch;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
html.modo-toque #series-modal-inner .episode-card-thumb-wrap {
/* padding-top em % (truque 16:9 da regra base) calcula pela largura do
CONTAINING BLOCK — aqui o .episode-card (linha inteira, quase full
width) — não pela largura própria de 150px definida abaixo. Herdar o
padding-top:56.25% da regra base junto com este width:150px fazia a
thumb ficar altíssima (56% da linha toda, não de 150px). Altura fixa
nos 16:9 corretos pra 150px em vez do truque percentual. */
width: 150px;
height: 84px;
padding-top: 0;
flex-shrink: 0;
}
html.modo-toque #series-modal-inner .episode-card-title {
height: auto;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
padding: 8px 14px;
font-size: 14px;
-webkit-line-clamp: 2;
}
html.modo-toque #series-modal-inner .episode-card-desc {
display: none;
}
/* Elenco por extenso já aparece na ficha (linha "Elenco:") — aqui, dentro
da grid de 2x2 da tela de episódios, é um 5º item sem área definida
(cairia solto fora do layout). !important porque o JS seta
style.display='block' inline ao carregar o elenco (ver onVodDetail
.../abrirSeriesDetailScreen em app.js) — inline sempre vence CSS comum. */
html.modo-toque #series-modal-inner .series-cast-footer {
display: none !important;
}
/* ============================================================
SETAS DE ROLAGEM DAS FILEIRAS (só no PC)
Ver windows-ui.js. Na TV a navegação é por D-pad e nunca precisou disto;
no mouse não havia como andar na horizontal a não ser pela roda, que
ninguém adivinha numa fileira deitada.
============================================================ */
/* O invólucro é só referência de posicionamento — não pode virar contexto de
empilhamento nem cortar nada, senão a borda de foco das capas (que vaza
alguns px pra fora) apareceria recortada. */
.win-row-wrap {
position: relative;
}
.win-row-arrow {
position: absolute;
/* Botao compacto centralizado na fileira, nao uma barra da altura toda:
ocupando de topo a base ele cobria capa demais. */
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
/* Quadrada de proposito: o resto da interface e reto (capas, cards de
episodio, abas de temporada), uma pilula arredondada aqui destoaria. */
border-radius: 2px;
background: rgba(10, 10, 10, 0.75);
color: #fff;
cursor: pointer;
/* Acima das capas, abaixo de modal/player (z-index 9500+). */
z-index: 40;
opacity: 0;
transition: opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.win-row-arrow-esq { left: 0; }
.win-row-arrow-dir { right: 0; }
/* Só aparecem quando o mouse está na fileira — em repouso a tela fica limpa,
igual à da TV. */
.win-row-wrap:hover .win-row-arrow { opacity: 1; }
.win-row-arrow:hover {
background: #ffffff;
color: #000000;
}
/* Clicar num