/* Os melhores jogos: identidade do relatório (fundo escuro, cores chapadas, capas reais). Celular primeiro. */
:root{
  --bg:#0e1120; --painel:#151a2d; --painel2:#1b2140; --linha:#272e4d; --texto:#e9ebf5; --suave:#a3abc8; --fraco:#6f7799;
  /* fontes: paleta validada para fundo escuro (faixa de luminosidade, daltonismo e contraste); cada cor vem sempre com a sigla */
  --oc:#e66a2c; --mc:#2fa66a; --mcu:#4b8be6; --bl:#d9487f;
  --acento:#8b7bff; --ouro:#e2b23c; --bom:#3ddc97; --ruim:#ff6b6b;
  /* anos fixados (até 6), na ordem em que são fixados: validadas no fundo dos cartões (faixa de luminosidade, contraste e daltonismo
     entre vizinhas, pior par 7,7); como o par mais próximo fica abaixo de 8, cada ano vem sempre com o número escrito ao lado */
  --y0:#8b7bff; --y1:#1fa9a0; --y2:#c08420; --y3:#3b8bd6; --y4:#e0607e; --y5:#78a32e;
  --raio:14px;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--texto);-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.015em}
img{max-width:100%}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--linha)}
.topo-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.marca{display:flex;align-items:center;gap:8px;font-weight:800;white-space:nowrap}
.marca svg{width:24px;height:16px;fill:var(--ouro)}
.marca b{font-weight:800;color:var(--suave)}
.busca{flex:1;position:relative;max-width:420px;margin-left:auto}
.busca input{width:100%;background:var(--painel);border:1px solid var(--linha);border-radius:10px;padding:8px 12px;outline:none}
.busca input:focus{border-color:var(--acento)}
.busca-res{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--painel);border:1px solid var(--linha);border-radius:12px;overflow:hidden;max-height:70vh;overflow-y:auto}
.busca-res a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--linha)}
.busca-res a:hover,.busca-res a.foco{background:var(--painel2)}
.busca-res small{display:block;color:var(--suave);font-size:12px}
.abas{max-width:1180px;margin:0 auto;display:flex;gap:4px;padding:0 12px 8px;overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas a{padding:7px 12px;border-radius:999px;color:var(--suave);font-weight:600;font-size:14px;white-space:nowrap}
.abas a.on{background:var(--painel2);color:var(--texto)}
@media (max-width:640px){.marca span{display:none}}

/* ---------- página ---------- */
main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:18px 16px 40px}
.cab{margin:6px 0 18px}
.kick{text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:700;color:var(--acento)}
.cab h1{font-size:clamp(26px,5vw,40px);font-weight:850;margin-top:6px}
.lead{color:var(--suave);max-width:760px;margin:10px 0 0}
.secao{margin-top:28px}
.secao>h2{font-size:21px;font-weight:800;margin-bottom:12px}
.grade{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.cartao{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:16px}
.cartao h3{font-size:16px;font-weight:750;margin-bottom:10px}
.nota-graf{color:var(--fraco);font-size:12.5px;margin:8px 0 0}
.vazio{color:var(--fraco);padding:20px;text-align:center}
.aviso{background:var(--painel2);border-left:3px solid var(--ouro);border-radius:8px;padding:10px 12px;color:var(--suave);font-size:14px;margin:10px 0}
.sub{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.sub a,.chip{padding:6px 12px;border-radius:999px;background:var(--painel);border:1px solid var(--linha);font-size:13.5px;font-weight:600;color:var(--suave);cursor:pointer}
.sub a.on,.chip.on{background:var(--acento);border-color:var(--acento);color:#fff}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filtros select{max-width:100%}
.filtros select,.filtros input{background:var(--painel);border:1px solid var(--linha);border-radius:10px;padding:7px 10px}

/* ---------- capas e selos ---------- */
.capa{display:block;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--painel2);flex:none}
.capa.ini{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px}
.c40{width:40px}.c56{width:56px}.c80{width:80px}.c120{width:120px}.c160{width:160px}
.sel{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:6px;font-size:11.5px;font-weight:750;color:#fff;white-space:nowrap}
.s-oc{background:var(--oc)}.s-mc{background:var(--mc)}.s-mcu{background:var(--mcu)}.s-bl{background:var(--bl)}
.sel.vazio-s{background:transparent;border:1px dashed var(--linha);color:var(--fraco)}
.gen{display:inline-block;padding:1px 8px;border-radius:6px;font-size:11.5px;font-weight:700;color:#fff}
.tag{display:inline-block;padding:1px 7px;border-radius:6px;font-size:11.5px;font-weight:700;background:var(--painel2);color:var(--suave);border:1px solid var(--linha)}
.tag.ouro{color:var(--ouro);border-color:var(--ouro)}
.tag.bom{color:var(--bom);border-color:var(--bom)}.tag.ruim{color:var(--ruim);border-color:var(--ruim)}
.coroa{width:22px;height:15px;vertical-align:-2px}

/* ---------- ranking ---------- */
.rk{display:flex;flex-direction:column;gap:6px}
.rk-l{display:grid;grid-template-columns:34px 44px 1fr auto;gap:10px;align-items:center;background:var(--painel);border:1px solid var(--linha);border-radius:12px;padding:8px 12px 8px 10px}
.rk-l:hover{border-color:var(--acento)}
.rk-p{font-weight:850;font-size:18px;text-align:center;color:var(--suave)}
.rk-l.top3 .rk-p{color:var(--ouro)}
.rk-n{min-width:0}
.rk-n b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-n .linha2{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.rk-d{text-align:right;font-size:12.5px;color:var(--suave);white-space:nowrap}
.rk-d b{display:block;font-size:17px;color:var(--texto)}
.notas4{display:grid;grid-template-columns:repeat(4,auto);gap:4px 10px;font-size:12.5px;color:var(--suave)}
@media (max-width:640px){.rk-l{grid-template-columns:26px 40px 1fr}.rk-d{grid-column:3;text-align:left}.rk-d b{display:inline;font-size:14px;margin-right:6px}}

/* ---------- mosaicos de capas ---------- */
.mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.mosaico a{position:relative;display:block}
.mosaico .num{position:absolute;top:6px;left:6px;background:rgba(14,17,32,.88);border-radius:6px;padding:0 6px;font-weight:800;font-size:13px}
.mosaico .nm{font-size:12.5px;font-weight:600;margin-top:5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- números grandes ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--painel);border:1px solid var(--linha);border-radius:12px;padding:12px 14px}
.kpi span{display:block;color:var(--suave);font-size:12.5px}
.kpi b{display:block;font-size:24px;font-weight:850;margin-top:2px}
.kpi small{color:var(--fraco);font-size:12px}

/* ---------- ficha do jogo ---------- */
.ficha{display:grid;grid-template-columns:180px 1fr;gap:20px}
@media (max-width:640px){.ficha{grid-template-columns:1fr}.ficha .capa{width:150px}}
.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:14px 0}
.placar div{background:var(--painel);border:1px solid var(--linha);border-top:3px solid var(--c);border-radius:10px;padding:8px 10px}
.placar span{display:block;font-size:11.5px;color:var(--suave);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.placar b{font-size:24px;font-weight:850}
.placar small{display:block;color:var(--fraco);font-size:12px}
.pros li{margin:3px 0}
.pros .mais::marker{content:"+  ";color:var(--bom);font-weight:800}
.pros .menos::marker{content:"–  ";color:var(--ruim);font-weight:800}

/* ---------- tabelas ---------- */
.tabwrap{overflow-x:auto;border:1px solid var(--linha);border-radius:12px}
table.tab{border-collapse:collapse;width:100%;font-size:14px}
.tab th,.tab td{padding:8px 10px;border-bottom:1px solid var(--linha);text-align:left;white-space:nowrap}
.tab th{font-size:12px;color:var(--suave);font-weight:700;background:var(--painel);position:sticky;top:0}
.tab td.n,.tab th.n{text-align:right;font-variant-numeric:tabular-nums}
.tab tr:last-child td{border-bottom:0}
.tab tr.destaque td{background:var(--painel2)}
.barra{display:inline-block;height:8px;border-radius:4px;background:var(--acento);vertical-align:middle;margin-left:6px}

/* ---------- TGA ---------- */
.cat{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px}
.cat h3{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:16px}
.cat ol,.cat ul{margin:8px 0 0;padding-left:20px}
.cat li{margin:2px 0}
.cat .venc{color:var(--ouro);font-weight:700}
.cat .por{color:var(--suave);font-size:14px;margin-top:8px}
.barrinha{height:8px;border-radius:4px;background:var(--painel2);overflow:hidden;margin-top:6px}
.barrinha i{display:block;height:100%;background:var(--acento)}

/* ---------- comparar ---------- */
.lado{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.lado .cartao{text-align:center}
.lado .cartao .capa{margin:0 auto 10px}
.lado .x{float:right;background:none;border:0;color:var(--fraco);cursor:pointer;font-size:18px}
.graf{position:relative;height:320px}
.graf.h420{height:420px}

/* ---------- rodapé e dicas ---------- */
.rodape{border-top:1px solid var(--linha);color:var(--fraco);font-size:12.5px}
.rodape div{max-width:1180px;margin:0 auto;padding:14px 16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dica{position:fixed;z-index:50;background:#05070f;border:1px solid var(--linha);border-radius:10px;padding:8px 10px;font-size:13px;max-width:280px;pointer-events:none}
.carregando{color:var(--fraco);padding:40px;text-align:center}

/* ---------- estatística ---------- */
.caixas{width:100%;max-width:640px;height:auto;display:block;margin:6px 0}
.tag-ano{display:inline-block;padding:0 7px;border-radius:6px;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.kpi span.tag-ano{display:inline-block}
.tab.mini{font-size:13px;margin-top:6px}.tab.mini td,.tab.mini th{padding:5px 8px}
.tab.calor td.n{min-width:44px}
.tab.cruz td.n{min-width:70px}.tab.cruz td small{color:var(--suave);font-size:11px}
.bloco{margin-top:26px;scroll-margin-top:120px}
.bloco-t{font-size:23px;font-weight:850;margin:0 0 14px;padding-top:14px;border-top:1px solid var(--linha)}
.lado .num-jogo{position:absolute;margin:-6px 0 0 -6px;background:var(--ouro);color:#14110a;font-weight:850;border-radius:8px;padding:0 8px}
.lado .cartao{position:relative}

/* ---------- linha do tempo (aba Melhores por ano) ---------- */
.tempo{margin:0 0 14px}
.tempo-l{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.tempo-l a{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;padding:7px 10px;border-radius:12px;
  background:var(--painel);border:1px solid var(--linha);font-weight:800;font-size:14.5px;color:var(--suave);position:relative}
.tempo-l a small{font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--fraco);line-height:1}
.tempo-l a.on{background:var(--acento);border-color:var(--acento);color:#fff}.tempo-l a.on small{color:#e9e5ff}
.tempo-l a.fixo{box-shadow:inset 0 0 0 2px var(--ouro);color:var(--texto)}
.tempo-l a.fixo::after{content:"";position:absolute;top:4px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--ouro)}
.tempo-dica{margin:2px 2px 0;color:var(--fraco);font-size:12px}
[data-fixar]{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.rk-l.fixo{border-color:var(--ouro);box-shadow:inset 4px 0 0 var(--ouro)}
.mosaico a.fixo .capa{outline:3px solid var(--ouro);outline-offset:2px}
.cat a.fixo{color:var(--ouro)}
.pino-i{width:14px;height:14px;fill:currentColor;vertical-align:-2px}
.chip.pino{display:inline-flex;align-items:center;gap:6px}

/* ---------- caixa "Fixados": canto inferior direito; no celular, barra no rodapé ---------- */
.fixados{position:fixed;z-index:30;right:16px;bottom:16px;width:min(380px,calc(100vw - 32px));background:var(--painel2);border:1px solid var(--acento);
  border-radius:14px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.fx-cab{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--suave)}
.fx-cab b{color:var(--texto);display:flex;align-items:center;gap:5px}
.fx-limpar{margin-left:auto;background:none;border:0;color:var(--fraco);cursor:pointer;font-size:12.5px;text-decoration:underline}
.fx-aviso{font-size:12.5px;color:var(--ouro);margin:6px 0 0}
.fx-itens{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 8px;max-height:132px;overflow-y:auto;padding-top:4px}
.fx-chip{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--painel);border:1px solid var(--linha);border-radius:9px;
  padding:4px 10px 4px 7px;font-weight:800;font-size:13px}
.fx-chip.jogo{font-weight:650;max-width:170px}
.fx-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-cor{width:10px;height:10px;border-radius:3px;flex:none}
.fx-n{font-size:11px;color:var(--ouro)}
.c20{width:20px;border-radius:4px}
.fx-x{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;border:1px solid var(--linha);background:var(--bg);color:var(--suave);
  font-size:12px;line-height:15px;padding:0;cursor:pointer}
.fx-x:hover{color:var(--texto);border-color:var(--ruim)}
.fx-ir{display:block;text-align:center}
.fx-ir-mini{margin-left:auto;padding:4px 12px}
.fx-min{background:var(--painel);border:1px solid var(--linha);border-radius:8px;color:var(--suave);cursor:pointer;width:30px;height:26px;padding:0;font-size:13px}
.fixados:not(.recolhido) .fx-min{margin-left:6px}
body.com-fixados main{padding-bottom:190px}
body.com-fixados:has(.fixados.recolhido) main{padding-bottom:80px}
@media (max-width:640px){
  .fixados{left:0;right:0;bottom:0;width:auto;border-radius:14px 14px 0 0;border-width:1px 0 0;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .fx-itens{flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;max-height:none;padding:6px 8px 2px 2px;margin:6px 0}
  .fx-chip{flex:none}
  .fx-chip.jogo{max-width:140px}
  body.com-fixados main{padding-bottom:170px}
}
.tab.comp td,.tab.comp th{white-space:normal}
.tab.comp td:first-child{color:var(--suave);min-width:150px}
.tab.comp th.n,.tab.comp td.n{min-width:110px;max-width:200px}
@media (max-width:640px){.tab.comp td:first-child{min-width:118px}.tab.comp th.n,.tab.comp td.n{min-width:96px}
  .tab.comp.fixa{table-layout:fixed}.tab.comp.fixa th:first-child{width:36%}
  .tab.comp.fixa td:first-child,.tab.comp.fixa th.n,.tab.comp.fixa td.n{min-width:0;overflow-wrap:anywhere}}
.tab td.melhor{color:var(--bom);font-weight:800}
.kpi span.tag-ano{color:#fff}
.cruz-ano{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 18px}
@media (min-width:960px){.cruz-ano{grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:start}.cruz-ano>h3,.cruz-ano>.nota-graf{grid-column:1/-1}}
.tab tr.grupo td{background:var(--painel2);color:var(--texto);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}

/* ---------- imagem para compartilhar (js/compartilhar.js) ---------- */
.img-bt{display:inline-flex;align-items:center;gap:6px}
.img-bt svg{width:15px;height:15px;fill:currentColor}
.img-modal{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.65);display:grid;place-items:center;padding:16px}
.img-caixa{background:var(--painel);border:1px solid var(--linha);border-radius:14px;padding:14px;width:min(560px,100%);max-height:calc(100vh - 32px);
  display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.img-cab{display:flex;justify-content:space-between;align-items:center}
.img-prev{overflow:auto;min-height:120px;border-radius:10px;background:var(--bg);display:grid;place-items:start center;gap:10px}
.img-prev img{display:block;width:100%;height:auto}
.img-acoes{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- aba Por gênero (js/generos.js) ---------- */
.gen-card{display:flex;flex-direction:column;gap:10px;border-top:4px solid var(--g,var(--acento));transition:border-color .15s,transform .15s}
.gen-card:hover{transform:translateY(-2px)}
.gen-card.estilo{border-top-color:var(--acento)}
.gen-tp{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.gen-tp b{font-size:18px}.gen-tp small{color:var(--suave);font-size:12.5px}
.mosaico.m3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gen-subs{display:flex;flex-wrap:wrap;gap:4px}
.gen-calor td{padding:0}.gen-calor td a{display:block;padding:6px 8px;color:#fff;font-weight:700}
.gen-calor td.vazio-c a,.gen-calor td.vazio-c{color:var(--fraco);font-weight:600}
.gen-calor td:first-child{padding:6px 8px;position:sticky;left:0;background:var(--painel);z-index:1}
.gen-anos{margin:0 0 12px}.gen-anos a small{font-size:10px}
.gen-filhos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.gen-filhos .chip small{color:var(--fraco);font-weight:700;margin-left:2px}
.gen-filhos .chip.on small{color:#e9e5ff}
.gen-corpo{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:16px}
.gen-lado{display:flex;flex-direction:column;gap:14px;position:sticky;top:120px}
.gen-graf{height:240px}
.fora-rk{color:var(--ouro)}
.mais{display:block;margin:14px auto 0}
@media (max-width:900px){.gen-corpo{grid-template-columns:minmax(0,1fr)}.gen-lado{position:static;order:-1}}
.gen-card:hover{transform:none}
.gen-tp a:hover b{text-decoration:underline}
.gen-subs a.tag:hover{color:var(--texto);border-color:var(--acento)}
.gen-ir{align-self:flex-start;margin-top:auto}

/* ---------- aba Análises (js/analises.js) ---------- */
.an-duas{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start;gap:16px}
@media (max-width:900px){.an-duas{grid-template-columns:minmax(0,1fr)}}
.an-franq tr[data-f]{cursor:pointer}.an-franq td.bom{color:var(--bom)}.an-franq td.ruim{color:var(--ruim)}
.an-graf{height:240px;margin:10px 0 12px}.graf.h320{height:320px}
.an-plat td small{display:block;color:var(--suave);font-size:11.5px}.an-plat td{min-width:150px}
.an-meses{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.an-meses>div{background:var(--painel2);border-radius:10px;padding:10px}.an-meses b{text-transform:uppercase;font-size:12px;color:var(--suave);display:block}
.an-meses span{font-size:22px;font-weight:800}.an-meses small{display:block;color:var(--fraco);font-size:11.5px}
.an-mini{display:flex;gap:4px;margin-top:6px}
.an-linha{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0}.an-linha a{display:flex;gap:8px;align-items:center}
.an-linha small{color:var(--fraco)}.bom{color:var(--bom)}.ruim{color:var(--ruim)}
.an-det h4{margin:12px 0 4px;font-size:14px;color:var(--suave)}
.an-sel{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.an-busca{position:relative;flex:1;min-width:200px;max-width:340px}
.an-busca input{width:100%}.an-busca .busca-res{position:absolute;z-index:20;left:0;right:0}
.an-vence{display:flex;gap:14px;align-items:center;margin:14px 0}.an-vence h2{margin:4px 0}

/* ---------- estatística (js/estatistica.js) ---------- */
.conc-tab td{font-variant-numeric:tabular-nums;font-size:12.5px}.conc-tab td:first-child{white-space:nowrap;color:var(--suave)}
.mapa-graf{height:560px}@media (max-width:640px){.mapa-graf{height:440px}}
.legenda-j{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--suave);margin:8px 0 0}.legenda-j i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
#i-s{display:block;width:100%;height:auto}.inc-t{fill:var(--suave);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.inc-n{fill:var(--texto);font-size:12px}.inc:hover .inc-n{font-weight:800}
svg.tree{display:block}.tg-n{fill:#fff;font-size:12px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.6)}.tf-n{fill:#fff;font-size:11.5px;font-weight:700}.tf-v{fill:#fffc;font-size:11px}
.tf:hover rect{stroke:#fff;stroke-width:2}

/* ---------- extras: ficha e comparação (extras_jogo.js, baixar.js) ---------- */
.bx-bt{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:8px;border:1px solid var(--linha);background:var(--painel2);color:var(--suave);cursor:pointer;display:grid;place-items:center;padding:0}
.bx-bt:hover{color:var(--texto);border-color:var(--acento)}.bx-bt svg{width:15px;height:15px}
.cartao:has(> .bx-bt)>h3{padding-right:38px}
.capa-fix{display:block;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.capa-fix.fixo .capa{outline:3px solid var(--ouro);outline-offset:3px}
.bullets{display:flex;flex-direction:column;gap:10px}.bl-l>span{font-weight:700;font-size:13px}
.bl-b{display:flex;flex-direction:column;gap:3px;margin-top:3px}.bl-r{display:grid;grid-template-columns:70px 1fr 34px;gap:8px;align-items:center}
.bl-r small{color:var(--fraco);font-size:11.5px}.bl-r i{display:block;height:8px;border-radius:4px;background:var(--painel2);overflow:hidden}.bl-r b{display:block;height:100%;background:var(--acento);border-radius:4px}
.bl-r em{font-style:normal;font-weight:800;font-size:12.5px;text-align:right}
.gc3-tab td{font-size:12px;white-space:nowrap}.gc3-tab td small{display:block;color:var(--fraco);font-size:10px}.gc3-real{outline:1px solid var(--ouro);outline-offset:-2px}
.tempo-l a small{display:block}

.porque { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--cartao, rgba(255,255,255,.04)); border-left: 4px solid var(--ouro, #e2b23c); line-height: 1.5; max-width: 760px; }
.mosaico.m6 { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.graf.h260{height:260px}.graf.h360{height:360px}
.kpis.mini .kpi b{font-size:1.25rem}

/* ---------- hoje na história ---------- */
.hj-nav { float: right; display: inline-flex; gap: 6px; }
.hj-nav .chip { padding: 3px 10px; }
.hj-jogo { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 10px; }
.hj-jogo > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hj-jogo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hj-jogo small { color: var(--suave); font-size: .78rem; }
.hj-jogo .coroa { width: 14px; height: 10px; vertical-align: -1px; }
/* ---------- vendas × nota ---------- */
.lista-an { display: grid; gap: 4px; margin-top: 8px; }
.linha-an { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 6px; border-radius: 8px; text-decoration: none; color: inherit; }
.linha-an:hover { background: var(--linha); }
.linha-an b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.linha-an small { color: var(--suave); font-size: .74rem; display: block; }
.linha-an em { font-style: normal; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.linha-an em small { font-weight: 500; }
.an-vendas { margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* ---------- as notas de cada plataforma ---------- */
svg.ridge-g .rg-grade { stroke: var(--linha); }
svg.ridge-g .rg-eixo { font-size: 11px; fill: var(--suave); text-anchor: middle; }
svg.ridge-g .rg-nome { font-size: 13px; font-weight: 700; fill: var(--texto, #e5e7eb); text-anchor: end; }
svg.ridge-g .rg-n { font-size: 10.5px; fill: var(--suave); text-anchor: end; }
svg.ridge-g .rg-med { font-size: 12px; font-weight: 700; fill: var(--texto, #e5e7eb); }
svg.ridge-g text.rg-med + text.rg-n, svg.ridge-g .rg-med ~ .rg-n { text-anchor: start; }
svg.ridge-g .rg-linha { cursor: default; }
svg.ridge-g .rg-linha:hover path { fill-opacity: .85; }

/* ---------- jogo contra jogo e réguas (svg.vs) ---------- */
.vs-card { margin-bottom: 14px; }
.vs-card .gi-alvo { overflow-x: auto; }
svg.vs { display: block; width: 100%; height: auto; min-width: 620px; font-family: inherit; }
svg.vs text { fill: var(--texto); } svg.vs .vs-mu { fill: var(--suave); } svg.vs .vs-gd { fill: var(--ouro); }
svg.vs .b { font-weight: 700; } svg.vs .n { font-variant-numeric: tabular-nums; }
svg.vs .vs-gr { stroke: var(--linha); } svg.vs .vs-sf { fill: var(--painel2); stroke: var(--linha); }
svg.vs .vs-liga { stroke: var(--suave); opacity: .45; } svg.vs .vs-trilho { stroke: var(--linha); }
svg.vs .vs-selo { fill: var(--ouro); opacity: .16; } svg.vs .vs-ponto { stroke: var(--painel); stroke-width: 1.5; }

/* ---------- gerar imagem ---------- */
.gi-bt { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  background: var(--brand-2, var(--acento, var(--gold))); color: var(--brand-2-ink, #fff); }
.gi-bt svg { width: 16px; height: 16px; }
.gi-bt:focus-visible { outline: 2px solid var(--gold, #e2b23c); outline-offset: 2px; }
.gi-modal { position: fixed; inset: 0; z-index: 130; background: rgba(0, 0, 0, .62); display: grid; place-items: center; padding: 14px; }
.gi-caixa { background: var(--surface, var(--painel)); color: var(--ink, var(--texto)); border-radius: 14px; width: min(980px, 100%); max-height: calc(100vh - 28px); overflow: auto; padding: 14px 16px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.gi-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 1.05rem; }
.gi-x { border: 0; background: none; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 6px; }
.gi-corpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 1fr); gap: 18px; }
@media (max-width: 760px) { .gi-corpo { grid-template-columns: 1fr; } }
.gi-prev { background: var(--surface-3, var(--painel2, #0003)); border-radius: 10px; padding: 10px; display: grid; place-items: center; min-height: 220px; }
.gi-prev img { display: block; max-width: 100%; max-height: 68vh; height: auto; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
.gi-car { color: var(--muted, var(--suave)); }
.gi-op { display: flex; flex-direction: column; gap: 14px; }
.gi-grupo > span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, var(--suave)); margin-bottom: 6px; }
.gi-fmt { display: flex; gap: 6px; flex-wrap: wrap; }
.gi-fmt button { border: 1px solid var(--line, var(--linha)); background: none; color: inherit; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .88rem; cursor: pointer; }
.gi-fmt button small { color: var(--muted, var(--suave)); }
.gi-fmt button.on { border-color: var(--brand-2, var(--acento, var(--gold))); box-shadow: inset 0 0 0 1px var(--brand-2, var(--acento, var(--gold))); font-weight: 700; }
.gi-chk { display: flex; gap: 8px; align-items: center; margin: 4px 0; cursor: pointer; }
.gi-chk input { accent-color: var(--brand-2, var(--acento, var(--gold))); width: 16px; height: 16px; }
.gi-bts { display: flex; gap: 8px; flex-wrap: wrap; }
.gi-bts > * { border: 1px solid var(--line, var(--linha)); background: none; color: inherit; border-radius: 8px; padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.gi-bts .gi-pri { background: var(--brand-2, var(--acento, var(--gold))); border-color: transparent; color: var(--brand-2-ink, #fff); }
.gi-nota { font-size: .8rem; color: var(--muted, var(--suave)); margin: 0; }
/* ---------- tutorial em rolagem (página inicial) ---------- */
.tut { display: grid; grid-template-columns: minmax(280px, 38%) 1fr; gap: 28px; align-items: start; }
.tut-passos { grid-column: 1; grid-row: 1; }
.tut-palco { grid-column: 2; grid-row: 1; position: sticky; top: 92px; height: calc(100vh - 120px); min-height: 420px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 70% 10%, var(--T-sup) 0%, var(--T-sup3) 100%); border: 1px solid var(--T-linha); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.tut-passo { min-height: 105vh; display: flex; align-items: center; }
.tut-passo:first-child { min-height: 90vh; align-items: flex-start; padding-top: 12vh; }
.tut-texto { padding: 22px 24px; border-radius: 18px; background: var(--T-sup); border: 1px solid var(--T-linha); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); max-width: 440px;
  opacity: .35; transform: translateY(16px) scale(.98); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.tut-passo.on .tut-texto { opacity: 1; transform: none; }
.tut-texto h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 4px 0 10px; text-wrap: balance; }
.tut-texto p { color: var(--T-tinta2); line-height: 1.55; }
.tut-passo:first-child h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.tut-desca { color: var(--T-mudo); animation: tut-pula 1.6s ease-in-out infinite; }
@keyframes tut-pula { 50% { transform: translateY(6px); } }
.tut-fim { min-height: 60vh; padding: 40px 0 80px; } .tut-fim h2 { font-size: 2rem; } .tut-fim .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tut-barra { position: absolute; left: 18px; right: 18px; bottom: 14px; height: 4px; border-radius: 2px; background: var(--T-linha); }
.tut-barra i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--T-ouro); transition: width .15s linear; }
.tut-cena { position: absolute; inset: 0; padding: 22px 22px 34px; opacity: 0; transform: scale(.97); pointer-events: none;
  transition: opacity .55s ease, transform .7s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
.tut-cena.on { opacity: 1; transform: none; }
.ti-campo { position: relative; flex: 1; }
.ti-esc { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; will-change: left, top; }
.ti-esc span { opacity: var(--k, 0); font-size: .9rem; } .ti-esc span em { font-style: normal; color: var(--T-ouro); font-weight: 800; margin-left: 6px; }
.ti-titulo { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; opacity: 0; } .ti-titulo b { display: block; font-size: 1.4rem; } .ti-titulo small { color: var(--T-mudo); }
.tc-bandeja { display: flex; gap: 8px; align-items: center; margin: 12px 0; padding: 8px 12px; border-radius: 12px; background: var(--T-marca); color: #fff; font-weight: 700; flex-wrap: wrap; }
.tc-fix { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--T-sup); color: var(--T-tinta); opacity: 0; }
.tc-toque { display: none; }
.tocado .tc-toque { display: block; position: absolute; right: 10px; top: 50%; margin-top: -13px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--T-ouro); animation: tc-toque .5s ease-out infinite; }
@keyframes tc-toque { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.fixado { border-color: var(--T-ouro) !important; box-shadow: 0 0 0 2px var(--T-ouro); }
.tg-palco { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px; }
.tg-cartao { max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; height: 100%; border-radius: 14px; padding: 5%; background: var(--T-cartao); color: #f6efe2;
  display: flex; flex-direction: column; gap: 6%; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); opacity: 0; overflow: hidden; }
.tg-marca { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; } .tg-tit { font-size: 1.15rem; }
.tg-esc { display: flex; gap: 6px; flex-wrap: wrap; } .tg-esc img, .tg-esc .ini { width: 34px !important; height: auto; border-radius: 5px; }
.tg-barras { display: flex; flex-direction: column; gap: 5px; flex: 1; justify-content: center; }
.tg-barras div { position: relative; height: 18px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.tg-barras i { position: absolute; inset: 0 auto 0 0; background: var(--T-ouro); } .tg-barras span { position: relative; font-size: .72rem; padding-left: 6px; font-weight: 700; color: #1a1426; white-space: nowrap; }
.tg-cartao.largo { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows: auto auto 1fr; column-gap: 5%; } .tg-cartao.largo .tg-barras { grid-column: 2; grid-row: 1 / 4; }
.tg-fmt, .tg-acoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.tg-fmt span, .tg-acoes span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--T-linha); background: var(--T-sup); font-size: .82rem; transition: all .3s ease; }
.tg-fmt span.on { background: var(--T-marca); color: #fff; border-color: var(--T-marca); } .tg-acoes span.on { background: var(--T-ouro); color: #1a1426; border-color: var(--T-ouro); }
@media (max-width: 860px) {
  .tut { grid-template-columns: 1fr; gap: 0; }
  .tut-palco { grid-column: 1; position: sticky; top: 64px; height: 52vh; min-height: 300px; z-index: 1; }
  .tut-passos { grid-column: 1; grid-row: 2; position: relative; z-index: 2; margin-top: -10vh; }
  .tut-passo, .tut-passo:first-child { min-height: 90vh; padding-top: 0; align-items: flex-end; }
  .tut-texto { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .tut-cena, .tut-texto, .tut-barra i { transition: none; } .tut-desca, .tc-toque { animation: none !important; } }
.tut { --T-sup: var(--painel); --T-sup3: var(--bg); --T-linha: var(--linha); --T-tinta: var(--texto); --T-tinta2: var(--suave); --T-mudo: var(--fraco);
  --T-ouro: var(--ouro); --T-marca: var(--acento); --T-cartao: linear-gradient(160deg, #2a2160, #121630); }
.ti-esc .capa { width: calc(40px + 16px * (1 - var(--k, 0))) !important; border-radius: 6px; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.tj-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .tj-cab b { font-size: 1.2rem; }
.tj-cab span { display: flex; gap: 6px; } .tj-cab i { font-style: normal; }
.tj-lista { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: center; }
.tj-l { display: grid; grid-template-columns: 30px 40px 1fr auto; gap: 8px; align-items: center; opacity: 0; }
.tj-l b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tj-l .capa { border-radius: 4px; }
.tj-pos { font-weight: 800; color: var(--ouro); opacity: 0; }
.tj-sels { display: flex; gap: 4px; } .tj-sels i { font-style: normal; min-width: 42px; justify-content: center; opacity: 0; }
.tj-nota { color: var(--fraco); font-size: .8rem; text-align: center; margin: 6px 0 0; }
.ta-svg { width: 100%; flex: 1; min-height: 0; } .ta-gr { stroke: var(--linha); stroke-dasharray: 2 4; } .ta-mu { fill: var(--fraco); font-size: 11px; }
.ta-linha { fill: none; stroke: var(--acento); stroke-width: 3; stroke-linejoin: round; } .ta-p circle { fill: var(--ouro); stroke: var(--painel); stroke-width: 2; opacity: 0; }
.ta-goty { fill: var(--suave); font-size: 10px; font-weight: 600; opacity: 0; }
.tt-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1; align-content: center; }
.tt-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px; border-radius: 12px; background: var(--painel2);
  border: 1px solid var(--linha); opacity: 0; transition: filter .4s ease, box-shadow .4s ease; }
.tt-c .capa { width: 64px !important; border-radius: 6px; } .tt-c b { font-size: .85rem; line-height: 1.2; } .tt-c small { color: var(--fraco); font-size: .75rem; }
.tt-c.apaga { filter: grayscale(1) brightness(.6); } .tt-coroa { position: absolute; top: -12px; font-size: 1.4rem; opacity: 0; transition: opacity .4s ease, transform .4s ease; transform: translateY(8px); }
.tt-c.brilha { box-shadow: 0 0 0 3px var(--ouro), 0 10px 30px rgba(226, 178, 60, .35); } .tt-c.brilha .tt-coroa { opacity: 1; transform: none; }
.tt-res { text-align: center; color: var(--suave); opacity: 0; margin-top: 8px; } .tt-res b { color: var(--texto); }
.tg2-lista { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: center; }
.tg2-l { display: grid; grid-template-columns: 100px 1fr 44px 170px; gap: 8px; align-items: center; opacity: 0; }
.tg2-b { height: 18px; border-radius: 5px; background: var(--painel2); overflow: hidden; } .tg2-b i { display: block; height: 100%; width: 0; }
.tg2-l em { font-style: normal; font-weight: 800; text-align: right; }
.tg2-top { display: flex; gap: 6px; align-items: center; opacity: 0; } .tg2-top .capa { width: 26px !important; border-radius: 3px; } .tg2-top small { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-anos { display: flex; gap: 10px; } .tc-ano { position: relative; padding: 8px 46px 8px 16px; border-radius: 12px; background: var(--painel2); border: 1px solid var(--linha); font-weight: 800; font-size: 1.1rem; }
.tc-ano.fantasma { opacity: .4; padding-right: 16px; }
.tc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; opacity: 0; flex: 1; } .tc-col h4 { margin: 0 0 6px; color: var(--ouro); }
.tc-j { display: grid; grid-template-columns: 40px 1fr 30px; gap: 8px; align-items: center; margin-bottom: 6px; font-size: .88rem; opacity: 0; }
.tc-j span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-j em { font-style: normal; font-weight: 800; color: var(--mc); }
@media (max-width: 860px) { .tg2-l { grid-template-columns: 80px 1fr 40px; } .tg2-top { display: none; } .tt-c .capa { width: 44px !important; } .tj-sels i { min-width: 34px; } }

/* ---------- tutorial: telas muito altas (o "modo desktop" do celular tem ~2.000 px de altura) e celular ---------- */
.tut-palco { height: min(calc(100vh - 130px), 620px); top: max(92px, calc(50vh - 290px)); }
.tut-passo { min-height: min(100vh, 720px); }
/* as listas das cenas preenchem o palco em vez de ficarem pequenas no meio */
.tr-lista, .tl-lista, .tj-lista, .tcp-lista, .tg2-lista, .tk-lista { justify-content: space-evenly; }
.tr-l, .tl-l, .tn-l, .tj-l, .tg2-l, .tcp-l { font-size: 1rem; } .tr-barra, .tl-b, .tcp-b, .tg2-b { height: 22px; }
.tut-passo:first-child { min-height: max(min(90vh, 760px), 64vh); padding-top: min(12vh, 90px); }   /* em telas muito altas, o 1º passo tem de passar da linha de leitura (55% da altura) */
@media (max-width: 860px) {
  /* o palco fica logo abaixo do cabeçalho (a altura dele vem do JS em --topo) e os textos passam embaixo, na parte de baixo da tela */
  .tut-palco { top: var(--topo, 64px); height: min(50vh, 420px); min-height: 280px; z-index: 3; }
  .tut-passos { margin-top: 12px; z-index: 1; }
  .tut-passo, .tut-passo:first-child { min-height: 62vh; align-items: center; padding-top: 0; }
  .tut-texto { padding: 16px 18px; } .tut-texto h2 { font-size: 1.35rem; } .tut-passo:first-child h2 { font-size: 1.7rem; }
  .tut-cena { padding: 14px 14px 26px; }
  .ti-esc .capa { width: calc(26px + 12px * (1 - var(--k, 0))) !important; height: auto; }
  .ti-esc span { font-size: .72rem; max-width: 118px; overflow: hidden; text-overflow: ellipsis; } .ti-esc { gap: 6px; }
  .tut-fim { padding: 30px 0 60px; min-height: 0; }
  body.tutorial #fixados { display: none !important; }
  .tr-l, .tl-l, .tn-l, .tj-l, .tg2-l, .tcp-l { font-size: .8rem; } .tr-barra, .tl-b, .tcp-b, .tg2-b { height: 13px; }
  .tr-lista, .tl-lista, .tj-lista, .tcp-lista, .tg2-lista, .tk-lista { justify-content: center; gap: 4px; }
  .tr-cab b, .tl-cab b, .tj-cab b, .tcp-cab b, .tn-cab b { font-size: 1rem; } .tr-cab span, .tl-cab small { font-size: .7rem; }
  .tut-cena .esc.p, .tut-cena .ico { width: 20px; height: 20px; }
  .tj-l { grid-template-columns: 22px 22px 1fr auto; gap: 5px; } .tj-l .capa { width: 22px !important; } .tj-sels { gap: 2px; } .tj-sels i { min-width: 30px; font-size: .62rem; padding: 1px 3px; }
  .tj-cab .sel { font-size: .62rem; } .tj-nota { font-size: .68rem; }
  .tt-grade { gap: 6px; } .tt-c { padding: 6px 4px; } .tt-c .capa { width: 34px !important; } .tt-c b { font-size: .7rem; } .tt-c small { font-size: .62rem; } .tt-res { font-size: .78rem; }
  .tc-anos { gap: 6px; } .tc-ano { padding: 4px 36px 4px 10px; font-size: .9rem; } .tc-ano.fantasma { display: none; }
  .tc-cols { gap: 8px; } .tc-j { grid-template-columns: 22px 1fr 24px; gap: 5px; font-size: .72rem; margin-bottom: 3px; } .tc-j .capa { width: 22px !important; } .tc-col h4 { font-size: .85rem; margin-bottom: 3px; }
  .tg2-l { grid-template-columns: 74px 1fr 34px; } .tg-esc .capa { width: 26px !important; }
  .ta-goty { font-size: 13px; }
}