:root{
  --bg:#000; --bg2:#0b0b0b; --card:#111; --line:#1e1e1e;
  --accent:#b6f01e; --accent-dark:#8fc10f; --text:#fff; --muted:#a7a7a7;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.hidden{display:none !important}

/* ---------- topo ---------- */
header{position:sticky;top:0;z-index:50;background:linear-gradient(#1c1c1c,#0d0d0d);border-bottom:3px solid var(--accent);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:8px}
.icon-btn:hover{background:#ffffff14}
.icon-btn svg{width:26px;height:26px;fill:#fff}
.logo{position:absolute;left:50%;top:0;transform:translateX(-50%);height:64px;padding:0 44px;display:flex;align-items:center;background:#000;
  clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);border-bottom:3px solid var(--accent)}
.logo span{font-family:Impact,"Arial Black",sans-serif;font-size:28px;letter-spacing:1px;transform:skew(-8deg);text-transform:uppercase;line-height:1}
.logo b{color:var(--accent);font-weight:400}

/* busca */
.searchbar{display:none;background:#0d0d0d;border-bottom:1px solid var(--line);padding:12px 28px}
.searchbar.open{display:block}
.searchbar input{width:100%;max-width:640px;display:block;margin:auto;background:#161616;border:1px solid #2a2a2a;color:#fff;padding:12px 16px;border-radius:8px;font-size:15px;outline:none}
.searchbar input:focus{border-color:var(--accent)}

/* menu lateral */
.drawer{position:fixed;inset:0 auto 0 0;width:270px;background:#0c0c0c;border-right:2px solid var(--accent);transform:translateX(-100%);transition:.25s;z-index:80;padding:24px 18px;overflow-y:auto}
.drawer.open{transform:none}
.drawer h4{color:var(--accent);margin-bottom:14px;font-size:13px;letter-spacing:2px}
.drawer a{display:block;padding:12px 10px;border-radius:8px;font-weight:600;font-size:15px}
.drawer a:hover{background:#1a1a1a;color:var(--accent)}
.drawer a.on{background:#1a1a1a;color:var(--accent)}
.drawer a.admin-link{margin-top:20px;border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:13px}
.shade{position:fixed;inset:0;background:#000a;z-index:70;display:none}
.shade.open{display:block}

/* intro */
.intro{text-align:center;padding:22px 20px 20px;border-bottom:1px solid var(--line);background:#050505}
.intro h1{color:var(--accent);font-size:20px;margin-bottom:8px}
.intro p{color:#ddd;font-size:13.5px;max-width:900px;margin:auto;line-height:1.5}

/* carrossel de categorias */
.cats{position:relative;background:#000;padding:10px 60px;border-bottom:2px solid #1d2a06}
.cats-track{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:2px 0}
.cats-track::-webkit-scrollbar{display:none}
.cat{background:#131313;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:13px;text-align:center;line-height:1.2;padding:12px 16px;transition:.2s;border:1px solid transparent;white-space:nowrap;flex-shrink:0}
.cat:hover,.cat.on{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--accent);font-size:34px;line-height:1}
.arrow:hover{background:#ffffff12}
.arrow.l{left:10px}.arrow.r{right:10px}

.cats-track-logos .cat{padding:8px;height:64px;width:110px;display:flex;align-items:center;justify-content:center}
.cats-track-logos .cat img{max-width:88%;max-height:70%;object-fit:contain}

/* layout principal */
main{max-width:1380px;margin:26px auto 60px;padding:0 20px}
.cols{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.col-narrow{position:sticky;top:80px}
.cols.single .col-narrow{display:none}
.cols.single{grid-template-columns:1fr}

.top-list{display:flex;flex-direction:column;gap:12px}
.match-compact{flex-direction:column;cursor:pointer}
.cover-compact{width:100%;position:relative;aspect-ratio:2020/778;overflow:hidden;background:#0d0d0d}
.cover-compact .cover{position:absolute;inset:0;aspect-ratio:auto;padding:0 6%}
.cover-compact .cover svg.shield,.cover-compact .cover img.shield-img{width:24%}
.cover-compact img.cover-generated{width:100%;height:100%;object-fit:cover;display:block}
.compact-info{padding:8px 12px}
.compact-info h3{font-size:12.5px;font-weight:700;line-height:1.3;white-space:normal}
.compact-info .sub{font-size:11px;color:var(--muted);margin-top:4px}

@media(max-width:1100px){
  .cols{grid-template-columns:1fr}
  .col-narrow{position:static}
}
.tag{display:inline-block;background:var(--accent);color:#000;font-weight:800;font-size:14px;padding:8px 12px;letter-spacing:.5px;margin-bottom:14px;text-transform:uppercase}
.panel{background:#0a0a0a;border:1px solid var(--line);border-radius:8px;padding:10px}
.back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#111;color:#ddd;margin-bottom:14px;font-size:13px}
.back-btn:hover{border-color:var(--accent);color:var(--accent)}

/* cards ao vivo (jogos) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.match{background:var(--card);border:1px solid #1d1d1d;border-radius:8px;overflow:hidden;cursor:pointer;transition:.2s;display:flex;flex-direction:column}
.match:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px #b6f01e1c}
.cover{position:relative;aspect-ratio:16/7;display:flex;align-items:center;justify-content:space-between;padding:0 8%;overflow:hidden}
.cover::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 50% 120%,#0000 0,#0009 70%),
  repeating-linear-gradient(115deg,#ffffff0d 0 2px,#0000 2px 14px);}
.cover svg.shield,.cover img.shield-img{width:26%;height:auto;max-height:70%;object-fit:contain;filter:drop-shadow(0 4px 8px #000a);position:relative;z-index:2}
.center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px}
.center .vs{font-family:Impact,"Arial Black",sans-serif;font-size:22px;text-shadow:0 2px 6px #000}
.live{background:#e11d1d;font-size:10px;font-weight:800;padding:3px 8px;border-radius:20px;letter-spacing:1px;display:flex;align-items:center;gap:5px}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}
.hour{background:#000a;border:1px solid #ffffff30;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px}
@keyframes pulse{50%{opacity:.2}}
.cover-photo{padding:0}
.cover-generated{width:100%;height:100%;object-fit:cover;display:block}
.cover-badge{position:absolute;top:8px;left:8px;z-index:3}
.match h3{font-size:15px;font-weight:700;padding:14px 14px 4px;line-height:1.3}
.match .sub{font-size:11px;color:var(--muted);padding:0 14px 14px}
.empty{color:var(--muted);padding:30px;text-align:center;grid-column:1/-1}

/* cards de canal (único logo centralizado) */
.channel-cover{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#0d0d0d}
.channel-cover img{max-width:60%;max-height:60%;object-fit:contain;filter:drop-shadow(0 4px 8px #000a)}

/* ---------- tela dedicada do player ---------- */
#watch{max-width:1200px;margin:0 auto;padding:20px 20px 60px}
.watch-top{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.watch-top h2{font-size:18px}
.watch-viewers{font-size:12px;color:var(--accent);background:#132a06;border:1px solid #2a4a0c;border-radius:20px;padding:4px 12px;white-space:nowrap}
.watch-player{background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
#wplayer,#player{width:100%;aspect-ratio:16/9;max-height:70vh;display:block;background:#000;object-fit:contain}
.source-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 2px}
.retry-btn{padding:8px 14px;border-radius:6px;border:1px solid var(--line);background:#111;color:#ddd;font-size:13px}
.retry-btn:hover{border-color:var(--accent);color:var(--accent)}
.alt-btn{padding:8px 14px;border-radius:6px;border:1px solid var(--line);background:#111;color:#ddd;font-size:13px}
.alt-btn:hover{border-color:var(--accent)}
.alt-btn.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700}

.rec-block{margin-top:28px}
.rec-block .grid .match,.rec-block .grid .channel-tile{cursor:pointer}

footer{border-top:1px solid var(--line);text-align:center;color:#777;font-size:12px;padding:22px}

/* responsivo */
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  header{padding:0 12px}.logo{padding:0 26px}.logo span{font-size:20px}
  .grid{grid-template-columns:1fr}.cats{padding:10px 44px}
  #wplayer{max-height:40vh}
}