:root{
  --bg:#0a0a0a; --panel:#121212; --panel-2:#181818; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --tx:#f2f2f2; --tx2:#a3a3a3; --tx3:#6b6b6b;
  --lula:#E5484D; --flavio:#3E7BFA; --a:var(--lula); --b:var(--flavio);
  --ok:#3ecf8e; --amber:#f5b53d; --amber-bg:rgba(245,181,61,.12);
  --radius:14px; --radius-sm:10px;
  --sans:"Inter Tight","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]){
    --bg:#fafafa; --panel:#fff; --panel-2:#f4f4f4; --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.14);
    --tx:#111; --tx2:#555; --tx3:#8a8a8a; --ok:#12805a; --amber:#8a5a00; --amber-bg:rgba(200,130,0,.14); color-scheme:light;
  }
}
:root[data-theme=light]{
  --bg:#fafafa; --panel:#fff; --panel-2:#f4f4f4; --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.14);
  --tx:#111; --tx2:#555; --tx3:#8a8a8a; --ok:#12805a; --amber:#8a5a00; --amber-bg:rgba(200,130,0,.14); color-scheme:light;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font:400 15px/1.5 var(--sans);min-height:100vh;overflow-x:hidden}
[hidden]{display:none!important}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.mono,.hora,.pct,.votos,.contagem b,.linhas dd,.detalhes dd{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rotulo{font-size:12px;color:var(--tx2);letter-spacing:.02em}
button{font-family:inherit}
a{color:var(--tx)}

/* topbar */
.topo{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
.topo-in{display:flex;justify-content:space-between;align-items:center;gap:12px;height:60px}
.marca{display:flex;align-items:center;gap:10px;min-width:0}
.logo{display:grid;grid-template-columns:repeat(3,4px);gap:3px;flex:none}
.logo i{width:4px;height:4px;border-radius:50%;background:var(--tx)}
.logo i:nth-child(1),.logo i:nth-child(5){background:var(--lula)}
.logo i:nth-child(9),.logo i:nth-child(3){background:var(--flavio)}
.logo i:nth-child(2),.logo i:nth-child(4),.logo i:nth-child(6),.logo i:nth-child(8){opacity:.45}
.marca-txt{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:clamp(22px,6vw,28px);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.marca{align-items:baseline}
.marca-by{font-size:12px;color:var(--tx3);text-decoration:none;white-space:nowrap;flex:none}
.marca-by b{font-weight:600;color:var(--tx2,var(--tx3))}
.marca-by:hover b{color:var(--tx)}
.topo-dir{display:flex;align-items:center;gap:10px;flex:none}
.pilula-sim{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);background:var(--amber-bg);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);padding:3px 8px;border-radius:99px}
.conexao{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tx2);white-space:nowrap}
.conexao .hora{color:var(--tx);font-size:12px}
.conexao .hora:not(:empty)::before{content:"·";color:var(--tx3);margin-right:7px;font-family:var(--sans)}
.ponto{width:7px;height:7px;border-radius:50%;background:var(--tx3)}
.conexao[data-estado=ok] .ponto{background:var(--ok);animation:pulso 2s infinite}
.conexao[data-estado=erro] .ponto{background:var(--amber)}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%,100%{box-shadow:0 0 0 6px transparent}}

/* assistindo agora */
.online{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:12px;font-size:12px;color:var(--tx2);white-space:nowrap;min-height:18px}
.online.vazio{visibility:hidden}
.online .on-n{color:var(--tx);font-size:12px}
.on-ponto{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulso 2s infinite}
.online+.grade{margin-top:10px}

/* layout */
.grade{display:grid;gap:16px;margin-top:16px;align-items:start}
.placar,.mapa-col,.lateral{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;min-width:0}
.lateral .linhas{margin-top:0;border-top:0}
.escopo{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:32px}
.escopo-tx{display:flex;flex-direction:column;gap:0;min-width:0}
.btn-sm{background:transparent;color:var(--tx);border:1px solid var(--line-2);border-radius:99px;padding:6px 12px;font:500 12px var(--sans);cursor:pointer;min-height:32px;white-space:nowrap;transition:background .3s,border-color .3s}
.btn-sm:hover{background:var(--panel-2);border-color:var(--tx3)}
.btn-sm:focus-visible,a:focus-visible,.sair-tv:focus-visible{outline:2px solid var(--tx2);outline-offset:2px}

.estado{font:600 clamp(22px,6vw,28px)/1.15 var(--sans);letter-spacing:-.02em;margin:10px 0 0}
.contagem{display:flex;align-items:flex-start;gap:6px;margin-top:12px;color:var(--tx)}
.contagem div{display:flex;flex-direction:column;align-items:center;min-width:44px}
.contagem b{font-weight:500;font-size:clamp(24px,7vw,32px);line-height:1.1}
.contagem small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-top:2px}
.contagem>span{font-family:var(--mono);color:var(--tx3);font-size:clamp(20px,6vw,26px);line-height:1.2}
.selo-final{display:inline-flex;align-items:center;gap:8px;margin-top:12px;border:1px solid var(--line-2);border-radius:99px;padding:6px 12px 6px 10px;font-size:13px;font-weight:500;background:var(--panel-2)}
.selo-final svg{flex:none;color:var(--ok)}
.selo-final b{font-weight:700}

.duelo{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;margin-top:20px}
.cand{min-width:0;border-top:2px solid var(--c);padding-top:10px}
.cand.dir{text-align:right}
.cand .foto{position:relative;width:60px;height:76px;border-radius:14px;overflow:hidden;margin-bottom:10px;border:2px solid var(--c);background:var(--line);display:grid;place-items:center}
.cand.dir .foto{margin-left:auto}
.cand .foto .ini{font:600 24px/1 var(--sans);color:var(--tx2)}
.cand .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.cand .nome{font:600 15px/1.2 var(--sans);overflow-wrap:anywhere;letter-spacing:-.005em}
.cand .part{font-size:12px;color:var(--tx2);margin-top:2px}
.cand .part .mono{color:var(--tx3)}
.cand .pct{font-weight:700;font-size:clamp(30px,9.4vw,40px);line-height:1;letter-spacing:-.04em;margin-top:14px;white-space:nowrap}
.cand .pct small{font-size:.42em;font-weight:500;color:var(--tx2);letter-spacing:0;margin-left:2px}
.cand .votos{font-size:12px;color:var(--tx2);margin-top:6px;white-space:nowrap}
.cand:not(.lider) .pct{color:var(--tx2)}
body[data-aguardando="1"] .cand .pct small{display:none}
body[data-aguardando="1"] .cand .pct{color:var(--tx3)}

.barra-wrap{margin-top:18px}
.barra{position:relative;display:flex;height:6px;border-radius:99px;background:var(--line)}
.seg{height:100%;width:50%;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.seg-a{background:var(--a);border-radius:99px 0 0 99px}.seg-b{background:var(--b);border-radius:0 99px 99px 0}
.meio{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--tx2)}

.linhas{margin-top:18px;border-top:1px solid var(--line)}
.linhas>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.linhas dt{color:var(--tx2)}
.linhas dd{font-size:13px;text-align:right}
.linhas dd span{color:var(--tx3);margin-left:6px;font-size:12px}
.detalhes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin-top:16px}
.detalhes>div{background:var(--panel-2);padding:10px 12px;min-width:0}
.detalhes dt{font-size:12px;color:var(--tx2)}
.detalhes dd{font-weight:500;font-size:14px;margin-top:2px;overflow-wrap:anywhere}
.detalhes dd span{display:block;color:var(--tx3);font-weight:400;font-size:11px;margin-top:1px}
.conexao .lbl-s{display:none}
.conexao .lbl-l{color:var(--tx2)}
@media (max-width:480px){
  .conexao .lbl-l{display:none}
  .conexao .lbl-s,.conexao .dia{display:none}
  .marca-txt{font-size:21px}
  .marca{gap:7px}
  #conexao-txt{display:none}
  .conexao .hora:not(:empty)::before{display:none}
  .conexao[data-estado=erro] #conexao-txt{display:inline}
  .linhas dt{flex:none}
  .linhas dd span{display:block;margin:0}
  .linhas dd{white-space:nowrap}
}

.procedencia{margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:12px;color:var(--tx2);line-height:1.5}
.procedencia p+p{margin-top:4px}
.procedencia .mono{color:var(--tx);font-size:11.5px}
.procedencia a{color:var(--tx);text-underline-offset:3px;text-decoration-color:var(--tx3)}
.procedencia .indep{color:var(--tx3)}

.mapa-col{padding:12px}
.mapa{min-height:260px;display:flex;align-items:center;justify-content:center}
.mapa>*{max-width:100%}
.mapa-vazio{color:var(--tx3);font-size:13px;text-align:center}
.acoes{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.acoes-bt{display:flex;gap:8px}

.sec-estados,.como{margin-top:40px}
.sec-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
h2{font:600 16px/1.3 var(--sans);letter-spacing:-.01em}
.estados-lista{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:4px 16px;min-height:60px}
.como h2{margin-bottom:12px}
.como-grade{display:grid;gap:12px;grid-template-columns:1fr}
.como article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.como h3{font:600 13px var(--sans);margin-bottom:4px}
.como p{font-size:13px;color:var(--tx2);line-height:1.55}
.rodape{margin-top:40px;padding:18px 0 32px;border-top:1px solid var(--line);font-size:12px;color:var(--tx3)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:9px 16px;border-radius:99px;font-size:13px;font-weight:500;z-index:20;animation:sobe .3s}
@keyframes sobe{from{opacity:0;transform:translate(-50%,8px)}}
.sair-tv{position:fixed;top:14px;right:14px;z-index:20;background:transparent;border:1px solid var(--line-2);color:var(--tx3);border-radius:99px;padding:6px 12px;font-size:12px;cursor:pointer;opacity:.5;transition:opacity .3s}
.sair-tv:hover,.sair-tv:focus-visible{opacity:1}

@media (min-width:641px){
  .como-grade{grid-template-columns:1fr 1fr}
  .cand .nome{font-size:17px}
}
@media (min-width:1024px){
  .wrap{padding:0 24px;max-width:1320px}
  /* placar em faixa no topo; abaixo, detalhes numa coluna estreita e o mapa grande */
  .grade{grid-template-columns:340px minmax(0,1fr);grid-template-areas:"placar placar" "lateral mapa";gap:20px}
  .placar{grid-area:placar;padding:18px 24px 22px}
  .lateral{grid-area:lateral;position:sticky;top:76px;padding:8px 16px 16px}
  .mapa-col{grid-area:mapa;padding:16px}
  .mapa{min-height:600px}
  .como-grade{grid-template-columns:repeat(4,1fr)}

  body:not(.tv) .placar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"escopo escopo escopo" "a centro b" "barra barra barra";column-gap:24px;align-items:center}
  body:not(.tv) .escopo{grid-area:escopo}
  body:not(.tv) .centro{grid-area:centro;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:420px}
  body:not(.tv) .estado{margin-top:0}
  body:not(.tv) .duelo{display:contents}
  body:not(.tv) .cand{grid-area:a;border-top:0;padding-top:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
  body:not(.tv) .cand>*:not(.foto){grid-column:2}
  body:not(.tv) .cand.dir{grid-area:b;grid-template-columns:minmax(0,1fr) auto}
  body:not(.tv) .cand.dir>*:not(.foto){grid-column:1}
  body:not(.tv) .cand .foto{grid-column:1;grid-row:1/span 4;width:84px;height:106px;margin:0;border-radius:16px}
  body:not(.tv) .cand.dir .foto{grid-column:2}
  body:not(.tv) .cand .pct{margin-top:6px}
  body:not(.tv) .barra-wrap{grid-area:barra;margin-top:18px}
  body:not(.tv) .barra{height:12px}
  body:not(.tv) .meio{top:-6px;bottom:-6px}
}

/* ---------- Modo TV ---------- */
body.tv{height:100dvh;overflow:hidden}
body.tv .online,body.tv .topo,body.tv .sec-estados,body.tv .como,body.tv .rodape,body.tv .linhas,body.tv .detalhes,body.tv .acoes,body.tv .btn-sm{display:none}
body.tv #voltar{display:none}
body.tv .topo{display:none}
body.tv .wrap{max-width:none;padding:0 3vw;height:100dvh}
body.tv #main{display:block}
body.tv .lateral{display:none}
body.tv .grade{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"placar mapa";gap:2.5vw;height:100dvh;margin:0;padding:3vh 0;align-items:stretch}
body.tv .placar{position:static;display:flex;flex-direction:column;justify-content:center;padding:3vh 2.5vw;border-radius:2vh}
body.tv .mapa-col{display:flex;flex-direction:column;justify-content:center;padding:2vh}
body.tv .mapa{min-height:0;flex:1}
body.tv .escopo{min-height:0}
body.tv .rotulo{font-size:max(14px,1.8vh)}
body.tv .estado{font-size:clamp(28px,5.4vh,64px);margin-top:1.5vh}
body.tv .contagem b{font-size:clamp(40px,9vh,110px)}
body.tv .contagem small{font-size:max(12px,1.6vh)}
body.tv .contagem>span{font-size:clamp(32px,7vh,90px)}
body.tv .contagem div{min-width:6vh}
body.tv .selo-final{font-size:2.4vh}
body.tv .duelo{margin-top:4vh}
body.tv .cand{border-top-width:.6vh;padding-top:1.6vh}
body.tv .cand .nome{font-size:clamp(20px,3.6vh,44px)}
body.tv .cand .part{font-size:max(14px,2vh)}
body.tv .cand .pct{font-size:clamp(40px,min(13vh,4.4vw),170px);margin-top:3vh}
body.tv .cand .votos{font-size:clamp(14px,2.4vh,30px);margin-top:1.5vh}
body.tv .barra-wrap{margin-top:4vh}
body.tv .barra{height:1.4vh}
body.tv .procedencia{display:block;margin-top:3vh;padding:0;border:0;font-size:max(13px,1.8vh)}
body.tv .procedencia p:not(:first-child){display:none}
body.tv .sair-tv{display:block}
body.tv .placar,body.tv .mapa-col{min-height:0;overflow:hidden}
body.tv .mapa{overflow:hidden;align-items:stretch}
body.tv .mapa>*{height:100%;min-height:0}
body.tv .mapa svg{max-height:calc(100dvh - 22vh)}

@media (max-width:820px){
  body.tv{height:auto;overflow:auto}
  body.tv .wrap,body.tv .grade{height:auto}
  body.tv .grade{grid-template-columns:1fr;grid-template-areas:"placar" "mapa"}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}