/* REI TV — Smart TV (Samsung/LG). Tela fixa de 1920x1080, escalada para a TV. */
@font-face { font-family: Inter; font-weight: 400; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; src: url(fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; src: url(fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 800; src: url(fonts/inter-latin-800-normal.woff2) format('woff2'); }

html, body { margin: 0; height: 100%; background: #0A0A0F; overflow: hidden; }
body { font-family: Inter, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; cursor: none; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0A0A0F; transform-origin: 0 0; }
.screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 1920px; height: 1080px; }
.hidden { display: none !important; }
.sub { color: #9A9AA6; }
h1, h2, h3, p { margin: 0; }

.brandbar { position: absolute; left: 74px; top: 40px; display: flex; align-items: center; z-index: 3; }
.brandbar b { margin-left: 12px; }
.brandbar img { width: 54px; height: 54px; }
.brandbar b { font-size: 38px; font-weight: 800; }
.brandbar.small img { width: 46px; height: 46px; }
.brandbar.small b { font-size: 32px; }

/* ------------------------------------------------ início (perfis) */
#home { background: radial-gradient(90% 90% at 85% 15%, #3B2172 0%, #14091F 45%, #0A0A0F 75%); }
#homeTitle { position: absolute; top: 250px; width: 100%; text-align: center; font-size: 64px; font-weight: 800; }
#homeSub { position: absolute; top: 345px; width: 100%; text-align: center; font-size: 28px; }
.profiles { position: absolute; top: 420px; left: 0; width: 1920px; display: flex; justify-content: center; transition: transform .2s; }
.profile + .profile { margin-left: 56px; }
.profile { width: 220px; text-align: center; }
.profile .av { position: relative; width: 220px; height: 220px; border-radius: 22px; overflow: hidden; background: #1C1C24; transition: transform .15s; }
.profile .av img { width: 100%; height: 100%; display: block; }
.profile .plus { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 120px; color: #C8C8D0; font-weight: 400; }
.profile .edit { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; font-size: 64px; }
.profile .name { margin-top: 18px; font-size: 28px; font-weight: 600; color: #8A8A96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile.focus .av { transform: scale(1.08); box-shadow: 0 0 0 6px #fff; }
.profile.focus .name { color: #fff; }
.homebtns { position: absolute; top: 760px; width: 100%; display: flex; justify-content: center; }
.homebtns .pill + .pill { margin-left: 24px; }
.pill { height: 64px; padding: 0 30px; border-radius: 32px; background: rgba(255,255,255,.12); color: #C8C8D0; display: flex; align-items: center; font-size: 26px; font-weight: 600; }
.pill .ic-edit { margin-right: 12px; }
.pill.focus { background: #fff; color: #0A0A0F; }
.ic-edit::before { content: '✎'; }
.code { position: absolute; left: 110px; top: 948px; }
.code small { display: block; color: #8A8A96; font-size: 18px; font-weight: 600; }
.code b { font-size: 48px; font-weight: 800; color: #F7D27A; letter-spacing: 2px; }
.homeinfo { position: absolute; left: 460px; top: 952px; width: 1360px; font-size: 24px; color: #C8C8D0; line-height: 1.4; }

/* ------------------------------------------------ navegação */
.ambient { position: absolute; top: -60px; left: -60px; right: -60px; bottom: -60px; background-size: cover; background-position: center; filter: blur(60px); opacity: .5; }
.backdrop { position: absolute; left: 560px; top: 0; width: 1360px; height: 765px; background-size: cover; background-position: center top; }
.backdrop.full { left: 0; width: 1920px; height: 1080px; }
.herologo { position: absolute; left: 1180px; top: 150px; width: 560px; height: 315px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.shade-hero { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, #0A0A0F 0%, rgba(10,10,15,.92) 30%, rgba(10,10,15,.35) 60%, rgba(10,10,15,.1) 100%), linear-gradient(0deg, #0A0A0F 0%, rgba(10,10,15,.85) 42%, rgba(10,10,15,0) 70%), linear-gradient(180deg, rgba(10,10,15,.7) 0%, rgba(10,10,15,0) 18%); }
.tabs { position: absolute; left: 480px; top: 36px; display: flex; z-index: 3; }
.tab + .tab { margin-left: 12px; }
.tab { height: 56px; padding: 0 26px; border-radius: 28px; display: flex; align-items: center; font-size: 26px; font-weight: 600; color: #9A9AA6; }
.tab img { margin-right: 12px; }
.tab.active { background: rgba(255,255,255,.16); color: #fff; }
.tab.focus { background: #fff; color: #0A0A0F; }
.tab img { width: 26px; height: 26px; }
.tab.focus img { filter: invert(1); }
.hero { position: absolute; left: 80px; top: 170px; width: 1080px; z-index: 2; }
.badge { display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; border-radius: 19px; background: #E53935; font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.badge.top { background: #F5C04A; color: #0A0A0F; }
.hero h2 { font-size: 64px; font-weight: 800; line-height: 1.1; max-height: 142px; overflow: hidden; }
.meta { margin-top: 14px; font-size: 26px; font-weight: 600; color: #F7D27A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desc { margin-top: 14px; width: 900px; font-size: 26px; line-height: 1.45; color: #C8C8D0; max-height: 114px; overflow: hidden; }
.credits { margin-top: 10px; width: 900px; font-size: 22px; color: #8A8A96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowswrap { position: absolute; left: 0; top: 560px; width: 1920px; height: 520px; overflow: hidden; z-index: 2; }
.rows { position: absolute; left: 0; top: 0; width: 1920px; transition: transform .22s ease-out; }
.row { position: relative; height: 434px; }
.row.live, .row.episode { height: 284px; }
.row h4 { margin: 0 0 16px 80px; font-size: 28px; font-weight: 600; height: 36px; }
.track { position: relative; height: 380px; transition: transform .22s ease-out; }
.card { position: absolute; top: 12px; width: 220px; height: 330px; border-radius: 10px; background: #1C1C24; overflow: hidden; transition: transform .15s; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .fallback { position: absolute; top: 16px; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px; font-weight: 800; color: #E8E8EE; overflow: hidden; }
.card.focus { transform: scale(1.08); box-shadow: 0 0 0 5px #fff; z-index: 2; }
.card.live, .card.episode { width: 320px; height: 180px; }
.card.live img { position: absolute; left: 24px; top: 14px; width: calc(100% - 48px); height: calc(100% - 68px); object-fit: contain; }
.card .cap { position: absolute; left: 18px; right: 18px; bottom: 10px; font-size: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.card.episode .cap { text-align: left; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); left: 0; right: 0; bottom: 0; padding: 30px 18px 12px; }
.card.more .fallback { color: #F5C04A; line-height: 1.5; }
.card.rank { background: none; overflow: visible; width: 340px; }
.card.rank .num { position: absolute; left: -10px; bottom: -24px; width: 150px; text-align: right; font-size: 250px; font-weight: 800; line-height: 1; color: #0E0B14; -webkit-text-stroke: 4px #8A8A96; letter-spacing: -14px; }
.card.rank .poster { position: absolute; left: 120px; top: 0; width: 220px; height: 330px; border-radius: 10px; overflow: hidden; background: #1C1C24; }
.card.rank.focus { box-shadow: none; transform: none; }
.card.rank.focus .poster { transform: scale(1.08); box-shadow: 0 0 0 5px #fff; }
.empty { position: absolute; left: 80px; top: 600px; width: 1700px; font-size: 28px; color: #9A9AA6; }

/* ------------------------------------------------ ver mais */
#grid { background: radial-gradient(90% 90% at 85% 15%, #2B1752 0%, #0A0A0F 60%); }
.gridtitle { position: absolute; left: 80px; top: 110px; font-size: 52px; font-weight: 800; }
.gridcount { position: absolute; left: 80px; top: 184px; font-size: 26px; }
.gridwrap { position: absolute; left: 0; top: 250px; width: 1920px; height: 830px; overflow: hidden; }
.griditems { position: absolute; left: 80px; top: 10px; transition: transform .2s ease-out; }
.griditems .card { position: absolute; }

/* ------------------------------------------------ detalhes */
.dinfo { position: absolute; left: 80px; top: 150px; width: 1150px; z-index: 2; }
.dinfo h2 { font-size: 72px; font-weight: 800; line-height: 1.1; max-height: 160px; overflow: hidden; }
.playbtn { display: inline-block; margin-top: 28px; height: 72px; line-height: 72px; padding: 0 44px; border-radius: 36px; background: rgba(255,255,255,.18); font-size: 28px; font-weight: 800; }
.playbtn.focus { background: #fff; color: #0A0A0F; }
.episodeswrap { position: absolute; left: 0; top: 690px; width: 1920px; height: 390px; overflow: hidden; z-index: 2; }

/* ------------------------------------------------ player */
#player { background: #000; }
#player video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 1920px; height: 1080px; background: #000; }
.osd { position: absolute; left: 0; right: 0; bottom: 0; height: 420px; padding: 0 80px; background: linear-gradient(0deg, rgba(0,0,0,.9), transparent); box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 60px; }
.osdnum { font-size: 24px; font-weight: 600; color: #F7D27A; }
.osd h3 { font-size: 52px; font-weight: 800; margin: 8px 0 12px; }
.osd .sub { font-size: 22px; }
.playermsg { position: absolute; left: 160px; right: 160px; top: 440px; text-align: center; font-size: 30px; line-height: 1.5; color: #fff; background: rgba(0,0,0,.6); padding: 30px; border-radius: 16px; }
.guide { position: absolute; left: 0; top: 0; width: 1300px; height: 1080px; background: linear-gradient(90deg, rgba(5,4,10,.97) 0%, rgba(5,4,10,.92) 75%, rgba(5,4,10,0) 100%); }
.guidehead { position: absolute; left: 70px; top: 64px; font-size: 20px; font-weight: 600; color: #F7D27A; }
.guidetitle { position: absolute; left: 490px; top: 52px; width: 640px; font-size: 36px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guidelist { position: absolute; top: 110px; height: 870px; overflow: hidden; }
.guidelist .in { transition: transform .15s; }
.guidelist.cats { left: 60px; width: 390px; }
.guidelist.chans { left: 480px; width: 680px; }
.gitem { height: 58px; line-height: 58px; padding: 0 22px; border-radius: 29px; font-size: 26px; font-weight: 600; color: #9A9AA6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chans .gitem { color: #C8C8D0; font-size: 28px; }
.gitem.active { color: #F7D27A; }
.gitem.focus { background: #fff; color: #0A0A0F; }
.gitem.dim { background: rgba(255,255,255,.12); color: #fff; }
.guidehint { position: absolute; left: 70px; top: 1020px; font-size: 22px; color: #8A8A96; }

/* ------------------------------------------------ janelas */
.modal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(7,4,12,.88); z-index: 20; display: flex; align-items: center; justify-content: center; }
.box { min-width: 760px; max-width: 1200px; background: #1C1528; border-radius: 24px; padding: 48px 56px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.box h3 { font-size: 42px; font-weight: 800; margin-bottom: 12px; }
.box .msg { font-size: 26px; color: #C8C8D0; margin-bottom: 30px; line-height: 1.4; }
.opt { height: 70px; line-height: 70px; padding: 0 30px; margin-top: 10px; border-radius: 14px; font-size: 28px; font-weight: 600; color: #C8C8D0; background: rgba(255,255,255,.06); }
.opt.focus { background: #fff; color: #0A0A0F; }
.box input { width: 100%; box-sizing: border-box; height: 76px; font: 600 30px Inter, sans-serif; padding: 0 24px; border-radius: 14px; border: 3px solid #3A2A4E; background: #0B0612; color: #fff; outline: none; }
.box input.focus, .box input:focus { border-color: #F5C04A; }
.box .row2 { display: flex; margin-top: 20px; }
.box .row2 .opt + .opt { margin-left: 16px; }
.box .row2 .opt { flex: 1; text-align: center; margin: 0; }
.avgrid { display: flex; flex-wrap: wrap; width: 1300px; margin-top: 10px; }
.avgrid img { margin: 0 44px 44px 0; }
.avgrid img:nth-child(6n) { margin-right: 0; }
.avgrid img { width: 180px; height: 180px; border-radius: 18px; display: block; transition: transform .15s; }
.avgrid img.focus { transform: scale(1.08); box-shadow: 0 0 0 6px #fff; }
.qrbox { display: flex; align-items: center; }
.qrtext { margin-left: 60px; }
.qrimg { width: 460px; height: 460px; background: #fff; border-radius: 16px; padding: 20px; box-sizing: content-box; display: flex; align-items: center; justify-content: center; color: #120A1B; font-size: 26px; font-weight: 600; text-align: center; }
.qrimg img { width: 460px; height: 460px; }
.qrtext { width: 700px; }
.qrtext h3 { font-size: 52px; }
.qrtext ol { margin: 20px 0 0; padding-left: 36px; font-size: 28px; color: #C8C8D0; line-height: 1.7; }
.qrlink { margin-top: 26px; font-size: 24px; font-weight: 600; color: #F5C04A; word-break: break-all; }
.qrstatus { margin-top: 18px; font-size: 24px; color: #8A8A96; }

/* ------------------------------------------------ assinatura (paywall) */
.box.pay { min-width: 820px; max-width: 1280px; text-align: center; }
.paycrown { margin: 0 auto 6px; width: 110px; height: 110px; }
.paycrown img { width: 110px; height: 110px; display: block; }
.box.pay h3 { font-size: 46px; }
.box.pay .msg { margin-bottom: 26px; }
.paybody { display: flex; align-items: center; justify-content: center; gap: 56px; text-align: left; }
.pixside { flex: none; }
.pixqr { width: 420px; height: 420px; background: #fff; border-radius: 16px; padding: 18px; box-sizing: content-box; display: flex; align-items: center; justify-content: center; color: #120A1B; font-size: 24px; font-weight: 600; text-align: center; }
.pixqr.loading { color: #120A1B; }
img.pixqr { padding: 18px; }
.paytext { width: 640px; }
.paytext ol { margin: 0 0 20px; padding-left: 34px; font-size: 27px; color: #C8C8D0; line-height: 1.7; }
.paytext p { font-size: 27px; color: #C8C8D0; line-height: 1.5; }
.pixcopy { margin-top: 14px; }
.pixcode { display: block; font-size: 18px; color: #8A8A96; word-break: break-all; background: #0B0612; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; max-height: 92px; overflow: hidden; }
.pixcopy .opt { text-align: center; }
.paycode { font-size: 64px; font-weight: 800; letter-spacing: 10px; color: #F5C451; margin: 14px 0; text-align: center; }

.toast { position: absolute; right: 80px; bottom: 30px; height: 54px; line-height: 54px; padding: 0 30px; border-radius: 27px; background: #23232D; color: #F5C451; font-size: 24px; font-weight: 600; z-index: 30; }

/* ------------------------------------------------ abertura: coroa, reflexo e nome */
.intro { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0B0612; z-index: 50; display: flex; align-items: center; justify-content: center; transition: opacity .35s; }
.intro.out { opacity: 0; }
.intrologo { display: flex; align-items: center; }
.introcrown { position: relative; width: 220px; height: 220px; opacity: 0; transform: translateX(var(--shift, 0px)) scale(.9); }
.introcrown img { width: 220px; height: 220px; display: block; }
.shine { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-mask-image: url(img/crown.png); mask-image: url(img/crown.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%); background-size: 300% 100%; background-position: 100% 0; }
.introname { margin-left: -14px; font-size: 124px; font-weight: 800; letter-spacing: -2px; opacity: 0; transform: translateX(calc(var(--shift, 0px) - 30px)); }
.introname span { color: #F5C04A; }
.intro.play .introcrown { animation: crownIn .42s ease-out forwards, crownSlide .52s .78s cubic-bezier(.2,0,0,1) forwards; }
.intro.play .shine { animation: shine .5s .42s linear forwards; }
.intro.play .introname { animation: nameIn .52s .82s cubic-bezier(.2,0,0,1) forwards; }
@keyframes crownIn { to { opacity: 1; transform: translateX(var(--shift, 0px)) scale(1); } }
@keyframes crownSlide { from { opacity: 1; transform: translateX(var(--shift, 0px)); } to { opacity: 1; transform: translateX(0); } }
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes nameIn { to { opacity: 1; transform: translateX(0); } }

/* ------------------------------------------------ complementos */
.card img { position: absolute; top: 0; left: 0; }
.card .fallback small { display: block; font-size: 22px; font-weight: 600; color: #C8C8D0; }
.card.live.more .fallback { font-size: 30px; }
.rowmsg { margin: 0 0 0 80px; height: 180px; line-height: 120px; font-size: 24px; color: #8A8A96; }
.intro.static .introcrown, .intro.static .introname { opacity: 1; -webkit-transform: none; transform: none; }
.row h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 1700px; }
.playermsg { white-space: pre-line; }
.card .fallback { -webkit-flex-direction: column; flex-direction: column; }
.osd .sub, .guidehint { white-space: pre; }

/* ------------------------------------------------ versão web (mouse e toque) */
body.web { cursor: default; }
body.web .profile, body.web .pill, body.web .tab, body.web .card, body.web .opt, body.web .playbtn, body.web .gitem, body.web .avgrid img, body.web video { cursor: pointer; }
.webback { position: absolute; right: 40px; top: 28px; width: 72px; height: 72px; line-height: 68px; text-align: center; border-radius: 36px; background: rgba(255,255,255,.14); color: #fff; font-size: 40px; font-weight: 600; z-index: 40; cursor: pointer; }
.webback:hover { background: #fff; color: #0A0A0F; }
body.web .card:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
body.web .card.rank:hover { box-shadow: none; }
.card .prog { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.card .prog i { display: block; height: 100%; background: #F5C04A; }
.card.lockcard { background: #1C1528; }
.card.lockcard .fallback { font-size: 54px; line-height: 1.2; }
.card.lockcard .fallback small { font-size: 20px; }
.dbtns { display: flex; margin-top: 28px; }
.dbtns .playbtn { margin-top: 0; }
.dbtns .playbtn + .playbtn { margin-left: 18px; }
.osdepg { font-size: 24px; color: #E8E8EE; margin: -4px 0 12px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.guideepg { position: absolute; left: 490px; top: 990px; width: 760px; font-size: 22px; color: #F7D27A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------ episódios (estilo Netflix) */
.dscroll { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; z-index: 2; transition: transform .28s ease-out; }
#detail .dimmer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,10,15,.82); opacity: 0; transition: opacity .28s; z-index: 1; }
#detail.eps .dimmer { opacity: 1; }
.epspanel { position: absolute; left: 80px; top: 690px; width: 1760px; }
.epshead { position: relative; height: 84px; }
.epshead h3 { position: absolute; left: 0; top: 14px; font-size: 40px; font-weight: 800; }
.seasonbtn { position: absolute; right: 0; top: 0; height: 68px; line-height: 68px; padding: 0 64px 0 30px; min-width: 200px; border-radius: 10px; background: #242029; border: 2px solid #4A4452; font-size: 28px; font-weight: 600; color: #fff; }
.seasonbtn i { position: absolute; right: 24px; top: 0; font-style: normal; font-size: 24px; color: #C8C8D0; }
.seasonbtn.focus { background: #fff; color: #0A0A0F; border-color: #fff; }
.seasonbtn.focus i { color: #0A0A0F; }
.epslistwrap { position: relative; height: 860px; overflow: hidden; margin-top: 10px; }
.epslist { position: absolute; left: 0; top: 0; width: 1760px; transition: transform .2s ease-out; }
.eprow { position: absolute; left: 0; width: 1760px; height: 186px; border-radius: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.eprow.focus { background: #2A2731; border-bottom-color: transparent; }
.eprow .epnum { position: absolute; left: 0; top: 0; width: 110px; line-height: 186px; text-align: center; font-size: 44px; font-weight: 600; color: #C8C8D0; }
.eprow .epthumb { position: absolute; left: 110px; top: 18px; width: 268px; height: 150px; border-radius: 8px; overflow: hidden; background: #1C1C24; }
.eprow .epthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eprow .epthumb .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 32px; border: 3px solid #fff; background: rgba(0,0,0,.45); text-align: center; line-height: 60px; font-size: 26px; display: none; }
.eprow.focus .epthumb .play { display: block; }
.eprow .epthumb .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.3); }
.eprow .epthumb .prog i { display: block; height: 100%; background: #E50914; background: #F5C04A; }
.eprow .eptitle { position: absolute; left: 410px; top: 26px; width: 1080px; font-size: 30px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eprow .epdur { position: absolute; right: 36px; top: 28px; font-size: 26px; font-weight: 600; color: #fff; }
.eprow .epdesc { position: absolute; left: 410px; top: 76px; width: 1300px; max-height: 96px; overflow: hidden; font-size: 23px; line-height: 1.4; color: #B8B8C2; }
.eprow .epdesc.none { color: #77737E; }
body.web .eprow, body.web .seasonbtn { cursor: pointer; }

/* ------------------------------------------------ títulos semelhantes (filmes) */
.recspanel { position: absolute; left: 0; top: 700px; width: 1920px; }
.recspanel h3 { margin-left: 80px; font-size: 36px; font-weight: 800; }
.recswrap { position: relative; height: 380px; overflow: hidden; margin-top: 8px; }
.recsrow { position: absolute; left: 0; top: 0; transition: transform .2s ease-out; }
.recinfo { margin: 0 0 0 80px; width: 1300px; opacity: 0; transition: opacity .2s; }
#detail.recs .recinfo { opacity: 1; }
.recinfo b { display: block; font-size: 34px; font-weight: 800; }
.recinfo .meta { display: block; margin-top: 6px; }
.recinfo p { margin-top: 10px; font-size: 24px; line-height: 1.45; color: #C8C8D0; max-height: 106px; overflow: hidden; }

/* ------------------------------------------------ detalhes no estilo Netflix */
.dinfo { top: 170px; width: 1060px; }
.dinfo h2 { font-size: 84px; letter-spacing: -1px; max-height: 190px; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.dbtns { display: flex; align-items: center; margin-top: 30px; }
.dbtns .playbtn { margin-top: 0; background: #fff; color: #0A0A0F; opacity: .9; }
.dbtns .playbtn.focus { opacity: 1; box-shadow: 0 0 0 5px rgba(255,255,255,.35); }
.roundbtn { margin-left: 18px; width: 72px; height: 72px; line-height: 66px; text-align: center; border-radius: 36px; border: 3px solid rgba(255,255,255,.7); background: rgba(42,42,46,.6); font-size: 44px; font-weight: 400; color: #fff; box-sizing: border-box; }
.roundbtn.on { font-size: 34px; }
.roundbtn.focus { background: #fff; color: #0A0A0F; border-color: #fff; }
.favhint { margin-left: 16px; font-size: 22px; font-weight: 600; color: #C8C8D0; opacity: 0; transition: opacity .15s; }
.favhint.show { opacity: 1; }
.dmeta { margin-top: 30px; font-size: 26px; color: #D8D8E0; white-space: nowrap; }
.dmeta .badge2 { display: inline-block; padding: 0 10px; height: 30px; line-height: 28px; border: 2px solid rgba(255,255,255,.5); border-radius: 6px; font-size: 18px; font-weight: 800; margin-left: 14px; vertical-align: 3px; }
.dmeta .star { color: #F7D27A; font-weight: 600; margin-left: 14px; }
.dmeta .sep { margin-left: 16px; }
.dinfo .desc { margin-top: 18px; width: 960px; max-height: 152px; font-size: 27px; }
.dside { position: absolute; left: 1220px; top: 470px; width: 620px; font-size: 22px; line-height: 1.5; color: #fff; }
.dside p { margin: 0 0 14px; max-height: 66px; overflow: hidden; }
.dside span { color: #8A8A96; }
#detail .shade-hero { background: linear-gradient(90deg, #0A0A0F 0%, rgba(10,10,15,.85) 32%, rgba(10,10,15,.2) 65%, rgba(10,10,15,0) 100%), linear-gradient(0deg, #0A0A0F 0%, #0A0A0F 22%, rgba(10,10,15,0) 62%); }
.recspanel { top: 720px; }
.epspanel { top: 720px; }

/* ------------------------------------------------ compatibilidade Samsung (Tizen)
   No Chromium da Tizen, cartões sem camada própria (sem transform) podem deixar de pintar o pôster.
   Todo cartão vira uma camada de composição; o focado continua com o zoom. */
.card, .card.rank .poster, .card.rank .num { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.card.focus { -webkit-transform: scale(1.08); transform: scale(1.08); }
.card.rank.focus { -webkit-transform: translateZ(0); transform: translateZ(0); }
.card.rank.focus .poster { -webkit-transform: scale(1.08); transform: scale(1.08); }
.card.rank .poster { z-index: 1; }
.card.rank .num { z-index: 0; }
.track, .rows { -webkit-transform-style: flat; }

/* ------------------------------------------------ player: controles, próximo episódio, painel de episódios */
.pctl { display: flex; margin: 4px 0 18px; }
.pbtn { display: flex; align-items: center; height: 64px; padding: 0 30px; margin-right: 16px; border-radius: 32px; background: rgba(255,255,255,.16); font-size: 26px; font-weight: 600; color: #E8E8EE; white-space: nowrap; }
.pbtn.focus { background: #fff; color: #0A0A0F; }
body.web .pbtn, body.web .nxt, body.web .sarr { cursor: pointer; }
.nextep { position: absolute; right: 80px; bottom: 170px; z-index: 6; }
.nxt { display: block; padding: 18px 40px; min-width: 360px; border-radius: 16px; background: #fff; color: #0A0A0F; font-size: 32px; font-weight: 800; box-shadow: 0 10px 40px rgba(0,0,0,.55); }
.nxt small { display: block; margin-top: 4px; font-size: 21px; font-weight: 600; color: #4A4A55; white-space: pre; }
.eppanel { position: absolute; left: 0; top: 0; width: 1100px; height: 1080px; z-index: 7; background: linear-gradient(90deg, rgba(5,4,10,.97) 0%, rgba(5,4,10,.93) 78%, rgba(5,4,10,0) 100%); }
.epseason { position: absolute; left: 70px; top: 168px; width: 900px; height: 56px; line-height: 56px; font-size: 26px; font-weight: 600; color: #F7D27A; }
.epseason .sarr { display: inline-block; width: 56px; height: 56px; border-radius: 28px; background: rgba(255,255,255,.14); text-align: center; color: #fff; font-size: 22px; }
.epseason .sname { display: inline-block; margin: 0 18px; }
.eplist { left: 60px; top: 250px; width: 940px; height: 800px; }
.eplist .gitem { color: #C8C8D0; font-size: 27px; }
.eplist .gitem.active { color: #F7D27A; }
.eplist .gitem.focus { background: #fff; color: #0A0A0F; }
body.web .eplist .gitem { cursor: pointer; }

/* Samsung: o Chromium da Tizen às vezes não pinta imagens dentro de caixa com cantos arredondados + overflow:hidden
   (só o cartão com zoom aparecia). Aqui o arredondamento passa para a própria imagem e a caixa não corta mais. */
body.tizen .card, body.tizen .card.rank .poster { overflow: visible; will-change: transform; }
body.tizen .card img { border-radius: 10px; }
body.tizen .card.live img, body.tizen .card.rank.live img { border-radius: 0; }