/* NovelaFox — player de vídeo vertical (9:16). */
[data-player] { --tv-fundo: #1A120C; --tv-texto: #FFF4EA; --tv-mudo: #CBB6A6; }
.fx-sala__tela { --tv-h: calc(var(--fx-vvh, 100dvh) - var(--topo) - 36px); }
@media (max-width: 899px) { .fx-sala__tela { --tv-h: min(calc(var(--fx-vvh, 100dvh) - var(--topo) - 54px), calc(100vw * 16 / 9)); } }

/* Player embutido na página da novela (obras de vídeo único). */
.fx-obra__topo--tv { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.fx-obra__tv { --tv-h: min(calc(var(--fx-vvh, 100dvh) - var(--topo) - 110px), 720px); display: grid; place-items: center; border-radius: var(--r-g); overflow: hidden; background: var(--tv-fundo); box-shadow: var(--sombra-forte); border: 5px solid #fff; }
.fx-obra__tv .fx-tv__palco { width: calc(var(--tv-h) * .5625); max-width: 100%; }
@media (max-width: 760px) {
  .fx-obra__topo--tv { grid-template-columns: 1fr; gap: 0; }
  .fx-obra__topo--tv .fx-obra__info { display: contents; }
  .fx-obra__topo--tv :is(.fx-obra__tipo, .fx-obra__titulo) { order: -2; }
  .fx-obra__topo--tv .fx-obra__titulo { margin-bottom: 12px; }
  .fx-obra__topo--tv .fx-obra__tv { order: -1; margin: 0 calc(-1 * var(--lado)) 14px; border-radius: 0; border: 0; --tv-h: min(calc(var(--fx-vvh, 100dvh) * .72), calc(100vw * 16 / 9)); }
}

.fx-tv__palco { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; touch-action: none; container-type: inline-size;
  width: min(100%, calc(var(--tv-h, 80vh) * .5625)); aspect-ratio: 9 / 16; max-height: var(--tv-h, 80vh); background: #000; color: var(--tv-texto); }
.fx-tv__video { width: 100%; height: 100%; object-fit: contain; background: #000; -webkit-touch-callout: none; font-size: clamp(.75rem, 3cqw, 1.1rem); }
.fx-tv__video::cue { color: #fff; background: rgb(0 0 0 / 78%); line-height: 1.3; }
.fx-tv__poster { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .4s; }
.fx-tv__poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-tv__poster-fundo { object-fit: cover; filter: blur(26px) brightness(.5); transform: scale(1.2); }
.fx-tv__poster-img { object-fit: contain; }
[data-player]:not(.is-idle) .fx-tv__poster, [data-player]:not(.is-idle) .fx-tv__convite { opacity: 0; }
[data-player].is-idle .fx-tv-cromo, [data-player].is-idle .fx-tv__sombra--cima { opacity: 0; pointer-events: none; }
[data-player].is-idle .fx-tv-cromo > * { pointer-events: none; }
.fx-tv__convite { position: absolute; z-index: 3; bottom: 26%; font-weight: 800; text-shadow: 0 2px 10px #000; transition: opacity .3s; }
.fx-tv__sombra { position: absolute; inset-inline: 0; z-index: 1; pointer-events: none; transition: opacity .3s; }
.fx-tv__sombra--cima { top: 0; height: 22%; background: linear-gradient(rgb(0 0 0 / 55%), transparent); }
.fx-tv__sombra--baixo { bottom: 0; height: 34%; background: linear-gradient(transparent, rgb(0 0 0 / 72%)); }

.fx-tv__btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; border: 0; background: rgb(255 255 255 / 12%); color: var(--tv-texto); cursor: pointer; backdrop-filter: blur(8px); flex-shrink: 0; font: 800 .78rem var(--f-texto); }
.fx-tv__btn:hover { background: rgb(255 255 255 / 22%); }
.fx-tv__btn .fx-ico { width: 20px; height: 20px; }
.fx-tv__btn--play { width: 50px; height: 50px; border-radius: 16px; background: var(--raposa); }
.fx-tv__btn--play:hover { background: #FF6F1C; }
.fx-tv__btn--play .fx-ico { fill: currentColor; }
.fx-tv__btn[aria-pressed="true"] { background: var(--raposa); }

.fx-tv__central { position: absolute; z-index: 3; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 26px; border: 0; background: var(--raposa); color: #fff; cursor: pointer; box-shadow: 0 10px 40px rgb(0 0 0 / 45%); }
.fx-tv__central .fx-ico { width: 32px; height: 32px; margin-left: 4px; fill: currentColor; }

.fx-tv-cromo { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .3s; }
.fx-tv-cromo > * { pointer-events: auto; }
.fx-sem-controles .fx-tv-cromo, .fx-sem-controles .fx-tv__sombra { opacity: 0; }
.fx-sem-controles .fx-tv-cromo > * { pointer-events: none; }
.fx-sem-controles .fx-tv-cromo:focus-within { opacity: 1; }
.fx-sem-controles .fx-tv-cromo:focus-within > * { pointer-events: auto; }
.has-track-menu .fx-tv-cromo, .is-switching .fx-tv-cromo { opacity: 1; }
.has-track-menu .fx-tv__palco { touch-action: pan-y; }

.fx-tv__cabeca { position: absolute; top: env(safe-area-inset-top); inset-inline: 0; display: flex; align-items: center; gap: 12px; padding: 16px 14px; }
.fx-tv__nome { flex: 1; min-width: 0; }
.fx-tv__nome h1 { font: 800 .98rem/1.3 var(--f-titulo); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 10px #000; }
.fx-tv__nome p { font-size: .78rem; color: var(--tv-mudo); font-weight: 700; }
@media (min-width: 900px) { .fx-tv__cabeca [data-acao="voltar"] { display: none; } }

.fx-tv-controles { position: absolute; bottom: 0; inset-inline: 0; display: grid; gap: 4px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
.fx-tv__linha { position: relative; height: 34px; display: flex; align-items: center; }
.fx-tv__trilho { position: absolute; inset-inline: 0; height: 5px; border-radius: 5px; overflow: hidden; background: rgb(255 255 255 / 22%); pointer-events: none; }
.fx-tv__buffer, .fx-tv__cheio { position: absolute; inset: 0; transform: scaleX(var(--progress, 0)); transform-origin: left; }
.fx-tv__buffer { background: rgb(255 255 255 / 30%); }
.fx-tv__cheio { background: var(--raposa); }
.fx-tv__busca { position: relative; z-index: 1; width: 100%; height: 34px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.fx-tv__busca::-webkit-slider-runnable-track { height: 5px; background: transparent; }
.fx-tv__busca::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: #fff; border: 3px solid var(--raposa); }
.fx-tv__busca::-moz-range-track { height: 5px; background: transparent; }
.fx-tv__busca::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--raposa); }
.fx-tv__barra { display: flex; flex-direction: column; gap: 6px; }
.fx-tv__tempo { font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px #000; padding-inline: 2px; }
.fx-tv__botoes { display: flex; align-items: center; justify-content: center; gap: 6px; }
@container (max-width: 380px) { .fx-tv__botoes { gap: 3px; } .fx-tv__btn { width: 38px; height: 38px; } .fx-tv__btn--play { width: 46px; height: 46px; } }

.fx-volume { position: relative; }
.fx-volume__barra { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 6px; padding: 12px 8px; border-radius: 12px; background: rgb(26 18 12 / 92%); opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; }
.fx-volume:hover .fx-volume__barra, .fx-volume:focus-within .fx-volume__barra, .fx-volume.is-open .fx-volume__barra { opacity: 1; pointer-events: auto; translate: -50% 0; }
.fx-volume__range { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 96px; accent-color: var(--raposa); }
html.is-ios .fx-volume__barra { display: none; }

.fx-tv-mini { position: absolute; inset: auto 0 env(safe-area-inset-bottom, 0); z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; }
.fx-tv-mini-trilho { height: 3px; background: rgb(255 255 255 / 18%); }
.fx-tv-mini-fill { display: block; height: 100%; background: var(--raposa); transform: scaleX(var(--progress, 0)); transform-origin: left; }
.fx-sem-controles .fx-tv-mini { opacity: 1; visibility: visible; transition: opacity .2s .3s; }

.fx-tv__carregando { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.fx-tv__carregando span { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgb(255 255 255 / 20%); border-top-color: var(--raposa); animation: fx-gira .8s linear infinite; }
@keyframes fx-gira { to { rotate: 360deg; } }

.fx-tv__menu { position: absolute; z-index: 6; inset-inline: 12px; bottom: calc(118px + env(safe-area-inset-bottom)); max-height: min(40%, 320px); overflow-y: auto; padding: 6px; border-radius: 16px; background: rgb(26 18 12 / 95%); box-shadow: 0 12px 40px rgb(0 0 0 / 50%); overscroll-behavior: contain; }
.fx-tv__menu button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 11px; background: none; color: var(--tv-texto); text-align: left; font-weight: 700; cursor: pointer; }
.fx-tv__menu button[aria-checked="true"] { background: rgb(240 98 15 / 30%); }
.fx-tv__menu button[aria-checked="true"]::after { content: "✓"; }
.fx-tv__menu button[aria-disabled="true"] { color: var(--tv-mudo); cursor: not-allowed; }
.fx-menu-estado { grid-column: 1 / -1; font-size: .72rem; font-weight: 600; color: var(--tv-mudo); }
.fx-menu-estado:empty { display: none; }
.fx-tv__trocando { display: none; position: absolute; z-index: 4; top: 24%; padding: 8px 14px; border-radius: 99px; background: rgb(26 18 12 / 90%); font-size: .8rem; font-weight: 700; }
.is-switching .fx-tv__trocando { display: block; }

.fx-tv__aviso { position: absolute; z-index: 5; inset-inline: 16px; top: 26%; display: grid; justify-items: center; gap: 10px; padding: 20px 16px; border-radius: 20px; text-align: center; background: rgb(26 18 12 / 94%); box-shadow: 0 16px 50px rgb(0 0 0 / 50%); font-size: .9rem; }
.fx-tv__aviso-titulo { font: 800 1.15rem var(--f-titulo); }
.fx-tv__aviso-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fx-tv__aviso .fx-btn--ghost { --fg: var(--tv-texto); }
.fx-playback-stopped video { filter: brightness(.3); }
.fx-playback-stopped .fx-tv__aviso { z-index: 7; max-height: 64%; overflow-y: auto; }

.fx-prox { position: absolute; z-index: 5; inset-inline: 16px; bottom: 150px; display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: rgb(26 18 12 / 95%); border: 1.5px solid var(--raposa); }
.fx-prox__sobe { display: flex; align-items: center; gap: 10px; }
.fx-prox-capa img { width: 44px; height: 66px; object-fit: cover; border-radius: 8px; }
.fx-prox-titulo { font-weight: 800; }
.fx-prox__medidor { height: 4px; border-radius: 4px; background: rgb(255 255 255 / 18%); overflow: hidden; }
.fx-prox__medidor span { display: block; height: 100%; width: 100%; background: var(--raposa); transform-origin: left; }
.fx-prox.is-rising .fx-prox__medidor span { animation: fx-esvazia 2s linear forwards; }
@keyframes fx-esvazia { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.fx-prox__espera { font-size: .82rem; color: var(--tv-mudo); }
.fx-prox__acoes { display: flex; gap: 8px; justify-content: flex-end; }
.fx-prox .fx-btn--ghost { --fg: var(--tv-texto); }

.fx-tv__fim { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; background: rgb(26 18 12 / 92%); }
.fx-tv__fim-titulo { font: 800 2rem var(--f-titulo); color: var(--ambar); }

.fx-watermark { position: absolute; z-index: 8; opacity: .45; font: 700 12px/1.3 var(--f-texto); letter-spacing: .06em; color: #fff; text-shadow: 0 0 3px #000, 0 1px 4px #000; pointer-events: none; user-select: none; }
.fx-watermark--0 { top: 18%; left: 8%; } .fx-watermark--1 { top: 18%; right: 8%; } .fx-watermark--2 { bottom: 28%; right: 8%; } .fx-watermark--3 { bottom: 28%; left: 8%; } .fx-watermark--4 { bottom: 24%; left: 50%; translate: -50% 0; }
.fx-hold-speed { position: absolute; z-index: 6; top: 22%; left: 50%; translate: -50% 0; padding: 6px 14px; border-radius: 99px; background: var(--raposa); color: #fff; font-weight: 800; font-size: .85rem; pointer-events: none; }
.fx-gesture-feedback { position: absolute; z-index: 6; left: var(--fx-feedback-x, 50%); top: var(--fx-feedback-y, 50%); translate: -50% -50%; pointer-events: none; color: #fff; font: 800 1.3rem var(--f-texto); text-shadow: 0 2px 8px #000; }
.fx-gesture-feedback .fx-ico { width: 60px; height: 60px; fill: currentColor; }
.fx-cap-up .fx-tv__video { animation: fx-cap-sobe .35s ease-out; }
.fx-cap-down .fx-tv__video { animation: fx-cap-desce .35s ease-out; }
@keyframes fx-cap-sobe { from { transform: translateY(8%); opacity: .3; } }
@keyframes fx-cap-desce { from { transform: translateY(-8%); opacity: .3; } }

/* Celular em tela cheia "falsa" (iPhone não deixa o vídeo ficar em tela cheia dentro da página). */
html.is-ios:has(.fx-sala) .fx-sala__tela { overscroll-behavior: none; }
html.is-ios-fill, html.is-ios-fill body { overflow: hidden; height: var(--fx-vvh, 100dvh); background: #000; }
html.is-ios-fill .fx-abas, html.is-ios-fill .fx-topo { display: none; }
html.is-ios-fill .fx-sala__tela { position: fixed; inset: 0; z-index: 70; height: var(--fx-vvh, 100dvh); border-radius: 0; --tv-h: var(--fx-vvh, 100dvh); }
html.is-ios-fill .fx-tv__palco.is-ios-fill { width: 100%; max-height: none; height: 100%; aspect-ratio: auto; }
html.is-android:has(.fx-sala) .fx-tv__video { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fx-tv__palco:fullscreen { width: 100%; max-height: none; height: 100%; aspect-ratio: auto; }

@media (prefers-reduced-motion: reduce) { .fx-tv__carregando span { animation-duration: 2s; } }
