/* legado.css: CSS da interface ANTIGA, movido do <style> do index.html
   sem nenhuma alteração (revamp 2026-09-26). Some quando a última tela
   antiga for trocada (fase 5). Nada novo entra aqui: visual novo mora
   em estilo.css. */
:root{
  /* Preto com azul de arena. Sem gradiente, sem brilho, sem canto arredondado:
     é isso que separa "escuro" de "escuro gerado por IA". O acento é o vermelho
     de sangue seco do esporte, usado com parcimônia. */
  --bg:#0A0D13;
  --panel:#111722;
  --panel2:#161E2B;
  --line:#222C3C;
  --line2:#33415A;
  --ink:#E6EBF2;
  --ink2:#AAB6C6;
  --faded:#6B7A90;
  --stamp:#C0392B;
  --win:#4E9A62;
  --gold:#B9932F;
  /* Variantes claras — antes cravadas em hex solto em ~15 lugares
     (percentil do draft, delta de seguidores, feed, atributo em alta).
     Mesma cor, um nome só: mudar o tom de "positivo"/"perigo" agora é
     uma linha, não uma busca no arquivo inteiro. */
  --win-bright:#6FC486;
  --win-dim:#1E8449;   /* verde escuro — dinheiro, confirmação de formulário */
  --stamp-bright:#D1584A;
  --gold-bright:#D4B24C;
  /* Aviso não é nem positivo nem negativo — "falta X pra chegar lá".
     Antes era o mesmo laranja cravado só no bloco do cinturão. */
  --warn:#B5651D;
  --warn-dim:#8A4A15;
  /* "Mira" — vermelho dessaturado, o destaque de hover que liga a carta
     à posição no octógono e à célula do dossiê. Era 3 hex cravados
     (var(--mira)/var(--mira-txt)/var(--mira-bg)) sem nome, cada um repetido 2-3 vezes. */
  --mira:#6E3A38;
  --mira-txt:#A8756E;
  --mira-bg:#151A24;
  /* Escala de percentil do draft (pior→melhor) — eram 5 pares de hex
     soltos (.p1-.p5), cada um com cor de barra E de texto. Consolidados
     aqui: barra usa a cor cheia, texto usa a variante -bright/-dim. */
  --tier-1:#C0392B; --tier-1-txt:#D1584A;
  --tier-2:#B07A3A; --tier-2-txt:#C08F52;
  --tier-3:#5E6B7E; --tier-3-txt:#8B99AC;
  --tier-4:#5E8A4A; --tier-4-txt:#7CB069;
  --tier-5:#4E9A62; --tier-5-txt:#6FC486;
  /* nomes antigos mantidos para não quebrar regras existentes */
  --stock:#0A0D13;
  --stock-2:#111722;
  --rule:#222C3C;
  --loss:#C0392B;

  /* Escala tipográfica — os tamanhos já usados no CSS (26/17/15/14/13/
     11.5/11/10.5px) não seguiam progressão nenhuma, cada tela inventava
     o próprio número. Registrados aqui como referência pros componentes
     NOVOS (Fases 1-3) — não é uma re-varredura de todo o CSS existente,
     que continua funcionando com os valores que já tinha. */
  --fs-display-lg:clamp(48px,9vw,96px); /* wordmark da tela de início */
  --fs-display:26px;    /* título de tela (.doc-head h1) */
  --fs-title:19px;      /* título de bloco/seção dentro da tela */
  --fs-body:14px;       /* corpo padrão, igual ao body */
  --fs-label:11px;      /* rótulo maiúsculo, uppercase+letter-spacing */
  --fs-micro:10.5px;    /* nota de rodapé, eyebrow */

  /* Escala de espaçamento — múltiplos de 4, pra componentes novos. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* html{overflow-x:hidden} saiu na fase 8 do revamp (2026-09-27): era
   remendo pro #controls antigo, que não existe mais. Medido no Chrome em
   1440, 820 e 380 px, 28 telas cada, sem a regra: nenhum transbordo
   horizontal. Voltar a esconder transbordo esconde bug de layout. */
body{
  background:var(--stock);
  color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.014) 0 1px,transparent 1px 3px);
}
/* A carreira tem três áreas lado a lado (ficha, narração, celular). Em 940px
   elas se esmagavam e a narração sobrava com ~300px. */
.wrap{max-width:1260px;margin:0 auto;padding:24px 18px 80px}

/* ---------- cabeçalho da ficha ---------- */
.doc-head{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:10px 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.doc-head h1{font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:26px;
  letter-spacing:.06em;text-transform:uppercase;margin:0}
.doc-head .meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faded)}

.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faded);
  margin:26px 0 8px;border-bottom:1px solid var(--rule);padding-bottom:5px}

/* ---------- botões ---------- */
/* Botão NÃO herda color do body: usa o preto padrão do navegador. Sem esta
   linha, toda carta (que é <button>) fica com texto preto sobre fundo preto. */
button{font-family:inherit;color:inherit;cursor:pointer}
a{color:var(--ink2);text-decoration:underline}
a:hover{color:var(--ink)}
.btn{background:var(--ink);color:var(--bg);border:none;padding:11px 20px;
  font-family:Oswald,sans-serif;font-weight:500;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;transition:transform .08s ease,background .15s ease}
.btn:hover{background:var(--stamp);color:#fff}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--rule);color:var(--faded);cursor:default;transform:none}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-ghost.on{background:var(--stamp);border-color:var(--stamp);color:#fff}
:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}

/* Fase 9 (2026-09-17): a receita já existia só pra type=text — os campos
   de e-mail/senha da tela Conta (type=email/password) nunca tinham sido
   incluídos aqui, caíam no estilo nativo do navegador (caixa branca) no
   meio de um documento mono/quase-preto. Não é composição nova, é a
   mesma regra estendida pros dois tipos que faltavam. */
input[type=text],input[type=email],input[type=password]{font-family:inherit;
  font-size:16px;background:transparent;
  border:none;border-bottom:1.5px solid var(--ink);padding:6px 2px;color:var(--ink);width:min(320px,100%)}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{
  outline:none;border-bottom-color:var(--stamp)}

/* ---------- orçamento ---------- */
.budget{display:flex;align-items:center;gap:12px;margin:14px 0 18px;flex-wrap:wrap}
.reroll{width:100%;margin-bottom:14px}
.budget-bar{flex:1;min-width:180px;height:12px;border:1px solid var(--ink);position:relative;background:transparent}
.budget-fill{position:absolute;inset:1px auto 1px 1px;background:var(--ink);transition:width .35s ease}
.budget-fill.low{background:var(--stamp)}
/* Rótulo (2026-09-16) — antes era só o número solto, sem dizer o que
   é. Empilhado em vez de ao lado pra não brigar de largura com a
   barra ao lado dele num .budget só 12px de gap. */
.budget-num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;
  display:flex;flex-direction:column;gap:1px}
.budget-num small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faded);font-weight:400}

/* ---------- cartas do draft ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.card{border:1px solid var(--line2);background:var(--panel);padding:10px 11px;text-align:left;
  display:flex;flex-direction:column;gap:6px;transition:background .12s,transform .08s}
/* .card e .div-c compartilham o mesmo hover "levanta e sombreia" — eram
   2 declarações idênticas em lugares diferentes do arquivo, uma editada
   sem a outra já teria divergido em silêncio. Um seletor só agora. */
.card:hover,.div-c:hover{background:var(--panel2);border-color:var(--line2);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--line2)}
.card:active,.div-c:active{transform:none;box-shadow:none}
.card .pair{color:var(--ink);font-family:Oswald,sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.card .src{font-size:11.5px;color:var(--faded);margin-top:-6px}
.card .attr{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border-top:1px dotted var(--rule);padding-top:6px}
.card:hover .mira-attr .attr-l{color:var(--mira-txt)}
.card .attr-l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faded)}
.card .attr-v{font-variant-numeric:tabular-nums;font-weight:500}
.pctwrap{display:flex;align-items:center;gap:6px;margin-top:2px}
.pctbar{flex:1;height:7px;background:rgba(255,255,255,.07);position:relative;min-width:52px}
.pctbar i{position:absolute;left:0;top:0;bottom:0;display:block;transition:width .3s ease}
.pctnum{font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;min-width:76px;text-align:right}
/* escala: quanto mais verde, melhor que mais gente da divisão */
.p1 i{background:var(--tier-1)} .p1{color:var(--tier-1-txt)}
.p2 i{background:var(--tier-2)} .p2{color:var(--tier-2-txt)}
.p3 i{background:var(--tier-3)} .p3{color:var(--tier-3-txt)}
.p4 i{background:var(--tier-4)} .p4{color:var(--tier-4-txt)}
.p5 i{background:var(--tier-5)} .p5{color:var(--tier-5-txt)}

/* ---------- badge: pílula pequena, uma receita só ----------
   `.elite`, `.cint .b` e `.dossie .tag` já reimplementavam esta mesma
   forma cada um do seu jeito (border+padding+uppercase pequeno) — só
   `.elite` tinha cor cravada em hex, os outros dois já usavam var().
   Componente novo pra qualquer badge que Fases 1-3 precisarem criar,
   com 4 variantes de SIGNIFICADO, não de cor à toa: neutro =
   informativo, positivo = bom mas comum, dourado = prestígio
   (cinturão/campeão/conquista rara), perigo = atenção/risco. */
.badge{display:inline-block;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;border:1px solid currentColor;
  padding:0 5px;line-height:1.6;vertical-align:1px}
.badge-neutral{color:var(--ink2)}
.badge-win{color:var(--win-bright);border-color:var(--win)}
.badge-gold{color:var(--gold-bright);border-color:var(--gold)}
.badge-danger{color:var(--stamp-bright);border-color:var(--stamp)}
.elite{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--win-bright);border:1px solid var(--win);padding:0 4px;margin-left:6px;vertical-align:1px}
.legend{border:1px dashed var(--line2);padding:10px 12px;margin:0 0 14px;
  font-size:12px;line-height:1.6;color:var(--ink2);background:var(--panel)}
.legend b{color:var(--ink);font-weight:600}
.legend .sc{display:inline-flex;align-items:center;gap:0;margin:0 4px;vertical-align:-2px}
.legend .sc span{width:16px;height:8px;display:block}
.card .cost{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faded);border-top:1px solid var(--ink);padding-top:7px}
.card .cost b{color:var(--ink);font-variant-numeric:tabular-nums}
/* Carta selecionada aguardando o 2º toque (sem hover, ver renderDraft()).
   Cor sozinha não é sinal suficiente — o texto em .confirma é o que
   ensina o padrão de 2 toques, que ninguém já conhece de cara. */
.card.sel{border-color:var(--stamp);background:var(--panel2);transform:scale(1.015)}
.card .confirma{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--stamp-bright);text-align:center;
  border-top:1px dashed var(--stamp);padding-top:6px}

/* ---------- luta ao vivo ---------- */
.live{border:1px solid var(--ink);background:var(--stock-2);margin:14px 0}
.live-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 13px;border-bottom:1px solid var(--ink);flex-wrap:wrap}
.live-head .vs{font-family:Oswald,sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase}
.live-head .rd{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faded);font-variant-numeric:tabular-nums}
.play{padding:6px 13px 12px;min-height:110px}
.pbp{display:grid;grid-template-columns:52px 1fr;gap:9px;padding:4px 0;font-size:13px;
  animation:pbpin .22s ease both}
@keyframes pbpin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pbp .clk{color:var(--faded);font-size:11.5px;font-variant-numeric:tabular-nums;padding-top:1px}
.pbp.big{font-weight:600}
.pbp.kd{color:var(--stamp);font-weight:600}
.pbp.rd{border-top:1px solid var(--rule);margin-top:6px;padding-top:8px;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faded)}
.pbp.fin{font-family:Oswald,sans-serif;font-weight:700;font-size:17px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--stamp);padding-top:8px}
.btn-sm{padding:7px 13px;font-size:13px}
/* Vermelho de aviso (--stamp), contornado — não preenchido como o .btn
   primário, pra não competir com "Próxima luta" pelo olho. Precisa vir
   DEPOIS de .btn/.btn:hover no arquivo: mesma especificidade de classe
   única, empate de cascata resolve por ordem de leitura (já custou 2
   bugs nesta sessão — .mobile-only e .abas-carreira). */
.btn-perigo{background:transparent;color:var(--stamp-bright);border:1px solid var(--stamp)}
.btn-perigo:hover{background:var(--stamp);color:#fff}
/* #btnAposentar só pode agir no estado ocioso — igual em qualquer largura,
   por isso fora da media query de mobile. html[data-estado-carreira] vem
   de atualizarEstadoCarreira() e está sempre em dia (roda em toda
   transição real), diferente do "disabled" que renderFicha() poderia
   calcular só no instante em que ela roda por último. */
html:not([data-estado-carreira="ocioso"]) #btnAposentar,
html[data-dilema-carreira="1"] #btnAposentar{opacity:.4;pointer-events:none}

/* ---------- escolha de divisão ---------- */
/* ---------- seletor de modo (Fase 5, 2026-09-16: virou peça segmentada —
   Carreira/Seja uma lenda são UMA escolha, não dois botões independentes,
   então um bloco só com a opção ativa preenchida deixa isso claro) ---------- */
.modos{display:flex;border:1px solid var(--ink);margin:14px 0 10px}
.modo{flex:1;border:none;background:none;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;text-align:left;
  transition:background .15s ease,color .15s ease}
.modo+.modo{border-left:1px solid var(--ink)}
.modo:not(.on):hover{background:var(--panel2)}
.modo.on{background:var(--ink)}
.modo .n{font-family:Oswald,sans-serif;font-weight:700;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink)}
.modo.on .n{color:var(--bg)}
.modo .d{font-size:11px;color:var(--faded);line-height:1.45}
.modo.on .d{color:var(--ink2)}
.modo-nota{font-size:11px;color:var(--faded);line-height:1.6;margin:0 0 12px}
.divs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.div-c{border:1px solid var(--ink);background:var(--stock-2);padding:11px 12px;
  text-align:left;display:flex;flex-direction:column;gap:5px;
  transition:background .12s,transform .08s}
.div-c .n{color:var(--ink);font-family:Oswald,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase}
.div-c .lb{font-size:11px;color:var(--faded);letter-spacing:.08em}
.div-c .qt{font-size:11px;color:var(--faded);border-top:1px dotted var(--rule);
  padding-top:5px;margin-top:2px}
.div-c .qt b{color:var(--ink);font-weight:600}
.div-c .top{font-size:11px;color:var(--faded);font-style:italic}
.div-c.fem .n::after{content:" ♀";color:var(--stamp);font-size:13px}

/* ---------- painel do lutador ---------- */
.carreira{display:grid;grid-template-columns:262px minmax(0,1fr);gap:18px;align-items:start}
.ficha{background:var(--panel);border:1px solid var(--line);position:sticky;top:72px}
/* Antes: retrato pequeno (64px) ao lado do nome, os dois competindo com o
   mesmo espaço de 262px de coluna. O lutador é o protagonista da
   carreira (pedido explícito) — retrato maior, sozinho, centralizado
   como um busto de vestiário/cartaz de luta, nome grande embaixo dele
   em vez de ao lado. */
.ficha-top{padding:18px 14px 14px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.ficha-top .boneco{flex:0 0 auto;margin-bottom:10px}
.ficha-top .id{min-width:0;width:100%}
.ficha-top .nm{font-family:Oswald,sans-serif;font-weight:700;font-size:21px;line-height:1.1;
  word-break:break-word}
.ficha-top .sub{font-size:12px;color:var(--ink2);margin-top:4px;letter-spacing:.03em}
.ficha-top .caixa{font-size:12px;color:var(--win-dim);margin-top:6px;font-weight:600}
.ficha-top .assin{font-size:10.5px;color:var(--gold);margin-top:5px;letter-spacing:.06em;
  text-transform:uppercase}
.ficha-sec{padding:11px 14px;border-bottom:1px solid var(--line)}
.ficha-sec:last-child{border-bottom:none}
.ficha-sec h4{margin:0 0 8px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faded);font-weight:400}
.cint{display:flex;align-items:center;gap:9px}
.cint .b{font-family:Oswald,sans-serif;font-weight:700;font-size:15px;letter-spacing:.05em;
  text-transform:uppercase;border:2px solid currentColor;padding:2px 9px}
/* Segurar o cinturão de verdade precisa parecer diferente de "não" — antes
   os dois estados eram o MESMO contorno, só trocando a cor do texto.
   Prestígio ganha preenchimento sólido, não só um texto colorido. */
.cint .b.sim{color:var(--bg);background:var(--gold);border-color:var(--gold)}
.cint .b.nao{color:var(--faded)}
.cint small{font-size:11px;color:var(--faded)}
/* laranja escuro: é objetivo (o que falta pra chegar lá), não prejuízo —
   vermelho já é a cor de perda no resto da ficha (atributo caindo, lesão,
   dinheiro negativo) e confundia os dois (achado jogando, 2026-09-07). */
.passo-label{margin-top:8px;font-size:11px;color:var(--faded)}
.passo{margin-top:2px;font-size:11.5px;line-height:1.45;color:var(--warn);
  border-left:2px solid var(--warn-dim);padding-left:9px}
/* Posição na divisão: o número é a informação, o movimento é o drama. */
.rank{display:flex;align-items:baseline;gap:8px}
.rank .pos{font-family:Oswald,sans-serif;font-weight:700;font-size:19px;
  letter-spacing:.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.rank .de{font-size:11px;color:var(--faded)}
.rank .mov{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--faded)}
.rank .mov.sobe{color:var(--win-bright)}
.rank .mov.cai{color:var(--stamp)}
.rank-pico{margin-top:7px;font-size:11px;color:var(--faded)}
.lesao-nome{font-family:Oswald,sans-serif;font-weight:600;font-size:13px;color:var(--ink)}
.lesao-mag{margin-top:2px;font-size:12px;font-weight:600;color:var(--stamp)}
.lesao-dur{margin-top:3px;font-size:11px;color:var(--stamp)}
.atrs{display:grid;gap:7px}
.atr{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:baseline}
.atr .r{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faded)}
.atr .v{font-size:11.5px;font-variant-numeric:tabular-nums;font-weight:600}
.atr .g{font-size:10px;color:var(--win-bright);margin-left:4px}
.atr .dn{font-size:10px;color:var(--stamp);margin-left:4px}
.atrbar{grid-column:1/-1;height:6px;background:rgba(255,255,255,.07);position:relative;margin-top:1px}
.atrbar .base{position:absolute;left:0;top:0;bottom:0;background:var(--ink2);opacity:.55}
.atrbar .gan{position:absolute;top:0;bottom:0;background:var(--win)}
.atrbar .perda{position:absolute;top:0;bottom:0;background:var(--stamp);opacity:.55}
@media (max-width:1080px){.carreira{grid-template-columns:1fr}.ficha{position:static}}

/* ---------- criador de personagem ---------- */
.criador{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:8px}
.palco{background:var(--panel);border:1px solid var(--line);padding:22px 18px;text-align:center;
  position:sticky;top:70px;
  background-image:radial-gradient(ellipse at 50% 32%,rgba(255,255,255,.045),transparent 62%)}
.palco .col-t{text-align:left}
.palco .boneco{display:block;margin:0 auto;max-width:100%;height:auto}
.palco .nomebox{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.palco .nomebox small{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faded);margin-bottom:5px}
.palco input{width:100%;max-width:260px;text-align:center;font-size:17px}
.painelC{background:var(--panel);border:1px solid var(--line)}
.abas{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line)}
.aba{flex:1 1 auto;background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--faded);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:11px 6px;transition:color .12s,border-color .12s}
.aba:hover{color:var(--ink)}
.aba.on{color:var(--ink);border-bottom-color:var(--stamp)}
.corpoC{padding:15px 16px 18px;min-height:230px}
.linhaC{margin-bottom:16px}
.linhaC:last-child{margin-bottom:0}
.linhaC-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.linhaC-hd span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faded)}
.linhaC-hd b{font-size:12.5px;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line2);background:transparent;color:var(--ink2);
  font-size:11.5px;padding:5px 10px;transition:all .12s}
.chip:hover{border-color:var(--ink2);color:var(--ink)}
.chip.on{background:var(--stamp);border-color:var(--stamp);color:#fff}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:40px;height:40px;border:1px solid var(--line2);padding:0;transition:transform .1s}
.sw:hover{transform:scale(1.12)}
.sw.on{outline:2px solid var(--stamp);outline-offset:2px}
@media (max-width:860px){.criador{grid-template-columns:1fr}.palco{position:static}
  /* Largura apertada exigia fonte/padding horizontal menor pra caber as 6
     abas numa linha só — mas ALTURA pequena é exatamente o problema de
     alvo de toque (era ~27px, abaixo do mínimo de 44px). Encolhe só
     largura, cresce só altura: linha continua cabendo, toque fica bom. */
  .aba{font-size:9.5px;padding:16px 4px}}

/* ---------- tabuleiro do octógono ---------- */
.arena{display:grid;grid-template-columns:270px minmax(340px,1fr) 290px;gap:16px;
  align-items:start;margin-top:6px}
/* A lista tinha 8 cartas e esticava a página inteira: não dava pra ver a última
   opção e o octógono ao mesmo tempo. Agora ela rola dentro da própria coluna. */
.cards-scroll{max-height:min(62vh,470px);overflow-y:auto;padding-right:5px;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.cards-scroll::-webkit-scrollbar{width:7px}
.cards-scroll::-webkit-scrollbar-thumb{background:var(--line2)}
.col-t{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faded);
  margin-bottom:9px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.painel{background:var(--panel);border:1px solid var(--line);padding:13px 14px}
.painel-oct{display:flex;flex-direction:column;align-items:center}
.painel-oct .col-t{align-self:stretch}
/* O raio dos slots precisa deixar meia-largura de caixa para dentro, senão
   eles vazam por cima das colunas vizinhas e do texto acima. Max-width
   subiu de 460 pra 560: a coluna do meio é 1fr (a mais larga da grade) e
   460 deixava uma sobra vazia grande nos dois lados em tela ampla. */
.oct-wrap{position:relative;width:100%;aspect-ratio:1/1;max-width:560px;margin:14px auto 0;
  padding:0}
.oct-legenda{font-size:11.5px;line-height:1.5;color:var(--faded);text-align:center;
  max-width:380px;margin:18px auto 0}
.oct-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.slot{position:absolute;transform:translate(-50%,-50%);width:92px;z-index:2;
  background:var(--panel);border:1px solid var(--line);padding:7px 8px;text-align:center;
  transition:border-color .2s,background .2s}
.slot .lab{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faded);
  display:block;line-height:1.25}
.slot .val{font-family:Oswald,sans-serif;font-weight:700;font-size:17px;line-height:1.1;
  display:block;color:var(--faded)}
.slot .src{font-size:9px;color:var(--faded);display:block;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot.cheio{border-color:var(--line2);background:var(--panel2)}
.slot.cheio .val{color:var(--ink)}
/* Destaque, não alarme: vermelho dessaturado e sem preenchimento.
   O salto roda a cada passada de mouse porque desenhaOctogono recria os nós,
   então a animação reinicia sozinha — é mais curto e mais fraco que o da
   escolha, que é o momento que realmente merece peso. */
.slot.mira{border-color:var(--mira);box-shadow:inset 0 0 0 1px rgba(192,57,43,.16);
  animation:salta .34s cubic-bezier(.3,1.5,.5,1) both}
.slot.mira .lab{color:var(--mira-txt)}
@keyframes salta{
  0%{transform:translate(-50%,-50%) scale(1)}
  45%{transform:translate(-50%,-58%) scale(1.11)}
  100%{transform:translate(-50%,-50%) scale(1)}}
.slot.novo{animation:fixa .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes fixa{from{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.oct-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:130px;z-index:1}
.oct-mid .n{font-family:Oswald,sans-serif;font-weight:700;font-size:34px;line-height:1;color:var(--ink)}
.oct-mid .l{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faded);margin-top:3px}
.oct-mid .b{height:5px;background:rgba(255,255,255,.08);margin-top:9px;position:relative}
.oct-mid .b i{position:absolute;left:0;top:0;bottom:0;background:var(--stamp);transition:width .4s ease}
/* dossiê */
.dossie .nm{font-family:Oswald,sans-serif;font-weight:700;font-size:23px;line-height:1.08;margin:2px 0 7px}
.dossie .tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.dossie .tag{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line2);padding:2px 6px;color:var(--ink2)}
.dossie .tag.t{border-color:var(--gold);color:var(--gold)}
.dossie p{font-size:12.5px;line-height:1.55;color:var(--ink2);margin:0 0 10px}
.dossie .grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-bottom:11px}
.dossie .cel{background:var(--panel2);padding:7px 9px}
/* Mesma marcação dos slots do octógono: liga visualmente "estes dois atributos"
   com "estes dois lados". Sem isso o jogador não conecta os dois lados da tela. */
.dossie .cel.mira{box-shadow:inset 0 0 0 1px var(--mira);background:var(--mira-bg)}
.dossie .cel.mira small{color:var(--mira-txt)}
.dossie .cel small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faded)}
.dossie .cel b{font-family:Oswald,sans-serif;font-weight:700;font-size:16px}
.dossie .vazio{color:var(--faded);font-size:12.5px;line-height:1.6;padding:24px 0;text-align:center}
@media (max-width:1000px){.arena{grid-template-columns:1fr}
  .oct-wrap{max-width:420px}.slot{width:84px}}
@media (max-width:560px){.oct-wrap{max-width:330px}.slot{width:70px;padding:5px 4px}
  .slot .val{font-size:14px}.slot .lab{font-size:8px}.slot .src{display:none}}

/* ---------- escolha de adversário e camp ---------- */
.escolha{margin:12px 0 4px}
.esc-hd{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faded);
  margin-bottom:9px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.opps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.opp{border:1px solid var(--ink);background:var(--stock-2);padding:12px 13px;text-align:left;
  display:flex;flex-direction:column;gap:7px;transition:background .12s,transform .08s}
.opp:hover{background:var(--panel2);border-color:var(--line2);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--line2)}
.opp:active{transform:none;box-shadow:none}
/* Faixa de dificuldade (Fase 6): sangra até a borda do card (margem
   negativa cancelando o padding do .opp) — é o primeiro elemento que o
   olho encontra, cor + palavra fazem o trabalho que 4 quadrados de 9px
   não faziam sozinhos. Cor por currentColor: pips e texto herdam da
   mesma declaração em .dN .dbanda, sem repetir a cor três vezes. */
.opp .dbanda{margin:-12px -13px 8px;padding:8px 13px;display:flex;
  justify-content:space-between;align-items:center;font-family:Oswald,sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  border-bottom:1px solid;background:rgba(255,255,255,.03)}
.d1 .dbanda{color:var(--win-bright);background:rgba(111,196,134,.08)}
.d2 .dbanda{color:#9FBF7C;background:rgba(159,191,124,.07)}
.d3 .dbanda{color:#C08F52;background:rgba(192,143,82,.07)}
.d4 .dbanda{color:var(--stamp);background:rgba(192,57,43,.1)}
.pips{display:flex;gap:3px}
.pips i{width:7px;height:7px;border:1px solid currentColor;opacity:.35;display:block}
.pips i.on{background:currentColor;opacity:1}
/* "SEU NOME vs ADVERSÁRIO" — nome do jogador pode ser bem mais longo que
   os de teste ("Anderson Silva Junior" cabe nos 28 caracteres do
   cadastro); sem quebra de linha aqui o card estoura em 380px. */
.opp .vs{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faded)}
.opp .vs .quem{color:var(--ink2);font-weight:600;overflow-wrap:anywhere}
.opp .vs .vslabel{font-style:italic;color:var(--faded)}
.opp .nm{color:var(--ink);font-family:Oswald,sans-serif;font-weight:700;font-size:18px;
  letter-spacing:.02em;line-height:1.15;overflow-wrap:anywhere}
.opp .arq{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faded)}
.opp .bio{font-size:11.5px;color:var(--faded);line-height:1.45;
  border-top:1px dotted var(--rule);padding-top:6px}
.opp .bio b{color:var(--ink);font-weight:600}
.opp .stake{display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-top:1px solid var(--ink);padding-top:7px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faded)}
/* Modo Rival (Plano Pro): borda de destaque no card inteiro (mesma cor de
   raridade das conquistas, não uma cor nova) + selo no canto — reconhecível
   de relance, sem competir com a faixa de dificuldade que já ocupa o topo. */
.opp.rival{border-color:var(--gold)}
.opp.rival:hover{border-color:var(--gold-bright)}
.rival-selo{align-self:flex-start;font-family:Oswald,sans-serif;font-weight:700;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);
  border:1px solid var(--gold);padding:2px 7px}
/* Selo Pro — reaproveitado em todo lugar que é recurso Pro (item novo,
   2026-09-22). Semi-transparente (fundo tingido, não sólido) + contorno
   amarelo, mesma paleta de raridade de sempre (--gold/--gold-bright),
   nunca cor nova. display:inline-flex pra caber no meio de texto de
   botão/título sem quebrar linha estranho. */
.selo-pro{display:inline-flex;align-items:center;vertical-align:middle;
  background:rgba(185,147,47,.16);border:1px solid var(--gold);color:var(--gold-bright);
  font-family:Oswald,sans-serif;font-weight:700;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;margin-left:6px;border-radius:2px;white-space:nowrap}
.rival-anuncio{border:1px solid var(--gold);color:var(--gold-bright);
  font-family:Oswald,sans-serif;font-weight:700;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;text-align:center;padding:12px 14px;margin-bottom:14px}
.rival-anuncio .sub{display:block;text-transform:none;font-weight:400;
  font-size:12.5px;letter-spacing:0;margin-top:6px;color:var(--ink2)}
.opp .stake b{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.04em;color:var(--win-bright)}
.camps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.camp{border:1px solid var(--ink);background:var(--stock-2);padding:11px 12px;text-align:left;
  display:flex;flex-direction:column;gap:5px;transition:background .12s,transform .08s}
.camp:hover{background:var(--panel2);border-color:var(--line2);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--line2)}
.camp .t{color:var(--ink);font-family:Oswald,sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.camp .d{font-size:11.5px;color:var(--faded);line-height:1.4}
.camp .g{font-size:11px;font-weight:600;color:var(--win-bright)}
.camp .pctwrap{margin-top:4px}
.camp-cap{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faded);margin-top:3px}
.contra{border-left:3px solid var(--stamp);padding:8px 0 8px 11px;margin:9px 0 2px;
  font-size:12.5px;line-height:1.45}
/* escolha na luta (item 6, v2): mesmo padrão visual dos camps — grid,
   lado a lado, nunca empilhado, mesmo em tela estreita ele quebra em
   linhas de 3 antes de virar coluna única.
   Fase 7 (2026-09-17): acontece no meio do round, narração parada
   esperando — o oposto do momento calmo do camp que ela pegava
   emprestado. Tarja vermelha no topo (mesma cor do dilema, --stamp,
   como FORMA diferente — borda lateral é "preste atenção", tarja no
   topo é "agora"). E o atributo que decide a ação vira o segundo
   elemento mais visível do botão (número grande, tabular-nums, cor de
   destaque) em vez de legenda cinza de 11px — é a informação que
   separa leitura de chute, tem que dar pra ler de relance. */
.escolha-luta{margin-top:10px;border-top:3px solid var(--stamp);padding-top:9px}
.el-cab{font-size:12.5px;color:var(--ink2);line-height:1.4;margin-bottom:10px}
.el-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.el-opts button{border:1px solid var(--ink);background:var(--stock-2);padding:11px 12px;
  text-align:left;color:inherit;font-size:13px}
.el-opts button:hover{background:var(--panel2);border-color:var(--line2);
  transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--line2)}
.el-nome{display:block;color:var(--ink);font-family:Oswald,sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.el-attr{display:block;font-size:10.5px;color:var(--faded);margin-top:7px;
  letter-spacing:.06em;text-transform:uppercase;padding-top:6px;
  border-top:1px solid var(--line)}
.el-attr b{display:block;color:var(--win-bright);font-weight:700;font-size:17px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-top:2px}
.contra b{font-weight:600}

/* ---------- dilema interativo ---------- */
/* Fase 7 (2026-09-17): dilema é o único texto livre do jogo, o
   diferencial contra a concorrência — vinha com o mesmo peso visual
   de qualquer .bout/.event no feed. Borda esquerda grossa vermelha
   (--stamp) marca "preste atenção nisto", mesma cor já usada no
   carimbo de derrota/passo do cinturão/card de momento — não é raro
   virar comum, é a cor de "isso importa" ficando consistente. */
.dilema{border:1.5px solid var(--line2);border-left:3px solid var(--stamp);
  background:var(--panel);padding:13px 15px 13px 13px;margin:10px 0 12px;
  animation:fade .4s ease both}
.dil-eyebrow{font-family:Oswald,sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stamp);
  margin-bottom:6px}
.dil-t{font-family:Oswald,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.dil-c{font-size:13.5px;line-height:1.55}
.dil-in{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;align-items:flex-end}
.dil-in textarea{flex:1;min-width:180px;font-family:inherit;font-size:14px;
  line-height:1.4;background:transparent;color:var(--ink);
  border:none;border-bottom:1.5px solid var(--ink);padding:6px 2px;
  resize:none;overflow:hidden}
.dil-in textarea:focus{outline:none;border-bottom-color:var(--stamp)}
.dil-r{font-style:italic;color:var(--faded);font-size:13px;margin-top:10px;
  padding-left:12px;border-left:2px solid var(--rule)}
/* dil-o (o desfecho, 6-10 frases com diálogo): linha mais alta, e um teto
   de largura pra ler como texto escrito, não campo de dado esticado.
   62ch só amarra em tela larga — num container mais estreito que isso
   (todo 380px é) o max-width nunca chega a valer, o texto continua
   ocupando 100% da caixa, sem coluna estreita nem margem lateral. */
.dil-o{font-size:13.5px;line-height:1.7;margin-top:9px;padding-top:9px;
  border-top:1px dotted var(--rule);max-width:62ch}
.dil-fx{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap;align-items:baseline}

/* ---------- celular: repercussão ---------- */
.stage{display:grid;grid-template-columns:minmax(340px,1fr) 300px;gap:16px;align-items:start;margin:14px 0}
/* Revertido (2026-09-16) — a rodada anterior trocou isto por um visual
   de "boletim de imprensa" lendo a regra geral do CSS ("sem canto
   arredondado") sem checar se este elemento era a exceção deliberada.
   Era: o mockup de celular (canto arredondado + barrinha de notch) é
   a ÚNICA exceção justificada no jogo inteiro — o painel de
   repercussão PRECISA parecer "Twitter no telefone" pra fazer sentido
   como conceito, o resto do jogo continua 100% sem raio. */
.phone{border:2px solid var(--line2);border-radius:22px;background:var(--panel);
  padding:9px 8px 12px;position:relative;box-shadow:3px 3px 0 rgba(0,0,0,.10)}
.phone::before{content:"";display:block;width:52px;height:4px;border-radius:3px;
  background:var(--rule);margin:0 auto 9px}
.phone-hd{display:flex;justify-content:space-between;align-items:baseline;
  padding:0 6px 7px;border-bottom:1px solid var(--rule);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faded)}
.feed{max-height:340px;overflow-y:auto;padding:0 4px}
.tw{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:9px 4px;
  border-bottom:1px solid var(--rule);animation:pbpin .25s ease both}
.tw .av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:600;color:#fff;letter-spacing:.02em}
.tw .who{display:block;font-size:11.5px;font-weight:600;line-height:1.3}
.tw .who span{font-weight:400;color:var(--faded);font-size:10.5px}
.tw .txt{display:block;font-size:12px;line-height:1.42;margin-top:3px}
.tw .rt{display:block;font-size:10px;color:var(--faded);margin-top:6px;letter-spacing:.06em}
.tw.hater .av{filter:saturate(.35)}
.tw.hater .txt{color:var(--stamp-bright)}

.meters{display:grid;gap:9px;margin:11px 0 0;padding:10px 8px 2px;border-top:1px solid var(--ink)}
.meter{display:grid;gap:4px}
.meter-hd{display:flex;justify-content:space-between;align-items:baseline;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faded)}
.meter-hd b{font-size:15px;font-family:Oswald,sans-serif;letter-spacing:.02em;color:var(--ink)}
.fanbar{height:9px;background:rgba(255,255,255,.07);position:relative}
.fanbar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);transition:width .6s ease}
.fanbar.hot i{background:var(--win)}
.fanbar.cold i{background:var(--stamp)}
.delta{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.delta.up{color:var(--win-bright)}.delta.down{color:var(--stamp)}
@media (max-width:900px){.stage{grid-template-columns:1fr}
  .phone{max-width:340px;margin:0 auto}}

/* ---------- registro de lutas ---------- */
.bouts{border-top:1px solid var(--rule);margin-top:6px}
.bout{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--rule);
  animation:slide .3s ease both}
@keyframes slide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.bout .no{font-size:11px;color:var(--faded);font-variant-numeric:tabular-nums}
.bout .opp{font-weight:500}
.bout .how{font-size:11.5px;color:var(--faded);letter-spacing:.04em}
.bout.title-fight .opp::after{content:" ★";color:var(--gold)}
/* O resultado mais recente pesa mais que o histórico — antes as 22 linhas
   do cartel tinham o MESMO peso visual, então "acabei de ganhar o
   cinturão" e "venci a luta 3" pareciam a mesma coisa na tela. A última
   luta ganha respiro e o carimbo cresce; assim que a próxima é lutada,
   ela "esfria" pro tamanho de histórico normal — o próprio DOM decide
   isso sozinho (:last-child), sem estado novo pra manter. */
.bout:last-child{padding:16px 12px;margin:2px -12px;background:var(--panel2);
  border-bottom-color:var(--line2)}
.bout:last-child .opp{font-size:15.5px}
.bout:last-child .how{font-size:12.5px;color:var(--ink2)}
.bout:last-child .stamp{font-size:19px;padding:4px 13px;letter-spacing:.16em}

/* ---------- o carimbo (elemento assinatura) ---------- */
.stamp{font-family:Oswald,sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;border:2.5px solid currentColor;padding:2px 8px;
  color:var(--win);transform:rotate(-4deg);white-space:nowrap;
  animation:press .3s cubic-bezier(.2,1.6,.4,1) both}
.stamp.d{color:var(--loss);transform:rotate(3deg)}
@keyframes press{from{opacity:0;transform:scale(2.6) rotate(-14deg)}
  60%{opacity:1}to{opacity:.9;transform:scale(1) rotate(-4deg)}}
.stamp.d{animation-name:pressD}
@keyframes pressD{from{opacity:0;transform:scale(2.6) rotate(12deg)}
  60%{opacity:1}to{opacity:.9;transform:scale(1) rotate(3deg)}}

.event{font-style:italic;font-weight:700;color:var(--faded);font-size:12.5px;padding:2px 0 10px 44px;
  border-bottom:1px solid var(--rule);animation:fade .5s ease both}
.event.rare{color:var(--stamp);font-style:normal;font-weight:500;
  border-left:3px solid var(--stamp);padding:8px 0 8px 12px;margin-left:32px}
.legacy{border-left:3px solid var(--ink);padding:12px 0 12px 16px;margin:20px 0 6px;
  font-size:15px;line-height:1.6;font-style:italic}
.conta-box,.tela-box{border:1px solid var(--line2);padding:12px 14px;margin:14px 0}
.conta-box h4,.tela-box h4{margin:0 0 6px;font-family:Oswald,sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.conta-box input[type=email],.conta-box input[type=password],.conta-box input[type=text],
.tela-box input[type=email],.tela-box input[type=password],.tela-box input[type=text]{display:block;width:100%;max-width:260px;margin:8px 0}
.conta-pro{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.pro-ativo-linha{color:var(--win-dim);font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;margin:4px 0 10px}
.pro-beneficios{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.pro-beneficio{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5}
.pro-beneficio .ic{font-size:20px;line-height:1.2;flex-shrink:0}
.pro-beneficio .txt b{font-family:Oswald,sans-serif;font-weight:700;letter-spacing:.02em}
.pro-carrossel{display:flex;align-items:center;gap:10px;margin:18px 0 4px;justify-content:center}
.pro-carrossel-cv{width:180px;max-width:44vw}
.pro-carrossel-cv canvas{display:block;width:100%;height:auto;border:1px solid var(--line2)}
.pro-carrossel-seta{background:none;border:1px solid var(--line2);color:var(--ink);
  font-size:20px;width:34px;height:34px;flex-shrink:0;cursor:pointer;border-radius:2px}
.pro-carrossel-seta:hover{border-color:var(--gold)}
.pro-carrossel-legenda{text-align:center;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faded);margin-bottom:6px}
.pro-carrossel-acao{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:16px}
.conta-pro label.aceite-pro{display:flex;align-items:flex-start;gap:7px;margin:10px 0;cursor:pointer}
.conta-pro label.aceite-pro input{margin-top:3px}
.conta-box .termos-nota{font-size:11px;margin-top:10px}
.conta-box .termos-nota a{color:var(--ink2)}
.conta-box h4{border-bottom:1px solid var(--line2);padding-bottom:6px;margin-bottom:10px}
.campo-rot{display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faded);margin-top:8px}
.campo-rot button{background:none;border:none;color:var(--ink2);font-size:11px;
  text-transform:none;letter-spacing:0;text-decoration:underline;padding:0}
.regra-senha{font-size:12.5px;margin:3px 0 2px;color:var(--faded)}
.regra-senha.ok{color:var(--win-dim);font-weight:600}
.regra-senha.falta{color:var(--stamp)}
.conta-box .msg-erro{color:var(--stamp)}
.conta-box .msg-ok{color:var(--win-dim)}
.conta-modo-link{margin-top:12px;font-size:12.5px}
/* Bug achado testando Conta em 380px (2026-09-16): o link é <a> inline,
   o botão "Entrar" logo depois é inline-block — sem texto/margem entre
   os dois no DOM (el() não insere espaço), eles ficavam colados, largura
   zero de vão, o botão em cima da última letra do link. Existia em
   qualquer largura, só ficou visível testando esta tela pela 1ª vez. */
#conta-link-esqueci{display:block;margin:6px 0 14px}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- tela inicial (2026-09-09, recomposta 2026-09-15) ---------- */
/* Mesma linguagem visual do resto: mono, sem canto arredondado, sem
   gradiente. Antes: marca e menu eram DUAS regiões flex independentes
   (marca com padding-top fixo, menu centralizado no espaço que sobrava)
   — em tela alta isso vira um vazio enorme entre os dois, sem relação
   nenhuma. Agora marca+menu são UM bloco só, centralizado junto — o
   vazio que sobra vira moldura pro octógono de fundo, não espaço morto. */
.tela-inicio{min-height:calc(100vh - 60px);display:flex;flex-direction:column;
  position:relative;overflow:hidden}
/* Octógono de fundo — mesmo desenho de octogonoSVG() (tela de draft),
   só que gigante e quase invisível: a forma vira assinatura visual que
   se repete pelo jogo em vez de decoração nova inventada pra esta tela. */
.inicio-oct{position:absolute;top:50%;right:-10%;width:min(720px,62vw);
  aspect-ratio:1;transform:translateY(-50%);opacity:.07;pointer-events:none}
.inicio-oct svg polygon{stroke:var(--ink2)}
.inicio-conteudo{position:relative;flex:1;display:flex;flex-direction:column;
  justify-content:center;gap:36px;max-width:620px}
.inicio-marca{padding:0}
.inicio-titulo{font-family:Oswald,Impact,sans-serif;font-weight:700;
  font-size:clamp(48px,9vw,96px);letter-spacing:.06em;color:var(--stamp);margin:0;
  line-height:.95}
.inicio-tagline{color:var(--ink2);font-size:15px;margin:14px 0 0;max-width:460px;line-height:1.5}
.inicio-menu{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* Primeiro item (Jogar) é a ação, o resto é navegação secundária — antes
   os 4 tinham o MESMO peso visual, sem hierarquia nenhuma de "o que eu
   faço agora". */
.inicio-item{background:none;border:1px solid transparent;padding:10px 16px;
  text-align:left;font-family:Oswald,sans-serif;font-weight:500;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.inicio-item:hover{color:var(--ink);border-color:var(--line2)}
.inicio-item-principal{font-size:26px;font-weight:700;color:var(--ink);
  border-color:var(--ink);padding:14px 22px}
.inicio-item-principal:hover{background:var(--stamp);border-color:var(--stamp);color:#fff}
.inicio-fato{color:var(--faded);font-size:12px;letter-spacing:.04em;margin-top:2px}
.inicio-fato b{color:var(--ink2);font-weight:600}
.inicio-rodape{position:relative;display:flex;gap:12px;flex-wrap:wrap;padding:20px 0 10px;
  border-top:1px solid var(--line);font-size:12px}
.inicio-rodape a{color:var(--faded)}
.inicio-rodape a:hover{color:var(--ink)}
.inicio-rodape span{color:var(--line2)}
.pagina-legal{max-width:640px;line-height:1.7}
.pagina-legal h3{font-family:Oswald,sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:26px 0 8px}
.pagina-legal h3:first-child{margin-top:0}
.pagina-legal p{margin:0 0 12px}
.pagina-legal ul{margin:0 0 12px;padding-left:20px}
.pagina-legal li{margin-bottom:6px}
.pagina-legal .rev{color:var(--faded);font-size:11px;margin-bottom:22px}

/* ---------- tela nome (Fase 5, 2026-09-16) ---------- */
/* Reaproveita o octógono de fundo e o peso do botão "Jogar" da Início —
   é a tela seguinte no funil, faz sentido continuar a mesma identidade
   em vez de cair num formulário burocrático genérico. */
.tela-registro{position:relative;overflow:hidden}
.registro-form{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;gap:16px;max-width:620px;margin-top:14px}
.registro-form .inicio-tagline{max-width:none}
.input-hero{font-size:20px;padding:10px 4px}

/* nocaute: a página leva o golpe */
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  15%{transform:translate(-7px,3px)}35%{transform:translate(6px,-3px)}
  55%{transform:translate(-4px,-2px)}75%{transform:translate(3px,2px)}}
body.ko .wrap{animation:shake .42s ease}
body.ko::after{content:"";position:fixed;inset:0;background:var(--stamp);
  opacity:.16;pointer-events:none;animation:flash .42s ease forwards}
@keyframes flash{from{opacity:.3}to{opacity:0}}

/* ---------- relatório final ---------- */
.tape{width:100%;border-collapse:collapse;margin-top:6px}
.tape td{padding:7px 0;border-bottom:1px dotted var(--rule);vertical-align:baseline}
.tape td:first-child{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faded);width:46%}
.tape td:last-child{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.verdict{display:flex;align-items:center;gap:20px;margin:22px 0 8px;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:18px 0}
.verdict .letter{font-family:Oswald,sans-serif;font-weight:700;font-size:72px;line-height:.8;
  color:var(--stamp);border:4px solid var(--stamp);padding:8px 18px 12px;transform:rotate(-3deg);
  animation:press .45s cubic-bezier(.2,1.6,.4,1) both}
.verdict .said{font-size:14px;line-height:1.45}
.verdict .said small{display:block;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faded);margin-bottom:5px}
.made-of{font-size:12px;color:var(--faded);line-height:1.7;margin-top:14px}
.made-of b{color:var(--ink);font-weight:500}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
/* Durante a narração a página cresce e empurra os controles pra fora da tela.
   Sem isto não dá pra desligar o automático depois de ligado. */
/* padding-right = largura da engrenagem (36px) + o right:14px dela: reserva
   exatamente a faixa que ela ocupa no topo, então o conteúdo desta barra
   (inclusive o contador, que é o que costuma sobrar pro fim da linha em
   viewport estreito) nunca desenha por baixo dela, em qualquer largura. */
#controls{position:sticky;top:0;z-index:30;margin:0 0 4px;padding:11px 50px 10px 0;
  background:var(--bg);border-bottom:1px solid var(--line2)}
#controls::before{content:"";position:absolute;left:-40px;right:-40px;top:0;bottom:0;
  background:var(--bg);z-index:-1}
#controls.travado{border-bottom-color:var(--stamp)}
#controls.travado .aviso{color:var(--stamp);font-weight:600}
.hint{font-size:11.5px;color:var(--faded)}
.hint .g{color:var(--win-bright);font-weight:600}
.hint .dn{color:var(--stamp);font-weight:600}
.hidden{display:none!important}
.err{border:1.5px solid var(--stamp);padding:14px 16px;background:var(--stock-2)}
.err b{font-family:Oswald,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  display:block;margin-bottom:6px;color:var(--stamp)}
.err code{background:var(--stock);padding:1px 5px;font-size:12px}

/* ---------- configurações (engrenagem) ---------- */
/* Fica no canto inferior direito e fixo: a barra de controles é sticky no topo
   e só existe durante a carreira. Embaixo o botão alcança todas as telas sem
   disputar espaço com nada. */
/* Canto superior direito, ancorada pela direita: cresce pro lado esquerdo no
   hover em vez de "abrir pra direita" e sair da tela, que é onde ela mora.
   width/max-width anima com transition (não `right`), então a engrenagem em
   si não se desloca — só o espaço à esquerda dela aparece. overflow:hidden
   esconde o rótulo até o max-width crescer o bastante pra revelar. */
.cfg-btn{position:fixed;top:14px;right:14px;z-index:50;
  display:flex;align-items:center;justify-content:flex-end;
  height:44px;max-width:44px;overflow:hidden;
  padding:0;background:var(--bg);border:1px solid var(--line);color:var(--faded);
  transition:max-width .22s ease,border-color .15s ease,color .15s ease}
.cfg-btn:hover,.cfg-btn:focus-visible{max-width:180px;color:var(--ink);border-color:var(--line2)}
.cfg-btn svg{flex:none;width:17px;height:17px;margin:0 13px}
.cfg-btn .cfg-lbl{flex:none;padding-left:12px;white-space:nowrap;
  font-family:Oswald,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateX(6px);
  transition:opacity .16s ease,transform .16s ease}
.cfg-btn:hover .cfg-lbl,.cfg-btn:focus-visible .cfg-lbl{opacity:1;transform:translateX(0)}
/* prefers-reduced-motion já zera toda transition/animation via *{...} lá embaixo —
   essa engrenagem usa só transition (max-width/opacity/transform), nada de JS
   controlando a animação, então cai nessa regra global de graça. */
.cfg-overlay{position:fixed;inset:0;z-index:70;background:rgba(6,8,12,.74);
  display:flex;align-items:center;justify-content:center;padding:18px}
.cfg-painel{width:100%;max-width:380px;background:var(--panel);
  border:1px solid var(--line2);padding:16px 18px 15px}
.cfg-top{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--rule);padding-bottom:9px}
.cfg-top h2{font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--ink)}
.cfg-x{background:none;border:0;color:var(--faded);font-size:15px;padding:2px 5px;
  line-height:1}
.cfg-x:hover{color:var(--stamp)}
.cfg-linha{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--rule)}
.cfg-rot{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);width:70px;flex:none}
.cfg-num{font-size:11.5px;color:var(--faded);width:40px;text-align:right;
  flex:none;font-weight:400}
.cfg-off{opacity:.32}
.cfg-toggle{margin-left:auto;background:none;border:1px solid var(--line2);
  color:var(--ink2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 13px}
.cfg-toggle.on{background:var(--stamp);border-color:var(--stamp);color:#fff}
.cfg-nota{font-size:11px;color:var(--faded);line-height:1.6;margin:13px 0 0}
.menu-item{display:block;width:100%;text-align:left;margin-top:8px;min-height:44px}
/* Barra sem canto arredondado e polegar retangular: o resto da página não tem
   um único raio de canto, uma barra padrão de navegador destoaria. */
.cfg-range{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:18px;
  background:none;margin:0;cursor:pointer}
.cfg-range::-webkit-slider-runnable-track{height:2px;background:var(--line2)}
.cfg-range::-moz-range-track{height:2px;background:var(--line2)}
.cfg-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:10px;height:16px;margin-top:-7px;background:var(--ink);border:0}
.cfg-range::-moz-range-thumb{width:10px;height:16px;background:var(--ink);
  border:0;border-radius:0}
.cfg-range:disabled{cursor:default}

/* Card de momento: sobrepõe, nunca trava. Sem display:none no #app nem
   pausa de auto/nextFight — só um overlay que o jogador abre e fecha
   quando quiser, inclusive com o automático rodando por baixo. */
.painel-overlay{position:fixed;inset:0;background:rgba(6,9,14,.72);
  display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}
.painel-momentos{background:var(--panel2);border:1px solid var(--rule);
  max-width:480px;width:100%;max-height:82vh;overflow:auto;padding:18px}
.painel-momentos h3{margin:0 0 12px;font-family:Oswald,sans-serif;font-size:18px;color:var(--ink)}
.painel-momentos .vazio{color:var(--faded);font-size:13px}
.momento-item{border:1px solid var(--rule);padding:10px 12px;margin-bottom:10px;
  display:flex;gap:12px;align-items:flex-start}
/* Moldura passe-partout (Fase 8): borda externa grossa + respiro (o
   "mat") + a borda fina que a miniatura já tinha — duas linhas com vão
   entre elas, não uma borda dupla colada. .momento-mini continua o
   MESMO <div> de fundo CSS (confirmado: não virou <canvas>/<img>). */
.momento-moldura{flex:none;padding:5px;border:2px solid var(--line2);
  background:var(--stock-2)}
.momento-mini{border:1px solid var(--rule);background-size:cover;
  background-position:center;cursor:pointer}
.momento-texto{flex:1;min-width:0}
.momento-item .frase{font-size:13px;color:var(--ink);margin-bottom:8px}
.momento-item .meta{font-size:11px;color:var(--faded);margin-bottom:8px}
.painel-fechar{margin-top:4px}
/* Conquistas: documento, não troféu ilustrado. Regra original (só texto,
   zero ícone) reconsiderada de propósito em 2026-09-21, pedido
   explícito, depois de o motivo original ficar registrado: o ícone que
   entrou não é troféu colorido nem emoji — é a moldura do octógono (o
   selo do próprio jogo) com um traço monocromático dentro, apagado até
   desbloquear. Continua sem canto arredondado, mono herdado do body
   (sobrescreve o Oswald do h3 compartilhado com o painel de cards). */
.painel-momentos.conquistas h3{font-family:inherit;font-weight:600}
.conquista{border-bottom:1px solid var(--rule);padding:8px 0;
  display:flex;align-items:flex-start;gap:10px}
.conquista:last-child{border-bottom:none}
.conquista-icone{width:34px;height:34px;flex:none;color:var(--line2);
  transition:color .15s ease}
.conquista.ok .conquista-icone{color:var(--stamp)}
.conquista-icone .ic-moldura{fill:none;stroke:currentColor;stroke-width:5}
.conquista-icone .ic-glifo{fill:none;stroke:currentColor;stroke-width:6;
  stroke-linecap:round;stroke-linejoin:round}
.conquista-texto{min-width:0;flex:1}
.conquista-nome{font-size:13px;color:var(--faded);display:flex;
  align-items:center;flex-wrap:wrap;gap:6px}
.conquista.ok .conquista-nome{color:var(--ink);font-weight:600}
.conquista-desc{font-size:11px;color:var(--faded);margin-top:2px}
/* Carreira passada (Fase 8, 2026-09-17): é registro, não troféu — parou de
   usar .conquista (a MESMA classe da lista de conquistas de verdade, logo
   abaixo nesta tela). Linha de ficha: nome + cartel/nota alinhados nas
   pontas, data embaixo, tabular-nums pro cartel. Sem media query: .carreira-
   nome tem largura mínima e .carreira-stats nunca quebra por dentro (é UM
   item flex) — se não cabem lado a lado, o grupo inteiro (cartel+nota) desce
   pra linha de baixo, nome sozinho em cima. Testado em 380px. */
.carreira-item{border-bottom:1px solid var(--rule);padding:9px 0}
.carreira-item:last-child{border-bottom:none}
.carreira-linha{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:2px 14px}
.carreira-nome{font-family:Oswald,sans-serif;font-weight:700;font-size:13.5px;
  color:var(--ink);flex:1 1 auto;min-width:120px}
.carreira-stats{display:flex;gap:10px;align-items:baseline;flex:0 0 auto;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.carreira-stats b{font-size:13px;color:var(--ink)}
.carreira-nota{font-size:11.5px;color:var(--faded)}
.carreira-data{font-size:11px;color:var(--faded);margin-top:3px}
/* Painel de compras (treinador, e o que entrar depois): descrição em
   linguagem de jogador (o que É) separada do efeito mecânico (o que MUDA
   e quanto) — sem isso o jogador compra no escuro, mesmo problema do
   treinador antigo (+0,05 vitórias) que ninguém percebia que era inútil.
   Fase 8 (2026-09-17): item de loja é produto, não conquista — parou de
   usar .conquista-nome/.conquista-desc (a MESMA classe que o histórico
   usa pra carreira passada, na mesma tela que conquista de verdade,
   logo abaixo). O efeito (item-efeito) sobe de legenda de 11.5px pra
   ser a informação que decide a compra — mesmo texto que efeito() já
   devolvia, só parando de ser pequeno. */
.loja-nome{font-family:Oswald,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.03em;color:var(--ink)}
/* item-desc: era bold 700 (mesmo peso do nome, competindo por atenção).
   Fase 8: peso normal — descrição é apoio, o efeito é quem decide. */
.item-desc{font-weight:400;color:var(--ink2);font-size:12.5px;
  line-height:1.45;margin-top:4px}
.loja-efeito-lb{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faded);margin-top:10px}
.item-efeito{font-weight:700;color:var(--win-dim);font-size:13.5px;
  line-height:1.4;margin-top:2px}
.loja-rodape{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-top:11px;padding-top:10px;border-top:1px dotted var(--rule)}
.loja-preco{font-family:Oswald,sans-serif;font-weight:700;font-size:14px;color:var(--ink)}
/* Comprado: nome/descrição perdem contraste (a decisão já foi tomada,
   não precisam competir com os itens ainda à venda) mas continuam
   --faded, não escurecem mais que isso — "já comprei isso" tem que
   continuar legível. O efeito (item-efeito) fica como está, sem
   escurecer: saber o que o item comprado FAZ continua sendo
   informação útil, só o preço/botão vira o badge verde sólido. */
.loja-item.comprado .loja-nome,.loja-item.comprado .item-desc{color:var(--faded)}
.loja-item{border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:10px}
.loja-item:last-child{border-bottom:none;margin-bottom:0}
.loja-item:last-of-type{border-bottom:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:560px){
  .doc-head h1{font-size:20px}
  .bout{grid-template-columns:26px 1fr;row-gap:4px}
  .bout .stamp{grid-column:2;justify-self:start}
  .event{padding-left:36px}
  .verdict{flex-direction:column;align-items:flex-start;gap:14px}
  .inicio-oct{width:85vw;opacity:.05}
  .inicio-item{width:100%}
  .inicio-item-principal{width:100%}
}
/* (revamp fase 5) As regras de celular da tela ANTIGA da carreira
   (3 estados, abas Ficha/Histórico, "Ver ficha", "Mais", Próxima luta
   fixa no rodapé) saíram daqui: o hub novo (estilo.css, "hub da
   carreira") tem o próprio layout de celular e essas regras escondiam
   e fixavam elementos por cima dele. */
/* ---------- carreira no desktop: narração precisa dominar de verdade ----------
   Medido antes de mexer: .pbp (linha da narração) tinha font-size:13px,
   .bout .opp (nome no histórico) herdava os 14px do body em peso 500 — o
   HISTÓRICO já lia mais forte que a AÇÃO, o oposto do que devia. */
@media (min-width:1081px){
  .pbp{font-size:15px}
  .live-head{font-size:15px}
  .live{border-width:2px}
  #bouts{font-size:12.5px}
  .bout .opp{font-size:13px}
}