/* Celular (APK híbrido e ?mobile=1 no navegador): as telas de toque de js/mobile.js.
   Tudo aqui vale só com html.mobile; na TV este arquivo não muda nada.
   Mesmas cores da TV (fundo #0A0A0C, vermelho #E50914). Sem gap/inset/grid, como no resto do app (WebView antigo). */

html.mobile, html.mobile body { height: 100%; overflow: hidden; background: #0A0A0C; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
/* Vídeo tocando: o player do Android fica embaixo da página, então a página precisa ficar transparente (senão o vídeo fica preto). */
html.mobile.media-on, html.mobile body.media-on, html.mobile body.media-on #stage { background: transparent; }
html.mobile #stage { position: fixed; left: 0; top: 0; width: 100%; height: 100%; transform: none; font: 500 14px/1.4 "Figtree", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
html.mobile input { -webkit-user-select: text; user-select: text; }
html.mobile #topbar { display: none !important; }
html.mobile #screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
html.mobile.m-tabs #screen { bottom: 62px; }
html.mobile .focused { box-shadow: none !important; }
html.mobile [data-f] { transition: none; cursor: pointer; }
html.mobile h1, html.mobile h2 { font-family: "Sora", "Figtree", sans-serif; }
html.mobile .m-mut, html.mobile .muted { color: #A3A3AB; }
html.mobile .m-sp { -webkit-flex: 1; flex: 1; }
svg.mi { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; -webkit-flex: none; flex: none; }
svg.mi.f { fill: currentColor; stroke: none; }
html.mobile button { cursor: pointer; }

/* ---------- Barra de abas embaixo ---------- */
#m-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; z-index: 6; display: -webkit-flex; display: flex; background: #0F0F12; border-top: 1px solid rgba(255,255,255,.07); }
.m-tab { padding: 0; -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: #8E8E96; }
.m-tab .pill { width: 56px; height: 30px; border-radius: 15px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-bottom: 2px; }
.m-tab.on { color: #fff; }
.m-tab.on .pill { background: rgba(229,9,20,.2); color: #FF4D55; }

/* ---------- Página que rola e barra do app ---------- */
.m-page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 28px; background: #0A0A0C; }
.m-ab { position: -webkit-sticky; position: sticky; top: 0; z-index: 5; height: 58px; padding: 0 8px 0 16px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: #0A0A0C; }
.m-ab.over { position: absolute; left: 0; right: 0; background: linear-gradient(rgba(10,10,12,.7), rgba(10,10,12,0)); transition: background .2s; }
.m-ab.over.solid { position: fixed; background: #0A0A0C; }
.m-ab h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.m-ab .m-ib:first-child { margin-left: -8px; }
.m-ab-sub { font-size: 12.5px; color: #A3A3AB; margin: 4px 0 0 10px; white-space: nowrap; }
html.mobile .brand-logo.m-logo { max-height: 22px; max-width: 150px; }
.m-ib { padding: 0; width: 44px; height: 44px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #fff; -webkit-flex: none; flex: none; }
.m-ib.dark { background: rgba(10,10,12,.55); }
.m-ib.on { color: #FF4D55; }
.m-ib.on svg.mi { fill: currentColor; }
.m-ib.m-av .av { width: 32px; height: 32px; border-radius: 10px; }

/* ---------- Botões ---------- */
.m-btn { height: 48px; border-radius: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  font-weight: 700; font-size: 15px; padding: 0 18px; white-space: nowrap; color: #fff; }
.m-btn svg.mi { width: 20px; height: 20px; margin-right: 8px; }
.m-btn.red { background: #E50914; box-shadow: 0 6px 18px rgba(229,9,20,.32); }
.m-btn.dark { background: rgba(255,255,255,.12); }
.m-btn.line { border: 1.5px solid rgba(255,255,255,.22); }
.m-btn.sm { height: 38px; font-size: 13.5px; padding: 0 14px; border-radius: 10px; }
.m-btn.sm svg.mi { width: 17px; height: 17px; margin-right: 6px; }
.m-btn.off { opacity: .45; }
.m-btn.busy { opacity: .6; }
.m-btn.danger { border-color: rgba(239,68,68,.5); color: #FCA5A5; }
.m-cbtn { padding: 0; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.12); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex: none; flex: none; color: #fff; }
.m-cbtn.on { color: #FF4D55; }
.m-cbtn.on svg.mi { fill: currentColor; }
.m-actions { padding: 18px 16px 0; }
.m-actions .m-btn { width: 100%; }
.m-actions .m-btn + .m-btn { margin-top: 10px; }

/* ---------- Fichas (categorias) ---------- */
.m-chips { display: -webkit-flex; display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chips:after { content: ""; -webkit-flex: none; flex: none; width: 8px; }
.m-chip { height: 34px; padding: 0 14px; border-radius: 17px; background: #1E1E22; color: #DADADF; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  font-size: 13.5px; font-weight: 600; -webkit-flex: none; flex: none; margin-right: 8px; white-space: nowrap; }
.m-chip svg.mi { width: 16px; height: 16px; }
.m-chip svg.mi + span { margin-left: 6px; }
.m-chip .n { font-size: 11.5px; opacity: .65; font-weight: 700; margin-left: 6px; }
.m-chip.on { background: #fff; color: #0A0A0C; }
.m-chip.red { background: #E50914; color: #fff; }
.m-chip.redc { color: #FF6B72; }
.m-chip.redc.on { background: #E50914; color: #fff; }
.m-chip.ic { padding: 0 10px; }
.m-chip.big { height: 40px; font-size: 15px; font-weight: 700; padding: 0 14px 0 16px; border-radius: 12px; }
.m-chip.big svg.mi { width: 18px; height: 18px; margin-left: 6px; }
.m-chip.one { background: transparent; padding-left: 0; }
.m-wrapchips { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0 16px; }
.m-wrapchips .m-chip { margin-bottom: 8px; }
.m-sticky { position: -webkit-sticky; position: sticky; top: 58px; z-index: 4; background: #0A0A0C; padding: 2px 0 8px; }
.m-gh { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 10px 16px 0; }
.m-gh b { font-size: 15px; margin-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sort { padding: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; color: #A3A3AB; font-size: 13px; font-weight: 600; height: 32px; }
.m-sort svg.mi { width: 18px; height: 18px; margin-right: 5px; }

/* ---------- Capas ---------- */
.m-po { -webkit-flex: none; flex: none; position: relative; }
.m-art { position: relative; padding-top: 150%; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; background-color: #1E1E22; }
.m-po.wide .m-art { padding-top: 57%; background-position: center 25%; }
.m-art-t { position: absolute; left: 8px; right: 8px; bottom: 10px; font: 700 13px/1.2 "Sora", sans-serif; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.m-badge { position: absolute; top: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; color: #fff; }
.m-badge.new { left: 6px; background: #E50914; }
.m-badge.yr { right: 6px; background: rgba(0,0,0,.6); font-weight: 700; }
.m-rank { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.72); font: 800 12px "Sora", sans-serif; padding: 2px 7px; border-radius: 6px; color: #fff; }
.m-po-prog { position: absolute; left: 0; right: 0; bottom: 0; }
.m-po-prog .m-prog { border-radius: 0; }
.m-prog { height: 3px; background: rgba(255,255,255,.22); border-radius: 2px; overflow: hidden; }
.m-prog i { display: block; height: 100%; background: #E50914; border-radius: 2px; }
.m-cap { font-weight: 700; font-size: 13.5px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sub { font-size: 12px; color: #A3A3AB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row { margin-top: 22px; }
.m-rh { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; padding: 0 16px; margin-bottom: 10px; }
.m-rh h2 { font-size: 17px; font-weight: 700; }
.m-strip { display: -webkit-flex; display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.m-strip::-webkit-scrollbar { display: none; }
.m-strip:after { content: ""; -webkit-flex: none; flex: none; width: 6px; }
.m-strip .m-po { width: 108px; margin-right: 10px; }
.m-strip .m-po.wide { width: 176px; }
.m-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 6px 16px 0; }
.m-grid .m-po { width: 31.4%; margin: 0 2.9% 14px 0; }
.m-grid .m-po:nth-child(3n) { margin-right: 0; }
.m-empty { color: #A3A3AB; text-align: center; padding: 40px 32px; margin: 0; font-size: 14px; }
.m-empty.big { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; padding-top: 70px; }
.m-empty.big svg.mi { width: 44px; height: 44px; color: #7C7C85; margin-bottom: 14px; }
.m-empty.big b { color: #F5F5F5; font-size: 17px; margin-bottom: 4px; }
.m-sech { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #7C7C85; margin: 22px 30px 8px; text-transform: uppercase; }
.m-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FF4D55; }
.m-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 5px; background: rgba(255,255,255,.14); color: #fff; }
.m-tag.red { background: #E50914; }

/* ---------- Carregando, erro ---------- */
.m-boot { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; padding: 0 28px; text-align: center; }
.m-boot .brand-logo.m-logo { max-height: 40px; max-width: 220px; margin-bottom: 34px; }
html.mobile .spinner { width: 44px; height: 44px; border-width: 4px; }
.m-boot .m-mut { margin: 18px 0 0; font-size: 14px; }
.m-ok { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 20px; margin-bottom: 26px; color: #22C55E; }
.m-ok svg.mi { margin-right: 8px; }
.m-err { color: #FCA5A5; font-size: 15px; margin: 0 0 22px; }
.m-boot .m-actions { width: 100%; max-width: 360px; padding: 0; }

/* ---------- Entrar ---------- */
.m-entrar { padding: 0 16px 28px; }
.m-glow { position: absolute; top: 0; left: 0; right: 0; height: 330px; background: radial-gradient(ellipse at 50% 0%, rgba(229,9,20,.32), rgba(229,9,20,0) 70%); pointer-events: none; }
.m-entrar-top { position: relative; text-align: center; padding: 56px 0 26px; }
.m-entrar-top .brand-logo.m-logo { max-height: 38px; max-width: 220px; margin: 0 auto; }
.m-entrar-top .m-mut { margin: 12px 0 0; font-size: 14px; }
.m-card { position: relative; background: #141416; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 22px 18px 18px; }
.m-card h2 { font-size: 22px; font-weight: 700; }
.m-card > .m-mut { font-size: 13.5px; margin: 4px 0 20px; }
.m-fld { display: block; position: relative; margin-bottom: 18px; }
.m-fld span { position: absolute; top: -9px; left: 12px; padding: 0 5px; background: #141416; font-size: 12px; color: #A3A3AB; font-weight: 600; }
.m-fld input { display: block; width: 100%; height: 54px; padding: 0 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.18); background: transparent; color: #F5F5F5; font: 500 16px "Figtree", sans-serif; outline: none; -webkit-appearance: none; }
.m-fld input:focus { border: 2px solid #E50914; }
.m-fld input::placeholder { color: #5E5E66; }
.m-login .m-btn { width: 100%; height: 52px; font-size: 16px; margin-top: 4px; }
html.mobile .lg-msg { min-height: 18px; margin: 12px 0 0; font-size: 13.5px; text-align: center; color: #A3A3AB; }
html.mobile .lg-msg.err { color: #FCA5A5; }
.m-or { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; color: #7C7C85; font-size: 12.5px; margin: 20px 4px 16px; }
.m-or i { -webkit-flex: 1; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.m-or span { margin: 0 12px; }
.m-trial .m-mut { font-size: 13px; margin: 0 0 14px; }
.m-trial .m-mut b { color: #F5F5F5; }
.m-code { background: #1E1E22; border-radius: 14px; padding: 12px 14px; }
.m-code span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: #7C7C85; }
.m-code b { display: block; font: 700 19px "Sora", sans-serif; letter-spacing: .04em; margin-top: 2px; -webkit-user-select: text; user-select: text; }
.m-status { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 13px; color: #A3A3AB; margin: 12px 0 0; }
.m-status.err { color: #FCA5A5; }
.m-status .pulse { width: 8px; height: 8px; border-radius: 50%; background: #F5B83D; margin-right: 8px; -webkit-animation: mPulse 1.4s infinite; animation: mPulse 1.4s infinite; }
@-webkit-keyframes mPulse { 50% { opacity: .3; } }
@keyframes mPulse { 50% { opacity: .3; } }
.m-trial .m-btn { width: 100%; margin-top: 14px; }
.m-ver { text-align: center; color: #7C7C85; font-size: 11.5px; margin: 22px 0 0; }

/* ---------- Termo de uso ---------- */
html.mobile .terms.m-terms { padding: 18px 16px 16px; background: linear-gradient(160deg, rgba(229,9,20,.14) 0%, rgba(10,10,12,0) 40%), #0A0A0C; }
html.mobile .m-terms .act-top { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 32px; }
html.mobile .m-terms .act-top .brand-logo { max-height: 22px; max-width: 150px; }
html.mobile .m-terms .act-clock { display: none; }
html.mobile .m-terms .terms-doc { width: auto; margin: 12px 0 0; }
html.mobile .m-terms .eyebrow { font-size: 12px; margin: 0 0 4px; }
html.mobile .m-terms .terms-doc h1 { font-size: 21px; margin: 0 0 4px; }
html.mobile .m-terms .terms-meta { font-size: 12px; margin: 0 0 12px; }
html.mobile .m-terms .terms-text { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; border-radius: 14px; }
html.mobile .m-terms .terms-p { padding: 0; margin: 0 0 10px; border: 0; }
html.mobile .m-terms .terms-p p, html.mobile .m-terms .terms-p ul { font-size: 14px; line-height: 1.5; }
html.mobile .m-terms .terms-p ul { padding-left: 20px; }
html.mobile .m-terms .terms-p.focused { background: none; }
html.mobile .m-terms .terms-line { font-size: 12px; margin-top: 10px; padding-bottom: 6px; white-space: normal; }
html.mobile .m-terms .terms-sign { display: block; margin-top: 12px; }
html.mobile .m-terms .terms-check { height: auto; min-height: 48px; padding: 8px 12px; font-size: 14px; border-radius: 12px; border-width: 2px; }
html.mobile .m-terms .terms-check i { width: 24px; height: 24px; margin-right: 12px; border-width: 2px; border-radius: 6px; }
html.mobile .m-terms .terms-check.on i:after { left: 6px; top: 1px; width: 6px; height: 13px; border-width: 0 3px 3px 0; }
html.mobile .m-terms .terms-sign .actions { margin: 12px 0 0; display: block; }
html.mobile .m-terms .terms-sign .actions > * { margin: 0 0 8px; width: 100%; }

/* ---------- Botões e janelas da TV, no tamanho do celular (janelas viram uma folha que sobe de baixo) ---------- */
html.mobile .btn { height: 46px; padding: 0 18px; border-radius: 12px; font-size: 15px; }
html.mobile .btn.primary { background: #E50914; color: #fff; }
html.mobile .btn-sub { font-size: 13px; }
html.mobile .actions { margin-bottom: 0; }
html.mobile .actions > * { margin: 0 8px 8px 0; }
html.mobile .actions.col > * { width: 100%; margin-right: 0; }
html.mobile #dialog { position: fixed; -webkit-align-items: flex-end; align-items: flex-end; z-index: 30; }
html.mobile .dialog-box, html.mobile .dialog-box.wide { width: 100%; max-height: 88%; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 20px 20px 0 0; padding: 22px 18px 18px; font-size: 14px; }
html.mobile .dialog-box > * + * { margin-top: 12px; }
html.mobile .dialog-box h2 { font-size: 20px; }
html.mobile .dialog-box p { font-size: 14px; }
html.mobile .dialog-box .eyebrow { font-size: 12px; margin: 0 0 2px; }
html.mobile .dialog-box .actions { padding-top: 4px; }
html.mobile .dialog-box .actions > * { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
html.mobile .dialog-box input { padding: 12px 14px; border-radius: 10px; font-size: 16px; }
html.mobile .pset { margin-top: 8px; }
html.mobile .pset-row { min-height: 64px; padding: 10px 14px; margin-bottom: 8px; border-radius: 14px; }
html.mobile .pset-row.focused { background: rgba(255,255,255,.06); color: #F5F5F5; box-shadow: none !important; }
html.mobile .pset-row.focused small { color: #A3A3AB; }
html.mobile .pset-row.focused .ps-v { background: rgba(229,9,20,.22); color: #FF8A8E; }
html.mobile .ps-t b { font-size: 15px; }
html.mobile .ps-t small { font-size: 12.5px; }
html.mobile .ps-v { font-size: 13px; padding: 5px 12px; margin-left: 12px; }
html.mobile #toast { position: fixed; bottom: 84px; max-width: 90%; padding: 10px 18px; border-radius: 20px; font-size: 14px; text-align: center; }
.m-sl-it { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; height: 52px; padding: 0 14px; border-radius: 12px; text-align: left; font-size: 15px; }
.m-sl-it span { color: #A3A3AB; margin-left: 10px; -webkit-flex: 1; flex: 1; }
.m-sl-it.on { background: rgba(229,9,20,.14); color: #fff; }
.m-sl-it svg.mi { color: #FF4D55; width: 20px; height: 20px; }

/* ---------- Início ---------- */
.m-hero { position: relative; height: 70vh; min-height: 420px; max-height: 560px; }
.m-hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center 20%; background-color: #141416; }
.m-hero-shade { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(10,10,12,.55), rgba(10,10,12,0) 22%, rgba(10,10,12,0) 42%, rgba(10,10,12,.86) 76%, #0A0A0C); }
.m-hero-body { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.m-tags { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 8px; }
.m-tags span + span { margin-left: 8px; color: #D4D4D8; font-size: 12.5px; font-weight: 600; }
.m-hero h1 { font-size: 32px; font-weight: 700; line-height: 1.06; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-hero h1.sm { font-size: 25px; }
.m-hero-meta { font-size: 13.5px; color: #D4D4D8; margin: 8px 0 14px; }
.m-hero-btns { display: -webkit-flex; display: flex; }
.m-hero-btns .m-btn { -webkit-flex: 1; flex: 1; margin-right: 10px; }
.m-dots { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-top: 14px; }
.m-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 0 3px; }
.m-dots i.on { width: 18px; background: #fff; }
.m-rows { padding-bottom: 6px; }
.m-rows.no-hero { padding-top: 50px; }
.m-home .m-rows .m-row:first-child { margin-top: 10px; }

/* ---------- Detalhe ---------- */
.m-det { padding-bottom: 32px; }
.m-det-bg { position: absolute; top: 0; left: 0; right: 0; height: 300px; background-size: cover; background-position: center 20%; opacity: .5; -webkit-filter: blur(14px); filter: blur(14px); -webkit-transform: scale(1.1); transform: scale(1.1); }
.m-det-bg.wide { opacity: .9; -webkit-filter: none; filter: none; -webkit-transform: none; transform: none; }
.m-det-shade { position: absolute; top: 0; left: 0; right: 0; height: 302px; background: linear-gradient(rgba(10,10,12,.35), rgba(10,10,12,.2) 40%, #0A0A0C); }
.m-det-bar { position: -webkit-sticky; position: sticky; top: 0; z-index: 5; display: -webkit-flex; display: flex; padding: 8px 10px; }
.m-det-head { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; padding: 92px 16px 0; }
.m-det-po { -webkit-flex: none; flex: none; width: 108px; height: 162px; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.m-det-tx { -webkit-flex: 1; flex: 1; min-width: 0; margin-left: 14px; }
.m-det-tx h1 { font-size: 23px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.m-meta { font-size: 13px; color: #D4D4D8; margin: 6px 0 0; }
.m-det-body { position: relative; padding: 18px 16px 0; }
.m-det-body > .m-btn { width: 100%; height: 50px; font-size: 16px; }
.m-det-prog { margin-top: 8px; }
.m-det-btns { display: -webkit-flex; display: flex; margin-top: 10px; }
.m-det-btns .m-btn { -webkit-flex: 1; flex: 1; }
.m-plot { font-size: 14px; line-height: 1.5; color: #D4D4D8; margin: 16px 0 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.m-plot.open { display: block; -webkit-line-clamp: none; }
.m-credits { font-size: 12.5px; margin: 10px 0 0; line-height: 1.5; }
.m-det-body .m-row { margin: 22px -16px 0; }
.m-seas { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 20px 0 10px; }
.m-seas .m-mut { margin-left: 4px; font-size: 13px; }
.m-ep { display: -webkit-flex; display: flex; padding: 8px 0; }
.m-ep-img { position: relative; -webkit-flex: none; flex: none; width: 132px; height: 74px; border-radius: 8px; overflow: hidden; background-size: cover; background-position: center; background-color: #1E1E22; }
.m-ep-play, .m-ep-ok { position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -15px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.6); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.m-ep-play svg.mi, .m-ep-ok svg.mi { width: 14px; height: 14px; }
.m-ep-ok { background: rgba(34,197,94,.85); }
.m-ep-tx { -webkit-flex: 1; flex: 1; min-width: 0; margin-left: 12px; }
.m-ep-h b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ep-h .m-mut { font-size: 12px; }
.m-ep-plot { font-size: 12.5px; color: #A3A3AB; margin: 3px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-ep.cur .m-ep-h b { color: #FF4D55; }

/* ---------- Ao vivo: player em cima, info, fichas e a lista ---------- */
.m-live { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; background: #0A0A0C; }
body.media-on .m-live { background: transparent; }
.m-pv { position: relative; -webkit-flex: none; flex: none; width: 100%; padding-top: 56.25%; background: #000; }
body.media-on .m-pv.playing { background: transparent; }
.m-pv > * { position: absolute; }
.m-pv-idle { top: 0; left: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1E1E22, #000 75%); }
.m-pv-idle .ch-logo { width: 64px; height: 64px; border-radius: 14px; }
.m-pv-idle span { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 12px; font-weight: 700; font-size: 14px; }
.m-pv-idle span svg.mi { width: 18px; height: 18px; margin-right: 6px; color: #FF4D55; }
.m-live-tag { right: 10px; top: 10px; background: #E50914; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: .04em; color: #fff; }
.m-pv-full { padding: 0; right: 6px; bottom: 6px; width: 44px; height: 44px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; }
.m-pv .loader { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) scale(.55); transform: translate(-50%, -50%) scale(.55); }
.m-pv .loader .speed { font-size: 22px; color: #fff; }
.m-pv-msg { left: 16px; right: 16px; top: 50%; margin: -10px 0 0; text-align: center; color: #FCA5A5; font-weight: 700; }
.m-lv-info { -webkit-flex: none; flex: none; padding: 12px 16px 4px; background: #0A0A0C; }
.m-lv-c { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.m-lv-c .ch-logo { width: 40px; height: 40px; }
.m-lv-c .tx { -webkit-flex: 1; flex: 1; min-width: 0; margin-left: 12px; }
.m-lv-c .tx b, .m-lv-c .tx span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-lv-c .tx b { font-size: 15.5px; }
.m-lv-c .tx span { font-size: 13px; }
.m-lv-t { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 12px; color: #A3A3AB; margin-top: 8px; }
.m-lv-t .m-prog { -webkit-flex: 1; flex: 1; margin: 0 10px; }
.m-lv-nx { font-size: 12px; color: #A3A3AB; margin: 5px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-lv-nx span { color: #E4E4E8; }
.m-lv-bar { -webkit-flex: none; flex: none; padding: 8px 0; background: #0A0A0C; }
.m-lv-q { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 10px 16px 0; background: #1E1E22; border-radius: 12px; padding-left: 14px; }
.m-lv-q input { -webkit-flex: 1; flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: #F5F5F5; font: 500 16px "Figtree", sans-serif; outline: none; }
.m-chl { position: relative; -webkit-flex: 1; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 8px 12px; background: #0A0A0C; }
.m-chl.static { overflow: visible; padding-bottom: 0; }
.m-chr { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.m-ch { -webkit-flex: 1; flex: 1; min-width: 0; height: 64px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 8px; border-radius: 12px; position: relative; }
.m-ch .num { width: 34px; -webkit-flex: none; flex: none; font-size: 12.5px; color: #7C7C85; font-weight: 700; }
.m-ch .ch-logo { width: 44px; height: 44px; border-radius: 10px; }
.m-ch .ch-logo.none { font-size: 18px; }
.m-ch .tx { -webkit-flex: 1; flex: 1; min-width: 0; margin-left: 12px; }
.m-ch .nm { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ch .pg { font-size: 12.5px; color: #A3A3AB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0 4px; }
.m-ch .pg:empty { display: none; }
.m-ch .m-prog { width: 120px; }
.m-ch.cur { background: rgba(229,9,20,.12); }
.m-ch.cur:before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: #E50914; }
.m-eq { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; height: 14px; margin-left: 8px; -webkit-flex: none; flex: none; }
.m-eq i { width: 3px; margin-left: 2px; background: #FF4D55; border-radius: 1px; -webkit-animation: mEq 1s ease-in-out infinite; animation: mEq 1s ease-in-out infinite; }
.m-eq i:nth-child(2) { -webkit-animation-delay: -.3s; animation-delay: -.3s; }
.m-eq i:nth-child(3) { -webkit-animation-delay: -.6s; animation-delay: -.6s; }
.m-eq i:nth-child(4) { -webkit-animation-delay: -.15s; animation-delay: -.15s; }
@-webkit-keyframes mEq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@keyframes mEq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
html.mobile .ch-star { width: 44px; height: 44px; -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 20px; color: #5E5E66; }
html.mobile .ch-star.on { color: #F5B83D; }
html.mobile .ch-star.big { font-size: 24px; }

/* ---------- Futebol ---------- */
.m-fb-list { padding: 4px 16px 0; }
.m-game { background: #141416; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.m-game.live { border-color: rgba(229,9,20,.45); }
.m-game-top { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 12px; font-weight: 700; }
.m-ko { font-size: 13px; }
.m-teams { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 12px 0; }
.m-teams .t { -webkit-flex: 1; flex: 1; min-width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.m-teams .t b { font-size: 14.5px; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-teams .t.away { -webkit-justify-content: flex-end; justify-content: flex-end; text-align: right; }
.m-teams .t.away b { margin: 0 8px 0 0; }
html.mobile .m-teams .crest { width: 30px; height: 30px; }
html.mobile .m-teams .crest.txt { font-size: 13px; }
.m-score { font: 800 20px "Sora", sans-serif; margin: 0 10px; white-space: nowrap; }
.m-x { color: #7C7C85; margin: 0 12px; font-size: 16px; }
.m-game-ch { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.m-game-ch .m-chip { margin-bottom: 6px; max-width: 100%; }
.m-game-ch .m-chip span { overflow: hidden; text-overflow: ellipsis; }
.m-game-ch .m-chip svg.mi { color: #FF4D55; }
.m-game-ch .m-chip.red svg.mi { color: #fff; }
.m-game.miss .m-game-ch .small { font-size: 12.5px; }

/* ---------- Pesquisar ---------- */
.m-sbar { position: -webkit-sticky; position: sticky; top: 0; z-index: 5; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 8px 16px 8px 8px; background: #0A0A0C; }
.m-sfield { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 46px; border-radius: 23px; background: #1E1E22; padding: 0 14px; color: #A3A3AB; }
.m-sfield svg.mi { width: 20px; height: 20px; margin-right: 8px; }
.m-sfield input { -webkit-flex: 1; flex: 1; min-width: 0; border: 0; background: transparent; color: #F5F5F5; font: 500 16px "Figtree", sans-serif; outline: none; -webkit-appearance: none; }
#m-sres > .m-chips { margin: 6px 0 4px; }

/* ---------- Conta, Minhas listas, Limpar histórico ---------- */
.m-acc-pf { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 6px 16px 16px; }
.m-acc-pf .av { width: 54px; height: 54px; border-radius: 16px; -webkit-flex: none; flex: none; }
.m-acc-pf .tx { -webkit-flex: 1; flex: 1; min-width: 0; margin: 0 12px; }
.m-acc-pf .tx b, .m-acc-pf .tx span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-acc-pf .tx b { font: 700 18px "Sora", sans-serif; }
.m-acc-pf .tx span { font-size: 12.5px; }
.m-sub-card { margin: 0 16px; border-radius: 16px; padding: 14px 16px; background: #141416; border: 1px solid rgba(255,255,255,.07); }
.m-sub-card .row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 13.5px; font-weight: 600; }
.m-sub-card .row b { font-size: 16px; }
.m-sub-card .dot { width: 9px; height: 9px; border-radius: 50%; background: #7C7C85; margin-right: 9px; }
.m-sub-card.ok .dot { background: #22C55E; }
.m-sub-card.warn .dot { background: #F5B83D; }
.m-sub-card.bad .dot { background: #EF4444; }
.m-sub-card.ok { background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(34,197,94,0) 60%), #141416; }
.m-sub-card.bad { background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,0) 60%), #141416; }
.m-sub-card p { font-size: 12.5px; margin: 6px 0 0; line-height: 1.5; }
.m-sec { margin: 0 16px; background: #141416; border-radius: 16px; overflow: hidden; }
.m-it { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; min-height: 58px; padding: 8px 14px; text-align: left; }
.m-it + .m-it { border-top: 1px solid rgba(255,255,255,.07); }
.m-it .ic { width: 36px; height: 36px; border-radius: 10px; background: #1E1E22; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-right: 12px; color: #E4E4E8; -webkit-flex: none; flex: none; }
.m-it .ic svg.mi { width: 19px; height: 19px; }
.m-it .ic.num { font-weight: 800; font-size: 14px; }
.m-it.on .ic.num { background: #E50914; color: #fff; }
.m-it .t { -webkit-flex: 1; flex: 1; min-width: 0; }
.m-it .t b, .m-it .t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-it .t b { font-size: 15px; font-weight: 700; }
.m-it .t small { font-size: 12.5px; color: #A3A3AB; margin-top: 1px; }
.m-it .v { color: #A3A3AB; font-size: 14px; font-weight: 600; margin: 0 4px 0 8px; }
.m-it svg.chev { width: 18px; height: 18px; color: #7C7C85; }
.m-it.red { color: #FF6B72; }
.m-it.red .ic { background: rgba(229,9,20,.14); color: #FF6B72; }
.m-lead { font-size: 13.5px; line-height: 1.45; margin: 0 16px 14px; }
.m-acc .m-ver { margin-top: 26px; }
.m-hs .m-sticky .m-chips { padding-top: 2px; }
.m-hs-acts { display: -webkit-flex; display: flex; padding: 0 16px 10px; }
.m-hs-acts .m-btn { -webkit-flex: 1; flex: 1; }
.m-hs-acts .m-btn + .m-btn { margin-left: 8px; }
.m-hs-row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding-right: 4px; }
.m-hs-row + .m-hs-row { border-top: 1px solid rgba(255,255,255,.07); }
.m-hs-pick { -webkit-flex: 1; flex: 1; min-width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 10px 0 10px 14px; text-align: left; }
.m-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #7C7C85; -webkit-flex: none; flex: none; margin-right: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.m-box svg.mi { width: 15px; height: 15px; stroke-width: 3; }
.m-hs-row.on .m-box { background: #E50914; border-color: #E50914; }
.m-hs-pick .ch-logo, .m-hs-art { width: 40px; height: 40px; border-radius: 8px; -webkit-flex: none; flex: none; background-size: cover; background-position: center; }
.m-hs-art.q { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: #1E1E22; color: #A3A3AB; }
.m-hs-art.q svg.mi { width: 18px; height: 18px; }
.m-hs-pick .t { -webkit-flex: 1; flex: 1; min-width: 0; margin-left: 12px; }
.m-hs-pick .t b, .m-hs-pick .t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-hs-pick .t b { font-size: 14.5px; }
.m-hs-pick .t small { font-size: 12px; color: #A3A3AB; }
.m-hs-row .m-ib { color: #A3A3AB; }

/* ---------- Perfis ---------- */
.m-pf { text-align: center; padding: 0 20px 28px; }
.m-pf-top { padding: 44px 0 30px; }
.m-pf-top .brand-logo.m-logo { max-height: 26px; margin: 0 auto; }
.m-pf h1 { font-size: 24px; font-weight: 700; }
.m-pf > .m-mut { font-size: 13.5px; margin: 6px 0 28px; }
.m-pf-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; }
.m-pf-it { padding: 0; position: relative; width: 44%; max-width: 160px; margin: 0 3% 22px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; }
.m-pf-it .av { width: 104px; height: 104px; border-radius: 26px; }
.m-pf-it .av.add { border-width: 2px; }
.m-pf-it b { font-size: 16px; margin-top: 10px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-pf-it small { font-size: 12px; color: #F5B83D; }
.m-pf-it.add b { color: #A3A3AB; }
.m-pf-pen { position: absolute; top: 0; left: 50%; margin-left: -52px; width: 104px; height: 104px; border-radius: 26px; background: rgba(0,0,0,.45); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #fff; }
.m-pf .m-actions { max-width: 320px; margin: 0 auto; }
.m-pfe-top { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 8px 16px 0; }
.m-pfe-top .av { width: 76px; height: 76px; border-radius: 20px; -webkit-flex: none; flex: none; margin-right: 14px; }
.m-pfe-top .m-fld { -webkit-flex: 1; flex: 1; margin: 0; }
.m-pfe-top .m-fld span { background: #0A0A0C; }
.m-pf-icons { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0 12px; }
.m-pf-ic { width: 16.66%; padding: 4px; }
.m-pf-ic .av { width: 100%; height: auto; padding-top: 100%; position: relative; border-radius: 14px; display: block; }
.m-pf-ic .av svg { position: absolute; top: 0; left: 0; }
.m-pf-ic.on .av { box-shadow: 0 0 0 3px #E50914; }

/* ---------- Player em tela cheia (deitado): o OSD da TV reduzido para a tela do celular ---------- */
body.media-full #m-nav { visibility: hidden; }
html.mobile #player { -webkit-transform-origin: 0 0; transform-origin: 0 0; right: auto; bottom: auto; }
html.mobile #player .ctrl-hint, html.mobile #player .live-bottom .hint, html.mobile #player .okd-hint, html.mobile #player .key { display: none !important; }
.m-pback { padding: 0; width: 120px; height: 120px; margin: -20px 24px 0 -40px; border-radius: 50%; display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #fff; -webkit-flex: none; flex: none; background: rgba(0,0,0,.35); vertical-align: middle; }
html.mobile .m-pback svg.mi { width: 64px; height: 64px; stroke-width: 2.6; }

/* ---------- Categorias (Correção 1): botão com a categoria em uso e a lista que sobe de baixo ---------- */
.m-catrow { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 16px; }
.m-catbtn { -webkit-flex: 1; flex: 1; min-width: 0; height: 54px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 12px 0 14px; border-radius: 14px;
  background: #1E1E22; border: 1px solid rgba(255,255,255,.1); color: #F5F5F5; text-align: left; }
.m-catbtn > svg.mi { width: 22px; height: 22px; color: #FF4D55; margin-right: 12px; }
.m-catbtn .t { -webkit-flex: 1; flex: 1; min-width: 0; }
.m-catbtn .t small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #7C7C85; }
.m-catbtn .t b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-catbtn .n { font-size: 13px; font-weight: 700; color: #A3A3AB; margin: 0 8px; }
.m-catbtn svg.dn { width: 22px; height: 22px; color: #DADADF; margin: 0; }
.m-catrow .m-cbtn.sm { width: 54px; height: 54px; border-radius: 14px; margin-left: 10px; background: #1E1E22; border: 1px solid rgba(255,255,255,.1); }
.m-lv-bar .m-catrow { padding: 0 16px; }
html.mobile .dialog-box.m-cats { padding: 18px 10px 12px; }
html.mobile .dialog-box.m-cats h2 { padding: 0 10px 4px; }
.m-cl-it { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; height: 52px; padding: 0 12px; border-radius: 12px; text-align: left; color: #F5F5F5; }
.m-cl-it + .m-cl-it { margin-top: 2px; }
.m-cl-it > svg.mi { width: 20px; height: 20px; color: #A3A3AB; margin-right: 12px; }
.m-cl-it .dot { width: 6px; height: 6px; border-radius: 50%; background: #5E5E66; margin: 0 19px 0 7px; -webkit-flex: none; flex: none; }
.m-cl-it b { -webkit-flex: 1; flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-cl-it .n { font-size: 13px; color: #7C7C85; font-weight: 700; margin-left: 10px; }
.m-cl-it svg.ck { width: 20px; height: 20px; color: #FF4D55; margin-left: 10px; }
.m-cl-it.on { background: rgba(229,9,20,.14); }
.m-cl-it.on b { font-weight: 800; }
.m-cl-it.on .dot { background: #FF4D55; }
.m-cl-it.redc > svg.mi, .m-cl-it.redc .dot { color: #FF4D55; background: #FF4D55; }

/* ---------- Correção 2: carregamento com logo e aviso maiores ---------- */
html.mobile .m-boot .brand-logo.m-logo { max-height: 68px; max-width: 300px; margin-bottom: 42px; }
html.mobile .m-boot .spinner { width: 56px; height: 56px; border-width: 5px; }
html.mobile .m-boot .m-mut { margin-top: 24px; font-size: 17.5px; line-height: 1.45; color: #C4C4CC; }
html.mobile .m-boot .m-ok { font-size: 24px; }

/* ---------- Correção 3: lupa e perfil do topo maiores ---------- */
html.mobile .m-ab { height: 64px; }
html.mobile .m-ab .m-ib { width: 50px; height: 50px; }
html.mobile .m-ab .m-ib svg.mi { width: 28px; height: 28px; }
html.mobile .m-ab .m-ib.m-av .av { width: 40px; height: 40px; border-radius: 12px; }

/* ---------- Correção 4: detalhe do título mais completo ---------- */
html.mobile .m-acts { display: -webkit-flex; display: flex; margin: 14px -4px 0; }
html.mobile .m-act { -webkit-flex: 1; flex: 1; margin: 0 4px; height: 62px; border-radius: 14px; background: #1A1A1E; color: #E4E4E7; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 12.5px; font-weight: 600; }
html.mobile .m-act svg.mi { width: 22px; height: 22px; margin-bottom: 5px; }
html.mobile .m-act.on { color: #FF4D55; }
html.mobile .m-act.on svg.mi { fill: currentColor; }
html.mobile .m-dsec { margin-top: 26px; }
html.mobile .m-dsec h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
html.mobile .m-cast { display: -webkit-flex; display: flex; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
html.mobile .m-cast::-webkit-scrollbar { display: none; }
html.mobile .m-ibox { background: #141416; border-radius: 16px; padding: 4px 16px; }
html.mobile .m-rate { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
html.mobile .m-rate b { font-size: 34px; font-weight: 800; margin-right: 14px; letter-spacing: -.02em; }
html.mobile .m-rate small { display: block; font-size: 12px; color: #8B8B94; margin-top: 3px; }
html.mobile .m-kv { display: -webkit-flex; display: flex; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 14px; }
html.mobile .m-kv:last-child { border-bottom: 0; }
html.mobile .m-kv span { -webkit-flex: none; flex: none; width: 110px; color: #8B8B94; }
html.mobile .m-kv b { -webkit-flex: 1; flex: 1; font-weight: 600; color: #F4F4F5; }
html.mobile .m-det-po { width: 120px; height: 180px; }
html.mobile .m-sticky { top: 64px; }
/* Correção 5 no celular: o player é o da TV reduzido; o cartão do próximo episódio fica só um pouco maior, para o dedo. */
html.mobile #player .nxe { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; bottom: 60px; }
html.mobile #player .osd.show ~ .nxe { bottom: 300px; }
/* Correção 4, versão 2: ficha do título no celular (as peças vêm da TV, em tamanho de celular). */
html.mobile .m-slogan { font-size: 13.5px; font-style: italic; color: #C4C4CC; margin: 4px 0 0; }
html.mobile .m-slogan:empty { display: none; }
html.mobile .m-gen { display: block; margin-top: 5px; color: #A3A3AB; }
html.mobile .cert { min-width: 24px; padding: 1px 5px; border-radius: 5px; font-size: 12px; margin-left: 4px; vertical-align: 1px; }
html.mobile .cert.c18 { border-width: 1px; }
html.mobile .m-crew { font-size: 13px; line-height: 1.5; margin: 10px 0 0; color: #E4E4E7; }
html.mobile .m-crew:empty { display: none; }
html.mobile .m-cast .pp { width: 84px; margin-right: 12px; }
html.mobile .m-cast .pp i { width: 72px; height: 72px; margin-bottom: 7px; font-size: 22px; box-shadow: none; }
html.mobile .m-cast .pp b { font-size: 12.5px; }
html.mobile .m-cast .pp span { font-size: 11.5px; margin-top: 2px; }
html.mobile .stars { font-size: 18px; letter-spacing: 2px; }

/* ---------- Janela flutuante (picture-in-picture) ---------- */
/* Botão no canto de cima do player (mesma escala do botão de voltar). */
.m-pip { position: absolute; right: 40px; top: 20px; padding: 0; width: 120px; height: 120px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #fff; background: rgba(0,0,0,.35); }
html.mobile .m-pip svg.mi { width: 60px; height: 60px; stroke-width: 2.2; }
/* APK na janelinha: só o vídeo (que fica embaixo da página); todo o resto some. */
html.pip #stage > :not(#media), html.pip #m-nav, html.pip #dialog { visibility: hidden !important; }
html.pip, html.pip body, html.pip #stage { background: transparent !important; }

/* ---------- iPhone com o app instalado (PWA) e celulares com entalhe (Meza 2026-10-06) ---------- */
/* Barra do relógio por cima da página (black-translucent): a tela do app começa abaixo dela, e a barra de abas
   fica acima da barrinha de início do iPhone. No navegador comum esses valores são 0 e nada muda. */
html.mobile #screen { top: env(safe-area-inset-top); }
html.mobile.m-tabs #screen { bottom: calc(62px + env(safe-area-inset-bottom)); }
#m-nav { height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
.m-ab.over.solid { top: env(safe-area-inset-top); }
html.mobile #toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* iPhone instalado: 100% da altura deixava uma faixa vazia embaixo (do tamanho da barra do relógio); 100vh cobre a tela toda. */
html.mobile.pwa, html.mobile.pwa body, html.mobile.pwa #stage { height: 100vh; }
/* No navegador o vídeo fica dentro da página: o fundo nunca precisa ficar transparente (no Ao vivo aparecia branco). */
html.web.mobile, html.web.mobile body { background: #0A0A0C !important; }

/* ---------- Voltar bem visível (celular sem botão de voltar) ---------- */
html.mobile [data-m="back"] { width: 48px; height: 48px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); }
html.mobile [data-m="back"] svg.mi { width: 28px; height: 28px; stroke-width: 2.8; }
html.mobile .m-ab [data-m="back"], html.mobile .m-sbar [data-m="back"] { margin-left: 0; margin-right: 10px; }
html.mobile .m-det-bar [data-m="back"] { background: rgba(10,10,12,.7); border-color: rgba(255,255,255,.3); }
html.mobile .m-pback { background: rgba(0,0,0,.6); border: 3px solid rgba(255,255,255,.45); }

/* ---------- Tela cheia deitada no iPhone (o Safari não deixa o site girar a tela) ---------- */
/* js/mobile.js gira o vídeo e o player 90° quando o celular está em pé; html.m-rot marca esse estado. */
html.m-rot #media { right: auto; bottom: auto; -webkit-transform-origin: 0 0; transform-origin: 0 0; }