/* BRASLOL 2 - TELA DA PARTIDA (js/match/match.js). A cena 3D fica no canvas; o HUD e as etiquetas ficam por cima. Posicao das etiquetas: variaveis --x/--y/--hp definidas pela cena via CSSOM (o CSP bloqueia style="") */
body[data-screen="match"] #topbar{display:none}
body[data-screen="match"] #app{background:#0b1016;overflow:hidden;touch-action:none;padding-left:0;padding-right:0}
.m-wrap{position:relative;flex:1 1 auto;width:100%;height:100%;overflow:hidden;color:#fff;user-select:none;-webkit-user-select:none}
.m-wrap{--u:clamp(.4px,.0435vw,1.1px);--hh:calc(292.2*var(--u) + 5px)}   /* --u: unidade de escala da HUD de baixo (placar, cameras e paineis): 1920px de largura = 0.835px, as proporcoes da transmissao de referencia. --hh: altura dessa HUD (titulo + 5 linhas + divisorias) */
.m-cv{--m-bri:1;--m-con:1.2;position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;filter:brightness(var(--m-bri)) contrast(var(--m-con))}   /* brilho e contraste GERAIS da partida (nao e o filtro azul). --m-bri: 1 = normal, menor = mais escuro. --m-con: 1 = normal, maior = mais contraste. O filtro azul fica em js/match/models.js (view.grade) */
.m-cv:active{cursor:grabbing}
.m-tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.m-tag{--x:-999px;--y:-999px;--hp:1;position:absolute;left:0;top:0;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 100%));display:flex;flex-direction:column;align-items:center;gap:2px;will-change:transform}
.m-tag.off{display:none}
.m-tag.ch{--s:1;pointer-events:auto;cursor:pointer;z-index:2;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%)) scale(var(--s))}   /* campeao nao tem modelo 3D: a foto e o corpo dele (o centro da foto e a posicao, e --s a escala do zoom) e a vida fica em cima; por isso fica por cima das outras etiquetas */
.m-tag.t0{--tc:#3d8bff;--tg:rgba(61,139,255,.94);--c1:#4da3ff;--c2:#08142c}.m-tag.t1{--tc:#ff5252;--tg:rgba(255,82,82,.55);--c1:#ff6b5e;--c2:#2a0608}   /* cores do time: --tc = brilho do icone, --c1/--c2 = degrade da barra de vida (topo/fundo) */
.m-tag .m-ic{width:26px;height:26px;border-radius:50%;object-fit:cover;border:0;background:#10161f;box-shadow:0 0 7px 1px var(--tg,rgba(61,139,255,.94));display:block}   /* foto sem borda propria; o brilho na cor do time identifica o lado */
.m-tag.ch::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);background:url(../assets/img/ui/anel-campeao.png) center/100% 100% no-repeat;pointer-events:none}   /* anel prateado por cima da foto (assets/img/ui/anel-campeao.png): 28px = foto 26px + a espessura do anel, para ele cobrir a borda da foto */
.m-tag.sel{z-index:3}
.m-tag.sel .m-ic{box-shadow:0 0 0 2px #fff,0 0 12px 2px rgba(255,255,255,.7)}
.m-tag.dead{opacity:.35}
.m-tag.ch{will-change:auto}   /* sem will-change: o navegador redesenha a foto nitida a cada zoom (com ele, esticava a imagem ja rasterizada = borrada) */
.m-tag{--bd:linear-gradient(180deg,rgba(226,234,246,.78) 0%,rgba(132,146,168,.62) 45%,rgba(66,78,98,.7) 100%)}   /* cor da borda da vida da torre: degrade translucido, claro em cima e escuro embaixo; a torre usa uma versao mais fraca (.m-tag.bd) */
.m-hpr{position:absolute;left:50%;bottom:100%;margin-bottom:3px;transform:translateX(-50%)}   /* so a moldura (.m-cf) define a largura: o meio dela fica no meio da foto; o nivel (.m-cl) fica pendurado fora, a esquerda */
.m-cl{position:absolute;right:100%;top:50%;margin:0 1px 0 0;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;box-sizing:border-box;border:1px solid rgba(204,214,224,.55);border-radius:3px;background:linear-gradient(180deg,#0e1a28,#0a121d);box-shadow:0 1px 2px rgba(0,0,0,.45);color:#eef5fb;font-size:8px;font-weight:700;line-height:1;text-align:center;font-variant-numeric:tabular-nums}   /* nivel: caixinha escura com borda cinza clara e o numero branco, pendurada a esquerda da moldura, centralizada na vertical com ela, e um pouco mais alta que o resto */
.m-cf{display:grid;flex:none;grid-template-rows:5px 2px;row-gap:1px;align-content:center;width:43px;height:12px;box-sizing:border-box;padding:0 1px;border:1px solid rgba(204,214,224,.55);border-radius:2px;background:#0a111b;box-shadow:0 1px 2px rgba(0,0,0,.45)}   /* moldura unica: vida em cima (6px) e mana embaixo (2px), 1px de vao escuro entre as duas */
.m-ch,.m-cm{display:block;position:relative;background:#04070d;overflow:hidden}   /* trilhos (parte vazia) quase pretos */
.m-ch u{display:block;height:100%;width:calc(var(--hp) * 100%);background:linear-gradient(to bottom,var(--f1) 0%,var(--f2) 50%,var(--f3) 85%,var(--f4) 100%);text-decoration:none}   /* vida: degrade azul (vermelho no time 1), claro em cima e um reflexo mais claro na ultima linha. --hp vem da cena 3D */
.m-ch::after{content:"";position:absolute;left:0;right:0;top:0;height:55%;pointer-events:none;background:linear-gradient(to right,transparent calc(100% - 1px),#050a22 calc(100% - 1px));background-size:calc(100% / var(--n,5)) 100%;background-repeat:repeat-x}   /* divisorias finas azul-marinho so na metade de cima, no fim de cada segmento (--n = vida maxima / 300, definido em match.js) */
.m-cm u{display:block;height:100%;width:calc(var(--mp) * 100%);background:linear-gradient(to bottom,#7fb2d4,#5f9fc7);text-decoration:none}   /* mana: azul acinzentado claro, fina */
.m-tag.t0{--f1:#73c0ff;--f2:#2b93da;--f3:#1c87c7;--f4:#3d85b3}.m-tag.t1{--f1:#ff8f86;--f2:#e04f46;--f3:#c2362f;--f4:#b3594f}   /* cores da vida do campeao por time (topo, meio, fundo, ultima linha); time 0 = azul igual a referencia, time 1 = versao vermelha */
.m-hp{display:block;width:56px;height:8px;padding:1px;box-sizing:border-box;border:1px solid transparent;border-image:var(--bd) 1;border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,.35);background:rgba(6,10,18,.88);position:relative}
.m-hp u{display:block;height:100%;width:calc(var(--hp) * 100%);background:linear-gradient(to bottom,var(--c1,#4da3ff) 10%,var(--c2,#08142c) 100%);text-decoration:none}   /* degrade: cor viva no topo, quase preto embaixo (cores por time em .m-tag.t0 / .t1) */
.m-hp::after{content:"";position:absolute;left:1px;right:1px;top:1px;height:calc((100% - 2px) * .6);pointer-events:none;background:linear-gradient(to right,transparent calc(100% - 1px),#06090f calc(100% - 1px));background-size:calc(100% / var(--n,5)) 100%;background-repeat:repeat-x}   /* divisorias da barra da torre, no fim de cada segmento, a propria caixa tem 60% da altura util, colada no topo da area colorida (nao vaza pra fora nem toca o fundo): --n = 5 fixo */
.m-tag.ch{--mp:1}   /* mana 0..1, atualizada por matchHud (match.js) */
.m-tag.ch .m-hp::after{inset:0;background-size:calc(100% / var(--n,5)) 100%}   /* divisorias do campeao na altura toda da barra */
.m-tag.ch .m-mp{width:40.5px}
.m-mp u{display:block;height:100%;width:calc(var(--mp) * 100%);background:linear-gradient(to bottom,#4483ff 10%,#7c9fff 100%);text-decoration:none}
.m-tag.bd .m-hp{width:max(36px,calc(76px * var(--ts,1)));height:max(8px,calc(10px * var(--ts,1)))}   /* --ts: escala da barra da torre pelo zoom (matchTowerHp em match.js). O minimo (36x8) garante que sobra espaco interno para a cor depois da borda e do preenchimento de 1px */
.m-tag.bd{--bd:linear-gradient(180deg,rgba(226,234,246,calc(.12 + .5 * var(--ts,1))) 0%,rgba(110,124,146,calc(.1 + .45 * var(--ts,1))) 100%)}   /* borda da torre: quanto mais longe o zoom (--ts menor), mais transparente, para nao poluir o mapa */
.m-tag.bd .m-hp{box-shadow:none}
.m-tag.mb{gap:0;--c1:#f0483a;--c2:#6b100c;--bd:linear-gradient(180deg,rgba(226,234,246,calc(.2 + .5 * var(--ts,1))) 0%,rgba(110,124,146,calc(.15 + .45 * var(--ts,1))) 100%)}   /* Raptor grande (como na referencia): aba escura com o numero da vida em cima de uma barra vermelha, com divisorias. Tamanho pelo zoom (--ts, igual a torre) */
.m-tag.mb .m-mn{display:block;min-width:max(26px,calc(34px * var(--ts,1)));padding:0 max(5px,calc(9px * var(--ts,1)));box-sizing:border-box;text-align:center;font-weight:700;font-size:max(8px,calc(12px * var(--ts,1)));line-height:1.25;color:#f4ecd2;text-shadow:0 1px 1px rgba(0,0,0,.8);background:rgba(8,10,16,.92);border:1px solid rgba(190,176,132,.55);border-bottom:0;border-radius:3px 3px 0 0;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%)}
.m-tag.mb .m-hp{width:max(44px,calc(92px * var(--ts,1)));height:max(8px,calc(10px * var(--ts,1)));box-shadow:none}
.m-wrap{--hu:clamp(.62px,.0521vw,1.25px);--tb:calc(60*var(--hu));--to:calc(20*var(--hu))}   /* HUD de cima: --hu = unidade de escala (1920px de largura = 1px), --tb = altura da barra, --to = altura da faixa de objetivos embaixo dela (colada na barra; o tempo fica centralizado nela) */
.m-top{position:absolute;left:50%;top:0;z-index:3;width:min(100%,calc(1020*var(--hu)));transform:translateX(-50%);pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.85)}   /* colada no topo e centralizada; largura 1020 (de 1920) como na transmissao, nao preenche a tela. Para mudar o tamanho, mexa no 1020 */
.m-hb{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;height:var(--tb);background:linear-gradient(90deg,rgba(236,239,245,.5) 0%,rgba(110,114,124,.5) 2.5%,rgba(0,0,0,.5) 8%,rgba(0,0,0,.5) 92%,rgba(110,114,124,.5) 97.5%,rgba(236,239,245,.5) 100%);box-shadow:0 2px 10px rgba(0,0,0,.5)}   /* preto no meio e branco so bem perto das bordas; o 0.5 de cada cor e a opacidade da HUD (50%) so no fundo: textos e icones ficam nitidos */
.m-hs{display:flex;align-items:center;min-width:0;padding:0 calc(24*var(--hu))}.m-hs.t1{flex-direction:row-reverse}   /* time azul a esquerda; o vermelho e o espelho dele */
.m-id{display:flex;align-items:center;gap:calc(12*var(--hu));flex:0 1 auto;min-width:0}.m-hs.t1 .m-id{flex-direction:row-reverse}
.m-tk{display:flex;flex-direction:column;justify-content:center;gap:calc(3*var(--hu));min-width:calc(6*var(--hu))}   /* traços da serie (MD3 = 2, MD5 = 3; MD1 nao tem): acesos = mapas ganhos */
.m-tk i{display:block;width:calc(6*var(--hu));height:calc(12*var(--hu));border-radius:calc(1.5*var(--hu));background:rgba(0,0,0,.5)}
.m-tk i.on{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.55)}
.m-hlw{display:block;width:calc(52*var(--hu));height:calc(42*var(--hu))}
.m-hlg{display:block;width:100%;height:100%;object-fit:contain}
.m-tg{font-size:calc(26*var(--hu));font-weight:900;letter-spacing:.06em;line-height:1;text-transform:uppercase;white-space:nowrap;min-width:0;max-width:calc(130*var(--hu));overflow:hidden;text-overflow:ellipsis}
.m-st{display:flex;align-items:center;gap:calc(16*var(--hu));flex:none;height:62%;margin-left:auto;padding-left:calc(16*var(--hu))}
.m-hs.t1 .m-st{flex-direction:row-reverse;margin-left:0;margin-right:auto;padding-left:0;padding-right:calc(16*var(--hu))}   /* no vermelho fica do outro lado e a ordem se inverte (numero, icone) */
.m-sg,.m-gd{display:flex;align-items:center;gap:calc(8*var(--hu))}.m-hs.t1 .m-sg,.m-hs.t1 .m-gd{flex-direction:row-reverse}
.m-hi{display:block;width:calc(22*var(--hu));height:calc(22*var(--hu));flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.m-hn{font-size:calc(24*var(--hu));font-weight:800;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.m-gv{position:relative;display:block;line-height:1}
.m-gv small{position:absolute;top:100%;left:0;margin-top:calc(4*var(--hu));font-size:calc(13*var(--hu));font-weight:700;color:rgba(255,255,255,.72);white-space:nowrap}.m-hs.t1 .m-gv small{left:auto;right:0}   /* diferenca de ouro: so embaixo do time que esta na frente */
.m-hc{display:flex;align-items:center;gap:calc(18*var(--hu));padding:0 calc(16*var(--hu))}
.m-hk{min-width:calc(44*var(--hu));font-size:calc(36*var(--hu));font-weight:900;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.m-cg{display:block;height:calc(52*var(--hu));width:auto;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}   /* logo do jogo (assets/img/logo.png) no meio, entre os abates */
.m-ho{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--to);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 40%,rgba(0,0,0,.7) 60%,rgba(0,0,0,0) 100%)}   /* faixa de objetivos colada embaixo da barra, com a altura --to: degrade preto atras do tempo e dos objetivos; o miolo preto a 70% de opacidade cobre 20% da largura (de 40% a 60%) e dai desce ate ficar invisivel nas pontas. Para mudar a opacidade do miolo, mexa nos dois .7; para aumentar o miolo, afaste o 40% e o 60% */
.m-og{--oz:calc(18*var(--hu));display:flex;align-items:center;justify-content:flex-end;gap:calc(6*var(--hu));padding:0 calc(26*var(--hu))}.m-og.t1{flex-direction:row-reverse}   /* --oz: tamanho (largura e altura) de TODOS os icones de objetivo; cabe na faixa --to (20) com folga */
.m-ds{display:none;place-items:center;flex:none;width:var(--oz);height:var(--oz)}.m-ds.on{display:grid}   /* dragao: so aparece depois de feito (a classe .on vem de matchObjHud) */
.m-oi{display:block;width:100%;height:100%;object-fit:contain}
.m-ob{display:none;align-items:center;gap:calc(3*var(--hu))}.m-ob.on{display:flex}   /* vastilarva, arauto e barao: so aparecem quando o time tem pelo menos 1 */
.m-ob img{display:block;width:var(--oz);height:var(--oz);object-fit:contain}
.m-ob b{font-size:calc(12*var(--hu));font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
@font-face{font-family:"Amerika Sans";src:url(../assets/fonts/AMERSN__.ttf) format("truetype");font-weight:400;font-style:normal;font-display:block}   /* fonte do cronometro (partida e tela de resultado). Os numeros dessa fonte tem larguras diferentes: cada caractere do tempo vai numa caixa de largura fixa (.m-cd/.m-cc) para o relogio nao ficar "pulando" a cada segundo */
.m-cd,.m-cc{display:inline-block;text-align:center}
.m-cd{width:.68em}.m-cc{width:.24em}
.m-ct{display:flex;align-items:center;justify-content:center;padding:0 calc(16*var(--hu))}
.m-ct b{font-family:"Amerika Sans",Georgia,"Times New Roman",serif;font-size:calc(12*var(--hu));font-weight:400;font-synthesis:none;line-height:1;letter-spacing:.06em}
.m-feed{position:absolute;left:14px;top:calc(var(--tb) + var(--to) + 14px);display:flex;flex-direction:column;gap:3px;max-width:340px;pointer-events:none}
.m-fl{font-size:12.5px;padding:4px 10px;background:rgba(10,14,26,.72);border-radius:4px;border-left:3px solid rgba(255,255,255,.4);transition:opacity .6s}
.m-fl.old{opacity:.35}
.m-fl small{color:rgba(255,255,255,.55);margin-right:8px;font-variant-numeric:tabular-nums}
.m-fl b.t0{color:#7db4ff}.m-fl b.t1{color:#ff8a8a}.m-fl em{color:#ffd54a;font-style:normal;font-weight:700}
.m-pl,.m-pr{position:absolute;bottom:0;z-index:4;width:calc(365*var(--u));height:var(--hh);box-sizing:border-box;padding:calc(14*var(--u));grid-template-columns:1fr 1fr;grid-auto-rows:max(28px,calc(46*var(--u)));align-content:center;gap:calc(8*var(--u));background:rgba(0,0,0,.65);border:1px solid rgba(0,0,0,.9);border-bottom:0;box-shadow:0 0 18px rgba(0,0,0,.5);display:none}   /* paineis de configuracao colados embaixo, nos cantos (onde a transmissao tem o minimapa e as infos do campeao): mesma altura do placar (--hh) e mesmo fundo preto a 65% de opacidade. Ficam escondidos e so aparecem com o Tab (classe m-hudon em .m-wrap, ver matchScore em match.js), junto com o placar. z-index 4: ficam acima dos icones dos campeoes (2 e 3) */
.m-pl{left:0;border-left:0}.m-pr{right:0;border-right:0}
.m-wrap.m-hudon .m-pl,.m-wrap.m-hudon .m-pr{display:grid}   /* Tab: mostra os paineis de configuracao */
.m-wrap.m-hudon .m-help{display:none}   /* com o painel aberto, a dica vai para dentro dele (.m-hlp) e a do canto some */
.m-hlp{grid-column:1/-1;align-self:center;font-size:max(10px,calc(13*var(--u)));line-height:1.25;text-align:center;color:rgba(255,255,255,.55);pointer-events:none}   /* dica de controles: primeira linha do painel da esquerda */
.m-pl .m-b,.m-pr .m-b{min-width:0;padding:0 calc(6*var(--u));font-size:max(10px,calc(15*var(--u)));white-space:nowrap;border:0;border-radius:0}
.m-w2{grid-column:1/-1}   /* botao que ocupa as 2 colunas do painel */
.m-spw{position:relative;display:grid}   /* velocidade: um botao so (m-spb) que expande a lista 1x-4x (m-spm) para cima */
.m-spb::after{content:" ▾"}
.m-spm{position:absolute;left:0;right:0;bottom:calc(100% + 4px);z-index:1;display:none;flex-direction:column;gap:3px;padding:4px;background:rgba(0,0,0,.96)}
.m-spw.open .m-spm{display:flex}
.m-spm .m-b{padding:calc(8*var(--u)) 0}
.m-sq{margin:0;padding:calc(4*var(--u)) calc(4*var(--u)) calc(6*var(--u));font-size:max(10px,calc(14*var(--u)));line-height:1.25;text-align:center;color:#fff}   /* pergunta do menu de Pular */
.m-b{font:inherit;font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:5px;padding:6px 12px;cursor:pointer;min-width:34px}
.m-b:hover{background:rgba(255,255,255,.2)}
.m-b.on{background:#fff;color:#000}
.m-b.big{font-size:15px;padding:10px 24px}
.m-help{position:absolute;left:14px;bottom:8px;font-size:11px;color:rgba(255,255,255,.55);max-width:300px;pointer-events:none}
.m-score{position:absolute;left:calc(365*var(--u));right:calc(365*var(--u));bottom:0;z-index:4;display:none;pointer-events:none}   /* placar (Tab) estilo transmissao: colado embaixo, ocupando o espaco entre os dois paineis de configuracao (365 = largura de .m-pl/.m-pr), com a camera (foto + nick) de um jogador de cada lado. A escala vem de --u (definido em .m-wrap) */
.m-score.on{display:flex;justify-content:center;align-items:stretch;gap:0}   /* sem espaco entre painel de config, camera, placar, camera e painel de config */
.m-tab{pointer-events:auto;flex:none;width:max-content;box-sizing:border-box;background:rgba(0,0,0,.65);border:1px solid rgba(0,0,0,.9);border-bottom:0;box-shadow:0 0 18px rgba(0,0,0,.5);font-weight:700}   /* fundo preto a 65% de opacidade; as linhas e os lados ficam transparentes para nao somar opacidade */
.m-hd{height:calc(28.7*var(--u));display:grid;place-items:center;font-family:"Hegarown",Georgia,"Times New Roman",serif;font-size:calc(17*var(--u));font-weight:400;font-synthesis:none;letter-spacing:0;color:#fff}   /* titulo no topo do placar (como o nome da liga na transmissao) */
.m-cam{position:relative;flex:1 1 calc(288*var(--u));min-width:0;overflow:hidden;background:rgba(0,0,0,.65)}   /* camera do jogador: foto + nick, da altura toda do placar. Cresce para encostar no painel de config (em telas maiores que 1920px a foto aumenta junto) */
.m-ci{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
.m-cn{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;padding:calc(34*var(--u)) calc(10*var(--u)) calc(7*var(--u));background:linear-gradient(to top,rgba(0,0,0,.92) 0,rgba(0,0,0,.6) 55%,rgba(0,0,0,0) 100%);text-align:center;font-size:calc(31*var(--u));font-weight:800;line-height:1.1;letter-spacing:.03em;text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* nick em branco, grande, na base da foto */
.m-row{display:grid;grid-template-columns:1fr calc(60*var(--u)) 1fr;align-items:stretch;height:calc(52.7*var(--u))}
.m-row+.m-row{border-top:1px solid rgba(0,0,0,.9)}
.m-side{display:flex;align-items:stretch;min-width:0}
.m-side.t1{flex-direction:row-reverse}   /* time vermelho espelhado inteiro: ward na ponta, info perto do meio */
.m-side.dead .m-pt .m-ic{filter:grayscale(1) brightness(.5)}.m-side.dead .m-inf{opacity:.55}
.m-wd{position:relative;display:grid;place-items:center;width:calc(30*var(--u));flex:none}
.m-tr{display:block;width:calc(26*var(--u));height:calc(26*var(--u));overflow:hidden;border-radius:50%}   /* totem de ward (amarelo) */
.m-wn{position:absolute;left:calc(4*var(--u));top:calc(2*var(--u));font-size:calc(12*var(--u));color:#fff;text-shadow:0 1px 2px #000}.m-wn:empty{display:none}   /* numero do totem: vazio ate o motor ter contagem de wards */
.m-itw{position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 calc(3*var(--u));flex:none}
.m-itr{display:flex;gap:calc(2*var(--u))}
.m-side.t0 .m-itr{flex-direction:row-reverse}   /* azul: o 1o item fica do lado de dentro (direita); vermelho: esquerda */
.m-it{display:block;width:calc(28*var(--u));height:calc(28*var(--u));flex:none;overflow:hidden;border-radius:calc(4*var(--u));background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.m-it.e{background:rgba(0,0,0,.3)}
.m-it img,.m-su img,.m-ul img,.m-tr img,.m-pt .m-ic{display:block;width:100%;height:100%;object-fit:cover}
.m-rn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:calc(3*var(--u));width:calc(26*var(--u));padding-right:calc(6*var(--u));box-sizing:border-box;flex:none}   /* runas: principal (keystone) em cima, arvore secundaria embaixo */
.m-ru{display:block;width:calc(20*var(--u));height:calc(20*var(--u));overflow:hidden;border-radius:50%;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.m-ru+.m-ru{width:calc(15*var(--u));height:calc(15*var(--u))}   /* a arvore secundaria e menor que a runa principal */
.m-side.t1 .m-rn{padding:0 0 0 calc(6*var(--u))}   /* runas coladas no lado dos itens (no azul a esquerda, no vermelho a direita): sobra o espaco para o lado dos feiticos */
.m-ru img{display:block;width:100%;height:100%;object-fit:contain}
.m-sm{display:flex;flex-direction:column;justify-content:center;gap:calc(2*var(--u));width:calc(22*var(--u));flex:none}   /* feiticos: 2 quadrados centralizados na altura da linha (como itens e runas), sem esticar ate as bordas */
.m-su{display:block;flex:none;height:calc(22*var(--u));overflow:hidden;border-radius:calc(3*var(--u));background:rgba(0,0,0,.5)}
.m-su.e{background:rgba(0,0,0,.3)}
.m-pt{position:relative;width:calc(52.7*var(--u));flex:none;cursor:pointer;background:rgba(0,0,0,.6)}
.m-pt .m-ic{object-position:center top}
.m-pt .m-lvl{position:absolute;left:0;bottom:0;display:grid;place-items:end start;width:calc(19*var(--u));height:calc(19*var(--u));padding:0 0 calc(1*var(--u)) calc(3*var(--u));box-sizing:border-box;background:radial-gradient(circle at 0 100%,rgba(0,0,0,.92) 0,rgba(0,0,0,.78) 45%,rgba(0,0,0,0) 100%);font-size:calc(12*var(--u));line-height:1;text-align:left;pointer-events:none}   /* nivel no canto inferior esquerdo da foto, com degrade preto atras do numero */
.m-side.t1 .m-pt .m-lvl{left:auto;right:0;place-items:end end;padding:0 calc(3*var(--u)) calc(1*var(--u)) 0;background:radial-gradient(circle at 100% 100%,rgba(0,0,0,.92) 0,rgba(0,0,0,.78) 45%,rgba(0,0,0,0) 100%);text-align:right}   /* time da direita (vermelho): nivel no canto inferior DIREITO da foto, com o degrade preto espelhado */
.m-inf{display:flex;flex-direction:column;justify-content:center;width:calc(146*var(--u));flex:none;padding:0 calc(6*var(--u));box-sizing:border-box;font-size:calc(14*var(--u));line-height:1}
.m-side.t1 .m-inf{text-align:right}
.m-r1,.m-r2{display:flex;align-items:center;gap:calc(5*var(--u))}
.m-side.t1 .m-r1,.m-side.t1 .m-r2{flex-direction:row-reverse}   /* espelha circulo/nome/CS e nivel/barras/KDA */
.m-r1{height:calc(22*var(--u))}.m-r2{height:calc(20*var(--u))}
.m-ul{position:relative;display:block;width:calc(20*var(--u));height:calc(20*var(--u));flex:none;box-sizing:border-box;border-radius:50%;overflow:hidden;background:rgba(0,0,0,.7)}   /* ult: sem borda; cinza ate o nivel 6, depois acende colorida */
.m-ul img{filter:grayscale(1) brightness(.6)}
.m-ul.rdy img{filter:none}
.m-pn{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.m-cs{flex:none;color:#e0a96a;font-variant-numeric:tabular-nums}   /* CS em laranja claro */
.m-lvl{color:#fff;font-variant-numeric:tabular-nums}
.m-bars{flex:none;width:calc(64*var(--u));display:flex;flex-direction:column;gap:1px}   /* largura fixa: as barras ficam coladas na foto e sobra espaco ate o KDA */
.m-bx,.m-bh,.m-bm{display:block;overflow:hidden;background:rgba(255,255,255,.08)}
.m-bx{height:calc(3*var(--u))}.m-bh{height:calc(6*var(--u))}.m-bm{height:calc(5*var(--u))}
.m-bx u,.m-bh u,.m-bm u{display:block;height:100%;width:calc(var(--v,1)*100%);text-decoration:none}
.m-bx u{background:#c73cc3}.m-bh u{background:#35c95a}.m-bm u{background:#2f8bff}   /* xp (roxo) | vida (verde) | mana (azul) */
.m-side.t1 .m-bars u{margin-left:auto}   /* no vermelho as barras esvaziam do lado de fora, espelhadas */
.m-pk{flex:none;margin-left:auto;color:#fff;font-variant-numeric:tabular-nums;font-size:calc(15*var(--u));white-space:nowrap}
.m-side.t1 .m-pk{margin-left:0;margin-right:auto}   /* vermelho e espelhado (row-reverse): a margem automatica vai do outro lado, para o KDA ficar embaixo do CS */
.m-gdf{position:relative;display:grid;place-items:center;color:#fff;font-size:calc(17*var(--u));font-variant-numeric:tabular-nums}
.m-gdf.l0::before,.m-gdf.l1::before{content:"";position:absolute;top:50%;width:calc(7*var(--u));height:calc(26*var(--u));transform:translateY(-50%)}   /* marcador do lado de quem esta na frente em ouro */
.m-gdf.l0::before{left:0;background:#2f8bff;clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%)}
.m-gdf.l1::before{right:0;background:#ff4a4a;clip-path:polygon(100% 0,55% 0,0 50%,55% 100%,100% 100%)}
.m-load{position:absolute;inset:0;background:#0b1016 url(../assets/img/backgrounds/CARREGAMENTO.webp) center/cover no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:5;transition:opacity .3s ease}
.m-load.fade{opacity:0;pointer-events:none}   /* a partida ja esta montada por baixo: a tela de carregamento desvanece (matchBoot) e depois ganha .off */
.m-load.off{display:none}
.m-ld-t{font-size:17px;letter-spacing:.06em;text-shadow:0 1px 6px rgba(0,0,0,.7)}   /* so aparece nas mensagens de erro (matchBoot > fail) */
.m-ldw{--cw:min(calc(32vh*.55),15.5vw);--ch:calc(var(--cw)/.55);display:flex;flex-direction:column;align-items:center;gap:calc(var(--cw)*.14)}   /* --cw/--ch: largura e altura de cada foto (proporcao 308x560 da loading screen do LoL); o tamanho segue a altura da janela (32vh) e nunca passa de 15.5% da largura */
.m-ldr{display:flex;gap:calc(var(--cw)*.07)}   /* uma fileira por time: azul (m-ldr0) em cima, vermelho (m-ldr1) embaixo */
.m-ldc{width:var(--cw);display:flex;flex-direction:column;gap:calc(var(--cw)*.04)}
.m-ldf{width:100%;height:var(--ch);overflow:hidden}   /* moldura da foto: esconde o que o zoom corta */
.m-ldp{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}   /* zoom de 12% (6% de cada lado) para tirar a borda que a propria arte da skin ja tem; para cortar mais ou menos, mude o 1.12 */
.m-ldi{--fx:0;--rx:0;display:flex;justify-content:flex-start;gap:0}   /* embaixo da foto: feitico, feitico e runa (m-ldg), um colado no outro, a partir da borda esquerda. AJUSTE MANUAL (unidade = largura da foto; .1 = 10% dela): --fx = distancia do primeiro feitico ate a borda esquerda (move os 3 juntos); --rx = espaco entre o segundo feitico e a runa (0 = colados). Negativo = para a esquerda/fora da foto */
.m-ldi>.m-ldk:first-child{margin-left:calc(var(--cw)*var(--fx))}
.m-ldk{display:block;width:calc(var(--cw)*.2);height:calc(var(--cw)*.2);object-fit:cover}
.m-ldg{position:relative;width:calc(var(--cw)*.2);height:calc(var(--cw)*.2);margin-left:calc(var(--cw)*var(--rx))}   /* ultimo slot: runa principal (m-ldk) com a arvore secundaria (m-ldt) pequena no canto superior direito */
.m-ldt{position:absolute;top:calc(var(--cw)*-.015);right:calc(var(--cw)*-.015);display:block;width:calc(var(--cw)*.085);height:calc(var(--cw)*.085);object-fit:cover}   /* para mudar o tamanho da arvore secundaria, mexa no .085 */
.m-ld-b{align-self:stretch;height:6px;background:rgba(255,255,255,.25);overflow:hidden}   /* barra de carregamento: na largura da fileira do time vermelho, logo embaixo dela */
.m-ld-b i{--p:0;display:block;height:100%;width:calc(var(--p) * 1%);background:#fff;transition:width .15s}
.m-msg{margin:16px 0 0;font-size:14px;color:#ffd54a}
.m-end{--eu:clamp(.35px,min(.0521vw,.0926vh),1.3px);position:absolute;inset:0;background:linear-gradient(rgba(5,8,14,.42),rgba(5,8,14,.55)),url(../assets/img/backgrounds/fim-partida.webp) center/cover no-repeat;display:none;align-items:center;justify-content:center;z-index:6;overflow:hidden}   /* tela de resultado (matchEnd em match.js), no estilo da transmissao: --eu = unidade de escala (1920px de largura = 1px; encolhe junto se a janela for baixa). Fundo = assets/img/backgrounds/fim-partida.webp com uma camada escura por cima (mexa nos dois .rgba para clarear/escurecer a imagem) */
.m-end.on{display:flex;opacity:0;pointer-events:none;transition:opacity .25s ease}   /* entra invisivel: matchReveal so liga .rdy quando imagens e fundo estao prontos; .cv = so o fundo (Pular cobre a tela enquanto calcula) */
.m-end.on.cv,.m-end.on.rdy{opacity:1}
.m-end.on.rdy{pointer-events:auto}
.m-end .m-card{opacity:0;transition:opacity .25s ease}
.m-end.rdy .m-card{opacity:1}
html[data-trans-anim="0"] .m-load,html[data-trans-anim="0"] .m-end,html[data-trans-anim="0"] .m-end .m-card{transition:none}   /* Configuracoes > Animacoes de transicao desligada */
.m-card{width:calc(1720*var(--eu));max-width:100%;display:flex;flex-direction:column;gap:calc(22*var(--eu));color:#fff}
.m-eh{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;height:calc(100*var(--eu));background:linear-gradient(135deg,rgba(32,38,78,.34),rgba(14,18,44,.42));backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:3px}   /* mesmo fundo do painel do draft (.d-panel): sem borda e transparente */
.m-es{display:flex;align-items:center;gap:calc(22*var(--eu));min-width:0;padding:0 calc(36*var(--eu))}
.m-es.t1{flex-direction:row-reverse}
.m-es.w.t0{background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0) 85%)}.m-es.w.t1{background:linear-gradient(270deg,rgba(255,255,255,.35),rgba(255,255,255,0) 85%)}   /* quem ganhou fica com o brilho (azul no time da esquerda, branco no da direita; mexa no .35 para mais ou menos brilho) */
.m-es.l{color:rgba(255,255,255,.7)}
.m-elg{display:block;flex:none;width:calc(84*var(--eu));height:calc(68*var(--eu))}
.m-eid{display:flex;flex-direction:column;align-items:flex-start;gap:calc(4*var(--eu));min-width:0}.m-es.t1 .m-eid{align-items:flex-end}
.m-etg{font-size:calc(52*var(--eu));font-weight:800;letter-spacing:.06em;line-height:1;text-transform:uppercase;white-space:nowrap}
.m-esc{flex:none;padding:0 calc(10*var(--eu));font-size:calc(52*var(--eu));font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.m-ers{flex:none;margin-left:auto;padding-left:calc(28*var(--eu));border-left:1px solid rgba(255,255,255,.3);font-size:calc(42*var(--eu));font-weight:300;letter-spacing:.06em;line-height:1}   /* VITORIA / DERROTA do time, colado no tempo de jogo */
.m-es.t1 .m-ers{margin-left:0;margin-right:auto;padding-left:0;padding-right:calc(28*var(--eu));border-left:0;border-right:1px solid rgba(255,255,255,.3)}
.m-et{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--eu));min-width:calc(300*var(--eu));padding:0 calc(40*var(--eu));border-left:1px solid rgba(255,255,255,.25);border-right:1px solid rgba(255,255,255,.25)}
.m-et small{font-size:calc(20*var(--eu));font-weight:400;letter-spacing:.12em}
.m-et b{font-family:"Amerika Sans",Georgia,"Times New Roman",serif;font-size:calc(62*var(--eu));font-weight:400;font-synthesis:none;line-height:1}
.m-ebd{display:grid;grid-template-columns:calc(790*var(--eu)) 1fr;gap:calc(24*var(--eu));align-items:stretch}
.m-er{display:flex;flex-direction:column;gap:calc(20*var(--eu));min-width:0}
.m-ep{box-sizing:border-box;padding:calc(20*var(--eu)) calc(28*var(--eu));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}   /* paineis iguais ao painel do draft (.d-panel): sem borda, transparentes, com o leve desfoque */
.m-e3{margin:0 0 calc(12*var(--eu));text-align:center;font-size:calc(24*var(--eu));font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.m-ec{display:flex;flex-direction:column;gap:calc(20*var(--eu));align-self:start}   /* coluna da esquerda: painel de estatisticas + botao Continuar logo embaixo (nao estica ate o fim da coluna da direita) */
.m-est{display:flex;flex-direction:column}
.m-ert{display:grid;grid-template-columns:1fr calc(220*var(--eu)) 1fr;align-items:center;min-height:calc(54*var(--eu));border-top:1px solid rgba(255,255,255,.16)}   /* altura de cada linha de estatistica: diminua o 54 para aproximar mais */
.m-ev{text-align:center;font-size:calc(38*var(--eu));font-weight:300;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.6)}
.m-ev.lead{color:#fff}   /* o lado que esta na frente na linha fica branco; o outro fica mais apagado (sem brilho) */
.m-el{text-align:center;font-size:calc(19*var(--eu));font-weight:800;letter-spacing:.06em;line-height:1.15;text-transform:uppercase}
.m-eob{display:flex;align-items:center;justify-content:center;gap:calc(6*var(--eu))}
.m-eoi{display:block;width:calc(38*var(--eu));height:calc(38*var(--eu));object-fit:contain}
.m-ebn{display:flex;justify-content:center;gap:calc(5*var(--eu))}
.m-ebi{display:block;width:calc(44*var(--eu));height:calc(44*var(--eu));object-fit:cover;filter:grayscale(.75) brightness(.85)}
.m-edr{display:grid;grid-template-columns:1fr 1fr;gap:calc(26*var(--eu));margin-top:calc(10*var(--eu))}
.m-edh{--a:#5c5bf6;--b:#9b99ea;display:flex;align-items:center;gap:calc(12*var(--eu));min-width:0}   /* --a = dano depois dos 14 min, --b = dano ate os 14 min */
.m-edh.t1{--a:#d35d7b;--b:#dda6ac;flex-direction:row-reverse;text-align:right}
.m-edp{display:block;flex:none;width:calc(68*var(--eu));height:calc(68*var(--eu));overflow:hidden;background:#10161f}
.m-edp img{display:block;width:100%;height:100%;object-fit:cover}
.m-edb{display:flex;flex-direction:column;flex:1 1 0;gap:calc(6*var(--eu));min-width:0}
.m-edn{display:flex;flex-direction:column;gap:calc(1*var(--eu));font-size:calc(25*var(--eu));line-height:1.05;min-width:0}
.m-edk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.m-edn b{font-weight:700;font-variant-numeric:tabular-nums}
.m-edt{display:block;height:calc(13*var(--eu));background:rgba(255,255,255,.07)}
.m-edf{display:block;width:calc(var(--v,0)*100%);height:100%;background:var(--a)}.m-edh.t1 .m-edf{margin-left:auto}   /* o time vermelho cresce da direita para o meio */
.m-edf u{display:block;width:calc(var(--w,0)*100%);height:100%;background:var(--b);text-decoration:none}.m-edh.t1 .m-edf u{margin-left:auto}   /* trecho --b = dano causado ate 14:00 (o comeco da barra) */
.m-eleg{display:flex;align-items:center;justify-content:center;gap:calc(10*var(--eu));margin-top:calc(14*var(--eu));font-size:calc(15*var(--eu));font-weight:400;letter-spacing:.06em}.m-eleg span+i{margin-left:calc(22*var(--eu))}
.m-esw{display:block;width:calc(30*var(--eu));height:calc(10*var(--eu))}.m-esw.a{background:linear-gradient(90deg,#5c5bf6 50%,#d35d7b 50%)}.m-esw.b{background:linear-gradient(90deg,#9b99ea 50%,#dda6ac 50%)}
.m-egp{flex:1 1 auto}
.m-egp svg{display:block;width:100%;height:auto}
.m-gl{stroke:rgba(255,255,255,.12);stroke-width:1}.m-gz{stroke:rgba(255,255,255,.5);stroke-width:1.5}
.m-gs0{stop-color:#5b55eb}.m-gs1{stop-color:#612644}   /* cores do grafico de ouro (azul em cima, vermelho embaixo); o degrade de opacidade e feito em matchEndGold */
.m-gt{fill:#d7dee9;font-size:13px;font-weight:400}
.m-eft{display:flex;align-items:center;gap:calc(24*var(--eu));min-height:calc(64*var(--eu))}
.m-eft .m-msg{margin:0;font-size:calc(20*var(--eu))}
.m-go{--kb:1.02;--kt:1.06;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;height:calc(46*var(--eu));margin:0;padding:0;border:0;border-radius:0;background:none;color:#000;font-family:inherit;font-size:calc(17*var(--eu));font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer}   /* Continuar: branco e quadrado como o Jogar do draft, na largura do painel de estatisticas. Os estilos de botao do draft so valem dentro do .d-root, por isso este e proprio. O fundo (::before) e o texto (.m-got) crescem no hover e encolhem no clique; o proprio botao nunca e transformado, entao a area de clique fica parada (nao pisca) e o texto fica em camada propria (nao treme). AJUSTE: --kb = crescimento do fundo e --kt = do texto no hover (1 = nao cresce) */
.m-go::before{content:'';position:absolute;inset:0;z-index:-1;background:#fff;transition:background .15s,transform .12s}
.m-got{display:inline-block;transition:transform .12s;will-change:transform;backface-visibility:hidden;-webkit-font-smoothing:antialiased}
.m-go:hover::before,.m-go:focus-visible::before{background:#e6eaff;transform:scale(var(--kb))}
.m-go:hover .m-got,.m-go:focus-visible .m-got{transform:scale(var(--kt))}
.m-go:focus-visible{outline:0}
.m-go:active::before{transform:scale(calc(2 - var(--kb)))}
.m-go:active .m-got{transform:scale(calc(2 - var(--kt)))}
.m-gf{--ox:0px;position:absolute;left:50%;bottom:calc(100% + 17px);display:flex;align-items:center;gap:1.6px;white-space:nowrap;pointer-events:none;z-index:4;animation:m-gf 1.3s ease-out forwards}   /* "+ouro" flutuante (matchGoldFx em match.js): fica pendurado acima da barra de vida do campeao, sobe e some. --ox = deslocamento lateral (k1 esquerda, k2 direita) */
.m-gf.k1{--ox:-12px}.m-gf.k2{--ox:12px}
.m-gf b{font-size:9.6px;font-weight:700;line-height:1;color:#f6cc54;font-variant-numeric:tabular-nums;text-shadow:0 0 1.6px #3a2a05,0 .8px 1.6px rgba(0,0,0,.9),.8px 0 0 #3a2a05,-.8px 0 0 #3a2a05}   /* dourado com contorno escuro, como na referencia: +20 e a moeda ao lado */
.m-gc{display:block;width:10.4px;height:10.4px;object-fit:contain;filter:drop-shadow(0 .8px .8px rgba(0,0,0,.65))}
.m-pg{position:absolute;left:50%;bottom:calc(100% + 30px);width:34px;height:34px;margin-left:-17px;pointer-events:none;z-index:5;animation:m-pg 2.4s ease-out forwards}   /* ping do bot (matchPingFx em match.js): icone pendurado acima da vida do campeao; so opacidade e escala (sem transform, que a etiqueta ja usa) */
.m-pgi{display:block;width:100%;height:100%;object-fit:contain}   /* sem filter (drop-shadow repintava o icone a cada quadro) */
@keyframes m-pg{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}   /* so opacidade: barata */
@keyframes m-gf{0%{opacity:0;transform:translate(calc(-50% + var(--ox)),4.8px) scale(.8)}12%{opacity:1;transform:translate(calc(-50% + var(--ox)),0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--ox)),-19.2px) scale(1)}}