/* estilo.css: identidade "Noite de Luta" (revamp 2026-09-26).
   Spec: docs/superpowers/specs/2026-09-26-revamp-ui-design.md
   Todo visual NOVO mora aqui. legado.css só existe até a última tela
   antiga ser trocada. Carregado DEPOIS do legado.css: em empate de
   especificidade, o novo vence. */

:root{
  --fundo:#07080B; --sup:#11131A; --sup-2:#1A1D26;
  --linha:rgba(255,255,255,.08); --linha-forte:rgba(255,255,255,.16);
  --sangue:#D7261E; --sangue-vivo:#E8362D; --sangue-escuro:#7A0F0B;
  --ouro:#D4A017; --osso:#F2EEE6; --osso-2:#C9CBD2; --cinza:#8A8F9C; --ganho:#2FBF71;
  --f-titulo:"Anton",Impact,"Arial Narrow",sans-serif;
  --f-ui:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-texto:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --corte:18px;
  --ease-soco:cubic-bezier(.2,.8,.2,1);
}

/* Foco visível em tudo que o teclado alcança (revamp fase 8). O legado.css
   tinha a mesma regra com a cor antiga; mora aqui pra sobreviver quando ele
   sair. Cada componente pode trocar por um destaque próprio (.cartao pinta
   o fundo), nunca só tirar. */
:focus-visible{outline:2px solid var(--sangue);outline-offset:2px}

/* hidden vale sempre (reta final, 2026-09-28, achado do dono). Regra de
   classe com display (.botao é inline-flex) vence o [hidden] do navegador,
   e o botão que o JS escondia continuava na tela: "Voltar à escolha do
   adversário" aparecia no painel depois da luta e levava a uma noite com a
   oferta velha. As regras [hidden] de cada componente mais abaixo ficam
   redundantes, mas não atrapalham. */
[hidden]{display:none!important}

/* telas novas: fundo e largura próprios; "Ficha do Lutador" some */
html[data-tela="nova"] body{background:var(--fundo)}
html[data-tela="nova"] .doc-head{display:none}
html[data-tela="nova"] .wrap{max-width:1320px;padding:28px 24px 64px}
@media (max-width:600px){html[data-tela="nova"] .wrap{padding:18px 16px 48px}}

/* granulação sobre tudo (filme), sem pegar clique */
body::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}

.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}

/* ---------- molde de tela ---------- */
.tela{position:relative;min-height:calc(100vh - 92px);font-family:var(--f-texto);color:var(--osso);font-size:16px;line-height:1.5}
.tela-fundo{position:fixed;inset:0;z-index:-1;background:var(--fundo) center/cover no-repeat;background-image:var(--img)}
@media (max-width:700px){.tela-fundo{background-image:var(--img-m,var(--img))}}
.tela-fundo::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 10%,rgba(7,8,11,.25) 0%,rgba(7,8,11,.78) 58%,rgba(7,8,11,.96) 100%),
  linear-gradient(180deg,rgba(7,8,11,.2) 0%,rgba(7,8,11,.85) 100%)}
.tela-fundo.vivo{animation:kenburns 28s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
.tela-cab{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0 0 28px;padding-right:64px}
.tela-titulo{font-family:var(--f-titulo);font-weight:400;font-size:clamp(38px,5.4vw,72px);line-height:.95;
  text-transform:uppercase;letter-spacing:.005em;margin:0}
.tela-sub{color:var(--osso-2);font-size:17px;max-width:62ch;margin:0 0 24px}
.btn-voltar{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;cursor:pointer;
  background:rgba(17,19,26,.72);color:var(--osso);border:1px solid var(--linha-forte);
  font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,background .2s}
.btn-voltar:focus-visible{outline:2px solid var(--sangue);outline-offset:2px}
.carregando{font-family:var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);animation:pisca 1.2s ease-in-out infinite}
@keyframes pisca{50%{opacity:.35}}
.vazio{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:28px;background:rgba(17,19,26,.7);border:1px dashed var(--linha-forte)}
.vazio b{font-family:var(--f-ui);font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.vazio span{color:var(--cinza)}
.vazio-ico{width:30px;height:30px;color:var(--sangue)}

/* ---------- card com canto cortado (assinatura) ---------- */
.cartao{position:relative;isolation:isolate;display:flex;width:100%;padding:0;border:0;cursor:pointer;
  text-align:left;font:inherit;color:var(--osso);background:var(--linha-forte);
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte));
  transition:background .25s,transform .35s var(--ease-soco)}
.cartao-miolo{position:relative;flex:1;display:flex;flex-direction:column;margin:1px;overflow:hidden;background:var(--sup);
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte))}
.cartao-foto{position:absolute;inset:0;background:center/cover no-repeat;background-image:var(--img);
  transition:transform .8s var(--ease-soco);opacity:.95}
.cartao-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,11,.05) 0%,rgba(7,8,11,.55) 50%,rgba(7,8,11,.96) 100%)}
.cartao-conteudo{position:relative;z-index:1;margin-top:auto;padding:24px;display:flex;flex-direction:column;gap:6px}
.cartao-rotulo{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sangue)}
.cartao-titulo{font-family:var(--f-titulo);font-weight:400;font-size:clamp(30px,3.3vw,48px);line-height:.95;text-transform:uppercase}
.cartao-texto{color:var(--osso-2);font-size:15px;line-height:1.45}
.cartao-acao{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--f-ui);font-weight:700;
  font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.cartao-acao .ico{transition:transform .3s var(--ease-soco)}
.cartao.apagado .cartao-foto{filter:grayscale(1) brightness(.55)}
.cartao.apagado .cartao-rotulo{color:var(--cinza)}
.cartao:focus-visible{outline:none;background:var(--sangue)}
@media (hover:hover) and (pointer:fine){
  .cartao:hover{background:var(--sangue);transform:translateY(-3px)}
  .cartao:hover .cartao-foto{transform:scale(1.045)}
  .cartao:hover .cartao-acao .ico{transform:translateX(5px)}
  .cartao::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;transform:translateX(-120%);
    background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%)}
  .cartao:hover::after{transform:translateX(120%);transition:transform .8s var(--ease-soco)}
  .btn-voltar:hover{border-color:var(--sangue);background:rgba(215,38,30,.14)}
  .botao:hover{background:var(--sangue-vivo)}
  .botao-sec:hover{box-shadow:inset 0 0 0 1px var(--osso)}
}

/* ---------- botões e abas ---------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 28px;cursor:pointer;
  font-family:var(--f-ui);font-weight:700;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:var(--sangue);border:0;text-decoration:none;transition:background .2s,transform .2s var(--ease-soco);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.botao:active{transform:translateY(1px)}
.botao:disabled{opacity:.4;cursor:not-allowed}
.botao:focus-visible{outline:2px solid var(--osso);outline-offset:3px}
.botao-sec{background:transparent;color:var(--osso);box-shadow:inset 0 0 0 1px var(--linha-forte)}
.guias{display:flex;gap:4px;overflow-x:auto;margin:0 0 24px;border-bottom:1px solid var(--linha-forte);scrollbar-width:none}
.guia{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;background:none;border:0;cursor:pointer;white-space:nowrap;
  color:var(--cinza);font-family:var(--f-ui);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:inset 0 -3px 0 transparent;transition:color .2s,box-shadow .2s}
.guia.on{color:var(--osso);box-shadow:inset 0 -3px 0 var(--sangue)}
@media (hover:hover) and (pointer:fine){.guia:hover{color:var(--osso)}}

/* ---------- entrada em cascata ---------- */
.entra{animation:entra .6s var(--ease-soco) both}
@keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- troca de tela: corte diagonal ---------- */
#corte{position:fixed;inset:0;z-index:9995;pointer-events:none;visibility:hidden;background:var(--sangue);
  clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%)}
#corte.corte-on{visibility:visible;animation:corte .36s cubic-bezier(.7,0,.3,1) both}
@keyframes corte{
  0%{clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%)}
  48%,52%{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}
  100%{clip-path:polygon(130% 0,130% 0,100% 100%,100% 100%)}}

/* ---------- 404 ---------- */
.tela-404 .tela-corpo{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:6vh}
.erro-num{font-family:var(--f-titulo);font-size:clamp(120px,24vw,280px);line-height:.8;color:var(--sangue)}
.erro-titulo{font-family:var(--f-titulo);font-weight:400;font-size:clamp(30px,4vw,52px);text-transform:uppercase;margin:0}

/* ---------- engrenagem global no visual novo ---------- */
html[data-tela="nova"] .cfg-btn{background:rgba(17,19,26,.72);border:1px solid var(--linha-forte);color:var(--osso);
  border-radius:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

@media (prefers-reduced-motion:reduce){
  .entra{animation:fade .25s both}
  .tela-fundo.vivo{animation:none}
  #corte{display:none}
  .cartao,.cartao-foto,.botao{transition:none}
}
@keyframes fade{from{opacity:0}}

/* ---------- menu ---------- */
.menu-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 64px 34px 0}
.marca{display:flex;flex-direction:column;line-height:1}
.marca-nome{font-family:var(--f-titulo);font-size:clamp(46px,7vw,92px);text-transform:uppercase;letter-spacing:.01em}
.marca-sub{font-family:var(--f-ui);font-weight:700;font-size:15px;letter-spacing:.34em;text-transform:uppercase;color:var(--sangue);margin-top:8px}
.chip-conta{display:inline-flex;align-items:center;gap:10px;max-width:280px;height:44px;padding:0 16px;cursor:pointer;
  background:rgba(17,19,26,.72);border:1px solid var(--linha-forte);color:var(--osso);
  font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.08em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip-conta .chip-rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-grade{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.menu-card-grande{grid-column:span 3;min-height:min(46vh,420px)}
.menu-card-medio{grid-column:span 2;min-height:260px}
.menu-card-medio .cartao-titulo{font-size:clamp(28px,2.6vw,38px)}
.previa{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.previa-linha{display:flex;align-items:baseline;gap:10px;font-size:15px;color:var(--osso-2);min-width:0}
.previa-pos{font-family:var(--f-titulo);font-size:18px;color:var(--sangue);min-width:14px}
.previa-data{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--sangue);white-space:nowrap}
.previa-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.previa-num{font-family:var(--f-ui);font-weight:700;font-variant-numeric:tabular-nums;color:var(--osso)}
.txt-ouro{color:var(--ouro)}
.menu-rodape{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:38px;padding-top:18px;
  border-top:1px solid var(--linha);font-family:var(--f-ui);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.menu-rodape a{color:var(--osso-2);text-decoration:none}
.menu-contato{text-transform:none;letter-spacing:.02em;margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.menu-contato .ico{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.menu-rodape a:hover{color:var(--sangue)} .chip-conta:hover{border-color:var(--sangue)}}
@media (max-width:980px){
  .menu-card-grande{grid-column:span 6;min-height:300px}
  .menu-card-medio{grid-column:span 2;min-height:250px}
}
@media (max-width:720px){
  .menu-topo{margin-right:56px}
  .menu-card-grande{min-height:250px}
  .menu-card-medio{grid-column:span 6;min-height:0}
  .menu-card-medio .cartao-foto{opacity:.45}
  .menu-contato{margin-left:0}
}

/* ---------- atualizações ---------- */
.linha-tempo{list-style:none;margin:0;padding:0 0 0 28px;position:relative;max-width:900px}
.linha-tempo::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--sangue),rgba(215,38,30,.1))}
.marco{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:0 0 30px}
.marco::before{content:"";position:absolute;left:-28px;top:6px;width:14px;height:14px;background:var(--sangue);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.marco-data{font-family:var(--f-ui);font-weight:700;font-size:18px;letter-spacing:.1em;color:var(--sangue)}
.marco-data small{display:block;font-size:13px;color:var(--cinza)}
.marco-corpo{background:rgba(17,19,26,.78);border:1px solid var(--linha);padding:18px 22px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.marco-titulo{font-family:var(--f-titulo);font-weight:400;font-size:28px;text-transform:uppercase;margin:0 0 8px;line-height:1}
.marco-itens{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;color:var(--osso-2)}
.marco-itens li{position:relative;padding-left:18px}
.marco-itens li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--sangue)}
@media (max-width:640px){.marco{grid-template-columns:1fr;gap:8px}.marco-corpo{padding:16px}}

/* ---------- ranking ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px}
.campo-select{height:46px;padding:0 40px 0 14px;background:var(--sup) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23F2EEE6' stroke-width='2' fill='none'/></svg>") no-repeat right 14px center;
  color:var(--osso);border:1px solid var(--linha-forte);border-radius:0;appearance:none;-webkit-appearance:none;
  font-family:var(--f-ui);font-weight:600;font-size:16px;letter-spacing:.06em;cursor:pointer}
.campo-select:focus-visible{outline:2px solid var(--sangue);outline-offset:2px}
.segmento{display:inline-flex;border:1px solid var(--linha-forte);background:rgba(17,19,26,.72)}
.segmento-op{height:44px;padding:0 20px;background:transparent;border:0;cursor:pointer;color:var(--cinza);
  font-family:var(--f-ui);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.segmento-op.on{background:var(--sangue);color:#fff}
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:14px;margin:0 0 26px}
.degrau{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 12px 20px;min-width:0;
  background:rgba(17,19,26,.82);border-top:3px solid var(--linha-forte);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.degrau-1{border-top-color:var(--ouro);padding-top:26px}
.degrau-2{border-top-color:#B8BCC6}
.degrau-3{border-top-color:#A0643A}
.degrau-retrato svg{display:block;max-width:100%;height:auto}
.degrau-pos{font-family:var(--f-titulo);font-size:40px;line-height:1}
.degrau-1 .degrau-pos{color:var(--ouro);font-size:52px}
.degrau-nome{font-family:var(--f-ui);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
.degrau-meta{color:var(--cinza);font-size:14px}
.degrau-pontos{font-family:var(--f-titulo);font-size:26px;color:var(--osso)}
/* pontos de legado: o nome vai junto do número (2026-09-28) */
.degrau-pontos small,.rank-pontos small{display:block;font-family:var(--f-ui);font-weight:700;font-size:10px;line-height:1.3;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.ranking-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rank-linha{display:grid;grid-template-columns:44px 52px minmax(0,1fr) 80px 60px 40px 90px;align-items:center;gap:10px;
  padding:8px 16px 8px 10px;background:rgba(17,19,26,.78);border-left:3px solid transparent}
.rank-retrato svg{display:block;width:44px;height:auto}
.rank-pos{font-family:var(--f-titulo);font-size:24px;text-align:center;color:var(--cinza)}
.rank-nome{font-family:var(--f-ui);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.03em;min-width:0;overflow-wrap:anywhere}
.rank-nome small{display:block;font-family:var(--f-texto);font-weight:400;font-size:13px;text-transform:none;letter-spacing:0;color:var(--cinza)}
.rank-meta{color:var(--osso-2);font-variant-numeric:tabular-nums}
.rank-nota{font-family:var(--f-titulo);font-size:20px;color:var(--sangue)}
.rank-pontos{font-family:var(--f-ui);font-weight:700;font-size:18px;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .podio{grid-template-columns:1fr;align-items:stretch;gap:8px}
  .degrau-1{order:-1}
  .degrau{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"pos ret nome pts" "pos ret meta pts";
    align-items:center;text-align:left;gap:0 12px;padding:10px 14px;border-top:0;border-left:3px solid var(--linha-forte)}
  .degrau-1{border-left-color:var(--ouro);padding-top:10px}
  .degrau-2{border-left-color:#B8BCC6}
  .degrau-3{border-left-color:#A0643A}
  .degrau-retrato{grid-area:ret}
  .degrau-retrato svg{width:52px}
  .degrau-pos,.degrau-1 .degrau-pos{grid-area:pos;font-size:30px}
  .degrau-nome{grid-area:nome;font-size:17px}
  .degrau-meta{grid-area:meta;font-size:13px}
  .degrau-pontos{grid-area:pts;font-size:22px}
  .rank-linha{grid-template-columns:34px 44px minmax(0,1fr) 70px}
  .rank-linha .rank-meta,.rank-linha .rank-nota{display:none}
}

/* ---------- conta ---------- */
.painel-n{background:rgba(17,19,26,.86);border:1px solid var(--linha);padding:26px;min-width:0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.painel-titulo{font-family:var(--f-titulo);font-weight:400;font-size:34px;text-transform:uppercase;margin:0 0 6px;line-height:1}
.conta-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
@media (max-width:900px){.conta-grade{grid-template-columns:1fr}}
.perfil-rot{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}
.perfil-email{font-family:var(--f-ui);font-weight:700;font-size:26px;letter-spacing:.02em;margin:2px 0 12px;overflow-wrap:anywhere}
.perfil-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.perfil-senha{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.conq-progresso{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.conq-num{font-family:var(--f-titulo);font-size:54px;line-height:1}
.conq-num small{font-size:24px;color:var(--cinza)}
.conq-barra{flex:1;height:8px;background:var(--sup-2)}
.conq-barra i{display:block;height:100%;background:var(--sangue)}

/* formulários e botões ANTIGOS reaproveitados dentro das telas novas
   (montarFormularioConta, renderPlanoPro, carrossel do Pro): mesmo visual
   do resto, sem reescrever a lógica (a fase 3 refaz o fluxo de conta). */
.tela input[type=text],.tela input[type=email],.tela input[type=password],.tela input[type=search]{width:100%;max-width:440px;height:48px;padding:0 14px;
  background:var(--sup-2);color:var(--osso);border:1px solid var(--linha-forte);border-radius:0;
  font-family:var(--f-texto);font-size:16px}
.tela input:focus{outline:none;border-color:var(--sangue);box-shadow:0 0 0 1px var(--sangue)}
.tela .btn{min-height:46px;padding:0 22px;border-radius:0;border:0;background:var(--sangue);color:#fff;cursor:pointer;
  font-family:var(--f-ui);font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase}
.tela .btn:disabled{opacity:.4;cursor:not-allowed}
.tela .btn.btn-ghost{background:transparent;color:var(--osso);box-shadow:inset 0 0 0 1px var(--linha-forte)}
.tela .hint{color:var(--osso-2);font-family:var(--f-texto)}
.tela h4{font-family:var(--f-ui);font-weight:700;font-size:22px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.tela a{color:var(--osso)}
.tela .dil-c{font-family:var(--f-texto);color:var(--osso-2)}
/* vitrine do Pro dentro das telas novas: ícone SVG no lugar do emoji */
.tela .pro-beneficio{font-size:15px;gap:14px}
.tela .pro-beneficio .ic{display:flex;width:38px;height:38px;align-items:center;justify-content:center;flex:none;
  color:var(--ouro);border:1px solid rgba(212,160,23,.35);background:rgba(212,160,23,.07)}
.tela .pro-beneficio .ic .ico{width:20px;height:20px}
.tela .pro-beneficio .txt{color:var(--osso-2)}
.tela .pro-beneficio .txt b{font-family:var(--f-ui);font-size:18px;letter-spacing:.04em;color:var(--osso)}
.tela .pro-carrossel-seta{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:0;
  background:var(--sup-2);border:1px solid var(--linha-forte);color:var(--osso);cursor:pointer}
.tela .pro-carrossel-seta .ico{width:20px;height:20px}

/* ---------- continuar ---------- */
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.save-slot{min-height:360px}
.save-slot-vazio .cartao-miolo{background:rgba(17,19,26,.62)}
.save-slot-vazio .cartao-conteudo{margin:auto 0;align-items:flex-start}
.slot-vazio-ico{display:flex;width:56px;height:56px;align-items:center;justify-content:center;border:1px dashed var(--linha-forte);margin:10px 0}
.slot-vazio-ico .ico{width:26px;height:26px;color:var(--sangue)}
@media (max-width:900px){.slots{grid-template-columns:1fr}.save-slot{min-height:200px}}

/* ---------- páginas legais ---------- */
.tela-legal .pagina-legal{max-width:80ch;background:rgba(17,19,26,.88);border:1px solid var(--linha);padding:28px 34px;
  font-family:var(--f-texto);font-size:16px;line-height:1.7;color:var(--osso-2)}
.tela-legal .pagina-legal h3{font-family:var(--f-ui);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--osso);margin:28px 0 8px}
.tela-legal .pagina-legal .rev{font-family:var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza);font-size:14px}
@media (max-width:600px){.tela-legal .pagina-legal{padding:20px 18px;font-size:15px}}

/* ---------- indicador de save (fase 3) ---------- */
.indicador-save{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9980;
  display:none;align-items:center;gap:8px;padding:8px 12px;background:rgba(17,19,26,.92);border:1px solid var(--linha-forte);
  font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--osso-2);
  pointer-events:none}
.indicador-save.on{display:inline-flex}
.indicador-save .ico{width:16px;height:16px}
.indicador-save.local{color:var(--ouro);border-color:rgba(212,160,23,.45)}
.indicador-save.salvando .ico{animation:pisca 1s ease-in-out infinite}
/* espaços ocupados (fase 3) */
.save-slot-cheio{cursor:default}
.save-slot-cheio .cartao-conteudo{margin-top:0;height:100%}
.slot-retrato{display:block;margin:6px 0 2px}
.slot-retrato svg{display:block}
.slot-linha{color:var(--osso-2);font-size:15px;display:flex;align-items:center;gap:8px}
.slot-cartel b{font-family:var(--f-titulo);font-weight:400;font-size:24px;color:var(--osso);letter-spacing:.02em}
.slot-cinturao{color:var(--ouro);width:18px;height:18px}
.slot-quando{font-family:var(--f-ui);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);margin-top:4px}
.selo-lenda{display:inline-block;margin-left:8px;padding:1px 6px;border:1px solid var(--ouro);color:var(--ouro);font-size:11px;letter-spacing:.14em}
.slot-acoes-linha{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.slot-acoes-linha .botao{min-height:44px;padding:0 18px;font-size:15px}
@media (hover:hover) and (pointer:fine){.save-slot-cheio:hover{transform:none;background:var(--linha-forte)}}
/* portão e formulários de conta: largura de formulário, "Mostrar" colado no campo */
.tela-portao .portao-form{max-width:560px}
.tela .campo-rot{display:flex;justify-content:space-between;align-items:baseline;max-width:440px}
/* ranking: sua melhor posição (fase 3), acima da lista, com a cor da ação */
.rank-minha{display:grid;grid-template-columns:auto 44px 52px minmax(0,1fr) 80px 60px 40px 90px;align-items:center;gap:10px;
  margin:0 0 18px;padding:10px 16px 10px 14px;background:rgba(215,38,30,.14);border:1px solid rgba(215,38,30,.55)}
.rank-minha-rot{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sangue);max-width:90px;line-height:1.2}
@media (max-width:700px){.rank-minha{grid-template-columns:auto 34px 44px minmax(0,1fr) 70px}.rank-minha .rank-meta,.rank-minha .rank-nota{display:none}}

/* ---------- assistente de criação (fase 4) ---------- */
.passo-cab{display:flex;align-items:center;gap:16px;margin:-10px 0 26px;flex-wrap:wrap}
.passo-txt{font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--sangue);white-space:nowrap}
.passo-barra{display:flex;gap:6px;flex:1;min-width:160px;max-width:420px}
.passo-seg{flex:1;height:4px;background:var(--linha-forte)}
.passo-seg.on{background:var(--sangue)}

/* ---------- recurso Pro travado (componente único) ---------- */
.bloqueio-pro{position:relative;display:block;min-width:0}
.bloqueio-pro>.bloqueado{opacity:.35;pointer-events:none;filter:grayscale(.5)}
.selo-assine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;background:var(--ouro);color:#15120A;border:0;cursor:pointer;white-space:nowrap;
  font-family:var(--f-ui);font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:0 6px 24px rgba(0,0,0,.5)}
.selo-assine .ico{width:16px;height:16px}
/* cartão de escolha travado (modo Lenda, Rival): o selo vai pro canto e não cobre o texto (2026-10-08) */
.modos .selo-assine{left:auto;right:10px;top:10px;transform:none}
.selo-assine:focus-visible{outline:2px solid var(--osso);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.selo-assine:hover{background:#E6B421}}

/* passo 1: nome */
.tela-criacao .nome-form{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;max-width:760px;margin:6px 0 10px}
.tela-criacao .input-hero{flex:1 1 320px;height:64px;padding:0 20px;background:rgba(17,19,26,.86);border:1px solid var(--linha-forte);
  border-bottom:3px solid var(--sangue);color:var(--osso);font-family:var(--f-titulo);font-size:30px;letter-spacing:.02em;text-transform:uppercase;border-radius:0}
.tela-criacao .input-hero::placeholder{color:var(--cinza);font-family:var(--f-ui);font-size:20px;letter-spacing:.12em}
.tela-criacao .input-hero:focus{outline:none;border-color:var(--sangue)}
.botao-grande{min-height:64px;padding:0 34px;font-size:19px}
.nome-dica{font-size:15px;color:var(--cinza)}
.faixa-desafio{display:flex;gap:12px;align-items:flex-start;max-width:760px;margin:0 0 20px;padding:14px 18px;
  background:rgba(212,160,23,.1);border:1px solid rgba(212,160,23,.45);color:var(--osso-2)}
.faixa-desafio .ico{color:var(--ouro);width:22px;height:22px;flex:none}
.faixa-desafio b{color:var(--ouro)}

/* passo 2: visual (criador) */
.tela-criacao .criador{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:18px;align-items:start;margin:0}
.tela-criacao .palco{position:relative;background:radial-gradient(60% 70% at 50% 35%,rgba(215,38,30,.28),rgba(17,19,26,.9) 70%),rgba(17,19,26,.9);
  border:1px solid var(--linha);padding:24px 20px;text-align:center;min-height:0}
.tela-criacao .palco .col-t{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sangue);border:0;margin:0 0 8px;padding:0}
.tela-criacao .palco svg{max-width:100%;height:auto}
.tela-criacao .nomebox{margin-top:12px;text-align:left}
.tela-criacao .nomebox small{display:block;font-family:var(--f-ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);margin-bottom:6px}
.tela-criacao .nomebox input{max-width:none}
.tela-criacao .painelC{background:rgba(17,19,26,.9);border:1px solid var(--linha);padding:0;min-width:0}
.tela-criacao .abas{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--linha-forte);scrollbar-width:none;margin:0;padding:0 8px}
.tela-criacao .aba{background:none;border:0;padding:14px 14px;color:var(--cinza);font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;box-shadow:inset 0 -3px 0 transparent;white-space:nowrap;border-radius:0}
.tela-criacao .aba.on{color:var(--osso);box-shadow:inset 0 -3px 0 var(--sangue)}
.tela-criacao .corpoC{padding:18px 20px}
.tela-criacao .linhaC{margin-bottom:18px}
.tela-criacao .linhaC-hd{display:flex;justify-content:space-between;font-family:var(--f-ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);margin-bottom:8px}
.tela-criacao .linhaC-hd b{color:var(--osso);font-weight:700;letter-spacing:.06em}
.tela-criacao .chips{display:flex;flex-wrap:wrap;gap:6px}
.tela-criacao .chip{background:var(--sup-2);border:1px solid var(--linha-forte);color:var(--osso-2);padding:8px 12px;border-radius:0;cursor:pointer;
  font-family:var(--f-texto);font-size:14px}
.tela-criacao .chip.on{border-color:var(--sangue);color:#fff;background:rgba(215,38,30,.22)}
.tela-criacao .swatches{display:flex;flex-wrap:wrap;gap:8px}
/* arquétipos (revamp dos personagens, 2026-09-28): cartas com o retrato */
.tela-criacao .arquetipos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.tela-criacao .chip.arquetipo{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 10px;
  background:radial-gradient(120% 80% at 50% 0%,#3a0d0b 0%,#15090a 45%,var(--sup-2) 80%);font-family:var(--f-ui);font-weight:700;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.1}
.tela-criacao .chip.arquetipo .boneco{display:block;max-width:100%;height:auto}
.tela-criacao .sw{width:36px;height:36px;border-radius:0;border:2px solid var(--linha-forte);cursor:pointer;padding:0}
.tela-criacao .sw.on{border-color:var(--osso);box-shadow:0 0 0 2px var(--sangue)}
.tela-criacao .criador-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
@media (hover:hover) and (pointer:fine){.tela-criacao .chip:hover{border-color:var(--osso-2)}.tela-criacao .aba:hover{color:var(--osso)}}
@media (max-width:820px){.tela-criacao .criador{grid-template-columns:1fr}}

/* passo 3: modo e divisão */
.tela-criacao .modos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:820px;margin:0 0 14px;border:0}
.tela-criacao .modo{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:16px 18px;text-align:left;cursor:pointer;
  background:rgba(17,19,26,.86);border:1px solid var(--linha-forte);color:var(--osso);border-radius:0}
.tela-criacao .modo .n{font-family:var(--f-ui);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase}
.tela-criacao .modo .d{color:var(--osso-2);font-size:14px}
.tela-criacao .modo.on{border-color:var(--sangue);box-shadow:inset 0 0 0 1px var(--sangue);background:rgba(215,38,30,.14)}
.tela-criacao .modo .modo-ico{width:22px;height:22px;color:var(--sangue);margin-bottom:4px}
.tela-criacao .modo-nota{color:var(--cinza);font-size:14px;max-width:820px}
.tela-criacao .divs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:10px}
.tela-criacao .div-c{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;text-align:left;cursor:pointer;
  background:rgba(17,19,26,.88);border:0;color:var(--osso);border-radius:0;box-shadow:inset 0 0 0 1px var(--linha-forte);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:background .2s,transform .25s var(--ease-soco)}
.tela-criacao .div-c .n{font-family:var(--f-titulo);font-size:28px;line-height:1;text-transform:uppercase}
.tela-criacao .div-c.fem .n::after{content:" fem.";font-family:var(--f-ui);font-size:14px;color:var(--cinza)}
.tela-criacao .div-c .lb{font-family:var(--f-ui);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.tela-criacao .ko-linha{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--osso-2)}
.tela-criacao .ko-rot{font-family:var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.tela-criacao .ko-niveis{display:inline-flex;gap:3px}
.tela-criacao .ko-niveis i{display:block;width:14px;height:6px;background:var(--linha-forte)}
.tela-criacao .ko-1 i:nth-child(-n+1),.tela-criacao .ko-2 i:nth-child(-n+2),.tela-criacao .ko-3 i:nth-child(-n+3){background:var(--sangue)}
.tela-criacao .div-c .qt{font-size:14px;color:var(--osso-2)}
.tela-criacao .div-c .qt b{font-family:var(--f-titulo);font-weight:400;font-size:20px;color:var(--osso)}
.tela-criacao .div-c .top{font-size:13px;color:var(--cinza)}
@media (hover:hover) and (pointer:fine){
  .tela-criacao .div-c:hover{background:rgba(215,38,30,.18);box-shadow:inset 0 0 0 1px var(--sangue);transform:translateY(-2px)}
  .tela-criacao .modo:hover{border-color:var(--osso-2)}
}
@media (max-width:600px){.tela-criacao .modos{grid-template-columns:1fr}}

/* passo 4: rival */
.tela-criacao .rival-box{max-width:820px;background:none;border:0;padding:0}
.tela-criacao .rival-opcoes{margin-bottom:16px}
.tela-criacao .rival-box input[type=text]{margin:6px 0 10px}
/* correções do CSS antigo que vazava nos passos */
.tela-criacao .palco{position:relative;top:auto}
.tela-criacao .modo+.modo{border-left:1px solid var(--linha-forte)}
.tela-criacao .modo.on .n{color:var(--osso)}
.tela-criacao .modo.on .d{color:var(--osso-2)}
.tela-criacao .modo:not(.on):hover{background:rgba(17,19,26,.86)}

/* passo 5: draft. As variáveis ANTIGAS (usadas pelo legado.css e pelo SVG
   do octógono) são redefinidas dentro do assistente com a paleta nova:
   tudo que o CSS antigo desenha aqui passa a falar a identidade nova sem
   reescrever regra por regra. */
.tela-criacao{--bg:var(--fundo);--panel:rgba(17,19,26,.9);--panel2:var(--sup-2);--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.24);
  --ink:var(--osso);--ink2:var(--osso-2);--faded:var(--cinza);--stamp:var(--sangue);--stamp-bright:#F0564D;
  --mira:rgba(215,38,30,.55);--mira-txt:#F08A84;--mira-bg:rgba(215,38,30,.12);--stock:var(--fundo);--stock-2:var(--sup)}
.tela-criacao .arena{gap:16px;margin-top:4px}
.tela-criacao .painel{background:rgba(17,19,26,.9);border:1px solid var(--linha);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tela-criacao .col-t{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sangue)}
.tela-criacao .budget-num{font-family:var(--f-titulo);font-size:30px;color:var(--osso)}
.tela-criacao .budget-num small{font-family:var(--f-ui);letter-spacing:.16em;color:var(--cinza)}
.tela-criacao .budget-fill{background:var(--sangue)}
.tela-criacao .reroll{font-family:var(--f-ui);font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:0}
.tela-criacao .card{position:relative;background:var(--sup-2);border:0;box-shadow:inset 0 0 0 1px var(--linha-forte);border-radius:0;text-align:left;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:background .2s,box-shadow .2s}
.tela-criacao .card .pair{font-family:var(--f-titulo);font-weight:400;font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--osso)}
.tela-criacao .card .src{font-family:var(--f-texto);color:var(--cinza)}
.tela-criacao .card .src b{font-family:var(--f-ui);font-size:15px!important;letter-spacing:.03em;color:var(--osso)!important}
.tela-criacao .card .attr-l{font-family:var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.tela-criacao .card .attr-v{font-family:var(--f-ui);font-weight:700;font-size:16px;color:var(--osso)}
.tela-criacao .card .cost b{font-family:var(--f-titulo);font-weight:400;font-size:22px;color:var(--osso)}
.tela-criacao .card.sel{box-shadow:inset 0 0 0 2px var(--sangue);background:rgba(215,38,30,.14)}
/* carta mínima (orçamento acabou): tracejada, lê como reserva e não como lutador */
.tela-criacao .card.card-minima{border-style:dashed}
.tela-criacao .card .confirma{font-family:var(--f-ui);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sangue)}
.tela-criacao .oct-mid .n{font-family:var(--f-titulo)}
.tela-criacao .oct-legenda,.tela-criacao .legend{font-family:var(--f-texto);color:var(--cinza)}
.tela-criacao .slot .lab{font-family:var(--f-ui);letter-spacing:.1em}
.tela-criacao .slot .val{font-family:var(--f-titulo);font-weight:400}
.tela-criacao .dossie{font-family:var(--f-texto)}
@media (hover:hover) and (pointer:fine){.tela-criacao .card:hover{background:rgba(215,38,30,.12);box-shadow:inset 0 0 0 1px var(--sangue)}}

/* ---------- hub da carreira (fase 5) ---------- */
html[data-tela="hub"] body{background:var(--fundo)}
html[data-tela="hub"] .doc-head{display:none}
html[data-tela="hub"] .wrap{max-width:1320px;padding:0 24px 64px}
html[data-tela="hub"] .indicador-save{display:none!important}
html[data-tela="hub"] .cfg-btn{background:rgba(17,19,26,.72);border:1px solid var(--linha-forte);color:var(--osso);
  border-radius:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* as variáveis ANTIGAS (legado.css) passam a falar a paleta nova dentro do
   hub: ficha, cartel, cartas de adversário e narração herdam sem reescrever
   regra por regra (mesmo recurso do assistente de criação) */
.tela-hub{--bg:var(--fundo);--panel:rgba(17,19,26,.9);--panel2:var(--sup-2);--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.22);
  --rule:rgba(255,255,255,.1);--ink:var(--osso);--ink2:var(--osso-2);--faded:var(--cinza);--stamp:var(--sangue);--stamp-bright:#F0564D;
  --win:var(--ganho);--win-bright:#4ADE8A;--win-dim:#6FCF97;--gold:var(--ouro);--gold-bright:#E6B421;--stock:var(--fundo);--stock-2:var(--sup);
  --mira:rgba(215,38,30,.55);--mira-txt:#F08A84;--mira-bg:rgba(215,38,30,.12)}
.hub-barra{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;margin:0 -24px 0;padding:12px 78px 12px 24px;
  background:rgba(7,8,11,.84);border-bottom:1px solid var(--linha);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hub-retrato{flex:none;width:48px;height:48px;display:grid;place-items:center;overflow:hidden;background:var(--sup-2);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.hub-retrato svg{width:48px;height:auto;margin-top:6px}
.hub-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.hub-nome{font-family:var(--f-titulo);font-size:25px;line-height:1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-linha{display:flex;gap:10px;align-items:baseline;font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);white-space:nowrap}
.hub-linha b{font-size:17px;letter-spacing:.06em;color:var(--osso)}
.hub-nums{display:flex;gap:20px;margin-left:auto}
.hub-num{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-weight:700;font-size:18px;letter-spacing:.04em;white-space:nowrap}
.hub-num .ico{color:var(--sangue);width:18px;height:18px}
.hub-save{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);white-space:nowrap}
.hub-save .ico{width:16px;height:16px}
.hub-save.local{color:var(--ouro)}
.hub-save.salvando .ico{animation:pisca 1s ease-in-out infinite}
.hub-menu{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;cursor:pointer;background:rgba(17,19,26,.72);color:var(--osso);
  border:1px solid var(--linha-forte);font-family:var(--f-ui);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s,background .2s}
.hub-menu:focus-visible{outline:2px solid var(--sangue);outline-offset:2px}
.hub-guias{display:flex;gap:2px;margin:0 0 28px;border-bottom:1px solid var(--linha-forte);overflow-x:auto;scrollbar-width:none}
.guia-hub{position:relative;display:inline-flex;align-items:center;gap:9px;padding:15px 18px 14px;background:none;border:0;cursor:pointer;white-space:nowrap;
  color:var(--cinza);font-family:var(--f-ui);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:inset 0 -3px 0 transparent;transition:color .2s,box-shadow .2s}
.guia-hub .ico{width:18px;height:18px}
.guia-hub.on{color:var(--osso);box-shadow:inset 0 -3px 0 var(--sangue)}
.guia-hub.on .ico{color:var(--sangue)}
.guia-hub:focus-visible{outline:2px solid var(--sangue);outline-offset:-2px}
.guia-badge{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 6px;background:var(--sup-2);color:var(--osso-2);font-size:12px;letter-spacing:.04em}
.guia-badge:empty{display:none}
.guia-mais{display:none}
.hub-folha{display:none}
.hub-aba{animation:entra .45s var(--ease-soco) both}
.hub-aba[hidden]{display:none!important}
.hub-aba-cab{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 24px}
.hub-aba-titulo{font-family:var(--f-titulo);font-weight:400;font-size:clamp(36px,4.6vw,62px);line-height:.95;text-transform:uppercase;margin:0}
.tela-hub #controls{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 22px;padding:0;border:0;background:none}
.tela-hub #controls::before{display:none}
.hub-contador{font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.tela-hub #controls.travado .hub-contador{color:var(--sangue)}
.hub-lista{display:flex;flex-direction:column;gap:12px}
.hub-lista>h3{font-family:var(--f-ui);font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza);margin:0}
@media (hover:hover) and (pointer:fine){
  .guia-hub:hover{color:var(--osso)}
  .hub-menu:hover{border-color:var(--sangue);background:rgba(215,38,30,.14)}
}
@media (max-width:720px){
  html[data-tela="hub"] .wrap{padding:0 16px 104px}
  .hub-barra{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ret id menu" "nums nums save";
    margin:0 -16px;padding:10px 64px 10px 16px;gap:8px 12px}
  .hub-retrato{grid-area:ret}.hub-id{grid-area:id}.hub-menu{grid-area:menu}.hub-nums{grid-area:nums}.hub-save{grid-area:save}
  .hub-nums{margin-left:0;gap:16px}
  .hub-menu{padding:0 12px}
  .hub-menu span{display:none}
  .hub-nome{font-size:21px}
  .hub-num{font-size:16px}
  .hub-guias{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;padding:0 0 env(safe-area-inset-bottom,0px);border:0;
    border-top:1px solid var(--linha-forte);background:rgba(7,8,11,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:visible}
  .guia-hub{flex:1;flex-direction:column;justify-content:center;gap:4px;padding:10px 2px 11px;font-size:11px;letter-spacing:.1em;box-shadow:inset 0 3px 0 transparent}
  .guia-hub.on{box-shadow:inset 0 3px 0 var(--sangue)}
  .guia-hub .ico{width:22px;height:22px}
  .guia-folha{display:none}
  .guia-mais{display:inline-flex}
  .guia-badge{position:absolute;top:5px;left:calc(50% + 5px);min-width:18px;height:16px;padding:0 4px;font-size:10px}
  .hub-folha:not([hidden]){display:flex;position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:46;
    flex-direction:column;gap:2px;padding:8px;background:var(--sup);border:1px solid var(--linha-forte);box-shadow:0 14px 44px rgba(0,0,0,.65)}
  .folha-item{display:flex;align-items:center;gap:14px;padding:14px;background:none;border:0;cursor:pointer;color:var(--osso);
    font-family:var(--f-ui);font-weight:700;font-size:17px;letter-spacing:.12em;text-transform:uppercase}
  .folha-item .ico{width:20px;height:20px;color:var(--sangue)}
}
@media (prefers-reduced-motion:reduce){.hub-aba{animation:fade .25s both}}

/* loja (aba) */
.hub-lista.treinador{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.loja-caixa{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.loja-caixa span{font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}
.loja-caixa b{font-family:var(--f-titulo);font-weight:400;font-size:44px;line-height:1;color:var(--osso)}
.tela-hub .loja-item{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:6px;margin:0;padding:128px 22px 20px;
  background:var(--sup);border:0;overflow:hidden;
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte))}
.tela-hub .loja-item::before{content:"";position:absolute;left:0;right:0;top:0;height:160px;z-index:-2;background:center 35%/cover no-repeat;
  background-image:var(--img);transition:transform .8s var(--ease-soco)}
.tela-hub .loja-item::after{content:"";position:absolute;left:0;right:0;top:0;height:162px;z-index:-1;
  background:linear-gradient(180deg,rgba(17,19,26,.05) 0%,rgba(17,19,26,.55) 55%,var(--sup) 100%)}
.tela-hub .loja-nome{font-family:var(--f-titulo);font-weight:400;font-size:30px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--osso)}
.tela-hub .item-desc{font-family:var(--f-texto);font-size:15px;line-height:1.45;color:var(--osso-2)}
.tela-hub .loja-efeito-lb{margin-top:8px;font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cinza)}
.tela-hub .item-efeito{font-family:var(--f-ui);font-weight:600;font-size:17px;line-height:1.3;letter-spacing:.02em;color:var(--ganho)}
.tela-hub .loja-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--linha)}
.tela-hub .loja-preco{font-family:var(--f-titulo);font-weight:400;font-size:28px;color:var(--osso)}
.tela-hub .loja-rodape .botao{min-height:44px;padding:0 22px;font-size:15px}
.loja-selo{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ganho)}
.tela-hub .loja-item.comprado::before{filter:grayscale(1) brightness(.55)}
.tela-hub .loja-item.comprado .loja-nome,.tela-hub .loja-item.comprado .item-desc{color:var(--osso-2)}
@media (hover:hover) and (pointer:fine){.tela-hub .loja-item:hover::before{transform:scale(1.04)}}

/* conquistas (aba) */
.hub-lista.conquistas{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.hub-lista.conquistas .conq-progresso{grid-column:1/-1;margin-bottom:6px}
.tela-hub .conquista{display:flex;align-items:flex-start;gap:14px;margin:0;padding:16px 18px;background:rgba(17,19,26,.86);border:1px solid var(--linha)}
.tela-hub .conquista:not(.ok){opacity:.62}
.tela-hub .conquista.ok{border-color:rgba(215,38,30,.5);box-shadow:inset 3px 0 0 var(--sangue)}
.tela-hub .conquista-icone{width:40px;height:40px}
.tela-hub .conquista-nome{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--f-ui);font-weight:700;font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--osso)}
.conquista-estado{width:16px;height:16px;color:var(--cinza)}
.conquista.ok .conquista-estado{color:var(--ganho)}
.tela-hub .conquista-desc{margin-top:4px;font-family:var(--f-texto);font-size:14px;line-height:1.4;color:var(--osso-2)}
.tela-hub .conquista .badge{font-family:var(--f-ui);font-size:11px;letter-spacing:.14em;padding:2px 7px}

/* cards de momento (aba) */
.hub-lista.momentos{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:14px}
.tela-hub .momento-item{display:flex;gap:18px;align-items:flex-start;margin:0;padding:16px;background:rgba(17,19,26,.86);border:1px solid var(--linha)}
.tela-hub .momento-moldura{padding:0;border:0;background:none}
.tela-hub .momento-mini{border:1px solid var(--linha-forte);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tela-hub .momento-item .frase{font-family:var(--f-texto);font-size:17px;line-height:1.4;color:var(--osso);margin-bottom:10px}
.tela-hub .momento-item .meta{font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);margin-bottom:14px}
@media (max-width:560px){
  .hub-lista.momentos{grid-template-columns:1fr}
  .tela-hub .momento-item{flex-direction:column}
  .hub-lista.treinador,.hub-lista.conquistas{grid-template-columns:1fr}
}

/* painel (aba) */
.painel-grade{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:20px;align-items:start}
.painel-principal,.painel-lado{display:flex;flex-direction:column;gap:18px;min-width:0}
.painel-lado{gap:14px}
.painel-proxima{position:relative;padding:28px 30px 26px;border:1px solid rgba(215,38,30,.38);
  background:linear-gradient(135deg,rgba(215,38,30,.24) 0%,rgba(17,19,26,.94) 58%);
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte))}
.proxima-cab{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.proxima-rot{font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--sangue)}
.proxima-luta{font-family:var(--f-titulo);font-weight:400;font-size:clamp(54px,6.4vw,88px);line-height:.88;text-transform:uppercase}
.proxima-luta small{margin-left:.35em;font-size:.34em;letter-spacing:.06em;color:var(--cinza)}
.painel-proxima #controls{margin:0}
.painel-bloco{padding:20px 22px;background:rgba(17,19,26,.92);border:1px solid var(--linha)}
.painel-bloco[hidden]{display:none!important}
.painel-cab{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cinza)}
.painel-cab .ico{width:16px;height:16px;color:var(--sangue)}
.ultima-linha{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.carimbo{flex:none;display:inline-block;padding:7px 14px 6px;font-family:var(--f-titulo);font-weight:400;font-size:26px;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--sangue);transform:rotate(-3deg)}
.carimbo.d{color:var(--osso-2);background:none;box-shadow:inset 0 0 0 2px var(--cinza)}
.ultima-quem{display:flex;flex-direction:column;gap:2px;min-width:0}
.ultima-quem b{font-family:var(--f-ui);font-weight:700;font-size:23px;letter-spacing:.04em;text-transform:uppercase}
.ultima-quem span{font-size:15px;color:var(--osso-2)}
.cint-status{margin:0 0 10px;font-family:var(--f-titulo);font-weight:400;font-size:32px;line-height:1;text-transform:uppercase;color:var(--ouro)}
.cint-barra{position:relative;height:8px;margin:4px 0 14px;background:var(--sup-2)}
.cint-barra i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--sangue-escuro),var(--sangue));transition:width .8s var(--ease-soco)}
.cint-barra.ouro i{background:linear-gradient(90deg,#8a6a0e,var(--ouro))}
.cint-marca{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fundo)}
.cint-passo{margin:0;font-size:15px;line-height:1.45;color:var(--osso-2)}
.pos-linha{display:flex;align-items:baseline;gap:10px}
.pos-num{font-family:var(--f-titulo);font-weight:400;font-size:54px;line-height:1}
.pos-de{font-family:var(--f-ui);font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.pos-mov{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-family:var(--f-ui);font-weight:700;font-size:20px}
.pos-mov .ico{width:18px;height:18px}
.pos-mov.sobe{color:var(--ganho)}
.pos-mov.cai{color:var(--sangue-vivo)}
.pos-pico{margin-top:4px;font-size:14px;color:var(--cinza)}
.painel-bloco-lesao{border-color:rgba(215,38,30,.5);box-shadow:inset 3px 0 0 var(--sangue)}
.lesao-painel-nome{display:block;margin-bottom:2px;font-family:var(--f-ui);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase}
.lesao-painel-info{font-size:14px;color:var(--osso-2)}
.tela-hub .tw{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--linha);font-family:var(--f-texto)}
.painel-bloco .tw:first-of-type{border-top:0;padding-top:2px}
.tela-hub .tw .av{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-family:var(--f-ui);font-weight:700;font-size:14px;color:#fff}
.tela-hub .tw .who{display:block;font-family:var(--f-ui);font-weight:700;font-size:15px;letter-spacing:.03em;color:var(--osso)}
.tela-hub .tw .who span{font-weight:500;color:var(--cinza)}
.tela-hub .tw .txt{display:block;font-size:15px;line-height:1.4;color:var(--osso-2)}
@media (max-width:980px){.painel-grade{grid-template-columns:1fr}}
@media (max-width:560px){
  .painel-proxima{padding:22px 20px}
  .painel-proxima #controls .botao{flex:1 1 auto}
}

/* lutador (aba): ficha em tale of the tape */
.tela-hub .ficha{position:static;background:none;border:0}
.ficha-grade{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:22px;align-items:start}
.ficha-perfil,.ficha-tape{background:rgba(17,19,26,.92);border:1px solid var(--linha)}
.ficha-retrato{position:relative;display:grid;place-items:end center;height:300px;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 16%,rgba(242,238,230,.16),transparent 72%),linear-gradient(180deg,#1A1D26 0%,#0B0C10 100%)}
.ficha-retrato::before{content:"";position:absolute;left:50%;top:0;width:420px;height:320px;transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0,transparent 158deg,rgba(242,238,230,.11) 180deg,transparent 202deg)}
.ficha-retrato::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--sangue)}
.ficha-retrato svg{position:relative;width:220px;height:auto}
.ficha-id{padding:18px 22px 6px}
.ficha-id .nm{font-family:var(--f-titulo);font-weight:400;font-size:42px;line-height:.95;text-transform:uppercase;overflow-wrap:anywhere}
.ficha-id .sub{margin-top:8px;font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.ficha-dados{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:12px 22px 6px;background:var(--linha)}
.ficha-dados div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--sup)}
.ficha-dados span{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.ficha-dados b{font-family:var(--f-ui);font-weight:700;font-size:17px;letter-spacing:.03em;color:var(--osso)}
.tela-hub .ficha-sec{padding:16px 22px;border-bottom:1px solid var(--linha)}
.tela-hub .ficha-sec:last-child{border-bottom:0}
.tela-hub .ficha-sec h4{margin:0 0 10px;font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.22em;color:var(--cinza)}
.tela-hub .cint .b{font-family:var(--f-ui);font-size:16px;letter-spacing:.14em;padding:3px 12px}
.tela-hub .cint small{font-size:13px;color:var(--osso-2)}
.tela-hub .passo-label{margin-top:14px;font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.tela-hub .passo{margin-top:6px;font-size:15px;line-height:1.45;color:var(--osso-2);border-left:2px solid var(--sangue);padding-left:10px}
.tela-hub .rank .pos{font-family:var(--f-titulo);font-weight:400;font-size:44px}
.tela-hub .rank .de{font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.tela-hub .rank .mov{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-ui);font-weight:700;font-size:18px}
.tela-hub .rank .mov .ico{width:16px;height:16px}
.tela-hub .rank-pico{font-size:15px;color:var(--osso-2)}
.tela-hub .rank-pico b{color:var(--osso)}
.botao-perigo{color:var(--sangue-vivo);box-shadow:inset 0 0 0 1px rgba(215,38,30,.6)}
.tape-legenda{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 18px}
.tela-hub .atrs{display:grid;gap:16px}
.tela-hub .atr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:baseline}
.tela-hub .atr .r{font-family:var(--f-ui);font-weight:700;font-size:16px;letter-spacing:.1em;color:var(--osso-2)}
.tela-hub .atr .v{font-family:var(--f-titulo);font-weight:400;font-size:28px;line-height:1;color:var(--osso)}
.tela-hub .atr .g,.tela-hub .atr .dn{margin-left:8px;font-family:var(--f-ui);font-weight:700;font-size:15px;vertical-align:5px}
.tela-hub .atr.machucado .r{color:var(--sangue-vivo)}
.atr-camadas{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.camada{display:inline-flex;align-items:center;padding:2px 8px;font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--osso-2);background:var(--sup-2)}
.camada.treino{color:var(--ganho);box-shadow:inset 0 0 0 1px rgba(47,191,113,.35)}
.camada.evento{color:var(--ouro);box-shadow:inset 0 0 0 1px rgba(212,160,23,.35)}
.camada.cai{color:var(--sangue-vivo);box-shadow:inset 0 0 0 1px rgba(215,38,30,.5)}
.tela-hub .atrbar{height:8px;margin-top:2px}
.tela-hub .atrbar .base{background:var(--osso-2);opacity:.4}
.ficha-lesao{background:rgba(215,38,30,.08);box-shadow:inset 3px 0 0 var(--sangue)}
.tela-hub .lesao-nome{font-family:var(--f-ui);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--osso)}
.tela-hub .lesao-mag{font-family:var(--f-ui);font-weight:700;font-size:16px}
.tela-hub .lesao-dur{font-size:14px}
.confirma-sair{max-width:520px;width:100%}
.confirma-txt{margin:6px 0 22px;font-size:16px;line-height:1.5;color:var(--osso-2)}
.confirma-acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
@media (max-width:860px){.ficha-grade{grid-template-columns:1fr}}

/* cartel (aba) */
.cartel-resumo{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:0 0 20px;background:var(--linha);border:1px solid var(--linha)}
.resumo-item{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:rgba(17,19,26,.94)}
.resumo-item b{font-family:var(--f-titulo);font-weight:400;font-size:38px;line-height:1;color:var(--osso)}
.resumo-item span{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
#cartelVazio[hidden]{display:none}
.tela-hub .bouts{display:flex;flex-direction:column;gap:8px;margin:0;border:0}
.tela-hub .bout,.tela-hub .bout:last-child{display:grid;grid-template-columns:52px minmax(0,1fr) auto 22px;gap:14px;align-items:center;margin:0;
  padding:14px 18px;background:rgba(17,19,26,.94);border:1px solid var(--linha);font-family:var(--f-texto)}
.tela-hub .bout.com-narracao{cursor:pointer;transition:border-color .2s}
.tela-hub .bout .no{font-family:var(--f-titulo);font-weight:400;font-size:28px;line-height:1;color:var(--cinza)}
.tela-hub .bout .opp,.tela-hub .bout:last-child .opp{font-family:var(--f-ui);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--osso)}
.tela-hub .bout .how,.tela-hub .bout:last-child .how{font-size:14px;letter-spacing:.01em;color:var(--osso-2)}
.tela-hub .bout .stamp,.tela-hub .bout:last-child .stamp{padding:5px 11px 4px;font-family:var(--f-titulo);font-weight:400;font-size:19px;letter-spacing:.06em;
  color:#fff;background:var(--sangue);border:0;transform:rotate(-3deg);animation:none}
.tela-hub .bout .stamp.d{color:var(--osso-2);background:none;box-shadow:inset 0 0 0 2px var(--cinza);transform:rotate(3deg)}
.tela-hub .bout.title-fight{box-shadow:inset 3px 0 0 var(--ouro)}
.tela-hub .bout.title-fight .opp::after{content:"cinturão";margin-left:10px;padding:2px 7px;font-size:11px;letter-spacing:.14em;vertical-align:3px;color:#15120A;background:var(--ouro)}
.bout-seta{width:18px;height:18px;color:var(--cinza);transition:transform .25s var(--ease-soco)}
.bout.aberta .bout-seta{transform:rotate(180deg);color:var(--sangue)}
.bout-narracao{grid-column:1/-1;max-height:440px;overflow:auto;margin-top:4px;padding-top:10px;border-top:1px solid var(--linha);cursor:default}
.bout-narracao[hidden]{display:none}
.bout-narracao .pbp{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:4px 0;font-size:14px;line-height:1.45;color:var(--osso-2)}
.bout-narracao .pbp .clk{font-family:var(--f-ui);font-weight:600;color:var(--cinza)}
.bout-narracao .pbp.big{color:var(--osso);font-weight:600}
.bout-narracao .pbp.kd{color:var(--sangue-vivo);font-weight:700}
.bout-narracao .pbp.rd{margin-top:6px;padding-top:8px;border-top:1px solid var(--linha);font-family:var(--f-ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.bout-narracao .pbp.fin{font-family:var(--f-ui);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--sangue-vivo)}
.tela-hub #bouts>:not(.bout){margin:-2px 0 2px 66px}
.tela-hub .event{padding:12px 16px;font-family:var(--f-texto);font-style:normal;font-weight:400;font-size:15px;line-height:1.45;color:var(--osso-2);
  background:rgba(17,19,26,.82);border-left:3px solid var(--linha-forte)}
.tela-hub .event.rare{color:var(--osso);border-left-color:var(--ouro)}
@media (hover:hover) and (pointer:fine){.tela-hub .bout.com-narracao:hover{border-color:rgba(215,38,30,.55)}}

/* mídia (aba) */
.midia-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.tela-hub .phone{max-width:none;margin:0;padding:20px 22px;border:1px solid var(--linha);border-radius:0;background:rgba(17,19,26,.94)}
.tela-hub .phone::before{display:none}
.tela-hub .phone-hd{margin:0 0 6px;font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--cinza)}
.tela-hub .feed{max-height:none;overflow:visible;padding:0}
.tela-hub .tw .rt{display:block;margin-top:4px;font-family:var(--f-ui);font-size:12px;letter-spacing:.08em;color:var(--cinza)}
.tela-hub .tw.hater .txt{color:#F08A84}
.tela-hub .meters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 0;padding:0;border:0}
.tela-hub .meter{gap:8px;padding:14px;background:var(--sup-2)}
.tela-hub .meter-hd{font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.tela-hub .meter-hd b{font-family:var(--f-titulo);font-weight:400;font-size:30px;color:var(--osso)}
.tela-hub .fanbar{height:8px;background:var(--fundo)}
.tela-hub .fanbar i{background:var(--osso-2)}
.tela-hub .fanbar.hot i{background:var(--sangue)}
.tela-hub .fanbar.cold i{background:var(--cinza)}
.tela-hub .delta{font-family:var(--f-ui);font-weight:700}
.grafico-num{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.grafico-num b{font-family:var(--f-titulo);font-weight:400;font-size:48px;line-height:1}
.grafico-num span{font-family:var(--f-ui);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.grafico{display:block;width:100%;height:220px;
  background:linear-gradient(180deg,transparent 24.6%,var(--linha) 25%,transparent 25.4%,transparent 49.6%,var(--linha) 50%,transparent 50.4%,transparent 74.6%,var(--linha) 75%,transparent 75.4%)}
.grafico-eixo{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
@media (max-width:900px){.midia-grade{grid-template-columns:minmax(0,1fr)}.cartel-resumo{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){
  .tela-hub .bout,.tela-hub .bout:last-child{grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:12px 14px}
  .tela-hub .bout .no{font-size:22px}
  .tela-hub .bout .opp,.tela-hub .bout:last-child .opp{font-size:17px}
  .bout-seta{display:none}
  .tela-hub #bouts>:not(.bout){margin-left:0}
  .resumo-item b{font-size:30px}
  .tela-hub .meters{grid-template-columns:minmax(0,1fr)}
  .tela-hub .phone,.midia-grafico{padding:16px}
}
/* o nome do adversário na linha do cartel usa a classe .opp, que no
   legado.css também é o card de oferta (borda, fundo, padding) */
.tela-hub .bout .opp{display:inline;padding:0;border:0;background:none;box-shadow:none;transform:none;cursor:inherit}

/* ---------- noite de luta (fase 5) ---------- */
html[data-noite="1"] body{overflow:hidden}
html[data-noite="1"] .cfg-btn{z-index:70}
.noite{position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;background:var(--fundo);color:var(--osso);
  font-family:var(--f-texto);font-size:16px;line-height:1.5;
  --bg:var(--fundo);--panel:rgba(17,19,26,.9);--panel2:var(--sup-2);--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.22);
  --rule:rgba(255,255,255,.1);--ink:var(--osso);--ink2:var(--osso-2);--faded:var(--cinza);--stamp:var(--sangue);--stamp-bright:#F0564D;
  --win:var(--ganho);--win-bright:#4ADE8A;--win-dim:#6FCF97;--gold:var(--ouro);--gold-bright:#E6B421;--stock:var(--fundo);--stock-2:var(--sup);
  --mira:rgba(215,38,30,.55);--mira-txt:#F08A84;--mira-bg:rgba(215,38,30,.12)}
.noite[hidden]{display:none}
.noite>.tela-fundo{animation:noite-fundo .7s ease both}
@keyframes noite-fundo{from{opacity:0;transform:scale(1.05)}}
.noite-conteudo{position:relative;display:flex;flex-direction:column;min-height:100%;max-width:1320px;margin:0 auto;padding:22px 24px 48px}
.noite-cab{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 30px;padding-right:64px}
.noite-cab .btn-voltar[hidden]{display:none}
.noite-etapas{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.noite-etapa{padding:7px 13px 6px;font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza);background:rgba(17,19,26,.66)}
.noite-etapa.feita{color:var(--osso-2)}
.noite-etapa.on{color:#fff;background:var(--sangue)}
.noite-luta{margin-left:auto;font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.noite-luta b{margin:0 3px;font-family:var(--f-titulo);font-weight:400;font-size:30px;letter-spacing:.02em;color:var(--osso)}
.noite-corpo{flex:1}
.noite #escolha,.noite #stage{display:none;margin:0}
.noite.etapa-oferta #escolha,.noite.etapa-camp #escolha,.noite.etapa-coletiva #escolha,.noite.etapa-entrevista #escolha{display:block;animation:entra .5s var(--ease-soco) both}
.noite.etapa-luta #stage,.noite.etapa-resultado #stage{display:block}
.noite-rodape{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.noite-rodape .botao[hidden]{display:none}
.noite .esc-hd{margin:0 0 22px;font-family:var(--f-titulo);font-weight:400;font-size:clamp(36px,4.6vw,60px);line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;color:var(--osso);border:0;padding:0}
/* oferta */
.noite .opps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.noite .opp{position:relative;display:flex;flex-direction:column;gap:8px;padding:0 22px 20px;text-align:left;cursor:pointer;color:var(--osso);
  background:rgba(17,19,26,.95);border:0;box-shadow:inset 0 0 0 1px var(--linha-forte);transition:transform .3s var(--ease-soco),box-shadow .2s;
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte))}
.noite .opp .dbanda{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -22px 10px;padding:13px 22px 12px;
  font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.22em;text-transform:uppercase;border:0}
.noite .opp.d1 .dbanda{color:var(--ganho);background:rgba(47,191,113,.14)}
.noite .opp.d2 .dbanda{color:var(--osso-2);background:rgba(242,238,230,.07)}
.noite .opp.d3 .dbanda{color:var(--ouro);background:rgba(212,160,23,.15)}
.noite .opp.d4 .dbanda{color:#F0564D;background:rgba(215,38,30,.2)}
.noite .opp .vs{font-family:var(--f-ui);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.noite .opp .vs .quem{color:var(--osso-2)}
.noite .opp .nm{font-family:var(--f-titulo);font-weight:400;font-size:36px;line-height:.95;text-transform:uppercase;color:var(--osso)}
.noite .opp .arq{font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--sangue)}
/* regras v2 (2026-10-04): posição do adversário no ranking do UFC (#7, Sem ranking) */
.noite .opp .rank-adv{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro,#d6a740)}
.noite .opp .bio{font-size:14px;line-height:1.5;color:var(--osso-2)}
.noite .opp .bio b{color:var(--osso)}
.opp-comp{display:grid;gap:5px;margin-top:6px;padding:10px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.comp-linha{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:baseline;font-family:var(--f-ui);font-weight:700;font-size:16px}
.comp-eu{text-align:right;color:var(--osso)}
.comp-ele{color:var(--osso)}
.comp-rot{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cinza)}
.noite .opp .stake{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:auto;padding-top:10px;border:0;
  font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.noite .opp .stake b{font-family:var(--f-titulo);font-weight:400;font-size:26px;letter-spacing:.02em;color:var(--ganho)}
.noite .opp.rival{box-shadow:inset 0 0 0 2px var(--ouro)}
.noite .rival-selo{position:absolute;right:14px;top:52px;padding:3px 8px;font-family:var(--f-ui);font-weight:800;font-size:12px;letter-spacing:.18em;color:#15120A;background:var(--ouro)}
.noite .rival-anuncio{margin:0 0 20px;padding:18px 22px;font-family:var(--f-titulo);font-weight:400;font-size:30px;line-height:1;text-transform:uppercase;
  color:var(--ouro);background:rgba(212,160,23,.1);border-left:4px solid var(--ouro)}
.noite .rival-anuncio .sub{display:block;margin-top:8px;font-family:var(--f-texto);font-size:16px;text-transform:none;color:var(--osso-2)}
/* camp */
.noite .contra{margin:-8px 0 22px;max-width:72ch;font-size:17px;line-height:1.5;color:var(--osso-2)}
.noite .contra b{color:var(--osso)}
.noite .camps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.noite .camp{display:flex;flex-direction:column;gap:8px;padding:22px;text-align:left;cursor:pointer;color:var(--osso);background:rgba(17,19,26,.95);border:0;
  box-shadow:inset 0 0 0 1px var(--linha-forte);transition:transform .3s var(--ease-soco),box-shadow .2s;
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte))}
.noite .camp .t{font-family:var(--f-titulo);font-weight:400;font-size:34px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--osso)}
.noite .camp .d{font-size:15px;line-height:1.45;color:var(--osso-2)}
.noite .camp .g{font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ganho)}
.noite .camp .pctnum{font-family:var(--f-titulo);font-weight:400;font-size:22px}
.noite .camp-cap{font-family:var(--f-ui);font-size:12px;letter-spacing:.14em;color:var(--cinza)}
/* coletiva e entrevista: a cena (reta final, 2026-09-28, mapa do dono).
   Lutador à esquerda, imprensa à direita, conversa no meio: a fala do
   repórter aponta pra ele (direita), a resposta aponta pro lutador
   (esquerda), e o que aconteceu fecha embaixo. No celular os dois cards
   ficam lado a lado em cima e a conversa desce inteira. */
.cena-imprensa{display:grid;grid-template-columns:minmax(170px,250px) minmax(0,1fr) minmax(170px,250px);
  grid-template-areas:"jog meio ia";gap:26px;align-items:stretch}
.cena-lado{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:460px;margin:0;overflow:hidden;
  background:rgba(17,19,26,.94);box-shadow:inset 0 0 0 1px var(--linha-forte);
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte))}
.cena-jogador{grid-area:jog}
.cena-ia{grid-area:ia}
.cena-retrato{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.cena-jogador .cena-retrato{background:radial-gradient(70% 55% at 50% 28%,rgba(242,238,230,.13),transparent 72%)}
.cena-jogador .cena-retrato svg{display:block;width:100%;max-width:240px;height:auto;margin-bottom:72px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.cena-ia .cena-retrato img{display:block;width:100%;height:100%;object-fit:cover}
.cena-nome{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;padding:48px 18px 18px;
  background:linear-gradient(rgba(7,8,11,0),rgba(7,8,11,.94) 42%)}
.cena-nome b{font-family:var(--f-titulo);font-weight:400;font-size:30px;line-height:1;text-transform:uppercase;color:var(--sangue-vivo);overflow-wrap:anywhere}
.cena-nome small{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--osso-2)}
.cena-meio{grid-area:meio;display:flex;flex-direction:column;gap:18px;min-width:0;padding:4px 0}
/* memória narrativa (2026-09-29): o que ele disse antes, literal, e o que aconteceu depois */
.noite .cena-memoria{display:flex;flex-direction:column;gap:4px;margin:0;padding:12px 16px;background:rgba(212,160,23,.1);border-left:3px solid var(--ouro)}
.cena-memoria-rot{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)}
.cena-memoria-fala{font-size:17px;line-height:1.45;font-style:italic;color:var(--osso)}
.cena-memoria-res{font-family:var(--f-ui);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--osso-2)}
/* amostra grátis do Pro (plano de evolução, etapa 2): faixa na cena e selo no convite da entrevista */
.noite .amostra-pro{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 14px;font-size:14px;line-height:1.45;
  color:var(--osso-2);background:rgba(212,160,23,.08);border:1px solid rgba(212,160,23,.45)}
.amostra-pro .ico{flex:none;width:18px;height:18px;margin-top:2px;color:var(--ouro)}
.amostra-pro b{display:block;margin-bottom:2px;font-family:var(--f-ui);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ouro)}
.amostra-selo{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0 10px;padding:3px 8px;vertical-align:middle;
  font-family:var(--f-ui);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#15120A;background:var(--ouro)}
.amostra-selo .ico{width:12px;height:12px}
.noite .cena-evento{margin:0;padding:12px 16px;font-size:16px;line-height:1.5;font-style:italic;color:var(--osso-2);
  background:rgba(7,8,11,.78);border-left:3px solid var(--ouro)}
.balao{position:relative;width:fit-content;max-width:88%;padding:16px 20px;font-size:18px;line-height:1.5;color:var(--osso)}
.balao-quem{display:block;margin-bottom:6px;font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}
.balao-ia{align-self:flex-end;background:var(--sup-2)}
.balao-ia::after{content:"";position:absolute;top:24px;right:-16px;width:17px;height:24px;background:var(--sup-2);clip-path:polygon(0 0,100% 50%,0 100%)}
.balao-jogador{align-self:flex-start;background:#3A1411}
.balao-jogador::before{content:"";position:absolute;top:24px;left:-16px;width:17px;height:24px;background:#3A1411;clip-path:polygon(100% 0,0 50%,100% 100%)}
.balao-jogador .balao-quem{color:#F08A84}
.balao-jogador:has(textarea){width:88%}
.digitando{display:inline-flex;gap:6px;padding:6px 0}
.digitando i{width:8px;height:8px;border-radius:50%;background:var(--osso-2);animation:digita 1.1s ease-in-out infinite}
.digitando i:nth-child(2){animation-delay:.18s}
.digitando i:nth-child(3){animation-delay:.36s}
@keyframes digita{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.cena-responder{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.noite .cena-responder textarea{width:100%;min-height:96px;padding:12px 14px;resize:vertical;font-family:var(--f-texto);font-size:16px;line-height:1.5;
  color:var(--osso);background:rgba(7,8,11,.55);border:1px solid rgba(240,138,132,.35);border-radius:0}
.noite .cena-responder textarea:focus{outline:none;border-color:var(--sangue)}
.noite .cena-responder textarea:disabled{opacity:.55}
.noite .balao-jogador .bloqueio-pro{max-width:none}
.cena-desfecho{margin-top:auto;padding:18px 22px;background:rgba(7,8,11,.9);border:1px solid var(--linha);border-top:3px solid var(--sangue)}
.cena-desfecho-t{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--sangue)}
.cena-desfecho p{margin:8px 0 0;font-size:17px;line-height:1.6;color:var(--osso)}
.cena-desfecho .dil-fx{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-family:var(--f-ui);font-weight:700;font-size:15px}
.cena-desfecho .dil-fx:empty{display:none}
.noite .cena-nota{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--cinza)}
.cena-acoes{display:flex;flex-wrap:wrap;gap:12px}
.coletiva-seguir .ico{width:18px;height:18px}
@media (max-width:760px){
  .cena-imprensa{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"jog ia" "meio meio";gap:12px}
  .cena-lado{min-height:250px}
  .cena-jogador .cena-retrato svg{max-width:150px;margin-bottom:58px}
  .cena-nome{padding:36px 12px 12px}
  .cena-nome b{font-size:21px}
  .cena-nome small{font-size:11px;letter-spacing:.12em}
  .balao{max-width:94%;font-size:17px}
  .balao-jogador:has(textarea){width:94%}
}
@media (prefers-reduced-motion:reduce){.digitando i{animation:none;opacity:.7}}
/* luta (visual completo na tarefa 6) */
.noite .stage{display:none;grid-template-columns:none}
.noite-luta-ctrl{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.noite .live{margin:0}
@media (hover:hover) and (pointer:fine){
  .noite .opp:hover,.noite .camp:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--sangue)}
  .noite .opp.rival:hover{box-shadow:inset 0 0 0 2px var(--ouro)}
}
@media (max-width:720px){
  .noite-conteudo{padding:14px 16px 40px}
  .noite-cab{gap:12px;margin-bottom:22px;padding-right:56px}
  .noite-etapa{padding:6px 9px 5px;font-size:12px;letter-spacing:.12em}
  .noite-luta{margin-left:0}
  .noite .opp .nm{font-size:30px}
}
@media (prefers-reduced-motion:reduce){.noite>.tela-fundo{animation:none}.noite.etapa-oferta #escolha,.noite.etapa-camp #escolha,.noite.etapa-coletiva #escolha,.noite.etapa-entrevista #escolha{animation:fade .25s both}}

/* entrada (tale of the tape antes do round 1) */
.noite #entrada{display:none}
.noite.etapa-entrada #entrada{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:6px;animation:entrada-in .5s var(--ease-soco) both}
@keyframes entrada-in{from{opacity:0;transform:scale(1.04)}}
.entrada-cint{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;font-family:var(--f-ui);font-weight:800;font-size:15px;letter-spacing:.24em;
  text-transform:uppercase;color:#15120A;background:var(--ouro)}
.entrada-lados{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:26px;width:100%;max-width:1040px}
.entrada-lado{display:flex;flex-direction:column;gap:8px;min-width:0}
.entrada-lado.eu{align-items:flex-end;text-align:right}
.entrada-lado.ele{align-items:flex-start;text-align:left}
.entrada-lado b{font-family:var(--f-titulo);font-weight:400;font-size:clamp(40px,5.6vw,78px);line-height:.92;text-transform:uppercase;overflow-wrap:anywhere}
.entrada-lado>span{font-family:var(--f-ui);font-weight:700;font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.entrada-retrato{width:190px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.65))}
.entrada-retrato svg{display:block;width:190px;height:auto}
.entrada-vs{align-self:center;font-family:var(--f-titulo);font-size:66px;line-height:1;color:var(--sangue)}
.entrada-lado .entrada-dif{padding:4px 10px;font-size:13px;letter-spacing:.2em;color:var(--osso)}
.entrada-dif.d1{background:rgba(47,191,113,.28)}
.entrada-dif.d2{background:rgba(242,238,230,.14)}
.entrada-dif.d3{background:rgba(212,160,23,.32)}
.entrada-dif.d4{background:rgba(215,38,30,.5)}
.tale{display:grid;gap:1px;width:100%;max-width:640px;background:var(--linha);border:1px solid var(--linha)}
.tale-linha{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:baseline;padding:10px 18px;background:rgba(17,19,26,.95)}
.tale-a{text-align:right;font-family:var(--f-ui);font-weight:700;font-size:20px}
.tale-b{font-family:var(--f-ui);font-weight:700;font-size:20px}
.tale-rot{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cinza)}

/* luta: placar no topo, narração no centro, números ao lado */
.noite .live{border:0;background:none}
.placar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;margin:0 0 16px;padding:16px 22px;
  background:rgba(7,8,11,.88);border:1px solid var(--linha-forte);border-bottom:3px solid var(--sangue)}
.placar-lado{display:flex;align-items:center;gap:14px;min-width:0}
.placar-lado.ele{justify-content:flex-end;text-align:right}
.placar-lado b{overflow:hidden;font-family:var(--f-titulo);font-weight:400;font-size:clamp(24px,3vw,40px);line-height:1;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap}
.placar-retrato{flex:none;width:54px;height:54px;overflow:hidden;background:var(--sup-2);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.placar-retrato svg{display:block;width:54px;height:auto;margin-top:6px}
.placar-centro{display:flex;flex-direction:column;align-items:center;gap:3px}
.placar .rd{font-family:var(--f-titulo);font-weight:400;font-size:34px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--osso)}
.placar-sub{font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}
.placar-cint{display:inline-flex;align-items:center;gap:6px;margin-top:3px;padding:2px 8px;font-family:var(--f-ui);font-weight:800;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:#15120A;background:var(--ouro)}
.placar-cint .ico{width:14px;height:14px}
.luta-grade{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.noite .play{min-height:320px;max-height:none;overflow:visible;margin:0;padding:6px 22px 18px;background:rgba(17,19,26,.92);border:1px solid var(--linha)}
.noite .pbp{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:7px 0;border:0;font-size:17px;line-height:1.45;color:var(--osso-2);animation:linha-in .25s ease both}
@keyframes linha-in{from{opacity:0;transform:translateY(6px)}}
.noite .pbp .clk{font-family:var(--f-ui);font-weight:600;font-size:15px;color:var(--cinza)}
.noite .pbp.big{font-weight:600;color:var(--osso)}
.noite .pbp.kd{font-weight:700;color:#F0564D}
.noite .pbp.rd{margin-top:8px;padding-top:12px;border-top:1px solid var(--linha);font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cinza)}
.noite .pbp.fin{margin-top:6px;font-family:var(--f-titulo);font-weight:400;font-size:28px;line-height:1.1;text-transform:uppercase;color:var(--sangue-vivo)}
.luta-numeros{position:sticky;top:12px}
.num-linha{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--linha)}
.luta-numeros .painel-cab+.num-linha{border-top:0}
.num-v b{font-family:var(--f-titulo);font-weight:400;font-size:32px;line-height:1}
.num-rot{text-align:center;font-family:var(--f-ui);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.num-barra{grid-column:1/-1;height:4px;background:var(--linha-forte)}
.num-barra i{display:block;height:100%;background:var(--sangue);transition:width .6s var(--ease-soco)}
/* escolha na luta: por cima da narração */
.noite .escolha-luta{position:sticky;bottom:12px;z-index:5;margin:16px 0 0;padding:20px 22px;background:rgba(17,19,26,.98);
  border:1px solid var(--linha-forte);border-top:3px solid var(--sangue);box-shadow:0 -18px 40px rgba(0,0,0,.55)}
.noite .el-cab{margin:0 0 14px;font-family:var(--f-ui);font-weight:700;font-size:19px;letter-spacing:.03em;color:var(--osso)}
.noite .el-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.noite .el-opts button{display:flex;flex-direction:column;gap:8px;padding:16px;text-align:left;cursor:pointer;color:var(--osso);background:var(--sup-2);border:0;
  box-shadow:inset 0 0 0 1px var(--linha-forte);transition:background .2s,box-shadow .2s;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.noite .el-nome{font-family:var(--f-titulo);font-weight:400;font-size:24px;line-height:1;text-transform:uppercase}
.noite .el-attr{font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.noite .el-attr b{font-size:16px;color:var(--ganho)}
@media (hover:hover) and (pointer:fine){.noite .el-opts button:hover{background:rgba(215,38,30,.14);box-shadow:inset 0 0 0 2px var(--sangue)}}
/* luta interativa (2026-10-04, local): 4 cartas por round que viram,
   o plano no placar, o lado de quem apanhou treme, resumo do round */
.noite .el-opts{grid-template-columns:repeat(4,minmax(0,1fr))}
.noite .el-opts .el-ico{width:28px;height:28px;color:var(--sangue)}
.noite .el-dica{font-size:14px;line-height:1.35;color:var(--osso-2)}
.noite .escolha-luta.mao-nova .el-opts button{animation:viraCarta .5s var(--ease-soco) both}
.noite .escolha-luta.mao-nova .el-opts button:nth-child(2){animation-delay:.07s}
.noite .escolha-luta.mao-nova .el-opts button:nth-child(3){animation-delay:.14s}
.noite .escolha-luta.mao-nova .el-opts button:nth-child(4){animation-delay:.21s}
@keyframes viraCarta{from{opacity:0;transform:perspective(600px) rotateY(-70deg)}to{opacity:1;transform:none}}
.placar-plano{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-family:var(--f-ui);font-size:13px;letter-spacing:.06em;color:var(--ouro)}
.placar-plano .ico{width:16px;height:16px}
.placar-plano b{text-transform:uppercase}
.placar-lado.treme{animation:ladoTreme .38s ease}
.placar-lado.cai{animation:ladoCai .7s ease}
.placar .rd.pulsa{animation:rdPulsa .6s ease}
@keyframes ladoTreme{0%,100%{transform:none}20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}
@keyframes ladoCai{0%,100%{transform:none;filter:none}15%{transform:translate(-10px,5px) rotate(-2deg);filter:drop-shadow(0 0 10px var(--sangue-vivo))}
  40%{transform:translate(8px,-3px) rotate(1deg)}65%{transform:translate(-4px,2px)}}
@keyframes rdPulsa{0%{transform:scale(1.25);color:var(--sangue-vivo)}100%{transform:none}}
/* linha do plano na narração (pedido do dono: em negrito, pra ele saber
   que foi a escolha dele): faixa dourada, ícone de alvo no lugar do relógio */
.pbp.plano{margin:4px 0;padding:8px 10px;background:rgba(212,160,23,.10);border-left:3px solid var(--ouro)}
.pbp.plano span:last-child{font-weight:700;color:var(--osso)}
.pbp.plano .clk .ico{width:16px;height:16px;color:var(--ouro)}
.bout-narracao .pbp.plano{font-weight:700}
.noite .el-ajuda{margin:-6px 0 14px;font-size:14px;line-height:1.4;color:var(--osso-2)}
.noite .el-custo{font-size:14px;line-height:1.35;color:var(--cinza)}
.noite .el-dica b,.noite .el-custo b{font-family:var(--f-ui);font-weight:700;letter-spacing:.04em;color:var(--osso)}
.noite .pbp.resumo-round{margin:6px 0 2px;padding:8px 10px;background:rgba(212,160,23,.08);border-left:3px solid var(--ouro);color:var(--osso)}
.noite .pbp.resumo-round .clk .ico{width:16px;height:16px;color:var(--ouro)}
@media (max-width:720px){.noite .el-opts{grid-template-columns:1fr 1fr}.noite .el-nome{font-size:20px}}
@media (prefers-reduced-motion:reduce){.noite .escolha-luta.mao-nova .el-opts button,.placar-lado.treme,.placar-lado.cai,.placar .rd.pulsa{animation:none}}
@media (max-width:900px){.luta-grade{grid-template-columns:minmax(0,1fr)}.luta-numeros{position:static;order:-1}}
@media (max-width:560px){
  .placar{gap:10px;padding:12px 14px}
  .placar-retrato{display:none}
  .placar .rd{font-size:26px}
  .noite .play{padding:4px 14px 14px}
  .noite .pbp{grid-template-columns:44px minmax(0,1fr);font-size:15px}
  .noite .pbp.fin{font-size:22px}
  .entrada-lados{grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px}
  .entrada-lado.eu,.entrada-lado.ele{align-items:center;text-align:center}
  .entrada-retrato,.entrada-retrato svg{width:130px}
  .entrada-vs{font-size:40px}
}
@media (prefers-reduced-motion:reduce){.noite .pbp{animation:none}}

/* resultado e pós-luta */
.noite #resultado,.noite #posluta{display:none}
.noite.etapa-resultado #stage{display:none}
.noite.etapa-resultado #resultado{display:flex}
.noite.etapa-resultado #posluta{display:block}
#resultado{flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 26px}
.res-carimbo{padding:12px 28px 4px;font-family:var(--f-titulo);font-weight:400;font-size:clamp(84px,13vw,176px);line-height:.85;text-transform:uppercase;
  color:#fff;background:var(--sangue);transform:rotate(-2deg);box-shadow:0 22px 60px rgba(215,38,30,.35);animation:carimbo .5s cubic-bezier(.2,1.4,.4,1) both}
.res-carimbo.d{color:var(--osso-2);background:rgba(7,8,11,.6);box-shadow:inset 0 0 0 4px var(--cinza)}
@keyframes carimbo{from{opacity:0;transform:scale(1.6) rotate(-6deg)}to{opacity:1;transform:scale(1) rotate(-2deg)}}
.res-como{margin-top:18px;font-family:var(--f-ui);font-weight:600;font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--osso-2)}
.res-como b{color:var(--osso)}
.res-contra{display:flex;align-items:center;gap:10px;font-family:var(--f-ui);font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.res-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;width:100%;max-width:840px;margin-top:18px;background:var(--linha);border:1px solid var(--linha)}
.res-num{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:rgba(17,19,26,.95)}
.res-rot{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}
.res-rot .ico{width:16px;height:16px;color:var(--sangue)}
.res-num b{font-family:var(--f-titulo);font-weight:400;font-size:42px;line-height:1;color:var(--osso)}
.res-num .pos-mov{margin:0}
/* teto do estreante no draft (regras v3, 2026-10-05): carta com atributo no limite */
.elite.teto{color:var(--ouro);border-color:var(--ouro)}
/* contador do Online: quantos na fila e lutando agora (2026-10-08) */
.jxj-movimento{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px;color:var(--osso-2)}
.jxj-movimento:empty{display:none}
.jxj-movimento .ico{width:16px;height:16px;color:var(--ouro);flex:none}
/* aviso de não afiliação no rodapé do menu (2026-10-08) */
.menu-aviso-legal{flex-basis:100%;font-size:12px;letter-spacing:.06em;text-transform:none;color:var(--cinza)}
/* Começar rápido na tela do nome (2026-10-08) */
.nome-rapido-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--linha);max-width:640px}
.nome-rapido-box .tela-sub{margin:0;flex:1 1 260px}
/* aviso de vencimento do Pro no menu (2026-10-08) */
.aviso-pro{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:-14px 0 24px;padding:14px 18px;background:rgba(17,19,26,.92);border:1px solid var(--linha);border-left:3px solid var(--ouro);color:var(--osso)}
.aviso-pro .ico{width:20px;height:20px;color:var(--ouro);flex:none}
.aviso-pro span{flex:1 1 260px;font-size:15px;line-height:1.45}
/* Rever narração no resultado (2026-10-05): o mesmo painel da luta */
.res-rever{margin-top:14px}
.res-narracao{width:100%;max-width:900px;max-height:60vh;overflow:auto;padding:6px 22px 18px;background:rgba(17,19,26,.92);border:1px solid var(--linha)}
@media (max-width:640px){.res-narracao{padding:4px 14px 14px}}
/* parte dos seguidores que veio da coletiva (2026-09-28) */
.res-coletiva{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ouro)}
#posluta{max-width:900px}
.pos-luta{display:flex;flex-direction:column;gap:12px}
.pos-luta:empty{display:none}
.pos-luta>.entrevista-convite{order:9}
.tela-hub #bouts>.pos-luta{margin:-2px 0 2px 66px}
.tela-hub .dilema{margin:0;padding:22px 24px;background:rgba(17,19,26,.95);border:1px solid var(--linha);border-left:3px solid var(--sangue)}
.tela-hub .dil-eyebrow{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--sangue)}
.tela-hub .dil-t{margin:6px 0 10px;font-family:var(--f-titulo);font-weight:400;font-size:34px;line-height:1;text-transform:uppercase;color:var(--osso)}
.tela-hub .dil-c{font-size:17px;line-height:1.55;color:var(--osso)}
.tela-hub .dil-in{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:16px}
.tela-hub .dil-in textarea{width:100%;min-height:100px;padding:14px;resize:vertical;font-family:var(--f-texto);font-size:16px;line-height:1.5;color:var(--osso);
  background:var(--sup-2);border:1px solid var(--linha-forte);border-radius:0}
.tela-hub .dil-in textarea:focus{outline:none;border-color:var(--sangue)}
.tela-hub .dil-r{margin-top:14px;font-size:16px;font-style:italic;color:var(--osso-2)}
.tela-hub .dil-o{margin-top:12px;padding-top:12px;border-top:1px solid var(--linha);font-size:17px;line-height:1.6;color:var(--osso)}
.tela-hub .dil-fx{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-family:var(--f-ui);font-weight:700;font-size:15px}
.entrevista-convite{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.entrevista-convite:has(.dil-eyebrow){padding:22px 24px;background:rgba(17,19,26,.95);border:1px solid var(--linha);border-left:3px solid var(--ouro)}
.entrevista-convite .bloqueio-pro{display:inline-block}
@media (max-width:560px){
  .res-nums{grid-template-columns:minmax(0,1fr)}
  .res-como{font-size:17px}
  .tela-hub #bouts>.pos-luta{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.res-carimbo{animation:fade .25s both}}

/* ---------- fim de carreira (fase 5) ---------- */
.tela-fim .fim-topo{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:stretch;margin:0 0 20px}
.fim-quem{display:flex;align-items:flex-end;gap:26px;padding:26px 28px 0;overflow:hidden;background:rgba(17,19,26,.9);border:1px solid var(--linha);
  background-image:radial-gradient(50% 80% at 18% 10%,rgba(242,238,230,.12),transparent 70%)}
.fim-retrato{flex:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.fim-retrato svg{display:block;width:210px;height:auto}
.fim-id{padding-bottom:28px;min-width:0}
.fim-rot{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--sangue)}
.fim-nome{display:block;margin:6px 0 10px;font-family:var(--f-titulo);font-weight:400;font-size:clamp(44px,6vw,88px);line-height:.9;text-transform:uppercase;overflow-wrap:anywhere}
.fim-sub{font-family:var(--f-ui);font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.fim-nota{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:26px 28px;background:rgba(17,19,26,.92);border:1px solid var(--linha);border-top:3px solid var(--ouro)}
.fim-letra{font-family:var(--f-titulo);font-weight:400;font-size:150px;line-height:.85;color:var(--osso)}
.fim-letra.nota-S{color:var(--ouro)}
.fim-letra.nota-A{color:var(--osso)}
.fim-letra.nota-D,.fim-letra.nota-F{color:var(--osso-2)}
.fim-pontos{font-family:var(--f-ui);font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.fim-pontos b{margin-right:4px;font-family:var(--f-titulo);font-weight:400;font-size:30px;letter-spacing:.02em;color:var(--osso)}
.fim-partes{display:grid;gap:4px;width:100%;margin:14px 0 0;padding:12px 0 0;list-style:none;border-top:1px solid var(--linha)}
.fim-partes li{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-ui);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--osso-2)}
.fim-partes b{font-variant-numeric:tabular-nums;color:var(--osso)}
.fim-parecer{margin:10px 0 0;font-size:17px;line-height:1.5;color:var(--osso-2)}
.fim-legado{margin:0 0 20px;padding:22px 26px;font-family:var(--f-titulo);font-weight:400;font-size:clamp(24px,3vw,38px);line-height:1.1;text-transform:uppercase;
  color:var(--osso);background:rgba(215,38,30,.14);border-left:4px solid var(--sangue)}
.fim-numeros{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;margin:0 0 20px;background:var(--linha);border:1px solid var(--linha)}
.fim-num{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:rgba(17,19,26,.95)}
.fim-num span{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.fim-num b{font-family:var(--f-ui);font-weight:700;font-size:20px;letter-spacing:.02em;color:var(--osso)}
.fim-destaque{margin:0 0 18px;padding:18px 22px;background:rgba(17,19,26,.92);border-left:3px solid var(--ouro)}
.fim-destaque p{margin:8px 0 0;font-size:16px;line-height:1.45;color:var(--osso)}
.fim-feito{margin:0 0 22px;font-size:15px;line-height:1.5;color:var(--osso-2)}
.fim-acoes{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.fim-status{margin:6px 0;font-size:15px;color:var(--osso-2)}
.fim-status p{margin:0}
.fim-semente{margin-top:10px;font-size:14px;color:var(--cinza)}
@media (max-width:900px){.tela-fim .fim-topo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.fim-quem{flex-direction:column;align-items:flex-start;padding:20px 20px 0}.fim-retrato svg{width:160px}.fim-letra{font-size:120px}}
/* regras de senha e fechar do painel de opções: ícone SVG no lugar de caractere */
.regra-senha{display:flex;align-items:center;gap:6px}
.regra-senha .ico{width:15px;height:15px}
.cfg-x .ico{width:18px;height:18px;vertical-align:middle}

/* Painel de admin (2026-09-28): lista densa, uma linha por conta ou carreira. */
.admin-area{display:flex;flex-direction:column;gap:0}
.admin-painel{display:flex;flex-direction:column;gap:14px}
.admin-busca{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.admin-busca input{flex:1 1 240px;min-width:0}
.admin-lista{display:flex;flex-direction:column}
.admin-linha{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-top:1px solid var(--linha)}
.admin-linha:first-child{border-top:0}
.admin-quem{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--f-texto);font-size:15px;color:var(--osso);word-break:break-word}
.admin-quem b{font-weight:600}
.admin-info{font-size:13.5px;color:var(--cinza);font-variant-numeric:tabular-nums}
.admin-selo{font-family:var(--f-ui);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--linha-forte);color:var(--osso-2)}
.admin-selo.selo-pro{border-color:var(--ouro);color:var(--ouro)}
.admin-selo.selo-ban{border-color:var(--sangue);color:var(--sangue-vivo)}
.admin-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.admin-acoes .admin-motivo{flex:1 1 180px;min-width:0;max-width:280px}
.admin-acoes .hint{margin:0}
.btn.perigo{background:var(--sangue);border-color:var(--sangue);color:#fff}
.admin-aviso{border-color:var(--sangue);margin-bottom:16px}
.admin-aviso p{margin:6px 0 0;color:var(--osso-2)}

/* ---------- como jogar: tutorial com prints anotados (2026-09-28) ---------- */
.tutorial{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;
  padding:28px 16px;background:rgba(4,5,8,.88);animation:fade .2s both}
.tutorial-caixa{width:min(1000px,100%);margin:auto 0;padding:22px 24px 20px;color:var(--osso);font-family:var(--f-texto);
  background:var(--sup);border:1px solid var(--linha-forte);border-top:3px solid #FFD60A}
.tutorial-cab{position:relative;margin:0 0 14px;padding-right:56px}
.tutorial-rot{font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#FFD60A}
.tutorial-cab h2{margin:6px 0 0;font-family:var(--f-titulo);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1;text-transform:uppercase}
.tutorial-x{position:absolute;right:0;top:0;display:grid;place-items:center;width:44px;height:44px;color:var(--osso);background:none;
  border:1px solid var(--linha-forte);cursor:pointer}
.tutorial-x .ico{width:20px;height:20px}
.tutorial-print{margin:0;background:#000;border:1px solid var(--linha)}
.tutorial-print img{display:block;width:100%;height:auto}
.tutorial-itens{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.tutorial-itens li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5;color:var(--osso)}
.tutorial-num{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font-family:var(--f-ui);font-weight:800;font-size:16px;color:#111;background:#FFD60A}
.tutorial-pe{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px}
.tutorial-pe .tutorial-pular{margin-right:auto}
.tutorial-pe .ico{width:18px;height:18px}
.botao-ajuda{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-family:var(--f-ui);font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--osso);background:rgba(17,19,26,.72);border:1px solid var(--linha-forte);cursor:pointer}
.botao-ajuda .ico{width:16px;height:16px;color:#FFD60A}
.tela-criacao>.botao-ajuda{margin:0 0 16px}
@media (hover:hover) and (pointer:fine){.botao-ajuda:hover,.tutorial-x:hover{border-color:#FFD60A}}
@media (max-width:760px){.tutorial{padding:10px}.tutorial-caixa{padding:16px 14px}.tutorial-itens li{font-size:15px}}
@media (prefers-reduced-motion:reduce){.tutorial{animation:none}}


/* ---------- JxJ (2026-10-01) ----------
   Mesma identidade: painel escuro com desfoque, vermelho de destaque, ouro
   pra título, canto cortado nos elementos que mandam na tela. */
.menu-card-faixa{grid-column:span 6;min-height:220px}
.menu-card-faixa .cartao-conteudo{max-width:720px}
.menu-card-faixa .cartao-rotulo{color:var(--ouro)}
@media (max-width:720px){.menu-card-faixa{min-height:200px}}

.tela-jxj .jxj-nav{margin-top:-8px}
.jxj-area{display:flex;flex-direction:column;gap:22px}
.jxj-rotulo{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sangue)}
.jxj-nota{color:var(--cinza);font-size:14px;margin:6px 0 0}
.jxj-erro{color:var(--sangue-vivo);font-weight:600;margin:4px 0 0}
.jxj-aviso{color:var(--ouro);font-family:var(--f-ui);letter-spacing:.08em;margin:0}
.jxj-subtitulo{display:flex;align-items:center;gap:10px;font-family:var(--f-titulo);font-weight:400;font-size:clamp(24px,2.6vw,34px);text-transform:uppercase;line-height:1;margin:6px 0 12px}
.jxj-nome{font-family:var(--f-titulo);font-weight:400;font-size:clamp(34px,4.6vw,60px);line-height:.95;text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.jxj-meta{color:var(--osso-2);font-family:var(--f-ui);font-size:17px;letter-spacing:.06em;margin:6px 0 0}
.jxj-acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.jxj-lista-simples{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--osso-2)}
.jxj-lista-simples li{position:relative;padding-left:18px}
.jxj-lista-simples li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--sangue)}
.jxj-lista-simples a{color:var(--osso)}
.txt-ganho{color:var(--ganho)}
.txt-perda{color:var(--sangue-vivo)}
code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;color:var(--osso-2);word-break:break-all}

/* retrato e molduras (cosmético) */
.jxj-retrato{display:inline-block;line-height:0;padding:3px;background:var(--linha-forte);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.jxj-retrato svg{display:block;max-width:100%;height:auto;background:var(--sup)}
.jxj-retrato.moldura-ouro{background:linear-gradient(135deg,#F4D27A,var(--ouro) 45%,#8A6A0C)}
.jxj-retrato.moldura-sangue{background:linear-gradient(135deg,var(--sangue-vivo),var(--sangue-escuro))}
.jxj-retrato.moldura-noite{background:linear-gradient(135deg,#3A4256,#11131A)}
.jxj-retrato.moldura-campeao{background:repeating-linear-gradient(45deg,var(--ouro) 0 6px,#8A6A0C 6px 12px)}

/* barras */
.jxj-barra{display:block;height:8px;background:rgba(255,255,255,.08);overflow:hidden;min-width:60px}
.jxj-barra i{display:block;height:100%;background:var(--osso-2);transition:width .5s var(--ease-soco)}
.jxj-barra-xp i{background:var(--ouro)}
.jxj-barra-energia i{background:var(--ganho)}
.jxj-barra-dano i{background:var(--sangue)}

/* entrada */
.jxj-hero{position:relative;background:rgba(17,19,26,.84);border:1px solid var(--linha);padding:clamp(22px,3vw,40px);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.jxj-hero-titulo{font-family:var(--f-titulo);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:.95;text-transform:uppercase;margin:0 0 14px;max-width:18ch}
.jxj-hero-txt{color:var(--osso-2);font-size:18px;max-width:64ch;margin:0 0 20px}
.jxj-passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.jxj-passo{display:flex;flex-direction:column;gap:6px;padding:16px;border-top:3px solid var(--sangue);background:rgba(7,8,11,.5)}
.jxj-passo .ico{width:28px;height:28px;color:var(--sangue)}
.jxj-passo b{font-family:var(--f-ui);font-size:20px;letter-spacing:.12em;text-transform:uppercase}
.jxj-passo span{color:var(--osso-2);font-size:15px}
.jxj-planos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.jxj-plano{padding:18px 20px;background:rgba(17,19,26,.8);border:1px solid var(--linha)}
.jxj-plano b{font-family:var(--f-ui);font-size:18px;letter-spacing:.14em;text-transform:uppercase}
.jxj-plano ul{margin:10px 0 0;padding-left:18px;color:var(--osso-2)}
.jxj-plano-pro{border-color:rgba(212,160,23,.45)}
.jxj-plano-pro b{color:var(--ouro)}
.jxj-faixa-luta{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:0;cursor:pointer;text-align:left;
  background:var(--sangue);color:#fff;font:inherit;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.jxj-faixa-luta .ico{width:28px;height:28px}
.jxj-faixa-luta span{flex:1;display:flex;flex-direction:column}
.jxj-faixa-luta b{font-family:var(--f-ui);font-size:20px;letter-spacing:.12em;text-transform:uppercase}

/* painel do principal */
.jxj-principal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;
  background:rgba(17,19,26,.84);border:1px solid var(--linha);padding:clamp(18px,2.6vw,30px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.jxj-numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 10px}
.jxj-numeros div{min-width:0}
.jxj-numeros dt{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.jxj-numeros dd{margin:2px 0 0;font-family:var(--f-titulo);font-size:clamp(26px,2.8vw,38px);line-height:1;font-variant-numeric:tabular-nums}
.jxj-numeros dd small{display:block;font-family:var(--f-texto);font-size:13px;color:var(--cinza);margin-top:4px;line-height:1.3}
.jxj-buscar{min-height:58px;font-size:19px}
.jxj-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.jxj-card{display:flex;flex-direction:column;gap:6px}
.jxj-card .botao{align-self:flex-start;margin-top:auto}
.jxj-card-num{font-family:var(--f-titulo);font-size:clamp(28px,3vw,40px);line-height:1;margin:0}
.jxj-card-num small{display:block;font-family:var(--f-ui);font-size:14px;letter-spacing:.08em;color:var(--cinza);margin-top:6px}
.jxj-spark{color:var(--osso);display:block}

/* criação */
.jxj-campo{display:flex;flex-direction:column;gap:6px;max-width:520px}
.jxj-campo label,.jxj-campo>span{font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--osso-2)}
.jxj-campo input,.jxj-busca-campo{height:50px;padding:0 14px;background:var(--sup);color:var(--osso);border:1px solid var(--linha-forte);
  border-radius:0;font-family:var(--f-ui);font-size:20px;letter-spacing:.04em}
.jxj-campo input:focus-visible,.jxj-busca-campo:focus-visible{outline:2px solid var(--sangue);outline-offset:2px}
.jxj-campo small{color:var(--cinza)}
.jxj-criador{margin-top:10px}
.jxj-opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.jxj-opcao,.jxj-estilo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;cursor:pointer;text-align:left;font:inherit;color:var(--osso);
  background:rgba(17,19,26,.86);border:1px solid var(--linha-forte);transition:border-color .2s,background .2s}
.jxj-opcao b,.jxj-estilo-nome{font-family:var(--f-titulo);font-weight:400;font-size:28px;text-transform:uppercase;line-height:1}
.jxj-opcao small{color:var(--cinza)}
.jxj-opcao.on,.jxj-estilo.on{border-color:var(--sangue);background:rgba(215,38,30,.12)}
.jxj-opcao .jxj-retrato{width:64px}
/* diferença de rating na fila (2026-10-04): quatro opções, a faixa embaixo */
.jxj-escolha-raio{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.jxj-raios{grid-template-columns:repeat(4,minmax(0,1fr))}
.jxj-raio b{font-size:22px}
.jxj-raio small{line-height:1.35}
.jxj-raio-faixa{margin:0;color:var(--osso-2)}
/* fila sem tela antes (2026-10-20): a diferença de rating vira botões dentro da busca */
.jxj-busca-raio{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:560px}
.jxj-raios-busca{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.jxj-raios-busca .jxj-raio{min-height:44px;padding:9px 16px;cursor:pointer;font-family:var(--f-ui);font-weight:700;font-size:17px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--osso);background:rgba(17,19,26,.86);border:1px solid var(--linha-forte);transition:border-color .2s,background .2s}
.jxj-raios-busca .jxj-raio.on{border-color:var(--sangue);background:rgba(215,38,30,.18)}
.jxj-raios-busca .jxj-raio:focus-visible{outline:2px solid var(--sangue);outline-offset:2px}
.jxj-regras-busca{width:100%;max-width:560px;text-align:left;background:rgba(17,19,26,.6);border:1px dashed var(--linha-forte);padding:12px 16px}
.jxj-regras-busca summary{cursor:pointer;font-family:var(--f-ui);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--osso-2)}
@media (max-width:720px){.jxj-raios{grid-template-columns:1fr 1fr}}
.jxj-estilos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.jxj-estilo-resumo{color:var(--osso-2);font-size:15px}
.jxj-estilo small{color:var(--cinza)}
.jxj-atr{list-style:none;margin:6px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:6px}
.jxj-atr li{display:grid;grid-template-columns:118px minmax(0,1fr) 48px;align-items:center;gap:10px;font-size:14px;color:var(--osso-2)}
.jxj-atr li b{font-family:var(--f-ui);font-size:16px;text-align:right;color:var(--osso);font-variant-numeric:tabular-nums}
.jxj-atr li b small{color:var(--ganho);font-size:12px}
.jxj-confirma{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;background:rgba(17,19,26,.84);border:1px solid var(--linha);padding:24px}
@media (hover:hover) and (pointer:fine){.jxj-opcao:hover,.jxj-estilo:hover{border-color:var(--sangue)}}

/* lutador e árvore */
.jxj-cab-lutador{display:flex;align-items:center;gap:18px}
.jxj-cab-lutador .jxj-retrato{width:96px}
.jxj-arvore-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(17,19,26,.86);border:1px solid var(--linha);padding:16px 20px}
.jxj-arvore-topo .jxj-acoes{margin-top:0}
.jxj-pontos{display:flex;align-items:center;gap:14px}
.jxj-pontos b{font-family:var(--f-titulo);font-size:54px;line-height:1;color:var(--ouro)}
.jxj-pontos span{font-family:var(--f-ui);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:15px}
.jxj-pontos small{font-family:var(--f-texto);font-weight:400;text-transform:none;letter-spacing:0;color:var(--cinza)}
.jxj-arvore{display:flex;flex-direction:column;gap:14px}
.jxj-ramos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.jxj-ramo{position:relative;display:flex;flex-direction:column;gap:10px}
.jxj-ramo::before{content:"";position:absolute;left:24px;top:60px;bottom:20px;width:2px;background:linear-gradient(var(--sangue),rgba(215,38,30,.15))}
.jxj-ramo-cab{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:6px;border-bottom:1px solid var(--linha-forte)}
.jxj-ramo-cab b{font-family:var(--f-ui);font-size:20px;letter-spacing:.14em;text-transform:uppercase}
.jxj-ramo-cab span{color:var(--cinza);font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.jxj-no{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome pips" "info info";gap:4px 10px;
  margin-left:12px;padding:12px 14px;cursor:pointer;text-align:left;font:inherit;color:var(--osso);background:rgba(17,19,26,.9);border:1px solid var(--linha-forte)}
.jxj-no b{grid-area:nome;font-family:var(--f-ui);font-size:17px;letter-spacing:.04em}
.jxj-no .jxj-pips{grid-area:pips}
.jxj-no small{grid-area:info;color:var(--cinza);font-size:13px}
.jxj-no>.ico{position:absolute;right:10px;bottom:10px;color:var(--cinza)}
.jxj-no.ativo{border-color:rgba(212,160,23,.6)}
.jxj-no.travado{opacity:.55}
.jxj-no.on{outline:2px solid var(--sangue);outline-offset:1px}
.jxj-pips{display:inline-flex;gap:4px}
.jxj-pips i{width:12px;height:12px;background:rgba(255,255,255,.12);clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)}
.jxj-pips i.on{background:var(--ouro)}
.jxj-hibrido{background:rgba(17,19,26,.6);border:1px dashed var(--linha-forte);padding:14px 16px}
.jxj-hibrido summary{cursor:pointer;font-family:var(--f-ui);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--osso-2)}
.jxj-no-detalhe .botao{align-self:flex-start}
.jxj-confirmar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;background:rgba(215,38,30,.12);border:1px solid var(--sangue)}
.jxj-confirmar p{flex-basis:100%;margin:0}
.jxj-perigo{border-color:rgba(215,38,30,.4)}
@media (hover:hover) and (pointer:fine){.jxj-no:hover{border-color:var(--sangue)}}

/* histórico */
.jxj-historico{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jxj-hist-linha{display:grid;grid-template-columns:96px minmax(0,1fr) 90px auto;align-items:center;gap:12px;padding:10px 12px;
  background:rgba(17,19,26,.84);border-left:3px solid var(--linha-forte)}
.jxj-hist-linha.vit{border-left-color:var(--ganho)}
.jxj-hist-linha.der{border-left-color:var(--sangue)}
.jxj-hist-res{font-family:var(--f-ui);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.jxj-hist-linha.vit .jxj-hist-res{color:var(--ganho)}
.jxj-hist-linha.der .jxj-hist-res{color:var(--sangue-vivo)}
.jxj-hist-adv b{font-family:var(--f-ui);font-size:17px;text-transform:uppercase;letter-spacing:.03em}
.jxj-hist-adv small{display:block;color:var(--cinza)}
.jxj-hist-delta{font-family:var(--f-ui);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.jxj-hist-ver{height:38px}

/* aparência e slots */
.jxj-molduras,.jxj-slots,.jxj-hall-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.jxj-moldura,.jxj-slot{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px;
  background:rgba(17,19,26,.86);border:1px solid var(--linha-forte)}
.jxj-moldura.on{border-color:var(--ouro)}
.jxj-moldura small{color:var(--cinza)}
.jxj-slot{align-items:stretch;text-align:left}
.jxj-slot .jxj-retrato{width:140px;align-self:center}
.jxj-slot-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:160px;
  border:1px dashed var(--linha-forte);color:var(--cinza);font-family:var(--f-ui);letter-spacing:.14em;text-transform:uppercase}
.jxj-slot-vazio .ico{width:34px;height:34px}

/* fila */
.jxj-busca{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}
.jxj-busca-pulso{width:96px;height:96px;display:grid;place-items:center;border:2px solid var(--sangue);color:var(--sangue);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);animation:jxjPulso 1.6s ease-in-out infinite}
.jxj-busca-pulso .ico{width:42px;height:42px}
@keyframes jxjPulso{50%{background:rgba(215,38,30,.18)}}
.jxj-busca-tempo{font-family:var(--f-ui);font-size:20px;letter-spacing:.06em;margin:0}
.jxj-escolha-lutador .jxj-opcao{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.jxj-escolha-lutador .jxj-opcao b{font-size:24px}

/* confronto e luta */
.jxj-versus,.jxj-placar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:14px}
.jxj-vs{display:grid;place-items:center;padding:0 6px}
.jxj-vs b{font-family:var(--f-titulo);font-size:clamp(40px,6vw,80px);color:var(--sangue);line-height:1}
.jxj-lado{display:flex;gap:14px;align-items:center;padding:14px;background:rgba(17,19,26,.88);border:1px solid var(--linha-forte);min-width:0}
.jxj-lado.eu{border-color:rgba(215,38,30,.6)}
.jxj-lado .jxj-retrato{width:84px;flex:none}
.jxj-lado-info{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.jxj-lado-info>b{font-family:var(--f-ui);font-size:20px;text-transform:uppercase;letter-spacing:.04em;overflow-wrap:anywhere}
.jxj-lado-info>b small{font-size:12px;color:var(--sangue);letter-spacing:.14em;margin-left:6px}
.jxj-lado-info>span{color:var(--osso-2);font-size:14px}
/* bot do Online (2026-10-19): sempre marcado, no card da luta e no histórico */
.jxj-selo-bot{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 7px;vertical-align:middle;
  font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro);border:1px solid currentColor}
.jxj-selo-bot .ico{width:13px;height:13px}
.jxj-oferta-bot{display:flex;flex-direction:column;gap:8px}
.jxj-oferta-bot p{margin:0}
.jxj-medidor{display:flex;flex-direction:column;gap:3px}
.jxj-medidor i{font-style:normal;font-family:var(--f-ui);font-size:13px;letter-spacing:.08em;color:var(--cinza);display:flex;align-items:center;gap:6px}
.jxj-ausente{color:var(--ouro)!important;font-family:var(--f-ui);letter-spacing:.06em}
.jxj-placar-meio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:180px;text-align:center;padding:10px}
.jxj-round{font-family:var(--f-ui);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--osso-2);margin:0;font-size:14px}
.jxj-relogio{font-family:var(--f-titulo);font-size:56px;line-height:1;margin:0;font-variant-numeric:tabular-nums}
.jxj-relogio.urgente{color:var(--sangue-vivo)}
.jxj-posicao{font-family:var(--f-ui);font-size:17px;letter-spacing:.06em;margin:0;color:var(--ouro)}
.jxj-momento{width:100%;max-width:220px}
.jxj-momento span{font-family:var(--f-ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.jxj-momento-trilho{position:relative;height:10px;margin-top:4px;background:linear-gradient(90deg,rgba(215,38,30,.35),rgba(255,255,255,.08) 50%,rgba(47,191,113,.35))}
.jxj-momento-trilho i{position:absolute;top:-3px;width:6px;height:16px;margin-left:-3px;background:var(--osso);transition:left .4s var(--ease-soco)}
.jxj-cartoes{color:var(--cinza);font-size:13px;margin:0}
.jxj-zona-acao{display:flex;flex-direction:column;gap:8px}
.jxj-acoes-luta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.jxj-acao{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:16px;cursor:pointer;text-align:left;font:inherit;color:var(--osso);
  background:rgba(17,19,26,.92);border:1px solid var(--linha-forte);transition:border-color .15s,background .15s,transform .15s var(--ease-soco);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.jxj-acao .ico{width:30px;height:30px;color:var(--sangue)}
.jxj-acao b{font-family:var(--f-ui);font-size:19px;letter-spacing:.06em;text-transform:uppercase}
.jxj-acao small{font-family:var(--f-ui);color:var(--ouro);letter-spacing:.06em}
.jxj-acao span{color:var(--osso-2);font-size:14px;line-height:1.35}
.jxj-acao:active{transform:translateY(1px)}
.jxj-acao:disabled{opacity:.45;cursor:not-allowed}
.jxj-acao:focus-visible{outline:2px solid var(--osso);outline-offset:2px;background:rgba(215,38,30,.18)}
.jxj-espera{display:flex;align-items:center;gap:12px;padding:18px;background:rgba(17,19,26,.9);border:1px solid var(--linha-forte);margin:0;font-size:17px}
.jxj-espera .ico{width:26px;height:26px;color:var(--ganho);flex:none}
.jxj-log-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jxj-log-lista li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;color:var(--osso-2);font-size:15px}
.jxj-log-lista b{font-family:var(--f-ui);letter-spacing:.08em;color:var(--sangue)}
@media (hover:hover) and (pointer:fine){.jxj-acao:hover:not(:disabled){border-color:var(--sangue);background:rgba(215,38,30,.12)}}
/* variantes (2026-10-04): o ciclo da família no pé do botão, a troca
   anterior revelada e a mão nova que vira no começo do round */
.jxj-acao .jxj-ciclo{font-style:normal;font-family:var(--f-ui);font-size:12px;letter-spacing:.06em;color:var(--cinza);margin-top:auto;padding-top:4px;border-top:1px solid var(--linha-forte);align-self:stretch}
.jxj-ultima{padding:12px 16px;background:rgba(17,19,26,.88);border:1px solid var(--linha-forte);display:flex;flex-direction:column;gap:8px}
.jxj-ultima .jxj-rotulo{margin:0}
.jxj-duelo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.jxj-duelo span{display:flex;flex-direction:column;gap:2px;min-width:0}
.jxj-duelo span.ele{text-align:right}
.jxj-duelo small{font-family:var(--f-ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);overflow-wrap:anywhere}
.jxj-duelo b{font-family:var(--f-ui);font-size:20px;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
.jxj-duelo span.eu b{color:var(--sangue-vivo)}
.jxj-duelo i{font-style:normal;font-family:var(--f-ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.jxj-ultima-txt{margin:0;color:var(--osso);line-height:1.45}
.jxj-ultima.nova{animation:jxjRevela .45s var(--ease-soco) both}
.jxj-ultima.nova .jxj-duelo span.eu{animation:jxjEntraEsq .4s var(--ease-soco) both}
.jxj-ultima.nova .jxj-duelo span.ele{animation:jxjEntraDir .4s var(--ease-soco) both}
@keyframes jxjRevela{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes jxjEntraEsq{from{opacity:0;transform:translateX(-28px)}}
@keyframes jxjEntraDir{from{opacity:0;transform:translateX(28px)}}
.jxj-acoes-luta.mao-nova .jxj-acao{animation:jxjVira .5s var(--ease-soco) both}
.jxj-acoes-luta.mao-nova .jxj-acao:nth-child(2){animation-delay:.07s}
.jxj-acoes-luta.mao-nova .jxj-acao:nth-child(3){animation-delay:.14s}
.jxj-acoes-luta.mao-nova .jxj-acao:nth-child(4){animation-delay:.21s}
@keyframes jxjVira{from{opacity:0;transform:perspective(600px) rotateY(-70deg)}to{opacity:1;transform:none}}
/* quem apanhou treme; knockdown treme forte e acende; finalização aperta */
.jxj-lado.jxj-apanhou{animation:jxjApanha .38s ease}
.jxj-lado.jxj-caiu{animation:jxjCai .7s ease}
.jxj-lado.jxj-apertado{animation:jxjAperta .6s ease}
.jxj-posicao.jxj-muda{animation:jxjMuda .6s ease}
@keyframes jxjApanha{0%,100%{transform:none}20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}
@keyframes jxjCai{0%,100%{transform:none;box-shadow:none}15%{transform:translate(-10px,4px) rotate(-1.5deg);box-shadow:0 0 0 3px var(--sangue-vivo)}
  40%{transform:translate(8px,-3px) rotate(1deg)}65%{transform:translate(-4px,2px)}}
@keyframes jxjAperta{0%,100%{transform:none}30%,60%{transform:scale(.97);box-shadow:0 0 0 2px var(--ouro)}}
@keyframes jxjMuda{0%{opacity:.2;transform:translateY(6px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .jxj-ultima.nova,.jxj-ultima.nova .jxj-duelo span,.jxj-acoes-luta.mao-nova .jxj-acao,.jxj-lado.jxj-apanhou,.jxj-lado.jxj-caiu,.jxj-lado.jxj-apertado,.jxj-posicao.jxj-muda{animation:none}
}

/* resultado */
.jxj-resultado{padding:clamp(20px,3vw,34px);background:rgba(17,19,26,.86);border-left:6px solid var(--linha-forte)}
.jxj-resultado.vit{border-left-color:var(--ganho)}
.jxj-resultado.der{border-left-color:var(--sangue)}
.jxj-resultado-titulo{font-family:var(--f-titulo);font-weight:400;font-size:clamp(48px,8vw,104px);line-height:.9;text-transform:uppercase;margin:0}
.jxj-resultado.vit .jxj-resultado-titulo{color:var(--ganho)}
.jxj-resultado.der .jxj-resultado-titulo{color:var(--sangue-vivo)}
.jxj-narracao p{color:var(--osso);line-height:1.6;margin:0}

/* ranking JxJ */
.jxj-busca-campo{font-size:17px;min-width:220px}
.jxj-rank-linha{grid-template-columns:44px 52px minmax(0,1fr) 80px 70px 90px;cursor:pointer}
.jxj-rank-linha.meu,.degrau.meu{border-left-color:var(--sangue)}
.jxj-rank-linha .jxj-retrato{width:44px;padding:2px}
.jxj-variacao{font-family:var(--f-ui);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.jxj-variacao small{display:block;font-weight:400;font-size:11px;color:var(--cinza);letter-spacing:.1em}
.jxj-variacao.sobe{color:var(--ganho)}
.jxj-variacao.desce{color:var(--sangue-vivo)}
.degrau .jxj-retrato{width:96px}
.degrau-1 .jxj-retrato{width:120px}
@media (hover:hover) and (pointer:fine){.jxj-rank-linha:hover,.degrau:hover{border-left-color:var(--sangue)}}

/* temporada, torneios, Hall */
.jxj-temporada p{margin:8px 0 0}
.jxj-torneios{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.jxj-torneio-card.andamento{border-color:rgba(215,38,30,.5)}
.jxj-torneio-card.encerrado{opacity:.85}
.jxj-chave{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.jxj-fase{display:flex;flex-direction:column;gap:12px}
.jxj-confronto{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:rgba(17,19,26,.88);border:1px solid var(--linha-forte)}
.jxj-confronto p{margin:0;font-family:var(--f-ui);font-size:17px;text-transform:uppercase;letter-spacing:.03em;color:var(--osso-2)}
.jxj-confronto p small{margin-left:8px;font-size:12px;color:var(--cinza);text-transform:none}
.jxj-confronto p.venc{color:var(--osso);font-weight:700}
.jxj-confronto p.venc::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;background:var(--ganho)}
.jxj-confronto>small{color:var(--cinza)}
.jxj-confronto.meu{border-color:var(--sangue)}
.jxj-confronto .botao{margin-top:8px;align-self:flex-start}
.jxj-campeao{display:flex;align-items:center;gap:12px;padding:16px 20px;background:rgba(212,160,23,.12);border:1px solid rgba(212,160,23,.5);margin:0;font-size:18px}
.jxj-campeao .ico{width:30px;height:30px;color:var(--ouro)}
.jxj-hall-bloco{display:flex;flex-direction:column}
.jxj-hall-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;text-align:center;cursor:pointer;font:inherit;color:var(--osso);
  background:rgba(17,19,26,.86);border:1px solid rgba(212,160,23,.35)}
.jxj-hall-card b{font-family:var(--f-ui);font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.jxj-hall-card small{color:var(--cinza)}
.jxj-hall-card .jxj-retrato{width:96px}
@media (hover:hover) and (pointer:fine){.jxj-hall-card:hover{border-color:var(--ouro)}}

/* celular: o que manda vem primeiro, ação no alcance do polegar */
@media (max-width:900px){
  .jxj-ramos{grid-template-columns:1fr}
  .jxj-chave{grid-template-columns:1fr}
  .jxj-numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .jxj-principal,.jxj-confirma{grid-template-columns:1fr;justify-items:start}
  .jxj-principal-retrato .jxj-retrato{width:150px}
  .jxj-passos,.jxj-planos{grid-template-columns:1fr}
  .jxj-versus,.jxj-placar{grid-template-columns:1fr 1fr}
  .jxj-placar-meio{grid-column:1 / -1;order:-1;min-width:0}
  .jxj-vs{display:none}
  .jxj-lado{flex-direction:column;align-items:flex-start;padding:10px}
  .jxj-lado .jxj-retrato{width:64px}
  .jxj-relogio{font-size:44px}
  .jxj-acoes-luta{grid-template-columns:1fr 1fr;gap:8px}
  .jxj-acao{min-height:120px;padding:12px}
  .jxj-acao span{font-size:13px}
  .jxj-duelo b{font-size:16px}
  .jxj-acao .jxj-ciclo{font-size:11px}
  .jxj-hist-linha{grid-template-columns:80px minmax(0,1fr) auto;grid-template-areas:"res adv delta" "ver ver ver"}
  .jxj-hist-ver{grid-column:1 / -1;justify-self:start}
  .jxj-rank-linha{grid-template-columns:34px 44px minmax(0,1fr) 70px}
  .jxj-rank-linha .rank-meta,.jxj-rank-linha .jxj-variacao{display:none}
  .jxj-atr li{grid-template-columns:100px minmax(0,1fr) 40px}
}
@media (prefers-reduced-motion:reduce){
  .jxj-busca-pulso{animation:none}
  .jxj-barra i,.jxj-momento-trilho i{transition:none}
}

/* ===== Luta do Online, revamp de 2026-10-20 (pedido do dono: tela
   poluída, muito texto). Placar de transmissão, lance da troca, botões
   limpos e histórico na gaveta. No fim do arquivo de propósito: as regras
   antigas de .jxj-acao e .jxj-ultima continuam valendo pro resto, e estas
   vencem por ordem. ===== */
.jxj-combate{display:flex;flex-direction:column;gap:12px;width:100%;max-width:980px;margin:0 auto}
.jxj-hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:12px 16px;
  background:rgba(10,11,15,.92);border:1px solid var(--linha-forte);border-bottom:3px solid var(--sangue)}
.jxj-hud-lado{display:flex;align-items:center;gap:12px;min-width:0}
.jxj-hud-lado.ele{flex-direction:row-reverse;text-align:right}
.jxj-hud-lado .jxj-retrato{width:56px;flex:none}
.jxj-hud-info{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.jxj-hud-nome{display:flex;align-items:center;gap:6px;min-width:0;font-family:var(--f-ui);font-size:19px;letter-spacing:.04em;text-transform:uppercase}
.jxj-hud-lado.ele .jxj-hud-nome{flex-direction:row-reverse}
.jxj-hud-nome span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jxj-hud-nome small{flex:none;font-size:11px;letter-spacing:.14em;color:var(--sangue-vivo)}
.jxj-hud-nome .jxj-selo-bot{flex:none;margin-left:0}
.jxj-vida{display:block;height:12px;background:rgba(255,255,255,.08);overflow:hidden}
.jxj-vida i{display:block;height:100%;background:linear-gradient(90deg,#249A5B,var(--ganho));transition:width .5s var(--ease-soco)}
.jxj-vida.baixa i{background:linear-gradient(90deg,var(--sangue-escuro),var(--sangue-vivo))}
.jxj-folego{display:block;height:5px;background:rgba(255,255,255,.06);overflow:hidden}
.jxj-folego i{display:block;height:100%;background:var(--ouro);transition:width .5s var(--ease-soco)}
.jxj-hud-lado.ele .jxj-vida i,.jxj-hud-lado.ele .jxj-folego i{margin-left:auto}
.jxj-hud-num{display:flex;gap:12px;font-family:var(--f-ui);font-size:13px;letter-spacing:.06em;color:var(--osso-2)}
.jxj-hud-lado.ele .jxj-hud-num{justify-content:flex-end}
.jxj-hud-num i{display:inline-flex;align-items:center;gap:4px;font-style:normal}
.jxj-hud-num .ico{width:13px;height:13px;color:var(--cinza)}
.jxj-hud-num .jxj-ausente{color:var(--sangue-vivo)}
.jxj-hud-centro{display:flex;flex-direction:column;align-items:center;gap:6px}
.jxj-anel{--p:1;position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;
  background:conic-gradient(var(--osso) calc(var(--p) * 360deg),rgba(255,255,255,.1) 0)}
.jxj-anel::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#0B0C10}
.jxj-anel.urgente{background:conic-gradient(var(--sangue-vivo) calc(var(--p) * 360deg),rgba(255,255,255,.1) 0)}
.jxj-anel .jxj-relogio{position:relative;font-size:32px}
.jxj-hud-centro .jxj-round{font-size:13px;margin:0}
.jxj-hud-centro .jxj-round small{font-size:inherit;color:var(--cinza)}
.jxj-faixa-combate{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;padding:8px 14px;
  background:rgba(10,11,15,.72);border:1px solid var(--linha-forte)}
.jxj-faixa-combate .jxj-posicao{font-family:var(--f-ui);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ouro)}
.jxj-faixa-combate .jxj-momento{width:170px;max-width:42%}
.jxj-faixa-combate .jxj-momento-trilho{display:block;margin-top:0}
.jxj-faixa-combate .jxj-cartoes{font-family:var(--f-ui);font-size:14px;letter-spacing:.06em;color:var(--cinza);margin:0}
.jxj-faixa-combate .jxj-cartoes b{color:var(--osso);font-weight:700}
.jxj-lance{padding:12px 16px}
.jxj-lance .jxj-duelo span{flex-direction:row;align-items:center;gap:8px}
.jxj-lance .jxj-duelo span.ele{justify-content:flex-end}
.jxj-lance .jxj-duelo .ico{flex:none;width:22px;height:22px;color:var(--sangue)}
.jxj-lance .jxj-duelo span.ele .ico{color:var(--osso-2)}
.jxj-lance .jxj-duelo b{font-size:22px}
.jxj-dano{flex:none;font-style:normal;font-family:var(--f-titulo);font-size:24px;line-height:1;color:var(--sangue-vivo)}
.jxj-dano.kd{font-family:var(--f-ui);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--sangue);padding:4px 8px}
.jxj-lance.nova .jxj-dano{animation:jxjDano .7s var(--ease-soco) .25s both}
@keyframes jxjDano{0%{opacity:0;transform:translateY(8px) scale(.6)}60%{opacity:1;transform:translateY(-4px) scale(1.15)}100%{opacity:1;transform:none}}
.jxj-lance .jxj-ultima-txt{font-size:15px;color:var(--osso-2)}
.jxj-zona-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.jxj-zona-topo .jxj-rotulo{margin:0}
.jxj-ciclo-pe{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-family:var(--f-ui);font-size:13px;letter-spacing:.06em;color:var(--osso-2)}
.jxj-ciclo-pe span{display:inline-flex;align-items:center;gap:4px}
.jxj-ciclo-pe span .ico{width:15px;height:15px;color:var(--sangue)}
.jxj-ciclo-pe > .ico{width:12px;height:12px;color:var(--cinza)}
.jxj-ciclo-pe small{margin-left:4px;color:var(--cinza)}
.jxj-ciclo-pe span.volta{opacity:.45}
.jxj-acoes-luta{gap:10px}
.jxj-acao{position:relative;min-height:0;gap:3px;padding:12px 14px}
.jxj-acao-topo{display:flex;align-items:center;justify-content:space-between;align-self:stretch}
.jxj-acao .jxj-acao-topo .ico{width:24px;height:24px}
.jxj-custo{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;font-style:normal;font-family:var(--f-ui);font-weight:700;font-size:14px;
  color:var(--ouro);background:rgba(212,160,23,.12)}
.jxj-acao .jxj-custo .ico{width:13px;height:13px;color:var(--ouro)}
.jxj-acao b{margin-top:4px}
.jxj-acao small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.jxj-acao .jxj-acao-efeito{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:14px;line-height:1.3;color:var(--osso-2)}
.jxj-acao .jxj-acao-ciclo{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px;font-family:var(--f-ui);font-size:12px;letter-spacing:.04em;color:var(--cinza)}
.jxj-acao .jxj-acao-ciclo .ico{width:12px;height:12px;color:var(--ganho)}
.jxj-acao .jxj-acao-ciclo .ico + .ico,.jxj-acao .jxj-acao-ciclo .ico:last-of-type{color:var(--sangue-vivo)}
/* a frase inteira: por cima do próprio botão (o recorte dos cantos corta o que sai dele) */
.jxj-acao .jxj-acao-bolha{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px 14px;
  background:rgba(11,12,16,.97);color:var(--osso);font-size:13px;line-height:1.35;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s}
.jxj-acao .jxj-acao-bolha i{font-style:normal;font-family:var(--f-ui);letter-spacing:.04em;color:var(--cinza)}
.jxj-acao.segurando .jxj-acao-bolha,.jxj-acao:focus-visible .jxj-acao-bolha{opacity:1;visibility:visible;transition-delay:0s}
@media (hover:hover) and (pointer:fine){.jxj-acao:hover:not(:disabled) .jxj-acao-bolha{opacity:1;visibility:visible;transition:opacity .15s .5s,visibility 0s .5s}}
.jxj-gaveta{padding:0;background:rgba(10,11,15,.72);border:1px solid var(--linha-forte)}
.jxj-gaveta summary{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;list-style:none;font-family:var(--f-ui);font-weight:700;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--osso-2)}
.jxj-gaveta summary::-webkit-details-marker{display:none}
.jxj-gaveta summary .ico{width:16px;height:16px;color:var(--sangue)}
.jxj-gaveta summary small{margin-left:auto;font-size:12px;color:var(--cinza)}
.jxj-gaveta summary:focus-visible{outline:2px solid var(--sangue);outline-offset:-2px}
.jxj-gaveta .jxj-log-lista{padding:0 16px 14px}
.jxj-hud-lado.jxj-apanhou{animation:jxjApanha .38s ease}
.jxj-hud-lado.jxj-caiu{animation:jxjCai .7s ease}
.jxj-hud-lado.jxj-apertado{animation:jxjAperta .6s ease}
@media (max-width:720px){
  .jxj-hud{gap:8px;padding:10px}
  .jxj-hud-lado,.jxj-hud-lado.ele{flex-direction:column;align-items:stretch;gap:6px}
  .jxj-hud-lado .jxj-retrato{width:40px}
  .jxj-hud-lado.ele .jxj-retrato{align-self:flex-end}
  .jxj-hud-nome{font-size:15px}
  .jxj-hud-num{gap:8px;font-size:12px}
  .jxj-anel{width:64px;height:64px}
  .jxj-anel::before{inset:5px}
  .jxj-anel .jxj-relogio{font-size:24px}
  .jxj-faixa-combate{gap:6px 12px;padding:8px 10px}
  .jxj-lance{padding:10px 12px}
  .jxj-lance .jxj-duelo{gap:8px}
  .jxj-lance .jxj-duelo b{font-size:16px}
  .jxj-lance .jxj-duelo .ico{width:18px;height:18px}
  .jxj-dano{font-size:19px}
  .jxj-lance .jxj-ultima-txt{font-size:14px}
  .jxj-ciclo-pe small{flex-basis:100%;margin-left:0}
  .jxj-acoes-luta{grid-template-columns:1fr 1fr;gap:8px}
  .jxj-acao{padding:10px 12px}
  .jxj-acao b{font-size:17px}
  .jxj-acao .jxj-acao-efeito{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .jxj-lance.nova .jxj-dano,.jxj-hud-lado.jxj-apanhou,.jxj-hud-lado.jxj-caiu,.jxj-hud-lado.jxj-apertado{animation:none}
  .jxj-vida i,.jxj-folego i{transition:none}
}

/* ===== Online, motor v3 (2026-10-20, pedido do dono: estratégia, emoção e
   os atributos em jogo): etiquetas no placar, duelos de atributo, por quê
   da troca, tendência dele, faixa do momento decisivo e botões com o efeito
   de cada ação no momento. Peso visual baixo pra tudo que fica sempre na
   tela; só a faixa do momento grita, e só quando ele acontece. ===== */
.jxj-tag{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;font-style:normal;font-family:var(--f-ui);font-weight:800;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.jxj-hud-num .jxj-tag .ico{width:11px;height:11px;color:inherit}
.jxj-tag.grogue{color:#fff;background:var(--sangue);animation:jxjTagPulsa 1.1s ease-in-out infinite}
.jxj-tag.preso{color:#0B0C10;background:var(--ouro)}
.jxj-tag.gas{color:var(--ouro);background:rgba(212,160,23,.14)}
@keyframes jxjTagPulsa{0%,100%{opacity:1}50%{opacity:.55}}
.jxj-hud-num{flex-wrap:wrap}
.jxj-hud-lado.jxj-grogue{animation:jxjGrogue 1s ease}
@keyframes jxjGrogue{0%,100%{transform:none}20%{transform:rotate(-1.2deg) translateX(-4px)}45%{transform:rotate(1deg) translateX(4px)}70%{transform:rotate(-.6deg)}}

.jxj-duelos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:6px 16px;padding:8px 14px 6px;
  background:rgba(10,11,15,.6);border:1px solid var(--linha-forte)}
.jxj-duelo-at{display:flex;flex-direction:column;gap:5px;min-width:0}
.jxj-duelo-at span{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--osso-2);text-align:center}
/* a balança: o meio é parelho; pra direita (verde) a vantagem é sua, pra esquerda (vermelho) é dele */
.jxj-balanca{position:relative;display:block;height:6px;background:rgba(255,255,255,.08)}
.jxj-balanca::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--cinza)}
.jxj-balanca b{position:absolute;top:0;bottom:0}
.jxj-balanca.n1 b{left:50%;width:25%;background:var(--ganho)}
.jxj-balanca.n2 b{left:50%;width:50%;background:var(--ganho)}
.jxj-balanca.nm1 b{right:50%;width:25%;background:var(--sangue-vivo)}
.jxj-balanca.nm2 b{right:50%;width:50%;background:var(--sangue-vivo)}
.jxj-duelos-legenda{grid-column:1/-1;display:flex;justify-content:space-between;font-family:var(--f-ui);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza)}
.jxj-duelos-legenda .ele{color:var(--sangue-vivo)}
.jxj-duelos-legenda .eu{color:var(--ganho)}

.jxj-porque{display:flex;align-items:center;gap:6px;margin:6px 0 2px;font-family:var(--f-ui);font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--cinza)}
.jxj-porque .ico{flex:none;width:16px;height:16px}
.jxj-porque.bom{color:var(--ganho)}
.jxj-porque.ruim{color:var(--sangue-vivo)}

.jxj-tendencia{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-family:var(--f-ui);font-size:13px;letter-spacing:.06em;color:var(--cinza)}
.jxj-tendencia small{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.jxj-tendencia span{display:inline-flex;align-items:center;gap:3px;padding:1px 4px;border-bottom:2px solid transparent}
.jxj-tendencia span .ico{width:14px;height:14px;color:var(--cinza)}
.jxj-tendencia span.mais{color:var(--osso);font-weight:700}
.jxj-tendencia span.mais .ico{color:var(--sangue)}
.jxj-tendencia span.ultima{border-bottom-color:var(--osso-2)}

.jxj-momento-decisivo{display:flex;align-items:center;gap:12px;padding:10px 14px;border:2px solid var(--sangue-vivo);background:rgba(215,38,30,.16);
  animation:jxjMomento 1.4s ease-in-out infinite}
.jxj-momento-decisivo > .ico{flex:none;width:28px;height:28px;color:var(--sangue-vivo)}
.jxj-momento-decisivo span{display:flex;flex-direction:column;gap:2px;min-width:0}
.jxj-momento-decisivo b{font-family:var(--f-titulo);font-size:24px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.jxj-momento-decisivo small{font-family:var(--f-ui);font-size:14px;letter-spacing:.04em;color:var(--osso-2)}
.jxj-momento-decisivo.favor{border-color:var(--ouro);background:rgba(212,160,23,.14);animation-name:jxjMomentoOuro}
.jxj-momento-decisivo.favor > .ico{color:var(--ouro)}
@keyframes jxjMomento{0%,100%{box-shadow:0 0 0 0 rgba(215,38,30,.0)}50%{box-shadow:0 0 0 6px rgba(215,38,30,.22)}}
@keyframes jxjMomentoOuro{0%,100%{box-shadow:0 0 0 0 rgba(212,160,23,0)}50%{box-shadow:0 0 0 6px rgba(212,160,23,.2)}}
.jxj-acoes-luta.no-momento .jxj-acao{border-color:rgba(212,160,23,.45)}
.jxj-acao.com-dica .jxj-acao-efeito{-webkit-line-clamp:3;color:var(--ouro)}
.jxj-acao .jxj-acao-bolha i.dica{color:var(--ouro)}
.jxj-acao-ico{display:inline-flex;align-items:center;gap:4px}
.jxj-acao-duelo{display:inline-flex;font-style:normal}
.jxj-acao .jxj-acao-topo .jxj-acao-duelo .ico{width:15px;height:15px}
.jxj-acao-duelo.bom .ico{color:var(--ganho)}
.jxj-acao-duelo.ruim .ico{color:var(--sangue-vivo)}
@media (max-width:720px){
  .jxj-duelos{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;padding:8px 10px 6px}
  .jxj-momento-decisivo{padding:8px 10px;gap:10px}
  .jxj-momento-decisivo b{font-size:20px}
  .jxj-momento-decisivo small{font-size:13px}
  .jxj-porque{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .jxj-tag.grogue,.jxj-momento-decisivo,.jxj-hud-lado.jxj-grogue{animation:none}
}

/* Online: alcunha do bot com personalidade (2026-10-20), embaixo do nome no placar */
.jxj-alcunha{display:block;margin-top:-3px;font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ouro);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jxj-hud-lado.ele .jxj-alcunha{text-align:right}

/* Online: a lição da luta contra bot no resultado (2026-10-20): o jeito dele e como puni-lo */
.jxj-licao{display:flex;align-items:flex-start;gap:10px;max-width:68ch;margin:0;padding:12px 16px;background:rgba(212,160,23,.1);
  border-left:3px solid var(--ouro);font-size:16px;line-height:1.45;color:var(--osso)}
.jxj-licao .ico{flex:none;width:20px;height:20px;margin-top:2px;color:var(--ouro)}

/* Online: placar do round ao vivo (2026-10-20, fase 2): a parte de cada um nos pontos dos juízes do round */
.jxj-placar-round{display:flex;flex-direction:column;gap:3px;min-width:150px;max-width:260px}
.jxj-placar-trilho{display:block;height:6px;background:rgba(232,54,45,.55);overflow:hidden}
.jxj-placar-trilho i{display:block;height:100%;background:var(--ganho);transition:width .5s var(--ease-soco)}
.jxj-placar-round.empate .jxj-placar-trilho{background:rgba(242,238,230,.18)}
.jxj-placar-round.empate .jxj-placar-trilho i{background:rgba(242,238,230,.45)}
.jxj-placar-round small{font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--osso-2);white-space:nowrap}
.jxj-placar-round.frente small{color:var(--ganho)}
.jxj-placar-round.atras small{color:var(--sangue-vivo)}
@media (max-width:720px){.jxj-placar-round{min-width:0;max-width:none;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.jxj-placar-trilho i{transition:none}}

/* Online: narração ao vivo do destaque (2026-10-21, fase 4): a linha do narrador no lance */
.jxj-narracao-troca{margin:8px 0 2px;padding-left:12px;border-left:3px solid var(--sangue);font-family:var(--f-texto);font-style:italic;
  font-size:17px;line-height:1.4;color:var(--osso)}
.jxj-lance.nova .jxj-narracao-troca{animation:jxjNarra .5s var(--ease-soco) .2s both}
.jxj-narracao-fim{margin:0 auto;max-width:640px;width:100%}
@keyframes jxjNarra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:720px){.jxj-narracao-troca{font-size:15px}}
@media (prefers-reduced-motion:reduce){.jxj-lance.nova .jxj-narracao-troca{animation:none}}