/* BRASLOL 2 - modal ANALISE DO DRAFT (js/draft/draft-analise.js). Fica DENTRO do palco do draft (1620x941, escalado por JS): mesmas medidas do design.
   Classes comecam com dx- . Sem style="" no HTML (CSP): so classes aqui e style.setProperty() no JS (--w nas barras, numeros 0-100).
   Visual igual ao das telas de Configuracoes e Salvar (fundo escuro translucido, vidro, sem borda). Cores de l (seu time) e r (adversario) = as da tela de estatisticas do fim da partida (match.css: .m-edh e .m-esw). n = neutro. */


.dx-ov{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(8,10,28,.30),rgba(8,10,28,.30)),url(../assets/img/backgrounds/draft-analise.webp) center/cover no-repeat #080a1c;opacity:0;transition:opacity .22s}   /* fundo geral da analise (assets/img/backgrounds/draft-analise.webp), opaco: esconde a tela do draft; a 1a camada e o escurecimento (0 a 1: mais alto = imagem mais escura) */
.dx-ov.on{opacity:1}
@property --pm{syntax:'<percentage>';inherits:true;initial-value:50%}   /* % de vantagem da barra (.dx-bar); registrado para o navegador conseguir animar o ponto de corte */
.dx-box{position:relative;box-sizing:border-box;width:1440px;height:894px;display:flex;flex-direction:column;padding:22px 28px 20px;overflow:hidden;border:0;border-radius:5px;background:linear-gradient(135deg,rgba(46,54,78,.34),rgba(28,34,56,.40));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:none;transform:translateY(10px);transition:transform .25s}
.dx-ov.on .dx-box{transform:none}
.dx-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.dx-hd h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.dx-hd small{display:block;margin-top:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* x1: logos + % + barra */
.dx-hero{display:grid;grid-template-columns:1fr 440px 1fr;align-items:center;gap:24px;margin:14px 0 14px;padding:16px 22px;border-radius:3px;background:linear-gradient(135deg,rgba(32,38,78,.34),rgba(14,18,44,.42))}
.dx-tm{display:flex;align-items:center;gap:16px;min-width:0}
.dx-tm.r{flex-direction:row-reverse;text-align:right}
.dx-lg{width:96px;height:96px;object-fit:contain;flex:none}
.dx-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.dx-tx small{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.dx-tm.l .dx-tx small{color:#9b99ea}.dx-tm.r .dx-tx small{color:#dda6ac}
.dx-tx b{font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-tx span{font-size:11.5px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-pc{flex:none;font-size:50px;font-weight:700;line-height:1;letter-spacing:-.01em}
.dx-pc sup{font-size:20px;margin-left:2px;vertical-align:super}
.dx-tm.l .dx-pc{color:#9b99ea}.dx-tm.r .dx-pc{color:#dda6ac}
.dx-mid{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.dx-bar{position:relative;width:100%;height:14px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.12);transition:--pm .9s cubic-bezier(.3,.7,.2,1)}   /* azul ate --pm, vermelho dali em diante, corte seco no mesmo ponto: nenhuma cor fica por baixo da outra, entao o vermelho nao vaza como borda/filete no azul */

.dx-bar::before,.dx-bar::after{content:"";position:absolute;top:0;bottom:0;box-sizing:border-box}   /* a barra geral e feita de 2 pedacos (azul ate --pm, vermelho dali em diante), cada um com degrade e contorno da propria cor, como no radar */
.dx-bar::before{left:0;width:var(--pm);border-radius:7px 0 0 7px;background:linear-gradient(90deg,rgba(91,85,235,.95),rgba(91,85,235,.1));box-shadow:inset -2px 0 0 0 #5b55eb}
.dx-bar::after{right:0;width:calc(100% - var(--pm));border-radius:0 7px 7px 0;background:linear-gradient(270deg,rgba(97,38,68,.95),rgba(97,38,68,.1));box-shadow:inset 2px 0 0 0 #612644}
.dx-br{position:absolute;z-index:1;left:50%;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:rgba(255,255,255,.85)}
.dx-vd{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
/* 3 colunas */
.dx-cols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.dx-col{min-height:0;box-sizing:border-box;padding:14px 16px;border-radius:3px;background:linear-gradient(135deg,rgba(32,38,78,.34),rgba(14,18,44,.42));overflow-x:hidden;overflow-y:auto}
/* scrollbar minimalista das colunas: fina, sem trilho e sem setinhas. NAO ponha scrollbar-width/scrollbar-color no .dx-col: no Chrome/Edge atuais eles anulam o ::-webkit-scrollbar e as setinhas voltam */
.dx-col::-webkit-scrollbar{width:5px;height:5px}
.dx-col::-webkit-scrollbar-button{display:none;width:0;height:0}
.dx-col::-webkit-scrollbar-track,.dx-col::-webkit-scrollbar-corner{background:transparent}
.dx-col::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border:0;border-radius:3px}
.dx-col::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}
@supports (-moz-appearance:none){.dx-col{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}}   /* Firefox */
.dx-col.dx-fit{overflow-y:hidden}   /* coluna do meio: sem scrollbar (o conteudo cabe) */
.dx-col h3{margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.22);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.dx-col h3:not(:first-child){margin-top:14px}
.dx-col ul{margin:0;padding:0;list-style:none}

.dx-lw{border-bottom:1px solid rgba(255,255,255,.07)}
.dx-lr{display:grid;grid-template-columns:34px 1fr 52px 1fr 34px;align-items:center;gap:8px;width:100%;height:48px;margin:0;padding:0;border:0;border-radius:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .15s}
.dx-lr:hover,.dx-lw.open .dx-lr{background:rgba(255,255,255,.05)}
.dx-lr:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.dx-lc{display:flex;align-items:center;gap:9px;min-width:0;font-size:12.5px;opacity:.7}
.dx-lc.l{justify-content:flex-end;text-align:right}   /* os dois campeoes ficam colados no centro, um de cada lado da pilula de pontos */
.dx-lc.r{justify-content:flex-start;text-align:left}
.dx-lc.w{opacity:1}
.dx-lc b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-lv{justify-self:center;min-width:34px;padding:3px 0;border-radius:3px;text-align:center;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.dx-lk{display:flex;align-items:center;justify-content:flex-start;padding-left:6px;height:24px;border-left:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.7)}   /* o "| v" da direita: seta sempre para baixo, colada no "|" */
.dx-cv{width:9px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.dx-lr:hover .dx-lk{color:#fff}
.dx-ld{padding:0 4px 0 1px}   /* 0 = o texto do detalhe comeca na mesma borda esquerda da selecao (.dx-lr:hover) da lane; para dar um respiro, e so subir esse 0 (ex.: 10px) */
.dx-ld[hidden]{display:none}
.dx-ph{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:9px 0;line-height:1.3;font-size:11px;color:rgba(255,255,255,.62)}
.dx-ph + .dx-ph{padding-top:0}   /* dois .dx-ph seguidos (texto "sem vantagem" + Early/Mid/Late): o de baixo nao repete o respiro de cima, entao fica 9px acima e 9px abaixo (centrado) */
.dx-ci{width:34px;height:34px;flex:none;border-radius:4px;object-fit:cover;object-view-box:inset(7%)}   /* inset(7%) = mesmo recorte do draft (.d-cimg/.d-mi em draft.css): tira a borda preta que ja vem na imagem do campeao */
.dx-lv.l{background:rgba(92,91,246,.38);color:#d3d2ff}.dx-lv.r{background:rgba(211,93,123,.38);color:#ffd3dc}

.dx-gl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:12px 0 0;font-size:11.5px;color:rgba(255,255,255,.75)}
.dx-gl b{grid-row:span 2;align-self:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.dx-gl span{display:flex;align-items:center;gap:8px}
.dx-dm{display:inline-flex;align-items:center;gap:12px}
.dx-d1{display:inline-flex;align-items:center;gap:4px}
.dx-dmi{width:12px;height:12px;display:block;object-fit:contain}

.dx-sr{display:grid;grid-template-columns:92px 26px 1fr 26px 92px;align-items:center;gap:8px;height:38px;border-bottom:1px solid rgba(255,255,255,.07)}
.dx-sn{font-size:12px;font-weight:600;line-height:1.2}
.dx-sv{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.55)}
.dx-sv.l{text-align:right}
.dx-sv.w.l{color:#9b99ea}.dx-sv.w.r{color:#dda6ac}
.dx-sw{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:right;color:rgba(255,255,255,.5)}
.dx-sw.l{color:#9b99ea}.dx-sw.r{color:#dda6ac}
.dx-dual{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.dx-half{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.dx-half.l .dx-f{margin-left:auto;background:linear-gradient(90deg,rgba(91,85,235,.95),rgba(91,85,235,.1));box-shadow:inset 2px 0 0 0 #5b55eb}   /* degrade do grafico de diferenca de ouro, INVERTIDO (forte na ponta, some para o centro) + linha de 2px so na ponta (esquerda), que acompanha a curva da barra; sem largura nao aparece nada */
.dx-half.r .dx-f{background:linear-gradient(270deg,rgba(97,38,68,.95),rgba(97,38,68,.1));box-shadow:inset -2px 0 0 0 #612644}
.dx-f{display:block;height:100%;width:var(--w,0%);border-radius:4px;transition:width .9s cubic-bezier(.3,.7,.2,1)}
.dx-rv{display:block;width:100%;height:auto}   /* radar dos atributos (dxRadar): viewBox 420x184, centro (210,96), raio 72 */
.dx-rg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1}
.dx-rg.o{stroke:rgba(255,255,255,.5);stroke-width:1.4}
.dx-gs0{stop-color:#5b55eb}.dx-gs1{stop-color:#612644}   /* mesmas cores do grafico de diferenca de ouro do fim da partida (.m-gs0 / .m-gs1 em match.css); aqui o degrade (stop-opacity no JS) e mais fraco para um poligono nao cobrir o outro */
.dx-rd{transform-origin:210px 96px;transform:scale(.15);opacity:0;stroke-width:2;stroke-linejoin:round;transition:transform .9s cubic-bezier(.3,.7,.2,1),opacity .6s}
.dx-ov.on .dx-rd{transform:none;opacity:1}
.dx-rd.l{stroke:#5b55eb;stroke-opacity:.7;stroke-width:1.5}
.dx-rd.r{stroke:#612644;stroke-opacity:.7;stroke-width:1.5}
.dx-rl{font-size:12px;font-weight:600;letter-spacing:.04em;fill:rgba(255,255,255,.85)}
.dx-rl.m{text-anchor:middle}.dx-rl.s{text-anchor:start}.dx-rl.e{text-anchor:end}

.dx-nt{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:10px;min-height:34px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px;line-height:1.35}
.dx-np{justify-self:start;min-width:40px;padding:3px 0;border-radius:3px;text-align:center;font-size:11.5px;background:rgba(255,255,255,.1)}
/* aviso sem pilula ("Nenhuma sinergia...", "Nenhuma diferenca..."): so ha o texto, entao ocupa a linha toda (senao cai na coluna de 44px e quebra palavra por palavra) */
.dx-nt.n{grid-template-columns:1fr}
.dx-nt.l .dx-np{background:rgba(92,91,246,.38);color:#d3d2ff}.dx-nt.r .dx-np{background:rgba(211,93,123,.38);color:#ffd3dc}
.dx-pl{display:flex;flex-direction:column;gap:2px;padding:6px 0 6px 10px;border-left:3px solid rgba(255,255,255,.25);margin-bottom:6px;font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.8)}
.dx-pl b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.dx-pl.w{border-left-color:#9b99ea}.dx-pl.r{border-left-color:#d35d7b}

/* sinergias de dupla (dxSynRow): pilula de pontos (mesmas cores de .dx-nt) + 2 icones + nome, ganho em destaque e o por que mais fraco embaixo */
.dx-yi{display:grid;grid-template-columns:44px 1fr;align-items:start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px;line-height:1.35}
.dx-yi .dx-np{margin-top:2px}
.dx-yi.l .dx-np{background:rgba(92,91,246,.38);color:#d3d2ff}.dx-yi.r .dx-np{background:rgba(211,93,123,.38);color:#ffd3dc}
.dx-yb{min-width:0}
.dx-yb p{margin:0}
.dx-yh{display:flex;align-items:center;gap:5px;margin-bottom:5px}
.dx-yh .dx-ci{width:28px;height:28px}
.dx-yh b{margin-left:5px;font-size:12.5px;font-weight:600}
.dx-yg{margin-bottom:2px;font-weight:600;color:#fff}
.dx-yx{font-size:11.5px;color:rgba(255,255,255,.66)}
.dx-ft{display:flex;justify-content:flex-end;gap:12px;margin-top:14px}