:root{
  --bg:#0E1A2C; --surf:#14233A; --surf2:#1B2E4A; --linha:#2A4166; --grade:#22385A;
  --tx:#E9EEF5; --tx2:#AEB7C2; --tx3:#7F8C9E;
  --ouro:#FEBA01; --verm:#E0434F; --azul:#4C8DF0;
  --bom:#3FBF7F; --ruim:#E0434F; --empate:#AEB7C2;
  --r:10px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 Barlow,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--ouro);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:Oswald,Impact,sans-serif;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin:0 0 .5em;line-height:1.15}
h1{font-size:30px} h2{font-size:20px;color:var(--tx)} h3{font-size:15px;color:var(--tx2)}
.num{font-variant-numeric:tabular-nums}

/* topo */
.topo{background:var(--surf);border-bottom:3px solid var(--verm);position:sticky;top:0;z-index:10}
.topo-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.marca{font-family:Oswald,Impact,sans-serif;font-size:24px;font-weight:700;font-style:italic;letter-spacing:.02em;display:flex;align-items:baseline;gap:1px;text-decoration:none!important}
.marca .m1{color:var(--tx)} .marca .m2{color:var(--ouro)}
.marca small{font-style:normal;font-size:11px;color:var(--tx2);margin-left:8px;letter-spacing:.2em}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:var(--tx2);padding:6px 10px;border-radius:6px;font-weight:600}
nav a:hover{color:var(--tx);background:var(--surf2);text-decoration:none}
nav a.ativo{color:var(--bg);background:var(--ouro)}
.busca{position:relative;margin-left:auto}
.busca input{background:var(--bg);border:1px solid var(--linha);color:var(--tx);border-radius:6px;padding:7px 10px;width:190px;font:inherit}
.busca input:focus{outline:2px solid var(--ouro);outline-offset:0}
.busca-res{position:absolute;right:0;top:110%;background:var(--surf2);border:1px solid var(--linha);border-radius:8px;min-width:220px;padding:4px;z-index:20}
.busca-res a{display:flex;justify-content:space-between;gap:12px;padding:6px 8px;border-radius:5px;color:var(--tx)}
.busca-res a:hover,.busca-res a.foco{background:var(--linha);text-decoration:none}
.busca-res small{color:var(--tx3)}
.conta{font-size:14px;color:var(--tx2);display:flex;gap:10px;align-items:center}
.conta button{background:none;border:0;color:var(--tx3);cursor:pointer;font:inherit;padding:0}
.conta button:hover{color:var(--tx)}

main{max-width:1180px;width:100%;margin:0 auto;padding:24px 16px 48px;flex:1;outline:none}
.carregando,.vazio{color:var(--tx3)}
.rodape{text-align:center;color:var(--tx3);font-size:13px;padding:20px 16px;border-top:1px solid var(--grade)}

/* blocos */
.card{background:var(--surf);border:1px solid var(--grade);border-radius:var(--r);padding:16px;min-width:0}
.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.g2,.g3{grid-template-columns:1fr}}
.secao{margin-top:24px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.tile{background:var(--surf);border:1px solid var(--grade);border-radius:var(--r);padding:12px 14px}
.tile .v{font-family:Oswald,Impact,sans-serif;font-size:26px;font-weight:700;line-height:1.1}
.tile .l{color:var(--tx2);font-size:13px}
.tile .s{color:var(--tx3);font-size:12px}
.hero{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.hero .sub{color:var(--tx2)}
.selo{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--surf2);color:var(--tx2);border:1px solid var(--linha);white-space:nowrap}
.selo.ouro{color:var(--bg);background:var(--ouro);border-color:var(--ouro)}
.selo.voce{color:var(--ouro);border-color:var(--ouro)}

/* tabelas */
.tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:7px 8px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--grade)}
th{color:var(--tx3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
th:first-child,td:first-child,td.esq,th.esq{text-align:left}
tbody tr:hover{background:var(--surf2)}
td.nome{font-weight:600}
th.ord{cursor:pointer;user-select:none} th.ord:hover{color:var(--tx)} th.ord.on{color:var(--ouro)}
.pos{color:var(--tx3);width:36px}
.pos1{color:var(--ouro);font-weight:700}

/* filtros */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtros select,.filtros button,.btn{background:var(--surf);color:var(--tx);border:1px solid var(--linha);border-radius:6px;padding:7px 10px;font:inherit;cursor:pointer}
.seg{display:inline-flex;border:1px solid var(--linha);border-radius:6px;overflow:hidden}
.seg button{border:0;border-radius:0;background:var(--surf);color:var(--tx2);padding:7px 11px}
.seg button+button{border-left:1px solid var(--linha)}
.seg button.on{background:var(--ouro);color:var(--bg);font-weight:600}
.btn.prim{background:var(--ouro);color:var(--bg);border-color:var(--ouro);font-weight:600}
.btn:disabled{opacity:.4;cursor:default}

/* partidas */
.lista-p{display:flex;flex-direction:column;gap:8px}
.linha-p{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--surf);border:1px solid var(--grade);border-radius:var(--r);padding:10px 14px;color:var(--tx)}
.linha-p:hover{border-color:var(--linha);background:var(--surf2);text-decoration:none}
.linha-p .meta{color:var(--tx3);font-size:13px}
.linha-p .gols{color:var(--tx2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.placar{font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:22px;display:flex;gap:8px;align-items:center;white-space:nowrap}
.placar .r{color:var(--verm)} .placar .b{color:var(--azul)} .placar .x{color:var(--tx3);font-size:15px}
.placar.grande{font-size:56px;gap:18px}
.placar .perde{opacity:.55}
.res{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:5px;font-size:12px;font-weight:700;color:var(--bg)}
.res.V{background:var(--bom)} .res.D{background:var(--ruim)} .res.E{background:var(--empate)}
.time-r{border-left:3px solid var(--verm)} .time-b{border-left:3px solid var(--azul)}
.marca-time{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:baseline}
.marca-time.r{background:var(--verm)} .marca-time.b{background:var(--azul)}

/* linha do tempo dos gols */
.tl{position:relative;height:74px;margin:6px 0 4px}
.tl .eixo{position:absolute;left:0;right:0;top:36px;height:2px;background:var(--linha)}
.tl .g{position:absolute;top:24px;width:26px;height:26px;margin-left:-13px;border-radius:50%;border:2px solid var(--surf);display:grid;place-items:center;font-size:12px;cursor:default}
.tl .g.r{background:var(--verm);top:6px} .tl .g.b{background:var(--azul);top:42px}
.tl .g.ouro{box-shadow:0 0 0 2px var(--ouro)}
.tl-esc{display:flex;justify-content:space-between;color:var(--tx3);font-size:12px}
.gol-lista{list-style:none;margin:10px 0 0;padding:0;font-size:14px}
.gol-lista li{padding:5px 0;border-bottom:1px solid var(--grade);display:flex;gap:10px;align-items:baseline}
.gol-lista .min{color:var(--tx3);width:44px;flex:none}
.gol-lista .det{color:var(--tx3);font-size:13px}

/* comparação de times */
.cmp{display:grid;grid-template-columns:52px 1fr 52px;gap:4px 10px;align-items:center;font-size:14px}
.cmp .rot{grid-column:1/-1;text-align:center;color:var(--tx2);font-size:13px;margin-top:6px}
.cmp .v1{text-align:right;font-weight:600} .cmp .v2{font-weight:600}
.cmp .barra{display:flex;height:8px;gap:2px}
.cmp .barra i{display:block;height:100%;border-radius:4px}
.cmp .barra .r{background:var(--verm)} .cmp .barra .b{background:var(--azul)}

/* gráficos */
.heat svg,.horas svg{display:block;width:100%;height:auto}
.legenda-seq{display:flex;align-items:center;gap:8px;color:var(--tx3);font-size:12px;margin-top:6px}
.legenda-seq .rampa{height:8px;width:120px;border-radius:4px}
.ajuda{color:var(--tx3);font-size:13px;margin:0 0 8px}
.tip{position:fixed;z-index:50;pointer-events:none;background:#0A1322;border:1px solid var(--linha);color:var(--tx);padding:6px 9px;border-radius:6px;font-size:13px;max-width:260px;box-shadow:0 4px 18px #0008}
.tip b{color:var(--tx)} .tip span{color:var(--tx2)}
.conq{display:flex;flex-wrap:wrap;gap:8px}
.conq .c{background:var(--surf2);border:1px solid var(--linha);border-radius:8px;padding:8px 12px;font-size:14px}
.conq .c b{font-family:Oswald,Impact,sans-serif;font-size:20px;margin-right:6px;color:var(--ouro)}
.rec{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rec .card .v{font-family:Oswald,Impact,sans-serif;font-size:30px;color:var(--ouro);line-height:1.1}
.rec .card .q{font-weight:600}
.rec .card .d{color:var(--tx3);font-size:12px}

/* login */
.login{max-width:380px;margin:20px auto}
.login label{display:block;color:var(--tx2);font-size:13px;margin:12px 0 4px}
.login input{width:100%;background:var(--bg);border:1px solid var(--linha);color:var(--tx);border-radius:6px;padding:9px 10px;font:inherit}
.login .erro{color:var(--verm);min-height:1.5em;margin:10px 0 0;font-size:14px}
.login .btn{width:100%;margin-top:14px;padding:10px}

@media (max-width:640px){
  .busca{margin-left:0;flex:1} .busca input{width:100%}
  .placar.grande{font-size:40px}
  .linha-p{grid-template-columns:auto 1fr}
  .linha-p .meta2{display:none}
  h1{font-size:24px}
}

/* tabelas de rótulo/valor (perfil) */
table.kv td{white-space:normal}
table.kv td:last-child{text-align:right}
table.kv small{display:block;color:var(--tx3);font-size:12px;font-weight:400}
@media (max-width:640px){
  .topo-in{gap:8px 12px}
  .busca{order:5;flex-basis:100%}
  .conta{margin-left:auto}
}

/* v2 */
.kit{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1px solid #000}
.conf{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-weight:600}
.conf .x{color:var(--tx3);font-weight:400;margin:0 2px}
.linha-p .conf{font-size:14px}
tr.eu{background:var(--surf2)}
.nv{color:var(--tx3);font-size:12px;font-weight:400}
.btn.mini{padding:2px 8px;font-size:12px}
.gol-lista li{align-items:center}
.pens{display:flex;flex-wrap:wrap;gap:6px}
.pen{font-size:13px;padding:3px 8px;border-radius:6px;background:var(--surf2);border-left:3px solid var(--linha)}
.pen.r{border-left-color:var(--verm)} .pen.b{border-left-color:var(--azul)}
table.st td,table.st th{padding:5px 6px}
table.st td.esq{white-space:normal}
.pcol{white-space:nowrap}
.pbar{display:inline-block;width:64px;height:8px;border-radius:4px;background:var(--grade);vertical-align:middle;overflow:hidden}
.pbar i{display:block;height:100%;border-radius:4px}
.pbar.vazia{opacity:.5}
.pv{display:inline-block;width:26px;text-align:right;font-size:12px;color:var(--tx2);font-variant-numeric:tabular-nums;margin-left:6px}
.nivel{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.xpbar{display:inline-block;width:160px;height:8px;border-radius:4px;background:var(--grade);overflow:hidden}
.xpbar i{display:block;height:100%;background:var(--ouro);border-radius:4px}
.det{color:var(--tx3);font-size:13px;font-weight:400}
.legenda{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13px;color:var(--tx2);margin-top:8px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.pares{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.par{display:grid;grid-template-columns:minmax(0,1fr) 120px 40px;gap:10px;align-items:center;color:var(--tx);padding:3px 4px;border-radius:5px}
.par:hover{background:var(--surf2);text-decoration:none}
.par span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb{height:8px;background:var(--grade);border-radius:4px;overflow:hidden}.pb i{display:block;height:100%;background:var(--ouro);border-radius:4px}
.mis{list-style:none;margin:0;padding:0}
.mis li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--grade);font-size:14px}
.mis li.ok span:nth-child(2){color:var(--tx2);text-decoration:line-through}
.mis .xp{color:var(--ouro);font-size:13px;white-space:nowrap}
.emb{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.emb .e{background:var(--surf2);border:1px solid var(--linha);border-radius:8px;padding:8px;text-align:center;position:relative}
.emb .e.off{opacity:.35;filter:grayscale(1)}
.emb .ic{font-size:24px;display:block}.emb .tier{position:absolute;top:4px;right:6px;font-size:14px}.emb .en{font-size:12px;color:var(--tx2)}
.lances{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.lance{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--surf);border:1px solid var(--grade);border-radius:var(--r);padding:10px 12px;color:var(--tx);font:inherit;cursor:pointer}
.lance:hover{border-color:var(--ouro)}
.lance b{color:var(--ouro)}
.lance-modal{position:fixed;inset:0;background:#000b;z-index:60;display:grid;place-items:center;padding:16px}
.lance-modal[hidden]{display:none}
.lance-box{background:var(--surf);border:1px solid var(--linha);border-radius:12px;padding:14px;width:min(1140px,100%)}
.lance-top{display:flex;gap:10px;align-items:center;margin-bottom:10px}.lance-tit{flex:1}
.lance-fechar{background:none;border:0;color:var(--tx2);font-size:20px;cursor:pointer}
.lance-box canvas{width:100%;height:auto;display:block;border-radius:8px}
.lance-ctl{display:flex;gap:10px;align-items:center;margin-top:10px}.lance-prog{flex:1}
.cmpt td{padding:6px}.cmpt td.mid{text-align:center;color:var(--tx2);white-space:normal}.cmpt td.melhor{color:var(--ouro);font-weight:700}
.cmp-esc{max-width:420px;position:relative}.cmp-esc label{display:block;color:var(--tx2);font-size:13px;margin:10px 0 4px}
.cmp-esc input{display:block;width:100%;margin-top:4px;background:var(--bg);border:1px solid var(--linha);color:var(--tx);border-radius:6px;padding:9px 10px;font:inherit}
.cmp-esc .busca-res{position:relative;top:4px;right:auto}
.filtros select{max-width:100%}
@media (max-width:640px){.pbar{width:44px}.par{grid-template-columns:minmax(0,1fr) 70px 34px}.xpbar{width:110px}}

.lance[hidden]{display:none}
.cmpt{min-width:520px}

/* v3: botão do perfil e resumo */
.btn-perfil{background:var(--ouro);color:var(--bg)!important;font-weight:700;padding:7px 12px;border-radius:6px;white-space:nowrap}
.btn-perfil:hover{text-decoration:none;filter:brightness(1.08)}
.resumo .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.resumo .tile{background:var(--surf2)}
.tile .tp{margin-top:6px;display:flex;align-items:center}
.tile .tp .pbar{flex:1;width:auto}