/* BRASLOL 2 - tela de DRAFT (so design).
   Palco fixo 1620x941 escalado por JS (--k), igual ao painel da carreira. Fundo: assets/img/backgrounds/draft.webp.
   Classes comecam com d- . Sem style="" no HTML (CSP): so classes aqui e style.setProperty() no JS (CSSOM e permitido).
   Reaproveita as animacoes hin / scrin (style.css / braslol.css). */

body[data-screen="draft"] #topbar{display:none}
body[data-screen="draft"] #app{background:#0b0e1a;overflow:hidden;touch-action:none;padding-left:0;padding-right:0}

.d-root{position:relative;flex:1;min-height:0;width:100%;overflow:hidden;
  --d:"Bahnschrift","DIN Alternate","DIN 1451 Std","Barlow Semi Condensed","Roboto Condensed","Segoe UI",system-ui,-apple-system,sans-serif;
  font-family:var(--d);color:#fff;user-select:none;-webkit-user-select:none}
:where(.d-root) [hidden]{display:none!important}
:where(.d-root) button{font-family:inherit;color:inherit;margin:0;padding:0;border:0;background:none;cursor:pointer}
:where(.d-root) h2,:where(.d-root) h3,:where(.d-root) h4{margin:0}
:where(.d-root) p{margin:0;max-width:none}
.d-root :focus-visible{outline:2px solid #fff;outline-offset:2px}
/* icones de campeao (Data Dragon) vem com moldura preta + sombra interna de ~7% em cada lado: object-view-box recorta so ela (zoom exato, sem mudar o tamanho da caixa). Sobrou/faltou borda? Ajuste o 6% */
.d-cimg,.d-fimg,.d-aimg,.d-bi,.d-mi{object-view-box:inset(7%)}

/* ---- fundo ---- */
.d-bg{position:absolute;inset:0;background:#0b0e1a url(../assets/img/backgrounds/draft.webp) center/cover no-repeat;animation:scrin 1s ease both}
.d-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,10,28,.55) 0%,rgba(8,10,28,.2) 35%,rgba(8,10,28,0) 60%),linear-gradient(180deg,rgba(8,10,28,.35) 0%,rgba(8,10,28,0) 22%)}

/* ---- palco ---- */
.d-stage{position:absolute;left:0;top:0;width:var(--sw,1620px);height:941px;transform:scale(var(--k,1));transform-origin:0 0;opacity:0}
.d-stage.fit{opacity:1}
.d-wrap{position:absolute;left:50%;top:0;width:1620px;height:941px;margin-left:-810px}   /* so o painel central fica fixo e centralizado; bans, linha do tempo e picks ocupam a largura toda do palco (colados nas laterais da tela) */
.d-stage.re .d-panel,.d-stage.re>.d-bans,.d-stage.re>.d-timer,.d-stage.re>.d-pks{animation:none}

/* ---- topo: sair + titulo ---- */
.d-top{position:absolute;left:0;top:0;width:100%;height:46px;z-index:5}
.d-back{position:absolute;left:30px;top:0;height:46px;display:flex;align-items:center;gap:12px;padding:2px 16px 0;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color .15s}
.d-back:hover{color:#fff}
.d-back svg.c-chv{width:9px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.d-ttl{position:absolute;left:50%;top:0;height:46px;display:flex;align-items:center;transform:translateX(-50%);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.d-phase{position:absolute;left:8px;right:8px;bottom:7px;line-height:14px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}   /* fase, de quem e a vez e segundos: dentro do painel central (dMid), em cima do gif, no rodape, abaixo da linha do PATCH e dos quadrados */

/* ---- painel central (campeoes / analise) ---- */
.d-panel{position:absolute;left:260px;top:68px;width:1100px;height:540px;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(135deg,rgba(32,38,78,.34),rgba(14,18,44,.42));backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  border:0;border-radius:3px;animation:hin .55s ease both .15s}
.d-view{flex:1;min-height:0;overflow:hidden}
.d-track{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);width:100%;height:100%}   /* as duas paginas ficam empilhadas no mesmo lugar e so trocam por fade (antes a trilha deslizava de lado) */
.d-pg{will-change:opacity;grid-area:1/1;min-width:0;height:100%;display:flex;flex-direction:column;transition:opacity .22s ease,visibility 0s linear .22s}   /* saindo: some em .22 s e so depois fica invisivel */
#d-pg2,.d-panel.pg2 #d-pg1{opacity:0;visibility:hidden}
.d-panel.pg2 #d-pg2{opacity:1;visibility:visible;transition:opacity .22s ease .12s,visibility 0s}   /* entrando: espera a outra sumir (.12 s) para nao sobrepor */
.d-panel:not(.pg2) #d-pg1{opacity:1;visibility:visible;transition:opacity .22s ease .12s,visibility 0s}
.d-ph{display:flex;align-items:center;gap:18px;height:58px;flex:none;margin:0 20px;border-bottom:1px solid rgba(255,255,255,.35)}
.d-ph h2{margin-right:auto!important;font-size:15px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}
.d-lanes{display:flex;gap:6px}
.d-ln{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:0;border-radius:2px;background:rgba(255,255,255,.05);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);transition:background .15s,color .15s,border-color .15s}
.d-ln:hover{background:rgba(255,255,255,.16);color:#fff}
.d-ln.on{background:rgba(255,255,255,.3);color:#fff}
/* icones das lanes: UMA imagem (assets/img/ui/roles.png, 2172x724) recortada por CSS. Ordem na imagem: Top, Jungle, Mid, ADC, Support (cada lane tem o proprio icone, sem girar nada).
   Cada recorte e um quadrado de 330x330 da imagem centralizado no icone; --s = tamanho na tela. */
.d-li{--s:56px;display:block;flex:none;width:var(--s);height:var(--s);background:url(../assets/img/ui/roles.png) no-repeat;background-size:calc(var(--s)*6.58182) calc(var(--s)*2.19394)}
.d-l-top{background-position:calc(var(--s)*-0.35455) calc(var(--s)*-0.61667)}
.d-l-jg{background-position:calc(var(--s)*-1.59242) calc(var(--s)*-0.58182)}
.d-l-mid{background-position:calc(var(--s)*-2.85) calc(var(--s)*-0.60455)}
.d-l-adc{background-position:calc(var(--s)*-4.04848) calc(var(--s)*-0.59697)}
.d-l-sup{background-position:calc(var(--s)*-5.33333) calc(var(--s)*-0.56818)}
.d-ln .d-li{--s:24px}
.d-search{display:flex;align-items:center;gap:8px;width:210px;height:30px;box-sizing:border-box;padding:0 10px;border:0;border-radius:2px;background:rgba(0,0,0,.25)}
.d-search:focus-within{background:rgba(0,0,0,.4)}
.d-search svg.d-si{width:15px;height:15px;fill:none;stroke:rgba(255,255,255,.7);stroke-width:2;stroke-linecap:round;flex:none}
.d-search input{flex:1;min-width:0;border:0;outline:0;background:none;color:#fff;font:inherit;font-size:13px;letter-spacing:.04em;user-select:text;-webkit-user-select:text}
.d-search input::placeholder{color:rgba(255,255,255,.5)}

/* grade de campeoes (unica area que rola) */
.d-grid{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;grid-template-columns:repeat(auto-fill,79px);justify-content:center;gap:8px 13px;padding:14px 14px;align-content:start;touch-action:pan-y}
/* scrollbar minimalista (so a lista de campeoes): fina e sem setinhas. NAO ponha scrollbar-width/scrollbar-color no .d-grid: no Chrome/Edge atuais eles anulam o ::-webkit-scrollbar e as setinhas voltam */
.d-grid::-webkit-scrollbar{width:6px;height:6px}
.d-grid::-webkit-scrollbar-button{display:none;width:0;height:0}
.d-grid::-webkit-scrollbar-track,.d-grid::-webkit-scrollbar-corner{background:transparent}
.d-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border:0;border-radius:3px;background-clip:border-box}
.d-grid::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5);border:0}
@supports (-moz-appearance:none){.d-grid{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}}
.d-ch{will-change:auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:79px;padding:0;border:0;border-radius:2px;transition:background .12s,box-shadow .12s,transform .12s}
.d-ch:hover:not(:disabled){background:rgba(255,255,255,.14);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.d-ch:active:not(:disabled){transform:scale(.96)}
.d-cimg{width:79px;height:79px;object-fit:cover;border-radius:2px;border:0;display:block}
.d-ch span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.85)}
.d-ch.on{background:rgba(255,255,255,.3);box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.d-ch.on span{color:#fff;font-weight:700}
.d-ch.used{opacity:.3;filter:grayscale(1);cursor:not-allowed}
.d-ch.fl{position:relative;opacity:1;cursor:not-allowed}   /* Fearless: cinza com cadeado (so a foto e o nome ficam apagados; o cadeado fica nitido) */
.d-ch.fl>*{opacity:.45}
.d-ch.fl:hover{background:none;box-shadow:none}
.d-ch.fl:active{transform:none}
.d-ch.fl::before{content:'';position:absolute;left:50%;top:30px;width:10px;height:9px;margin-left:-5px;box-sizing:border-box;border:2px solid #fff;border-bottom:0;border-radius:5px 5px 0 0;filter:drop-shadow(0 0 3px rgba(0,0,0,.9))}   /* argola do cadeado */
.d-ch.fl::after{content:'';position:absolute;left:50%;top:38px;width:16px;height:11px;margin-left:-8px;background:#fff;border-radius:1px;filter:drop-shadow(0 0 3px rgba(0,0,0,.9))}   /* corpo do cadeado */

/* rodape: campeao selecionado + botoes */
.d-foot{flex:none;height:68px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 20px;border-top:1px solid rgba(255,255,255,.35)}
.d-fsel{display:flex;align-items:center;gap:12px;min-width:0}
.d-fimg{width:44px;height:44px;object-fit:cover;border-radius:2px;border:0;display:block}
.d-fsel span{display:flex;flex-direction:column;gap:3px;min-width:0}
.d-fsel b{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.d-fsel small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.d-hint{font-size:12.5px;letter-spacing:.08em;color:rgba(255,255,255,.65)}
.d-fbtn{display:flex;gap:10px}
.d-btn{--bg:rgba(255,255,255,.16);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 26px;border:0;border-radius:0;box-shadow:none;background:none;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:opacity .2s}
.d-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--bg);transition:background .15s,transform .12s}   /* o fundo fica num ::before: no hover so ELE cresce 4% (igual ao Jogar) e o texto nunca e transformado, entao as letras nao tremem */
.d-btn:hover:not(:disabled){--bg:rgba(255,255,255,.26)}
.d-btn:hover:not(:disabled)::before{transform:scale(1.04)}
.d-btn:active:not(:disabled)::before{transform:scale(.96)}
.d-btn.pri{--bg:#fff;color:#000}   /* mesmas cores do Jogar do painel: branco com letra preta; passando o mouse fica #e6eaff */
.d-btn.pri:hover:not(:disabled){--bg:#e6eaff}
.d-btn:disabled{opacity:.35;cursor:default}

/* pagina 2: analise */
.d-ana{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;padding:20px 22px 16px}
.d-empty{padding:40px 0;text-align:center}
.d-ahead{display:flex;align-items:flex-start;gap:18px}
.d-aimg{width:78px;height:78px;object-fit:cover;border-radius:2px;border:0;display:block}
.d-atx{display:flex;flex-direction:column;gap:5px;margin-right:auto}
.d-atx h3{font-size:28px;line-height:.95;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.d-atx small{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.d-mu{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:16px;row-gap:5px}
.d-mu>.d-alns{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.d-aln{height:26px;padding:0 13px;border:1px solid rgba(255,255,255,.22);border-radius:3px;background:rgba(255,255,255,.07);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1;color:rgba(255,255,255,.7);transition:background .15s,color .15s,border-color .15s}
.d-aln:not(.on):not(:disabled):hover{background:rgba(255,255,255,.18);color:#fff}
.d-aln.on{border-color:#fff;background:#fff;color:#141a2e}
.d-aln:disabled{cursor:default}
.d-atx .d-mul{color:rgba(255,255,255,.55);white-space:nowrap}
.d-mus{display:flex;align-items:center;gap:5px}
.d-mc{display:block;width:26px;height:26px;border-radius:2px;overflow:hidden}
.d-mi{width:26px;height:26px;object-fit:cover;display:block}
.d-est{padding:5px 12px;border:1px dashed rgba(255,255,255,.45);border-radius:999px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.d-acols{flex:1;min-height:0;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px}
.d-card{min-height:0;box-sizing:border-box;padding:16px 18px;border:0;border-radius:3px;background:rgba(8,12,30,.3)}
.d-card h4{margin-bottom:12px!important;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.25);font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.d-row{display:grid;grid-template-columns:96px 1fr 62px;align-items:center;gap:12px;height:34px}
.d-rl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.d-rv{text-align:right;font-size:13px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.d-meter{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.d-fill{display:block;height:100%;width:var(--w,0%);border-radius:4px;background:linear-gradient(90deg,#7d93ff,#fff);transition:width .8s cubic-bezier(.3,.7,.2,1)}
.d-yn{display:flex;align-items:center;justify-content:space-between;gap:10px;height:34px}
.d-pill{padding:4px 12px;border-radius:999px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.d-pill.y{background:#fff;color:#141a2e}
.d-pill.n{border:1px solid rgba(255,255,255,.5);color:rgba(255,255,255,.8)}
.d-yn+.d-row{margin-bottom:10px}
.d-sub{margin:8px 0 2px;border-top:1px solid rgba(255,255,255,.25)}
.d-sr{display:flex;align-items:center;gap:8px;height:30px}
.d-stars{display:inline-flex;align-items:center;gap:2px}
.d-sw{position:relative;display:block;width:14px;height:14px}
.d-st,.d-sf{position:absolute;left:0;top:0;width:14px;height:14px;stroke-width:1.6;stroke-linejoin:round}
.d-st{fill:none;stroke:rgba(255,255,255,.55)}
.d-sf{fill:#fff;stroke:#fff}
.d-sf.h{clip-path:inset(0 50% 0 0)}
.d-tv{font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.d-dm{display:inline-flex;align-items:center;gap:4px}
.d-dmi{width:18px;height:18px;display:block;object-fit:contain}
.d-chips{display:flex;flex-wrap:wrap;gap:8px}
.d-chip{padding:7px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.d-chip.on{border-color:#fff;background:#fff;color:#141a2e;font-weight:700}

/* ---- bans (transparentes, em cima da barra) ---- */
.d-bans{position:absolute;left:0;top:636px;width:100%;height:80px;display:flex;justify-content:space-between;pointer-events:none;animation:hin .55s ease both .3s}
.d-b5{display:flex}
.d-bn{position:relative;width:80px;height:80px;box-sizing:border-box;overflow:hidden;background:rgba(10,14,40,.4);border-right:1px solid rgba(255,255,255,.14)}
.d-bi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(.5);display:block}
.d-bs{position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(255,255,255,.7) 50%,transparent calc(50% + 1px))}
.d-bn.cL{--sd:rgb(115,107,235);--sd0:rgba(115,107,235,0)}.d-bn.cR{--sd:rgb(224, 114, 125);--sd0:rgba(224,114,125,0)}   /* slot do ban da vez: luz piscante (dpulse) que sobe de baixo e some pra cima. azul = seu lado (esquerdo), vermelho = adversario (direito). Cores ja calibradas para a forca maxima do pulso (opacidade .85) */
.d-bn.cL::after,.d-bn.cR::after{content:'';position:absolute;inset:-2px;z-index:2;background:linear-gradient(0deg,var(--sd) 0%,var(--sd0) 65%);animation:dpulse 3.50s ease-in-out infinite;animation-delay:var(--ph,0ms)}
.d-bn.pv .d-bi{opacity:.85;filter:none}   /* campeao selecionado, ainda nao banido */

/* linha do tempo (fica cheia; o sistema de draft vai encolher com --t) */
.d-timer{position:absolute;left:35px;right:35px;top:719px;height:6px;animation:hin .55s ease both .3s}
.d-timer i{display:block;height:100%;width:var(--t,100%);margin:0 auto;background:#fff;transition:background .3s}   /* sem cantos arredondados; margin:auto = encolhe das duas pontas ate o meio */
.d-timer.run i{width:0;transition:width var(--dur,60s) linear,background .3s}   /* .run = contando (draft.js: dClock, tempo em DR_TIME) */
.d-timer.low i{background:#9e1f1f}   /* ultimos 10 segundos */
.d-timer.off{visibility:hidden}   /* troca de lanes e fim do draft: sem tempo */

/* ---- barra de picks ---- */
.d-barbg{position:absolute;left:0;right:0;bottom:0;height:215px;background:linear-gradient(180deg,rgba(18,24,66,.94),rgba(8,12,36,.98));border-top:1px solid rgba(255,255,255,.1)}
.d-pks{--ex:6px;position:absolute;left:calc(var(--ex)*-1);top:726px;width:calc(100% + var(--ex)*2);height:215px;display:grid;grid-template-columns:1fr 330px 1fr;animation:hin .55s ease both .3s}   /* --ex: as colunas passam 6px para fora de cada lado do palco e quem recorta e a borda inteira (em pixel) do .d-root; assim a borda externa nunca cai em pixel fracionario (1px de luz/arte vazando ou faltando nas pontas) */
.d-side{position:relative;display:grid;grid-template-columns:repeat(5,1fr)}
.d-pk{position:relative;min-width:0;overflow:hidden;clip-path:inset(0)}   /* recorte exato da coluna: com o palco em escala quebrada o overflow arredondava para fora e vazava ~1px da arte ampliada */
.d-pk::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:1px;background:rgba(255,255,255,.3);z-index:3}
.d-side .d-pk:first-child::before,.d-pk.img::before,.d-pk.img+.d-pk::before{display:none}   /* sem divisor encostado em campeao: o da coluna vazia logo apos um pick (a direita dele) tambem some */
.d-fr{position:absolute;inset:0;overflow:hidden;clip-path:inset(0);display:flex;align-items:center;justify-content:center}
.d-ico{display:flex;opacity:.315}
.d-ico .d-li{--s:68px}
/* a arte e 3px maior que a coluna de cada lado (o .d-fr corta): a splash do ddragon tem uma moldura clara de ~1px na propria imagem e, quando o deslocamento --tx/--ty chegava no limite (dFaces), a borda da arte encostava na borda da coluna e a moldura aparecia como uma linha ao lado do pick vizinho vazio */
.d-art{--z:1.33;--fx:50%;--fy:20%;--tx:0%;--ty:0%;position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);object-fit:cover;object-position:50% 16%;display:block;transform:translate(var(--tx),var(--ty)) scale(var(--z));transform-origin:var(--fx) var(--fy)}   /* --z = zoom; --fx/--fy = onde esta o rosto (o zoom cresce a partir dele); --tx/--ty = deslocamento que leva o rosto ao ponto certo da coluna. Tudo isso e preenchido por dFaces() (draft.js) usando js/draft/champ-faces.js. Se mudar o object-position (16%), mude DR_ART_OY no draft.js tambem */
/* ajuste por campeao: agora e feito em js/draft/champ-faces.js (nao precisa mais de regra de CSS aqui) */
.d-pk.img .d-fr::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,10,28,0) 58%,rgba(8,10,28,.85) 100%)}   /* escurece o pe da coluna para o nome ler bem */
/* vez de quem vai pickar: luz que PISCA na vaga (apaga quase tudo <-> acende total), degrade escuro nas laterais + brilho interno: azul = lado esquerdo, vermelho = lado direito */
.d-cL{--sd:rgba(0, 28, 105, 0.685);--sd0:rgba(10,48,150,.20)}.d-cR{--sd:rgba(99, 0, 0, 0.555);--sd0:rgba(150,16,36,.20)}
/* a luz passa 6px para fora da coluna, sempre MAIS que a arte (que passa 3px) e o .d-fr corta o excesso. Se a luz fosse menor que a arte, em certas posicoes fracionarias de pixel sobrava 1px de arte sem o escurecimento: se ela terminasse exatamente na borda, o 1o pixel da arte ficava sem o escurecimento azul/vermelho e aparecia como uma linha clara ao lado do pick vizinho vazio */
.d-pk.cur .d-fr::after{content:'';position:absolute;inset:-6px;z-index:2;background:linear-gradient(90deg,var(--sd) 0%,var(--sd0) 50%,var(--sd) 100%);box-shadow:inset 0 0 34px 4px var(--sd);animation:dpulse 3.50s ease-in-out infinite;animation-delay:var(--ph,0ms)}
@keyframes dpulse{0%,100%{opacity:.085}50%{opacity:.85}}
.d-veil{position:absolute;inset:-6px;background:linear-gradient(180deg,rgb(18,24,66),rgb(8,12,36));opacity:0;pointer-events:none;animation:dveil 2.4s ease-in-out infinite}   /* selecionado mas ainda nao pickado: a arte pisca devagar. Um veu na cor da barra sobe por cima (em vez de animar a opacidade da propria arte: a arte animada virava uma camada recortada diferente da luz e sobrava 1px de arte clara na borda voltada para o centro/vizinho vazio) */
@keyframes dveil{0%,100%{opacity:0}50%{opacity:.65}}
/* animacao de pick: a arte entra de cima para baixo com um leve zoom */
@property --lk{syntax:"<number>";inherits:false;initial-value:1}   /* progresso da entrada do pick (0 -> 1) */
@property --lo{syntax:"<number>";inherits:false;initial-value:1}   /* opacidade da entrada */
.d-pk.lock .d-art{transform:translate(var(--tx),var(--ty)) scale(calc(var(--z)*(1.4 - .4*var(--lk))));opacity:var(--lo);clip-path:inset(0 0 calc((1 - var(--lk))*100%) 0);animation:dlock .8s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--e,0ms)}   /* a entrada anima as variaveis --lk/--lo (e nao transform/opacity/clip-path da propria arte): animar transform/opacity vira uma camada da GPU que o navegador desenha ate 1px alem da coluna (esquerda, direita e topo) enquanto o pick esta travando; assim a arte e desenhada normalmente e recortada certinho pelo .d-fr. Mesmo visual de antes. */
@keyframes dlock{0%{--lk:0;--lo:0}50%{--lo:1}100%{--lk:1;--lo:1}}
.d-cap{position:absolute;left:4px;right:4px;bottom:12px;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
.d-cap b{max-width:100%;font-size:18px;font-weight:500;letter-spacing:.02em;line-height:22px;text-shadow:0 1px 6px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* painel branco do pick (campeao + % de vitorias do jogador com ele): aparece no fim da animacao e some sozinho. Fica na coluna vizinha (d-puN = posicao da coluna dentro do lado) */
.d-info{--ft:2s;position:absolute;top:0;width:20%;height:215px;box-sizing:border-box;padding:18px 14px;z-index:6;display:flex;flex-direction:column;justify-content:space-between;background:#f2f2f2;color:#14182a;pointer-events:none;animation:dinfoL var(--ft) ease both;animation-delay:calc(var(--e,0ms) + .3s)}   /* --ft = duracao total (2s = 0,4s entrando + 1,2s parado + 0,4s saindo; as proporcoes ficam nos keyframes abaixo: 20% / 60% / 20%). O .3s e o atraso depois do pick: se mudar, mude tambem nas 2 linhas do texto (.d-iL/.d-iR b,span) e no setTimeout do dLock (draft.js) */
.d-info b{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-info span{display:flex;flex-direction:column;gap:4px}
.d-info small{font-size:13px;font-weight:600;letter-spacing:.06em;color:#3a3f55}
.d-info strong{font-size:30px;font-weight:700;letter-spacing:.01em;line-height:1;font-variant-numeric:tabular-nums}
/* painel do pick = "puxada": time da ESQUERDA entra pela direita e sai pela direita; time da DIREITA entra pela esquerda e sai pela esquerda. Fica dentro da propria coluna (revelado por clip-path) e o texto desliza junto */
.d-iR{animation-name:dinfoR}
.d-iL b,.d-iL span{animation:dtxL var(--ft) ease both;animation-delay:calc(var(--e,0ms) + .3s)}
.d-iR b,.d-iR span{animation:dtxR var(--ft) ease both;animation-delay:calc(var(--e,0ms) + .3s)}
@keyframes dinfoL{0%{clip-path:inset(0 0 0 100%);animation-timing-function:cubic-bezier(.45,0,.55,1)}20%{clip-path:inset(0)}80%{clip-path:inset(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes dinfoR{0%{clip-path:inset(0 100% 0 0);animation-timing-function:cubic-bezier(.45,0,.55,1)}20%{clip-path:inset(0)}80%{clip-path:inset(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes dtxL{0%{transform:translateX(80%);animation-timing-function:cubic-bezier(.45,0,.55,1)}20%{transform:none}80%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translateX(80%)}}
@keyframes dtxR{0%{transform:translateX(-80%);animation-timing-function:cubic-bezier(.45,0,.55,1)}20%{transform:none}80%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translateX(-80%)}}
/* posicao da coluna dentro do lado (0-4) */
.d-pu0{left:0}.d-pu1{left:20%}.d-pu2{left:40%}.d-pu3{left:60%}.d-pu4{left:80%}

/* centro da barra: confronto */
.d-mid{position:relative;background:#0a1226}
.d-vid{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:.60;pointer-events:none;user-select:none;-webkit-user-select:none}   /* fundo animado (assets/video/draft-logos.webp), 1o filho do .d-mid (criado por bgVidFix() em utils.js); .75 = 25% menos de opacidade; a cor #0a1226 do .d-mid aparece por tras */

.d-mid::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.12);pointer-events:none}   /* linha clara do topo (antes era o box-shadow inset) */
.d-mt{position:absolute;left:8px;right:8px;top:18px;text-align:center;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-first{position:absolute;top:46px;width:100px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.9)}   /* caixa de 100px = largura da logo: o texto fica centralizado em cima da logo do seu lado */
.d-fL{left:20px}.d-fR{right:20px}
.d-logos{position:absolute;left:0;right:0;top:74px;height:76px;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:22px}   /* cada logo vai para o lado do seu pick (centro a 70px da borda, na mesma coluna do FIRST PICK); a logo do site fica no meio */
.fx-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}   /* so guarda o filtro SVG #fx-bw (index.html); nao ocupa espaco */
.d-lg{width:100px;height:72px;object-fit:contain;display:block;opacity:.6;filter:grayscale(1) brightness(1.15) contrast(1.8);filter:url(#fx-bw)}   /* padrao: P&B com curva suave (sem serrilhado). A 1a linha de filter e fallback se o SVG falhar. opacity:.6 = 60% menos de opacidade */
.d-lg.lg-w{filter:brightness(0) invert(1)}   /* logo de 1 cor so (o grayscale a deixaria cinza): toda branca. Modo escolhido em draft.js (DR_LOGO_MODE / dLogoScan) */
.d-lg.lg-inv{filter:grayscale(1) invert(.9);filter:url(#fx-inv)}   /* logo que fica predominantemente PRETA no preto e branco: inverte (preto/quase preto -> BRANCO puro, branco -> escuro). Cinzas escuros nao mudam, so os que ficariam quase brancos (>~62%) sobem para branco. Curva no SVG #fx-inv (index.html) */
.d-lg.lg-k{filter:url(#fx-key)}   /* logo de UMA cor com detalhe preto por dentro (ex.: quadrado vermelho + emblema preto): a cor vira branco e o preto fica preto. SVG #fx-key */
img.d-emb{width:22px;height:24px;object-fit:contain;display:block;opacity:.45;flex:none;pointer-events:none;user-select:none}   /* logo do site (assets/img/logo.png, branca com transparencia). Proporcao original 557x593. Ajuste width/height/opacity se quiser maior ou mais apagada */
.d-low{position:absolute;left:0;right:0;bottom:26px;text-align:center}
/* quadrados do placar da serie (dSq, draft.js): MD3 = 2 de cada lado, MD5 = 3; cheio = mapa vencido; seu time a esquerda */
.d-sq{position:absolute;bottom:0;width:100px;display:flex;justify-content:center;align-items:center;gap:5px;padding-bottom:3px}   /* caixa de 100px na mesma coluna da logo (centro a 70px da borda): MD3 = o espaco entre os quadrados fica sob o centro da logo; MD5 = o quadrado do meio */
.d-sq.l{left:20px}.d-sq.r{right:20px;flex-direction:row-reverse}
.d-sq i{display:block;flex:none;width:16px;height:16px;box-sizing:border-box;border:2px solid rgba(255,255,255,.95)}
.d-sq i.on{background:rgba(255,255,255,.95)}
.d-patch{font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.85);padding-bottom:3px}

/* fearless (serie MD3/MD5): campeoes de mapas anteriores, travados para os dois times. Fotos cinza pequenas em cima dos bans, uma linha por mapa (js/draft/draft.js -> dFlHtml). Seu time a esquerda, adversario a direita. Base em 632px (941 - 309) = 4px acima dos bans (636px) */
.d-fl{position:absolute;left:0;bottom:309px;width:100%;box-sizing:border-box;padding:0 8px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;animation:hin .55s ease both .3s}
.d-fl5{display:flex;flex-direction:column;gap:1px}
.d-fl5.l{align-items:flex-end}.d-fl5.r{align-items:flex-start}
.d-flt{font-size:10px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.d-flr{display:flex;gap:2.5px}
.d-flc{width:25px;height:25px;box-sizing:border-box;overflow:hidden;background:rgba(10,14,40,.4);border:1px solid rgba(255,255,255,.18);pointer-events:auto}   /* pointer-events:auto so para o tooltip (nome + jogo) */
.d-fli{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.6}

/* ---- aviso ---- */
.d-toast{position:absolute;left:50%;bottom:236px;transform:translate(-50%,12px);max-width:760px;padding:12px 22px;border-radius:6px;background:rgba(14,18,44,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.5);font-size:14px;font-weight:600;letter-spacing:.06em;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9}
.d-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- troca de lanes (fim do draft): arrastar a foto de um campeao do seu lado para outra coluna ---- */
.d-pk.sw{cursor:grab}
.d-pk.sw:active{cursor:grabbing}
.d-pk.sw::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .15s,background .15s}
.d-pk.sw:hover::after,.d-pk.swsel::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}
.d-pk.swsel::after{background:rgba(255,255,255,.14)}
.d-pk.dov::after{box-shadow:inset 0 0 0 3px #fff;background:rgba(255,255,255,.2)}
.d-pk.dgh .d-art{transform:none;animation:none}   /* so no instante em que o navegador tira a foto do arrasto (classe dgh em draft.js): sem zoom, a arte fica toda dentro da coluna e nao aparece pedaco de fora */

/* ---- botao do fim do draft (js/draft/draft.js -> dGoSync): CONFIRMAR LANES (troca de lanes) e depois ANALISE DO DRAFT (a partida so inicia pelo botao de dentro da analise). E UM SO elemento fixo no palco (nunca e recriado, entao o hover nao pisca); so troca texto e aparece/some. Fica centralizado a 10px acima do painel central (base em 716px = 941 - 225); com a dica ele cresce para cima ---- */
.d-go{position:absolute;left:50%;bottom:225px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;box-sizing:border-box;min-height:35px;padding:7px 18px;font:inherit;color:#fff;background:rgba(10,18,38,.72);border:1px solid transparent;border-radius:0;cursor:pointer;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s .25s}
.d-go.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s,visibility 0s}
.d-go-sw{bottom:268px;min-height:26px;padding:4px 14px}   /* TROCAR LANES: logo acima do botao Analise do draft (bottom 225 + altura 35 + folga 8); menor que o principal */
.d-go-sw .d-go-t{font-size:10.5px;line-height:16px}
.d-go-t{font-size:12.1px;font-weight:700;letter-spacing:.16em;line-height:19px;text-transform:uppercase}
.d-go-h{font-size:9px;letter-spacing:.06em;line-height:11px;color:rgba(255,255,255,.7)}
/* hover instantaneo (sem transicao de cor: a transicao deixava um "rastro" branco ao tirar o mouse) e so em tela com mouse; o foco do teclado nao pinta de branco, so o contorno abaixo */
@media (hover:hover){.d-go:hover:not(:disabled){background:#fff;color:#0a1226}}
@media (hover:hover){.d-go:hover:not(:disabled) .d-go-h{color:rgba(10,18,38,.7)}}
.d-go:focus-visible{outline:2px solid #fff;outline-offset:2px}