/* BRASLOL 2 - tela META: painel de campeoes no estilo do client do LoL.
   Reaproveita do career.css: .c-root .c-bg .c-shade .c-stage .c-nav .c-toast (e a animacao hin) e do roster.css: .r-back .r-navt .r-nlogo.
   Classes novas comecam com mz- . Sem style="" no HTML (CSP): so classes aqui; o JS nao precisa de nenhuma variavel CSS (so o --k/--sw do palco, em metaFit).
   Mesmo PALCO FIXO do painel (1620x941, escalado por JS), com o conteudo centralizado: nada rola.
   Layout: rotas no topo (.mz-lns) | esquerda: lista S e A (.mz-cl, 5 linhas) | centro: skin do campeao em zoom + tier + texto do tier + taxas (.mz-ct) | direita: lista F (.mz-cr, 3 linhas, espelhada).
   Cada linha (.mz-r) e um botao: arte da skin atras (mascara some para o lado do texto), icone redondo (sem borda), nome, tier e rota. Escolhida = aria-pressed="true" (aro e nome pratas). Tudo e prata; so a letra do tier S e dourada.
   O JS muda so aria-pressed (mtMark), troca o #mz-ct (centro) e redesenha o #mz-body (troca de rota).
   Nada que tenha texto anima opacidade/transform (o texto treme): so a arte do centro (.mz-sp) faz fade ao trocar de campeao e as linhas fazem fade (so opacidade, em cascata) ao trocar de rota (.sw). */

body[data-screen="meta"] #topbar{display:none}
body[data-screen="meta"] #app{background:#121212;overflow:hidden;touch-action:none;padding-left:0;padding-right:0}
@font-face{font-family:"Opal";src:url(../assets/fonts/Opal.ttf) format("truetype");font-weight:400;font-style:normal;font-display:block}   /* fonte da letra do tier (assets/fonts/Opal.ttf; o servidor.ps1 ja libera .ttf e o CSP ja libera font-src 'self') */

.mz-main{--sv:#c9d1e0;--bc:#c9d1e0;--mt-tf:"Opal","Hegarown",Georgia,"Times New Roman",serif;position:absolute;left:50%;top:0;width:1620px;height:941px;margin-left:-810px;pointer-events:none;color:#fff}
.mz-body{position:absolute;inset:0;animation:hin .39s ease .13s both}
.mz-main button{pointer-events:auto}
.mz-tS{--tc:#f0c35a}   /* so a LETRA do tier S e dourada; todo o resto (aros, bordas, brilhos) e prata. A letra A prata azulado, F cinza */
.mz-tA{--tc:#c7d2ea}
.mz-tF{--tc:#8d93a8}

/* ---- rotas (topo) ---- */
.mz-lns{will-change:transform;position:absolute;left:50%;top:58px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
/* anti-tremida (README, item 10): .mz-lns (botoes de rota) e .mz-ch (titulos) NAO sao recriados na troca de rota e ficam em camada fixa propria; so as listas e o centro (.nolayer) sao refeitos */
.mz-lns h3{display:flex;align-items:center;gap:16px;margin:0;font-size:13px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.mz-lns h3::before,.mz-lns h3::after{content:'';display:block;width:90px;height:1px;background:linear-gradient(90deg,transparent,var(--sv))}
.mz-lns h3::after{transform:scaleX(-1)}
.mz-lb{display:flex;gap:10px}
.mz-lbtn{display:flex;align-items:center;justify-content:center;width:64px;height:44px;padding:0;border:0;border-radius:0;background:rgba(255,255,255,.14);font:inherit;color:#fff;cursor:pointer;transition:background .15s,transform .12s}   /* igual aos outros botoes do jogo (.c-play / .d-ln): quadrado, sem borda, fundo branco translucido, so o icone */
.mz-lbtn:hover,.mz-lbtn:focus-visible{background:rgba(255,255,255,.28);outline:none}
.mz-lbtn:active{transform:scale(.96)}
.mz-lbtn[aria-pressed="true"]{background:rgba(255,255,255,.3);box-shadow:inset 0 -2px 0 #fff}   /* barrinha embaixo da rota escolhida (igual ao filtro de lane da soloqueue) */
.mz-lim{display:block;width:30px;height:30px;object-fit:contain;filter:grayscale(1) brightness(1.5);opacity:.65}
.mz-lbtn:hover .mz-lim,.mz-lbtn:focus-visible .mz-lim,.mz-lbtn[aria-pressed="true"] .mz-lim{opacity:1}

/* ---- colunas (esquerda S/A e direita F) ---- */
.mz-col{position:absolute;top:168px;width:480px}
.mz-cl{left:30px}
.mz-cr{left:1110px}
.mz-ch{will-change:transform;display:flex;align-items:baseline;gap:14px;height:34px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.28);white-space:nowrap}
.mz-ch h2{margin:0;font-size:20px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.mz-ch h2 b{font-family:var(--mt-tf);font-size:24px;font-weight:400;font-synthesis:none;color:var(--tc)}
.mz-ch small{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.mz-ch .mz-bn{min-width:0;overflow:hidden;font-size:11px;font-style:normal;font-weight:500;letter-spacing:.02em;text-overflow:ellipsis;color:rgba(255,255,255,.6)}   /* adendo ao lado do split: texto fixo escrito aqui */
.mz-list{display:flex;flex-direction:column;gap:10px}

/* ---- linha do campeao (estilo da lista do client) ---- */
.mz-r{--cb:rgba(12,15,30,.9);position:relative;display:flex;align-items:center;gap:16px;width:100%;height:104px;box-sizing:border-box;padding:0 18px;overflow:hidden;border:0;border-radius:0;background:var(--cb);box-shadow:inset 0 -1px 0 rgba(201,209,224,.3);font:inherit;text-align:left;color:#fff;cursor:pointer;will-change:transform,scale}   /* camada propria fixa: o "apertar" do clique (.tap = scale .975, css/style.css) nao cria/desfaz camada e o texto nao treme */
.mz-r:hover,.mz-r:focus-visible{--cb:rgba(26,31,54,.92);outline:none}
.mz-r:focus-visible{box-shadow:inset 0 0 0 2px #fff}
.mz-r[aria-pressed="true"]{--cb:rgba(28,31,44,.92);box-shadow:inset 0 0 0 2px var(--sv)}
.mz-sr{flex-direction:row-reverse;text-align:right}
.mz-rb{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:translateX(16%) scale(1.3);transform-origin:50% 38%;-webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 62%);mask-image:linear-gradient(90deg,transparent 8%,#000 62%)}   /* a arte da skin fica transparente do lado do icone e do nome (degrade por mascara: sem emenda) */
.mz-sr .mz-rb{transform:translateX(-16%) scale(1.3);-webkit-mask-image:linear-gradient(270deg,transparent 8%,#000 62%);mask-image:linear-gradient(270deg,transparent 8%,#000 62%)}
.mz-ri{position:relative;z-index:1;flex:none;display:block;width:72px;height:72px;box-sizing:border-box;overflow:hidden;border:2px solid rgba(201,209,224,.6);border-radius:50%;background:#0a0d1a;transition:border-color .15s,box-shadow .15s}   /* aro prata; o escolhido clareia e brilha (abaixo) */
.mz-r:hover .mz-ri,.mz-r:focus-visible .mz-ri{border-color:rgba(230,235,245,.85)}
.mz-r[aria-pressed="true"] .mz-ri{border-color:#eef2fa;box-shadow:0 0 6px 1px rgba(238,242,250,.85),0 0 18px 4px rgba(201,209,224,.55)}
.mz-rm{display:block;width:100%;height:100%;object-fit:cover;object-view-box:inset(7%)}   /* o icone do ddragon vem com uma moldura preta fina: o recorte tira a moldura */
@supports not (object-view-box:inset(5%)){.mz-rm{transform:scale(1.14)}}
.mz-rx{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mz-rx b{overflow:hidden;font-size:20px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.mz-rx small{font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.75);text-shadow:0 1px 5px rgba(0,0,0,.85)}
.mz-r[aria-pressed="true"] .mz-rx b{color:var(--sv)}
.mz-hx{position:relative;z-index:1;flex:none;width:30px;height:34px;background:var(--bc);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-style:normal}   /* selo hexagonal: hexagono na cor do tier com outro, escuro, por dentro (a borda) */
.mz-hx b{position:absolute;inset:2px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-top:1px;background:#10131f;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-size:14px;font-weight:800;line-height:1;color:var(--tc)}

/* ---- centro: skin em zoom ---- */
.mz-ct{position:absolute;left:550px;top:150px;width:520px;display:flex;flex-direction:column;align-items:center;text-align:center}
.mz-orb{position:relative;flex:none;width:520px;height:520px}
.mz-tk{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -.4deg,rgba(255,255,255,.5) 0 .8deg,transparent .8deg 2.4deg);-webkit-mask-image:radial-gradient(circle,transparent 0 247px,#000 248px 259px,transparent 260px);mask-image:radial-gradient(circle,transparent 0 247px,#000 248px 259px,transparent 260px)}   /* anel de marcas do client */
.mz-disc{position:absolute;inset:18px;display:block;box-sizing:border-box;overflow:hidden;border:3px solid var(--sv);border-radius:50%;background:#0a0d1a;box-shadow:0 0 36px rgba(201,209,224,.25),inset 0 0 40px rgba(0,0,0,.45)}
.mz-sp{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.12);transform-origin:50% 40%;animation:mzfade .35s ease both}   /* o zoom: a arte centralizada preenche o circulo e ainda amplia um pouco */
@keyframes mzfade{from{opacity:0}}
.mz-body.sw .mz-r{animation:mzfade .34s ease both}   /* troca de rota: as linhas (recriadas) entram em fade, uma depois da outra; SO opacidade (sem deslocamento: nao treme) */
.mz-body.sw .mz-r:nth-child(2){animation-delay:.05s}
.mz-body.sw .mz-r:nth-child(3){animation-delay:.1s}
.mz-body.sw .mz-r:nth-child(4){animation-delay:.15s}
.mz-body.sw .mz-r:nth-child(5){animation-delay:.2s}
.mz-tag{position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin-top:-26px;box-sizing:border-box;justify-content:center;width:150px;padding:5px 0;border:0;border-radius:3px;background:rgba(14,16,26,.92);font-size:17px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.mz-tag b{padding-top:.18em;font-family:var(--mt-tf);font-size:28px;font-weight:400;font-synthesis:none;line-height:1;letter-spacing:0;color:var(--tc)}
.mz-nm{margin:10px 0 0;font-size:42px;font-weight:800;line-height:1.05;letter-spacing:.03em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.mz-lnm{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.mz-lni{display:block;width:20px;height:20px;object-fit:contain;filter:grayscale(1) brightness(1.5)}
.mz-ds{box-sizing:border-box;width:100%;margin:12px 0 0;padding:12px 22px;border:1px solid rgba(255,255,255,.22);border-radius:4px;background:rgba(10,12,28,.62);font-size:15px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.92)}
.mz-sts{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:56px;margin-top:10px;padding:0 22px;border-radius:4px;background:rgba(10,12,28,.5)}
.mz-s{display:flex;flex-direction:column;gap:4px;min-width:0}
.mz-s small{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:rgba(255,255,255,.65);white-space:nowrap}
.mz-s b{font-size:20px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.mz-s sup{margin-left:2px;font-size:10px;font-weight:600;line-height:1;vertical-align:baseline}
.mz-ar{display:block;flex:none;width:7px;height:6px}   /* setinha: acima da media (verde) ou abaixo (rosa) */
.mz-ar.up{background:#3ee0c8;clip-path:polygon(50% 0,100% 100%,0 100%)}
.mz-ar.dn{background:#ff5c8a;clip-path:polygon(0 0,100% 0,50% 100%)}
.mz-cs{display:flex;flex-direction:column;gap:4px}
.mz-cs small{font-size:10px;font-weight:500;color:rgba(255,255,255,.65)}
.mz-cq{display:flex;gap:8px}
.mz-q{display:block;flex:none;width:26px;height:26px;overflow:hidden;border-radius:50%}   /* counter: icone redondo, sem borda e sem % */
.mz-qi{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;object-view-box:inset(6%)}
@supports not (object-view-box:inset(5%)){.mz-qi{transform:scale(1.14)}}