:root{--bg:#0a0a0f;--panel:#12121a;--panel2:#1a1a24;--line:#25252f;--text:#f4f4f7;--muted:#9a9aa8;--red:#e50914;--rose:#ff2d55;--head:96px;--side:260px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh}
body.locked{overflow:hidden}
button{font:inherit;color:inherit}

/* topo */
.head{position:sticky;top:0;z-index:30;background:rgba(10,10,15,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;padding-top:max(10px,env(safe-area-inset-top))}
.menu-btn{display:none;background:var(--panel2);border:1px solid var(--line);border-radius:10px;width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer;flex:none}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;white-space:nowrap;flex:none}
.logo{width:38px;height:38px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-x{font-size:.72rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--red);padding-left:2px}
.brand-script{font-family:"Pacifico","Brush Script MT","Segoe Script",cursive;font-size:1.55rem;background:linear-gradient(90deg,#ff2d55,#ff7a45);-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:2px}
.search{flex:1;max-width:620px;margin-left:auto;display:flex;gap:8px}
.search input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:24px;padding:10px 18px;color:#fff;font-size:1rem;outline:none;transition:border-color .15s}
.search input:focus{border-color:var(--rose)}
.search-btn{background:linear-gradient(90deg,var(--red),var(--rose));border:0;border-radius:24px;padding:10px 20px;font-weight:700;cursor:pointer;white-space:nowrap}
.install{display:block;width:100%;background:linear-gradient(90deg,#8a0a12,var(--red));border:0;padding:8px 14px;font-weight:700;font-size:.9rem;cursor:pointer}
.install[hidden]{display:none}

/* categorias */
.sidebar{position:fixed;left:0;top:var(--head);bottom:0;width:var(--side);background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;z-index:25;scrollbar-width:thin;scrollbar-color:#333 transparent}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}
.side-title{font-family:"Pacifico","Brush Script MT","Segoe Script",cursive;font-size:1.3rem;color:var(--rose)}
.side-close{display:none}
.cat-list{display:flex;flex-direction:column;padding:6px 10px 24px;gap:2px}
.cat{display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;border:0;border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;color:#d6d6de;font-size:.95rem}
.cat i{font-style:normal;font-size:.75rem;color:var(--muted);background:var(--panel2);border-radius:10px;padding:1px 8px}
.cat:hover{background:var(--panel2)}
.cat.on{background:linear-gradient(90deg,var(--red),var(--rose));color:#fff;font-weight:700}
.cat.on i{background:rgba(0,0,0,.25);color:#fff}
.scrim{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.6)}
.scrim[hidden]{display:none}

/* conteúdo */
.content{margin-left:var(--side)}
.heading-row{padding:18px 20px 4px}
h1{margin:0;font-size:1.35rem;font-weight:800}
.status{margin:4px 0 0;color:var(--muted);font-size:.9rem;min-height:1.2em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;padding:12px 20px 32px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;outline:none;transition:transform .15s,border-color .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
@media (hover:hover){.card:hover{transform:translateY(-2px);border-color:#3a3a48}}
.media img,.media video{pointer-events:none}
.card:focus-visible{box-shadow:0 0 0 2px var(--rose)}
.media{position:relative;aspect-ratio:16/9;background:#000}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media video{opacity:0;transition:opacity .25s}
.media video.on{opacity:1}
.badge,.dur{position:absolute;font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:5px;pointer-events:none}
.badge{top:8px;left:8px;background:linear-gradient(90deg,var(--red),var(--rose))}
.dur{right:8px;bottom:8px;background:rgba(0,0,0,.75)}
.info{padding:10px 12px 12px}
.title{margin:0 0 5px;font-size:.95rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{color:var(--muted);font-size:.8rem}
.footer{padding:24px 20px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;line-height:1.55}
.footer p{margin:0 0 10px;max-width:900px}
.tags{color:#7a7a8c;word-break:break-word}
.cloud{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px;max-width:900px}
.cloud a{color:var(--muted);text-decoration:underline}

/* celular e tablet */
@media (max-width:900px){
  .menu-btn{display:flex}
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .brand-script{font-size:1.35rem}
  .search{flex:1 1 100%;max-width:none;margin-left:0;order:3}
  .sidebar{top:0;width:min(82vw,320px);transform:translateX(-102%);transition:transform .22s ease;z-index:40;padding-top:env(safe-area-inset-top)}
  .sidebar.open{transform:none}
  .side-close{display:block}
  .content{margin-left:0}
  .heading-row{padding:14px 14px 2px}
  h1{font-size:1.15rem}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr;gap:20px;padding:10px 0 32px}
  .card{border-radius:0;border-left:0;border-right:0}
  .footer{padding:20px 14px 40px}
}

/* modais */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92);padding:12px}
.modal[hidden]{display:none}
.player-box{width:100%;max-width:1320px}
.player-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 10px;font-weight:600}
.close{background:var(--panel2);border:0;border-radius:8px;width:36px;height:36px;cursor:pointer;flex:none}
.player-main{display:flex;gap:16px;align-items:flex-start}
.player-frame{position:relative;flex:1 1 auto;min-width:0;aspect-ratio:16/9;background:#000}
.player-frame iframe,.player-frame video{width:100%;height:100%;border:0;display:block;background:#000;object-fit:contain}
.player-frame [hidden]{display:none}
.unmute{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:3;background:rgba(0,0,0,.75);border:1px solid #444;border-radius:20px;padding:8px 16px;font-weight:600;cursor:pointer}
.loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:.85rem;background:#000}
.loading .spinner{width:20px;height:20px;border:2px solid #444;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.related{flex:0 0 300px;max-height:640px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.rel-item{display:flex;gap:8px;text-align:left;background:none;border:0;color:inherit;cursor:pointer;padding:5px;border-radius:8px;font:inherit}
.rel-item:hover{background:#1c1c24}
.rel-item img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;flex:none;background:#000}
.rel-title{margin:0;font-size:.82rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rel-meta{color:var(--muted);font-size:.72rem}
.up-next{position:absolute;left:12px;right:12px;bottom:max(16px,env(safe-area-inset-bottom));z-index:3;background:rgba(10,10,15,.92);border:1px solid #333;border-radius:14px;padding:10px;display:flex;gap:10px;align-items:center}
.up-next img{width:64px;height:36px;object-fit:cover;border-radius:6px;flex:none}
.up-next-info{flex:1;min-width:0}
.up-next-info p{margin:0;font-size:.7rem;color:var(--muted)}
.up-next-info strong{display:block;font-size:.8rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-next-actions{display:flex;gap:6px;flex:none}
.up-next button{background:#2a2a35;border:1px solid #444;color:#fff;border-radius:16px;padding:6px 10px;font-size:.72rem;white-space:nowrap}

/* celular: player ocupa a tela toda, só com o botão de fechar por cima */
@media (max-width:900px){
  #player{padding:0;background:#000;align-items:stretch}
  #player .player-box{max-width:none;height:100%;position:relative;display:flex;flex-direction:column}
  #player .player-head{position:absolute;top:max(8px,env(safe-area-inset-top));right:8px;z-index:2;padding:0}
  #player #playerTitle{display:none}
  #player .close{background:rgba(0,0,0,.65);width:42px;height:42px;font-size:1.1rem}
  #player .player-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:0}
  #player .player-frame{aspect-ratio:16/9;height:auto;width:100%;flex:none}
  #player .related{display:flex;flex:1;min-height:0;overflow-y:auto;max-height:none;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
}

.gate{z-index:100;background:#000}
.gate-box{max-width:420px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 24px}
.gate-icon{width:84px;height:84px}
.gate-box h2{margin:12px 0 8px}
.gate-box p{margin:0 0 20px;color:#bbb;line-height:1.45}
.gate-actions{display:flex;flex-direction:column;gap:10px}
.btn{background:linear-gradient(90deg,var(--red),var(--rose));color:#fff;border:0;border-radius:10px;padding:12px 20px;font-size:1rem;font-weight:700;cursor:pointer;text-decoration:none;display:block;text-align:center}
.btn:hover{filter:brightness(.9)}
.btn.ghost{background:var(--panel2)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* anúncios */
.ad{z-index:90}
.ad-box{position:relative;width:100%;max-width:400px;max-height:100%;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.ad-tag{position:absolute;top:8px;left:10px;z-index:2;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;background:rgba(0,0,0,.6);color:#ccc;padding:2px 7px;border-radius:4px}
.ad-img-link{display:block}
.ad-img{display:block;width:100%;max-height:52vh;object-fit:contain;border-radius:10px;background:#050510}
.ad .cta{background:linear-gradient(90deg,#00b4ff,#a020f0);font-size:1.05rem}
.ad-contact{margin:0;text-align:center;color:#cfcfd8;font-weight:600}
.ad-brand{padding:26px 22px 18px;text-align:center}
.ad-brand h2{margin:14px 0 0;font-family:"Pacifico","Brush Script MT","Segoe Script",cursive;font-size:2rem;font-weight:400;color:var(--rose)}
.ad-brand p{margin:0;color:#c8c8d2;line-height:1.5}
.ad-brand .ad-contact{color:#fff}