:root{
  --bg:#0b0f1a; --panel:#0f172a; --muted:#94a3b8; --text:#e5e7eb; --brand:#f59e0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text)}
.header{position:sticky;top:0;z-index:40;padding:12px 16px;border-bottom:1px solid #1f2937;display:flex;flex-direction:column;align-items:stretch;gap:8px;background:rgba(11,15,26,0.9);backdrop-filter:blur(6px)}
.header{position:sticky}
.header{position:relative}
.header #headerFx{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.35}
.header-top{position:relative;display:flex;justify-content:center;align-items:center;z-index:1}
.header-top .header-actions{position:absolute;right:0;top:50%;transform:translateY(-50%)}
/* Canvas global para efeito no site todo */
#siteFx{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0.22}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px}
.brand h1:empty{display:none}
.brand img{height:180px;width:auto;display:block}
.logo-wrap{position:relative;display:inline-block}
.logo-wrap img{position:relative;z-index:1}
.logo-wrap::before,.logo-wrap::after{content:"";position:absolute;inset:-36px;border-radius:50%;pointer-events:none}
.logo-wrap::before{background:conic-gradient(from 0deg, rgba(245,158,11,0.0) 0deg, rgba(245,158,11,0.9) 60deg, rgba(96,165,250,0.9) 120deg, rgba(244,114,182,0.9) 180deg, rgba(34,211,238,0.9) 240deg, rgba(245,158,11,0.9) 300deg, rgba(245,158,11,0.0) 360deg);-webkit-mask:radial-gradient(closest-side, transparent 62%, #000 64%);mask:radial-gradient(closest-side, transparent 62%, #000 64%);filter:blur(10px);opacity:.65;animation:spin 8s linear infinite}
.logo-wrap::after{inset:-54px;background:conic-gradient(from 0deg, rgba(59,130,246,0.0) 0deg, rgba(59,130,246,0.6) 100deg, rgba(34,211,238,0.6) 220deg, rgba(59,130,246,0.6) 340deg, rgba(59,130,246,0.0) 360deg);-webkit-mask:radial-gradient(closest-side, transparent 76%, #000 78%);mask:radial-gradient(closest-side, transparent 76%, #000 78%);filter:blur(12px);opacity:.45;animation:spinReverse 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}
.header-actions{display:flex;gap:8px;align-items:center;z-index:1}
.icon-btn{display:inline-flex;align-items:center;gap:6px;background:#111827;border:1px solid #1f2937;color:#e5e7eb;border-radius:10px;padding:8px 10px;text-decoration:none}
.icon-btn:hover{background:#0b1220}
.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;max-width:920px;width:100%;z-index:1;margin-top:2px}
.filters label{display:flex;flex-direction:column;gap:6px;color:#94a3b8;font-size:12px}
input,button,select{background:#111827;color:var(--text);border:1px solid #1f2937;border-radius:10px;padding:10px 12px}
button{cursor:pointer}
.btn-link{color:#e5e7eb;border:1px solid #374151;padding:8px 10px;border-radius:6px;text-decoration:none;background:#1f2937}
.btn-link:hover{background:#111827}
.container{display:flex;min-height:calc(100% - 120px)}
.sidebar{width:320px;border-right:1px solid #1f2937;padding:16px}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{padding:8px;border-radius:8px;margin-bottom:6px;background:#0f172a;cursor:pointer;border:1px solid #1f2937}
.sidebar li:hover{border-color:#334155}
.content{flex:1;padding:16px}
.hidden{display:none}
.episode-card{background:#0f172a;border:1px solid #1f2937;border-radius:12px;padding:16px}
.meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--muted)}
.champion{display:flex;align-items:center;gap:10px;margin:10px 0}
.champion img{width:64px;height:64px;border-radius:50%;border:3px solid var(--brand)}
.ranking{margin-top:14px}
.ranking table{width:100%;border-collapse:collapse}
.ranking th,.ranking td{border-bottom:1px solid #1f2937;padding:8px;text-align:left}
.ranking tr.highlight{background:#1f29371a}
.video{margin-top:14px}
.video video{width:100%;max-height:520px;border:1px solid #1f2937;border-radius:8px;background:#000}
.desc{margin-top:12px;color:var(--muted)}
.hero{padding:12px 16px;border-bottom:1px solid #1f2937;background:#0b0f1a}
.screen{position:relative;height:200px;border:1px solid #1f2937;border-radius:12px;overflow:hidden;background:#0f172a}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 600ms ease;z-index:1}
.screen img.show{opacity:1}
.screen-overlay{position:absolute;inset:0;box-shadow:inset 0 0 140px rgba(0,0,0,0.45);pointer-events:none;z-index:2}
.screen .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:#e5e7eb;border:1px solid #374151;border-radius:8px;padding:8px 10px;cursor:pointer;z-index:3}
.screen .nav:hover{background:rgba(0,0,0,0.7)}
.screen .nav.prev{left:10px}
.screen .nav.next{right:10px}

/* Tablet */
@media (max-width: 900px){
  .container{flex-direction:column}
  .sidebar{width:100%; border-right:0; border-bottom:1px solid #1f2937}
  .content{padding:12px}
  .screen{height:180px}
}

/* Mobile */
@media (max-width: 600px){
  .filters{display:flex;position:static;background:transparent;border:0;padding:10px 0 0 0;flex-wrap:wrap;gap:12px}
  /* Oculta o toggle quando filtros já ficam visíveis */
  #filtersToggle{display:none}
  .header-actions{gap:6px}
  .filters::-webkit-scrollbar{display:none}
  .filters label{min-width:160px}
  input,button,select{font-size:16px}
  .brand img{height:140px}
  .screen{height:160px}
  .ranking table{display:block;overflow-x:auto}
  .ranking thead, .ranking tbody tr{white-space:nowrap}
}

/* Label icons using :has() selectors */
@supports(selector(:has(*))){
  .filters label{position:relative;padding-left:28px}
  .filters label::before{content:"";position:absolute;left:0;top:26px;width:18px;height:18px;color:#94a3b8;opacity:0.9}
  .filters label:has(#dateFilter)::before{mask:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" fill="white"/><rect x="7" y="2" width="2" height="4" fill="white"/><rect x="15" y="2" width="2" height="4" fill="white"/><rect x="3" y="10" width="18" height="2" fill="white"/></svg>') center/contain no-repeat; background:#94a3b8}
  .filters label:has(#userFilter)::before{mask:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="8" r="4" fill="white"/><path d="M6 20c0-3.3 2.7-6 6-6s6 2.7 6 6" fill="white"/></svg>') center/contain no-repeat; background:#94a3b8}
  .filters label:has(#rankMode)::before{mask:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline points="6,9 12,15 18,9" fill="none" stroke="white" stroke-width="2" /></svg>') center/contain no-repeat; background:#94a3b8}
}

.footer{padding:12px 16px;border-top:1px solid #1f2937;display:flex;gap:12px;align-items:center}

/* Contato */
.form-wrap{max-width:560px;margin:24px auto;background:#0f172a;border:1px solid #1f2937;border-radius:12px;padding:16px}
.form-wrap h2{margin:0 0 12px 0}
.row{display:flex;gap:12px}
.row > *{flex:1}
.field{display:flex;flex-direction:column;margin-bottom:12px}
.field label{color:#94a3b8;margin-bottom:6px}
.field input,.field textarea{background:#111827;color:#e5e7eb;border:1px solid #1f2937;border-radius:6px;padding:10px}
.field textarea{min-height:120px}
.actions{display:flex;gap:10px;justify-content:flex-end}
.btn{background:#1f2937;color:#e5e7eb;border:1px solid #374151;border-radius:8px;padding:10px 14px;cursor:pointer}
.btn:hover{background:#111827}