/* App estilo TV: entrada, topo com abas, destaque, prateleiras de cartões grandes, foco com anel branco e brilho verde. */
:root{--gutter:clamp(1rem,4vw,4.5rem)}
body{overflow-x:hidden}
body.modal,body.playing{overflow:hidden}
.muted{color:var(--muted)}
.pad{padding:1rem var(--gutter)}
.btn.big{padding:.9rem 1.7rem;font-size:1.05rem}
.btn:focus-visible,.round:focus-visible,.tab:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 28px var(--glow)}
.round{display:grid;place-items:center;width:2.9rem;height:2.9rem;border:0;border-radius:50%;background:#ffffff1c;color:#fff;backdrop-filter:blur(8px);transition:background .15s,transform .15s}
.round:hover{background:#ffffff38;transform:scale(1.06)}
.logo-bars.big{width:4rem;height:3rem;border-radius:9px}

/* entrada */
.gate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:1.5rem;background:var(--bg);overflow:auto}
.gate-glow{position:fixed;inset:0;background:radial-gradient(40rem 30rem at 50% 38%,#17501c 0,transparent 65%),radial-gradient(30rem 24rem at 85% 90%,#0f2a3a 0,transparent 60%)}
.gate-card{position:relative;width:min(27rem,100%);display:grid;justify-items:center;gap:.9rem;text-align:center}
.gate-card h1{font-size:2.4rem;letter-spacing:-.02em;margin-top:.4rem}
.gate-card .lead{color:var(--muted);margin-bottom:.2rem}
.gate-card .err{width:100%;text-align:left;margin:0}
.g-field{display:block;width:100%;text-align:left}
.g-field>span{display:block;margin-bottom:.35rem;font-size:.8rem;font-weight:600;color:var(--muted)}
.g-in,.code-in{width:100%;padding:.95rem 1.1rem;background:#0b0d0fcc;border:2px solid var(--line);border-radius:16px;outline:0}
.g-in:focus,.code-in:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.code-in{text-align:center;font:600 1.8rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.code-in::placeholder{color:#3a4249}
.server-ok{display:flex;align-items:center;gap:.5rem;width:100%;padding:.65rem .9rem;border-radius:12px;background:#5fe35f14;border:1px solid #5fe35f44;color:#b6f2b6;text-align:left;font-size:.92rem}
.server-ok .ic{color:var(--accent)}
.cred{display:grid;gap:.8rem;width:100%}
.gate-card .btn{width:100%;margin-top:.3rem}
.fine{font-size:.85rem;color:var(--faint);margin-top:.5rem}

/* topo */
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:1.5rem;padding:1rem var(--gutter) 2.2rem;background:linear-gradient(#080b0af2 25%,transparent)}
.brand{display:flex;align-items:center;gap:.7rem}
.brand b{font:700 1.3rem var(--display);letter-spacing:-.01em}
.tabs{display:flex;gap:.35rem;margin-left:1rem;overflow-x:auto;scrollbar-width:none}
.tab{flex:none;padding:.5rem 1.15rem;border:0;border-radius:999px;background:none;color:var(--muted);font:600 1rem var(--font);transition:background .15s,color .15s}
.tab:hover{color:#fff;background:#ffffff14}
.tab.on{background:#fff;color:#080b0a}
.topright{display:flex;align-items:center;gap:.7rem;margin-left:auto}
.avatar{width:2.9rem;height:2.9rem;border:0;border-radius:50%;background:linear-gradient(135deg,var(--green-hi),#0b5a0b);color:#fff;font:700 1.1rem var(--display)}
.avatar:focus-visible{outline:3px solid #fff;outline-offset:3px}
.menu{position:absolute;right:var(--gutter);top:4.4rem;width:min(19rem,90vw);display:grid;gap:.5rem;padding:1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px #000c}
.menu b{font:700 1.1rem var(--display)}
.menu p{color:var(--muted);font-size:.85rem}
#app{min-height:100dvh;padding-bottom:5rem}
#view{padding-top:5.2rem}
.keys{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:10;display:flex;gap:.4rem;align-items:center;padding:.4rem .9rem;background:#080b0ad9;border:1px solid var(--line);border-radius:999px;color:var(--faint);font-size:.78rem;backdrop-filter:blur(8px);white-space:nowrap}
body.mouse .keys,body.playing .keys{display:none}

/* destaque */
.hero{position:relative;height:min(64vh,40rem);margin-top:-5.2rem;overflow:hidden}
.skeleton-hero{background:linear-gradient(100deg,#15191c 30%,#1d2327 50%,#15191c 70%);background-size:200% 100%;animation:shine 1.6s linear infinite}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}
.slide.on{opacity:1;visibility:visible}
.slide-bg{position:absolute;inset:0;background:#1a1f23 center/cover no-repeat;transform:scale(1.04);transition:transform 9s linear}
.slide.on .slide-bg{transform:scale(1)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080b0a 6%,#080b0ac0 38%,transparent 72%),linear-gradient(0deg,#080b0a 2%,transparent 38%)}
.slide-body{position:absolute;z-index:1;left:var(--gutter);bottom:3.2rem;width:min(38rem,70%);display:grid;gap:.7rem}
.kicker{font:700 .78rem var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.slide-body h1,.d-main h1{font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.05;letter-spacing:-.02em}
.d-meta{color:#d3d9de;font-weight:600;font-size:.95rem}
.d-plot{color:#cfd5da;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:46rem}
.d-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.4rem}
.hero-dots{position:absolute;z-index:2;right:var(--gutter);bottom:3.4rem;display:flex;gap:.5rem}
.hero-dot{width:.7rem;height:.7rem;padding:0;border:0;border-radius:99px;background:#ffffff55;transition:width .2s,background .2s}
.hero-dot.on{width:2rem;background:#fff}

@keyframes shine{to{background-position:-200% 0}}
@media (max-width:820px){
  html{font-size:15px}
  .topbar{flex-wrap:wrap;gap:.6rem 1rem;padding-bottom:1.4rem}
  .tabs{order:3;width:100%;margin:0}
  .brand b{display:none}
  #view{padding-top:7rem}
  .hero{margin-top:-7rem;height:34rem}
  .slide-body{width:calc(100% - 2*var(--gutter));bottom:2.4rem}
  .hero-dots{bottom:.8rem;right:auto;left:var(--gutter)}
  .keys{display:none}
}