:root{
  --red:#e50914; --red-dark:#b20710; --bg:#0b0b0d; --panel:#16161a; --panel-2:#1f1f25;
  --ink:#f4f4f5; --muted:#a3a3ad; --line:#2c2c34; --ok:#46d369;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:4%;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block}
:focus-visible{outline:3px solid #fff;outline-offset:2px}
.brand{color:var(--red);font-weight:900;font-size:1.9rem;letter-spacing:.08em}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:4px;padding:10px 22px;font-weight:700;font-size:1.05rem}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark)}
.btn-white{background:#fff;color:#000}.btn-white:hover{background:#d8d8d8}
.btn-grey{background:rgba(109,109,110,.7);color:#fff}.btn-grey:hover{background:rgba(109,109,110,.45)}
.btn.small{padding:6px 14px;font-size:.9rem}
.btn.wide{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed}
.icon{background:none;border:0;color:#fff;padding:6px;display:grid;place-items:center}
.ghost{background:none;border:1px solid var(--line);border-radius:4px;padding:0 12px;color:var(--muted)}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;padding:6px 0;text-align:left}

/* ---------- autenticação (modal sobre a landing) ---------- */
.auth-panel{z-index:5}
.auth-card{position:relative;width:100%;max-width:420px;background:rgba(0,0,0,.78);border:1px solid var(--line);border-radius:6px;padding:28px 36px 32px}
.tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:none;border:0;border-bottom:3px solid transparent;padding:10px 0;color:var(--muted);font-weight:700;font-size:1.05rem}
.tabs button[aria-selected=true]{color:#fff;border-color:var(--red)}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.field input{width:100%;background:#333;border:1px solid transparent;border-radius:4px;padding:13px 14px;color:#fff}
.field input:focus{border-color:#fff;outline:0}
.field.invalid input{border-color:var(--red)}
.err,.form-error{color:#ff6b6b;font-size:.82rem;min-height:1.1em;display:block;margin-top:4px}
.form-error{margin:0 0 12px}
.pass-row{display:flex;gap:8px}
.meter{height:5px;background:#333;border-radius:3px;margin:10px 0 8px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--red);transition:width .25s,background .25s}
.rules{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;font-size:.8rem;color:var(--muted)}
.rules li::before{content:"○ ";color:var(--muted)}
.rules li.ok{color:var(--ok)}.rules li.ok::before{content:"● ";color:var(--ok)}
@media (min-width:901px){
  #auth #authModal{position:absolute;top:96px;right:40px;width:420px}
  #auth #main-landing-message{max-width:calc(100% - 480px)}
}
@media (max-width:900px){
  #auth #authModal{position:relative;margin:0 auto 24px;max-width:420px}
}
/* marca no cabeçalho da landing (no lugar do logo) */
#auth #brand .brand{display:block;font-size:2.4rem}
#auth .view-option img{max-width:100%;height:auto}
#auth .view-option:nth-child(1) img{width:560px}
#auth table{border-collapse:collapse}
#auth th{padding:10px 14px;border-bottom:1px solid #2d2d2d;font-weight:400;text-align:left}
@media (max-width:900px){
  #auth #main-landing-message>h1{font-size:2.8rem!important;line-height:1.1}
  #auth #option-select-clickable-options{padding:0;flex-wrap:wrap}
  #auth .option{width:33%;min-width:150px}
  #auth .view-option{padding:2em 1.2em}
  #auth .view-option:nth-child(1){flex-direction:column}
  #auth .view-option:nth-child(2)>div:nth-child(1),#auth .view-option:nth-child(2)>div:nth-child(2),#auth .view-option:nth-child(3)>div:nth-child(1){flex-direction:column;align-items:flex-start}
  #auth #main-landing{padding:20px}
  #auth #main-landing-message{padding:8em 0}
  #auth .view-option:nth-child(1) img{width:100%}
  #auth table{display:block;overflow-x:auto}
}

.intro{position:fixed;inset:0;z-index:100;background:#000;transition:opacity .7s ease}
.intro.fade{opacity:0;pointer-events:none}

/* ---------- navbar ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:32px;padding:14px var(--pad);
  background:linear-gradient(180deg,rgba(0,0,0,.85),transparent);transition:background .3s}
.nav.solid{background:var(--bg);box-shadow:0 1px 0 var(--line)}
.nav .brand{font-size:1.7rem}
.nav-links{display:flex;gap:20px;font-size:.95rem}
.nav-links a{color:#e5e5e5}.nav-links a:hover,.nav-links a.on{color:#fff;font-weight:700}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.search{display:flex;align-items:center;border:1px solid transparent;padding:2px 6px}
.search input{width:0;opacity:0;background:transparent;border:0;outline:0;padding:6px 0;transition:width .3s,opacity .3s}
.search.open{background:rgba(0,0,0,.75);border-color:#fff}
.search.open input{width:min(260px,40vw);opacity:1;padding:6px 8px}
#soundBtn[aria-pressed=true]{color:var(--red)}
.user{position:relative}
.avatar{width:32px;height:32px;border-radius:4px;border:0;background:var(--red);color:#fff;font-weight:800}
.menu{position:absolute;right:0;top:44px;min-width:180px;background:rgba(0,0,0,.92);border:1px solid var(--line);border-radius:4px;padding:12px}
.menu p{margin:0 0 8px;color:var(--muted);font-size:.9rem;word-break:break-word}
.menu button{width:100%;text-align:left;background:none;border:0;padding:6px 0;color:#fff}
#view{min-height:100vh;padding-bottom:60px}
.page-pad{padding-top:96px}

/* ---------- hero ---------- */
.hero{position:relative;height:min(88vh,860px);min-height:520px;overflow:hidden;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;background:#000}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
.hero-video.on{opacity:1}
.hero-video iframe{position:absolute;top:50%;left:50%;width:max(100vw,177.78vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.35) 45%,transparent 70%),
  linear-gradient(0deg,var(--bg) 0,transparent 35%),linear-gradient(180deg,rgba(0,0,0,.6),transparent 22%)}
.hero-info{position:relative;padding:0 var(--pad) 12vh;max-width:min(680px,92vw)}
.hero-info h1{font-size:clamp(2rem,5vw,4rem);line-height:1.05;margin:0 0 12px;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:#ddd;font-size:.95rem;margin-bottom:12px}
.hero-meta .score{color:var(--ok);font-weight:700}
.hero-info p{font-size:clamp(1rem,1.5vw,1.2rem);margin:0 0 20px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-title{height:min(80vh,760px)}

/* ---------- linhas e cards ---------- */
.rows{position:relative;margin-top:-9vh;z-index:2}
.row{margin:0 0 8px}
.row>h3{margin:0 var(--pad);font-size:1.25rem;font-weight:700}
.row-wrap{position:relative}
.row-scroll{display:flex;gap:8px;overflow-x:auto;padding:34px var(--pad);margin:-14px 0;scrollbar-width:none;scroll-snap-type:x proximity}
.row-scroll::-webkit-scrollbar{display:none}
.arrow{position:absolute;top:34px;bottom:34px;width:var(--pad);min-width:36px;z-index:3;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:2rem;opacity:0;transition:opacity .2s}
.row-wrap:hover .arrow{opacity:1}
.arrow.l{left:0}.arrow.r{right:0}
.card{flex:0 0 clamp(120px,14vw,210px);position:relative;border-radius:4px;scroll-snap-align:start;cursor:pointer;transition:transform .3s,z-index 0s .3s;background:var(--panel)}
.card img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px}
.card:hover,.card:focus-visible{transform:scale(1.14);z-index:5;transition:transform .3s}
.card-over{position:absolute;left:0;right:0;bottom:0;padding:42px 10px 10px;border-radius:0 0 4px 4px;opacity:0;transition:opacity .25s;
  background:linear-gradient(0deg,rgba(0,0,0,.95) 30%,transparent)}
.card:hover .card-over,.card:focus-visible .card-over{opacity:1}
.card-over h4{margin:0 0 2px;font-size:.9rem;line-height:1.2}
.card-over .m{font-size:.75rem;color:#ccc;margin-bottom:4px}
.card-over .m b{color:var(--ok)}
.card-over p{margin:0;font-size:.72rem;color:#ddd;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rank-item{flex:0 0 auto;display:flex;align-items:flex-end;scroll-snap-align:start}
.rank-item .num{font-size:clamp(90px,12vw,170px);font-weight:900;line-height:.8;margin-right:-26px;color:#0b0b0d;-webkit-text-stroke:3px #6d6d70;letter-spacing:-.08em;z-index:1}
.rank-item .card{flex-basis:clamp(110px,12vw,170px)}

/* ---------- popup ---------- */
#popLayer{position:fixed;inset:0;z-index:70;pointer-events:none}
.pop{position:fixed;pointer-events:auto;background:var(--panel);border-radius:8px;overflow:hidden;cursor:pointer;
  box-shadow:0 18px 60px rgba(0,0,0,.85);transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease,opacity .25s}
.pop-media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.pop-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pop-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .8s}
.pop-media iframe.on{opacity:1}
.pop-info{padding:14px 16px 16px}
.pop-actions{display:flex;gap:8px;margin-bottom:10px}
.pop-info h4{margin:0 0 4px;font-size:1.1rem}
.pop-info .m{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.pop-info .m b{color:var(--ok)}
.pop-info p{margin:0;font-size:.85rem;color:#ddd;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- grade de busca ---------- */
.grid-title{margin:0 var(--pad) 20px;font-size:1.3rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(120px,14vw,200px),1fr));gap:34px 10px;padding:0 var(--pad)}
.grid .card{flex:initial}
.empty{margin:60px var(--pad);color:var(--muted);font-size:1.1rem}

/* ---------- página do título ---------- */
.detail{padding:0 var(--pad);display:grid;grid-template-columns:1fr minmax(220px,320px);gap:32px;margin-top:-6vh;position:relative;z-index:2}
.detail h2{margin:0 0 10px;font-size:1.3rem}
.detail dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:.95rem}
.detail dt{color:var(--muted)}.detail dd{margin:0}
.section{padding:0 var(--pad);margin:36px 0 0}
.section h3{font-size:1.25rem;margin:0 0 14px}
.seasons{display:flex;align-items:center;gap:12px;margin-bottom:16px}
select{background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:8px 12px}
.eps{display:grid;gap:2px}
.ep{display:grid;grid-template-columns:44px 160px 1fr;gap:16px;align-items:center;padding:14px 12px;border-radius:6px;background:transparent;border:0;text-align:left;width:100%;border-bottom:1px solid var(--line)}
.ep:hover{background:var(--panel-2)}
.ep .n{font-size:1.4rem;color:var(--muted);text-align:center}
.ep img,.ep .ph{width:160px;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:var(--panel-2)}
.ep h4{margin:0 0 4px;font-size:1rem;display:flex;justify-content:space-between;gap:12px}
.ep h4 span{color:var(--muted);font-weight:400;font-size:.85rem;white-space:nowrap}
.ep p{margin:0;color:#bbb;font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- assistir ---------- */
.watch{padding:84px var(--pad) 0}
.player{position:relative;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;max-height:76vh;width:100%;margin:0 auto}
.player video{width:100%;height:100%;background:#000}
.player .msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted)}
.watch-grid{display:grid;grid-template-columns:1fr minmax(240px,340px);gap:28px;margin-top:20px}
.watch h1{margin:0 0 6px;font-size:1.7rem}
.watch .sub{color:var(--muted);margin:0 0 12px}
.servers h3{margin:0 0 10px;font-size:1rem;color:var(--muted);font-weight:600}
.srv{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:8px}
.srv:hover{background:var(--panel-2)}
.srv.on{border-color:var(--red);background:#2a0d10}
.srv small{color:var(--muted)}
.ep-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#fff;color:#000;padding:10px 18px;border-radius:4px;z-index:200;font-weight:600}
.loader{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;height:60vh;color:var(--muted)}
.loader::before{content:"";width:38px;height:38px;border:4px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:820px){
  .nav{gap:14px}.nav-links{gap:12px;font-size:.85rem}.nav .brand{font-size:1.3rem}
  .detail,.watch-grid{grid-template-columns:1fr}
  .ep{grid-template-columns:30px 110px 1fr;gap:10px}.ep img,.ep .ph{width:110px}
  .auth-card{padding:24px 20px}.rules{grid-template-columns:1fr}
  .hero{min-height:460px}
}
@media (prefers-reduced-motion:reduce){
  .card,.pop,.hero-video{transition:none}
}