/* Estilos da aba "Raio X Ofensivo" — arquivo próprio, mesmo padrão de isolamento
   do desarmes.css (não toca em styles.css nem no dsm-*, evita colisão de classe).
   REESCRITO em 2026-08-19 (rework pedido pelo Renato: campinho lotado de gente
   irrelevante, cedido escondido num rodapé cinza — resolvido). */
:root{
  --rx-pitch-green-a:#0e4a37;
  --rx-pitch-green-b:#0a3a2b;
  --rx-panel-bg:rgba(0,0,0,.24);
  --rx-panel-border:rgba(255,255,255,.08);
  --rx-ink-dim:#9fc6b8;
  --rx-card-bg:#f4efe4;
  --rx-card-ink:#1c1c1c;
  --rx-block-bg:#161616;
  --rx-good:#1f9d55;
  --rx-bad:#d64545;
  --rx-gol-gold:#c9971a;
}

#viewRaioX{padding-top:4px}

.rx-subnav{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
.rx-subnav button{
  background:rgba(0,0,0,.22);color:#dff5ea;border:1px solid rgba(255,255,255,.14);border-radius:24px;
  padding:9px 20px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s;
}
.rx-subnav button:hover{background:rgba(255,255,255,.08)}
.rx-subnav button.active{background:var(--gold,#ffd24d);color:#3a2e00;border-color:var(--gold,#ffd24d)}

.rx-controls-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  background:var(--rx-panel-bg);border:1px solid var(--rx-panel-border);border-radius:12px;
  padding:12px 14px;margin-bottom:20px;
}
.rx-control-item{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--rx-ink-dim);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.rx-control-item select,.rx-control-item input{
  background:var(--green-900,#0b3b2e);color:#e7f8f1;border:1px solid rgba(255,255,255,.15);
  border-radius:6px;padding:7px 9px;font-family:inherit;font-size:13px;font-weight:500;
  text-transform:none;letter-spacing:normal;
}
.rx-control-item input[type=number]{width:80px}

.rx-empty{padding:24px;text-align:center;color:var(--rx-ink-dim);font-size:13.5px;background:rgba(0,0,0,.18);border-radius:12px}
.rx-credito{font-size:10.5px;color:var(--rx-ink-dim);text-align:right;margin:-8px 0 14px;opacity:.8}

/* campinhos lado a lado (Time A | Time B), não empilhados -- pedido explícito do Renato. */
/* um campinho por vez, largura total -- pedido do Renato (2026-08-19): lado
   a lado não deixava a formação real (3 no ataque) caber numa linha só. */
.rx-toggle-lado{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
.rx-toggle-lado button{
  display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.22);color:#dff5ea;
  border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:8px 18px 8px 10px;
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s;
}
.rx-toggle-lado button img{height:24px;width:24px;object-fit:contain}
.rx-toggle-lado button:hover{background:rgba(255,255,255,.08)}
.rx-toggle-lado button.active{background:var(--gold,#ffd24d);color:#3a2e00;border-color:var(--gold,#ffd24d)}

.rx-download-row{display:flex;justify-content:center;margin-bottom:18px}
.rx-download-btn{
  display:flex;align-items:center;gap:8px;background:var(--gold,#ffd24d);color:#3a2e00;
  border:none;border-radius:24px;padding:10px 22px;font-family:inherit;font-size:14px;font-weight:800;
  cursor:pointer;transition:filter .15s,opacity .15s;box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.rx-download-btn:hover{filter:brightness(1.08)}
.rx-download-btn:disabled{opacity:.6;cursor:wait}

/* Envelope que ENCOLHE visualmente o campinho gigante (feito pra exportar
   em resolução alta) pra caber numa tela normal -- pedido do Renato
   (2026-08-20): "o campinho tá aparecendo com um zoom gigantesco no site".
   O DOM interno (#rxPitchAtivo) continua no tamanho real/nativo; só a
   aparência visual encolhe via transform:scale, calculado em JS
   (rxAplicarEscalaTela). O download desliga esse scale antes de capturar
   (ver rxBaixarImagemDe), então o arquivo baixado sai sempre em resolução
   cheia, independente do zoom aplicado na tela. */
.rx-pitch-scale-wrap{width:100%;overflow:hidden}

/* ---- campinho em pé (retrato) — peça grande pra exportar, não largura de página ---- */
/* SEM overflow-x:auto de propósito: um scroll ANINHADO some de screenshots
   de página inteira (achado real, 2026-08-19 -- metade dos jogadores
   "sumiam" porque estavam dentro da área não capturada da rolagem interna).
   Largura segue o conteúdo (a página inteira rola, não uma caixa aninhada). */
.rx-pitch{
  position:relative;border-radius:18px;width:fit-content;margin:0 auto;
  background:var(--rx-pitch-green-b);
  border:1px solid var(--rx-panel-border);box-shadow:0 10px 30px rgba(0,0,0,.32);
  padding:16px 14px 20px;
}
.rx-pitch-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.rx-pitch-head img{height:32px;width:32px;object-fit:contain}
.rx-pitch-head .rx-team-name{color:#f7fff9;font-size:16px;font-weight:800;letter-spacing:.01em}
.rx-pitch-sub{text-align:center;font-size:10px;color:var(--rx-ink-dim);text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px}

/* canvas grande com cada posto na posição REAL (x/y vem dos prováveis) --
   pedido explícito do Renato: "jogadores nos seus lugares corretos no
   campo", não mais linhas/colunas inventadas. A margem ao redor do gramado
   (fundo escuro, sem listra) é onde os cards+cedido respiram; o gramado em
   si (listrado, com marcação) fica só na área central, proporção real de
   campo -- achado real (2026-08-19, 2a intervenção): sem marcação de
   verdade "nem parecia campo de futebol" (feedback direto do Renato). */
.rx-pitch-canvas{
  position:relative;margin:0 auto;border-radius:12px;
  background:radial-gradient(ellipse at center, #0d3527, #08251b);
}
.rx-pitch-gramado{
  /* container-type habilita `cqw` pra marca d'agua de texto medir a
     largura DESTE campo (que vem em px inline do JS) em vez da janela.
     Seguro aqui: o elemento e absoluto e tem width/height explicitos. */
  container-type:inline-size;
  position:absolute;border-radius:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 12px 40px rgba(0,0,0,.4);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 8.75%, rgba(0,0,0,.045) 8.75% 17.5%),
    linear-gradient(180deg, var(--rx-pitch-green-a), var(--rx-pitch-green-b));
}
.rx-pitch-svg{position:absolute;inset:0;width:100%;height:100%}
/* Marca d'água no meio do campinho -- pedido do Renato (2026-08-21),
   grande e centralizada, bem transparente pra não brigar com os cards por
   cima (z-index natural: fica ANTES dos postos no DOM, então pinta
   embaixo). */
.rx-pitch-watermark{
  /* Virou TEXTO em 07/set/2026, junto do rename pra H2HScout: era um <img> de
     PNG dimensionado por width:72%, agora e palavra, entao o tamanho vem de
     font-size. `nowrap` porque marca d'agua quebrada em duas linhas deixa de
     ler como textura. */
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Archivo Black',Archivo,system-ui,sans-serif;
  font-size:13cqw;letter-spacing:-.05em;line-height:1;white-space:nowrap;
  color:#fff;opacity:.09;pointer-events:none;user-select:none;
}
/* transform exato (ancorado no centro do CARD, não do par) vem inline por posto, calculado em JS. */
.rx-posto{position:absolute;z-index:1}
.rx-posto:hover{z-index:5}
.rx-posto-label{text-align:center;font-size:27px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.85);margin-bottom:16px;text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* ---- card premium do jogador — ÚNICO (produção + cedido empilhados dentro
   do mesmo card, não mais uma caixa lateral) -- achado real (2026-08-19, 3a
   intervenção): a caixa de cedido pendurada do lado fazia o conjunto
   parecer descentralizado da posição real, mesmo o card estando certo. Um
   card só, centralizado de verdade, sem perder o peso visual do cedido
   (ele continua tendo a própria seção escura/números grandes por dentro). */
/* Modal (2026-08-20, 5a intervenção): reescrito pra usar o MESMO modelo
   visual premium claro do card resumo do campinho (fundo creme, tinta
   escura, verde=conquistado/oportunidade, vermelho=zero) -- antes era um
   card escuro/âmbar isolado, sem nada a ver com o resto do site. */
.rx-card{
  background:var(--rx-card-bg);color:var(--rx-card-ink);border-radius:26px;overflow:hidden;
  width:760px;box-shadow:0 18px 46px rgba(0,0,0,.32);border:7px solid transparent;
}
.rx-card.rx-destaque{border-color:#ffd24d;box-shadow:0 0 0 8px rgba(255,210,77,.3),0 18px 44px rgba(0,0,0,.32)}
.rx-card-foto{
  width:100%;aspect-ratio:1/1;background:#cfcabb center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:92px;font-weight:800;color:#8a8370;
}
.rx-card-foto img{width:100%;height:100%;object-fit:cover}
.rx-card-nome{font-size:42px;font-weight:800;text-align:center;padding:22px 16px 8px;line-height:1.15;min-height:76px;display:flex;align-items:center;justify-content:center}
.rx-duvida-tag{display:block;font-size:22px;font-weight:700;color:#a35b00;text-transform:uppercase;letter-spacing:.04em}
.rx-card-estrela{color:var(--rx-gol-gold);font-size:30px;text-align:center;font-weight:800;letter-spacing:.04em;padding-bottom:14px;margin-top:-10px}

.rx-card-block-title{font-size:23px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:14px 6px;margin:0 26px;border-radius:16px 16px 0 0}
.rx-card-block-title-produz{background:rgba(31,157,85,.2);color:var(--rx-good);margin-top:22px}
.rx-card-goloassist{display:flex;gap:4px;padding:0 26px}
.rx-card-goloassist>div{flex:1;text-align:center;padding:20px 6px;background:rgba(31,157,85,.09);display:flex;flex-direction:column;align-items:center}
.rx-card-goloassist>div:first-child{border-radius:0 0 0 16px}
.rx-card-goloassist>div:last-child{border-radius:0 0 16px 0}
.rx-goloassist-num{font-size:96px;font-weight:900;color:var(--rx-good);line-height:1;font-variant-numeric:tabular-nums}
.rx-goloassist-lbl{font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#3d6b4d;margin-top:5px}

.rx-card-stats{padding:18px 30px 8px;font-size:28px}
.rx-card-stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.rx-card-stat-row span:first-child{color:#7a7a70;font-size:23px;text-transform:uppercase;letter-spacing:.02em}
.rx-card-stat-row span:last-child{font-weight:800;font-variant-numeric:tabular-nums}
.rx-pill{border-radius:20px;padding:2px 12px}
.rx-pill-good{background:rgba(31,157,85,.18);color:var(--rx-good)}

/* ---- seção de cedido: mesmo tratamento visual do bloco "Rival cedeu" do
   card resumo -- container neutro em azul petróleo, número verde quando >0
   (oportunidade), vermelho quando zero. ---- */
.rx-cede-secao{background:rgba(58,90,107,.06);border-top:1px solid rgba(58,90,107,.18);margin-top:20px}
.rx-cede-topo-label{
  background:rgba(58,90,107,.16);color:#3a5a6b;font-size:25px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;text-align:center;padding:16px 20px;margin:0 26px;border-radius:0 0 16px 16px;
}
.rx-cede-topo-numeros{display:flex;justify-content:center;gap:26px;padding:26px 24px 30px}
.rx-cede-topo-numeros>div{
  display:flex;flex-direction:column;align-items:center;flex:1;
  background:rgba(58,90,107,.08);border-radius:22px;padding:18px 8px;
}
.rx-cede-num{font-size:104px;font-weight:900;color:#c23a3a;line-height:1;font-variant-numeric:tabular-nums}
.rx-cede-num-positivo{color:var(--rx-good)}
.rx-cede-num-lbl{font-size:23px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#7a7a70;margin-top:7px}

.rx-cede-vazio{padding:38px 24px}
.rx-cede-vazio-txt{color:#7a7a70;font-size:25px;text-align:center;padding-top:10px}

/* granulação: "quase ilegível" (Renato, 2026-08-19) -- salto grande aqui de propósito, não incremento. */
.rx-cede-granular{border-top:1px dashed rgba(58,90,107,.25);padding:20px 26px 30px;display:flex;flex-direction:column;gap:18px}
.rx-cede-evento{display:flex;align-items:center;gap:19px;background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
/* Escudo do time em círculo branco -- pedido do Renato (2026-08-20):
   "escudo dos times em fundo redondo branco, nos jogadores que são
   referência de cedido pelo rival". */
.rx-cede-evento-escudo-bg{
  width:52px;height:52px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.rx-cede-evento-escudo{width:36px;height:36px;object-fit:contain}
.rx-cede-evento-foto{
  width:80px;height:80px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#cfcabb;
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#8a8370;
}
.rx-cede-evento-foto img{width:100%;height:100%;object-fit:cover}
.rx-cede-evento-info{min-width:0}
.rx-cede-evento-nome{font-size:26px;font-weight:800;color:var(--rx-card-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-cede-evento-time{font-weight:400;color:#7a7a70;font-size:22px}
.rx-cede-evento-scouts{display:flex;flex-wrap:wrap;gap:13px;margin-top:9px;font-size:21px;color:#5a5a52}
.rx-cede-evento-scouts .rx-pill-gol{background:rgba(58,90,107,.14);color:#3a5a6b;font-weight:800;padding:2px 10px;border-radius:10px}
.rx-cede-evento-mais{text-align:center;color:#9a9a90;font-size:16px;padding-top:4px;font-style:italic}

/* ---- campinho GERAL DA RODADA — pódio (1º/2º/3º) empilhado por posto ----
   Modelo A aprovado pelo Renato (2026-08-19): "disparado o melhor". Cards
   bem mais compactos que o card premium do confronto individual (aqui são
   VÁRIOS jogadores de times diferentes disputando o mesmo posto, não um
   card cheio por posição). Cor da borda esquerda = critério de ranking
   (ouro=cruzamento forte, verde=produção, vermelho=fragilidade do rival),
   pra a hierarquia de prioridade ficar visível sem precisar ler o texto. */
.rx-posto-rodada{position:absolute;z-index:1;width:1100px}
.rx-posto-rodada .rx-posto-label{font-size:27px;margin-bottom:19px}
.rx-posto-rodada:hover{z-index:5}
.rx-podio-stack{display:flex;flex-direction:column;gap:22px}
.rx-podio-item{
  display:flex;align-items:center;gap:28px;background:var(--rx-card-bg);color:var(--rx-card-ink);
  border-radius:24px;padding:40px 34px;border-left:16px solid transparent;
  /* SEM box-shadow de propósito: qualquer box-shadow aqui (mesmo sem blur,
     só deslocamento sólido) virava um esmaecimento acinzentado sobre boa
     parte do card na exportação html2canvas -- não reproduz no navegador
     normal (achado real, 2026-08-19: comparei screenshot direto vs.
     exportado, só sumiu removendo o shadow por completo). O contraste
     forte contra o gramado escuro + a borda colorida já dão separação
     visual suficiente sem precisar de sombra. */
}
.rx-podio-tier-1{border-left-color:#ffd24d}
.rx-podio-tier-2{border-left-color:var(--rx-good)}
.rx-podio-tier-3{border-left-color:var(--rx-bad)}
.rx-podio-medalha{font-size:68px;flex-shrink:0;width:80px;text-align:center}
.rx-podio-foto{
  width:175px;height:175px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#cfcabb;
  display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:800;color:#8a8370;
}
.rx-podio-foto img{width:100%;height:100%;object-fit:cover}
.rx-podio-info{min-width:0;flex:1}
.rx-podio-nome{font-size:44px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:14px}
.rx-podio-escudo-mini{width:43px;height:43px;object-fit:contain;flex-shrink:0}
.rx-duvida-tag-mini{font-size:23px;font-weight:700;color:#a35b00;text-transform:uppercase;letter-spacing:.03em}
.rx-podio-vs{font-size:31px;color:#6a6a60;display:flex;align-items:center;gap:10px;margin-top:7px}
.rx-podio-tier-label{font-size:25px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-top:9px;opacity:.8}
.rx-podio-numeros{display:flex;flex-direction:column;gap:13px;flex-shrink:0;text-align:right}
.rx-podio-num-grupo{display:flex;flex-direction:column;align-items:flex-end}
.rx-podio-num-grupo span:first-child{font-size:50px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.rx-podio-good span:first-child{color:var(--rx-good)}
.rx-podio-bad span:first-child{color:#c23a3a}
.rx-podio-num-lbl{font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#8a8370}
.rx-podio-vazio{padding:32px;text-align:center;color:var(--rx-ink-dim);font-size:24px;background:rgba(0,0,0,.18);border-radius:16px;width:1100px}

/* ---- modal de card ampliado (clique em qualquer posto do confronto
   individual, só essa tela) -- pedido do Renato (2026-08-20): "eu poder
   dar zoom, ver os detalhes daquele card". Mostra o card no tamanho
   natural (já grande/legível por si só), só que centralizado numa
   janela própria em vez de espremido no campinho encolhido da tela. ---- */
/* ---- card RESUMO (2026-08-20, redesign) -- o que aparece no campinho de
   confronto individual (tela e download). Só Gol+Assist conquistados e
   cedidos, foto pequena (não protagonista) -- todo o detalhe granular
   (finalização/xG/xA/G.chance, lista de quem marcou contra) fica
   RESTRITO ao card completo, que só aparece no modal ao clicar. Vertical
   pra aproveitar melhor o espaço, visual premium parecido com o pódio do
   campinho geral. ---- */
.rx-resumo{
  background:var(--rx-card-bg);color:var(--rx-card-ink);border-radius:25px;
  width:450px;box-sizing:border-box;border:7px solid transparent;
  display:flex;flex-direction:column;align-items:center;padding:26px 22px 28px;
  /* SEM box-shadow de propósito: mesmo bug do html2canvas já resolvido no
     pódio do campinho geral (2026-08-20) -- qualquer box-shadow aqui virava
     um esmaecimento acinzentado sobre metade do card na exportação, não
     reproduz no navegador normal. Esqueci de aplicar a mesma correção
     quando criei esse card resumo -- achado real de novo, mesmo padrão. */
}
/* SEM box-shadow de propósito, mesmo motivo do .rx-resumo acima (2026-08-20:
   Renato reportou "borrado, sombreado" do lado direito do campinho -- era
   esse box-shadow do destaque, mesmo bug de novo). Borda dourada mais grossa
   compensa a perda da sombra. */
.rx-resumo-destaque{border-color:#ffd24d;border-width:9px}
.rx-resumo-foto{
  width:142px;height:142px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#cfcabb;
  display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:#8a8370;
}
.rx-resumo-foto img{width:100%;height:100%;object-fit:cover}
.rx-resumo-nome{font-size:33px;font-weight:800;text-align:center;margin-top:15px;line-height:1.15}
.rx-duvida-tag-resumo{display:block;font-size:18px;font-weight:700;color:#a35b00;text-transform:uppercase;letter-spacing:.03em;margin-top:3px}
.rx-resumo-estrela{color:var(--rx-gol-gold);font-size:20px;text-align:center;font-weight:800;letter-spacing:.03em;margin-top:6px}
.rx-resumo-bloco{width:100%;margin-top:19px;border-radius:21px;overflow:hidden}
.rx-resumo-bloco-label{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:10px 4px}
.rx-resumo-produz .rx-resumo-bloco-label{background:rgba(31,157,85,.2);color:var(--rx-good)}
/* Container do bloco CEDIDO fica sempre num azul petróleo neutro (nunca
   vermelho de fundo); só o NÚMERO em si muda de cor por valor -- vermelho
   quando zero (rival nunca cedeu nada ali, sinal ruim pro nosso jogador),
   verde quando > 0 (oportunidade real). Pedido exato do Renato
   (2026-08-20, 4a intervenção): "azul petróleo na parte dos cedidos, mas
   verde onde tem dados acima de zero e vermelho no que for zero". */
.rx-resumo-cede .rx-resumo-bloco-label{background:rgba(58,90,107,.2);color:#3a5a6b}
.rx-resumo-numeros{display:flex}
.rx-resumo-numeros>div{flex:1;text-align:center;padding:14px 4px}
.rx-resumo-produz .rx-resumo-numeros{background:rgba(31,157,85,.09)}
.rx-resumo-cede .rx-resumo-numeros{background:rgba(58,90,107,.09)}
.rx-resumo-num{display:block;font-size:50px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.rx-resumo-produz .rx-resumo-num{color:var(--rx-good)}
.rx-resumo-cede .rx-resumo-num{color:#c23a3a}
.rx-resumo-cede .rx-resumo-num-positivo{color:var(--rx-good)}
.rx-resumo-lbl{display:block;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#7a7a70;margin-top:4px}

.rx-posto-clicavel{cursor:zoom-in}
.rx-card-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.rx-card-modal.rx-card-modal-aberto{display:flex}
.rx-card-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.rx-card-modal-inner{position:relative;max-width:92vw;max-height:92vh;overflow:auto;border-radius:26px}
.rx-card-modal-close{
  position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  background:var(--gold,#ffd24d);color:#3a2e00;border:none;font-size:20px;font-weight:800;
  cursor:pointer;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.rx-card-modal-content{display:flex}
.rx-card-modal-content .rx-card{margin:0 auto}