/* BRASLOL 2 - painel da carreira (dashboard).
   PALCO FIXO de 1631x941 px (medidas tiradas da arte de referencia), reduzido/ampliado por JS (--k) para caber na tela: NADA rola.
   Todas as classes comecam com c- . Sem style="" no HTML (CSP): so classes aqui e style.setProperty('--k') no JS (CSSOM e permitido). */

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

.c-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(.c-root) [hidden]{display:none!important}
:where(.c-root) button{font-family:inherit;color:inherit;margin:0;padding:0;border:0;background:none;cursor:pointer}
.c-root :focus-visible{outline:2px solid #fff;outline-offset:2px}
:where(.c-root) h2{margin:0}
:where(.c-root) ul,:where(.c-root) ol{list-style:none;margin:0;padding:0}
:where(.c-root) p{margin:0;max-width:none}
.c-root svg.c-ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}

/* ---- fundo: a MESMA arte da tela inicial (rosto a direita) + veu azulado ---- */
.c-bg{position:absolute;inset:0;background:url(../assets/img/backgrounds/tela-inicial.webp) center/cover no-repeat;opacity:.8}
/* MODO ESCURO (settings.js grava data-dark="1" no <html>): troca so a imagem de fundo de todas as telas que usam .c-bg (carreira, elenco, scrims, solo queue, times) */
html[data-dark="1"] .c-bg{background-image:url(../assets/img/backgrounds/dark-tela-inicial.webp);opacity:1}
/* escurecimento em degrade: bem leve (antes .9/.72/.26 a esquerda e .88 embaixo). Para ajustar, mude so os numeros de opacidade. */
.c-shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(18,18,18,.3) 0%,rgba(18,18,18,.2) 38%,rgba(18,18,18,.06) 72%,rgba(18,18,18,0) 100%),
    linear-gradient(0deg,rgba(18,18,18,.28) 0%,rgba(18,18,18,.12) 22%,rgba(18,18,18,0) 55%),
    linear-gradient(180deg,rgba(18,18,18,.15) 0%,rgba(18,18,18,0) 22%)}

/* ---- palco ---- */
.c-stage{position:absolute;left:0;top:0;width:var(--sw,1620px);height:941px;transform:scale(var(--k,1));transform-origin:0 0;opacity:0}
.c-stage.fit{opacity:1}

/* ---- barra superior ---- */
.c-nav{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:5}
.c-nav>*{pointer-events:auto}
.c-navbg,.c-navext{position:absolute;background:transparent;border-bottom:1px solid rgba(255,255,255,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.c-navbg{left:0;top:0;width:100%;height:46px;box-sizing:border-box;pointer-events:none}
.c-navext{left:-3000px;top:0;width:3000px;height:46px;box-sizing:border-box;pointer-events:none}
.c-tabs{position:absolute;left:0;top:0;width:1600px;height:46px}
.c-tab{position:absolute;top:0;height:46px;display:flex;align-items:center;justify-content:center;padding:2px 0 0;text-indent:.16em;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;line-height:1.15;text-align:center;color:rgba(255,255,255,.66);transform:translateX(-50%);transition:color .15s}
.c-t0{left:133.5px;width:151px;color:#fff;font-weight:700}
.c-t1{left:332px;width:110px}.c-tv{left:455px;width:110px}.c-t2{left:578px;width:110px}.c-t3{left:700px;width:110px}.c-t4{left:823px;width:110px}
.c-tab:hover{color:#fff}
.c-tab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff}
.c-tab.on::before{content:'';position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:#fff;transform:rotate(45deg);z-index:1}
.c-sep{position:absolute;left:233px;top:1px;display:flex;align-items:center;justify-content:center;width:16px;height:44px;color:rgba(255,255,255,.75)}
.c-sep svg{width:9px;height:16px;overflow:visible}

/* BRASLOL 2 no canto superior direito (mesma fonte Hegarown da tela inicial) */
.c-brand{position:absolute;right:78px;top:0;height:46px;display:flex;align-items:center;gap:14px;padding-top:1.5px;font-family:"Hegarown",Georgia,"Times New Roman",serif;font-weight:400;font-synthesis:none;font-size:23.4px;line-height:1;letter-spacing:0;color:#fff;white-space:nowrap;text-shadow:0 1px 3px rgba(8,14,30,.6);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;pointer-events:none}
.c-blogo{display:block;flex:none;width:28px;height:30px;margin-bottom:6px;object-fit:contain;pointer-events:none;user-select:none}   /* logo do site (assets/img/logo.png, branca com transparencia, proporcao 557x593) ao lado esquerdo do BRASLOL 2. margin-bottom sobe a logo uns 3px em relacao ao texto, para ficarem alinhados com as abas */

/* botao de modo escuro (sol/lua, estilo "interruptor") no canto da marca, a esquerda da logo (data-act="dark"). Claro = bolinha branca a esquerda + sol; escuro = bolinha cinza a direita + lua e estrelas. aria-pressed=true quando o modo escuro esta ligado. */
.c-dk{position:relative;flex:none;width:56px;height:28px;margin-bottom:5px;border-radius:14px;pointer-events:auto;background:#eef0f5;color:#8e9099;text-shadow:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 1px 1px rgba(255,255,255,.3);transition:background .25s,box-shadow .25s,color .25s}
.c-dk::after{content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .25s,background .25s}
.c-dk svg{position:absolute;top:50%;transition:opacity .2s}
.c-root svg.c-dks{right:6px;width:16px;height:16px;margin-top:-8px;opacity:1}
.c-root svg.c-dkm{left:5px;width:24px;height:20px;margin-top:-10px;fill:currentColor;stroke:none;opacity:0}
.c-dk[aria-pressed="true"]{background:#141414;color:#9a9ca6;box-shadow:inset 0 2px 5px rgba(0,0,0,.8),0 1px 1px rgba(255,255,255,.18)}
.c-dk[aria-pressed="true"]::after{transform:translateX(28px);background:#3b3b3b;box-shadow:0 2px 5px rgba(0,0,0,.6)}
.c-root .c-dk[aria-pressed="true"] svg.c-dks{opacity:0}
.c-root .c-dk[aria-pressed="true"] svg.c-dkm{opacity:1}

/* faixa lateral direita (hamburguer + losango) */
.c-mbtn{position:absolute;right:18px;top:2px;width:44px;height:40px;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .12s,opacity .15s}
.c-mbtn:hover{opacity:.8}.c-mbtn:active{transform:scale(.92)}
.c-mbtn svg.c-hb{width:26px;height:22px;stroke-width:2}

/* menu expansivel (abre sob o hamburguer) */
.c-menu{position:absolute;right:18px;top:50px;width:280px;padding:8px;background:transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.5);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.35);animation:hin .18s ease both;z-index:8}
.c-mhead{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.35)}
.c-mhead span{display:flex;flex-direction:column;gap:3px;min-width:0}
.c-mhead b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-mhead small,.c-mi small{font-size:10.5px;color:rgba(255,255,255,.65)}
.c-mlogo{width:36px;height:36px;object-fit:contain;flex:none}
.c-mi{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;border-radius:6px;padding:12px 10px;font-size:13px;font-weight:600;letter-spacing:.04em;text-align:left;transition:background .12s}
.c-mi:hover{background:rgba(255,255,255,.12)}

/* ---- paineis (vidro) ---- */
.c-main{position:absolute;inset:0;pointer-events:none}
.c-p{position:absolute;box-sizing:border-box;pointer-events:auto;overflow:hidden;background:linear-gradient(135deg,rgba(46,54,78,.58),rgba(28,34,56,.66));backdrop-filter:blur(3.9px);-webkit-backdrop-filter:blur(3.9px);border:1px solid rgba(255,255,255,.5);border-radius:5px;box-shadow:none}
.c-ph{display:flex;align-items:center;justify-content:space-between;height:43px;margin:0 18px;padding:0 1px 0 4px;border-bottom:1px solid rgba(255,255,255,.5);box-sizing:border-box}
.c-ph h2{font-size:15px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;margin-right:auto!important}
.c-low .c-ph{height:44px}
.c-ph-i{padding-left:0}
.c-ph-i>svg.c-ic{width:20px;height:20px;margin-right:16px;color:rgba(255,255,255,.92)}
.c-ph-i>img.c-ic-img{display:block;flex:none;width:20px;height:20px;margin-right:16px;object-fit:contain;position:relative;top:-1px;filter:brightness(0) invert(.92)}   /* icone de trofeu em imagem (assets/img/ui/trofeu.webp): mesmo tamanho e espaco dos icones SVG do cabecalho; top:-1px sobe o icone 1px: o centro visual do texto (maiusculas) fica ~1px acima do centro da caixa de 20px; o filter deixa a imagem (escura, fundo transparente) branca, igual ao branco dos outros icones (rgba 255,.92) */
.c-chev{display:flex;align-items:center;justify-content:center;width:22px;height:30px;margin-right:-4px!important;color:rgba(255,255,255,.95);transition:transform .12s}
.c-chev:hover{transform:translateX(2px)}
.c-chev svg.c-chv{width:9px;height:16px;stroke-width:1.5}
.c-mut{font-size:12.5px;color:rgba(255,255,255,.7)}.c-empty{padding:30px 22px}
.c-p small{color:rgba(255,255,255,.7)}

/* sem borda nos paineis do dashboard (so aqui; a tela do Elenco continua igual) */
.c-next,.c-team,.c-money,.c-calp,.c-twp,.c-tabp{border-color:transparent}
.c-next,.c-team,.c-money,.c-twp,.c-tabp{will-change:transform,opacity}   /* camada fixa (igual .c-calp e .c-pc): sem troca de camada no fim da entrada, o texto do cabecalho nao treme */

/* proxima partida */
.c-next{left:47px;top:130px;width:450px;height:273px}
.c-vs{position:absolute;left:18px;right:18px;top:85px;display:grid;grid-template-columns:150px 1fr 150px;align-items:start}
.c-side{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.c-big{width:48px;height:46px;object-fit:contain;display:block}
.c-side b{margin-top:9px;max-width:150px;font-size:13px;font-weight:700;letter-spacing:.07em;line-height:20px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-side small{margin-top:2px;font-size:11.5px;letter-spacing:.07em;line-height:20px;text-transform:uppercase}
.c-vsmid{position:relative;height:124px;margin-top:-17px}
.c-vsmid span{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:20px;font-weight:700;letter-spacing:.12em;text-indent:.12em;color:rgba(255,255,255,.95)}
/* quadrados do placar da serie MD3/MD5 (serPips, career.js): ao lado do VS, na altura dos logos; seu time a esquerda, cheio = mapa vencido */
.c-sr{position:absolute;top:40px;width:22px;display:flex;justify-content:center;gap:3px}   /* ao lado do VS: cada grupo ocupa uma coluna fixa de 22px (esquerda = seu time, direita = o adversario) */
.c-sr.l{left:calc(50% - 52px)}.c-sr.r{left:calc(50% + 30px);flex-direction:row-reverse}
.c-sr i{display:block;flex:none;width:11px;height:11px;box-sizing:border-box;border:1px solid rgba(255,255,255,.95)}
.c-sr i.on{background:rgba(255,255,255,.95)}
.c-info{position:absolute;left:18px;right:18px;top:210px;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.4)}
.c-ii{display:flex;align-items:center;gap:13px;min-width:0;padding-left:1px}
.c-ii>svg.c-ic{width:24px;height:24px;color:rgba(255,255,255,.92);stroke-width:1.5}
.c-ii span{display:flex;flex-direction:column;gap:3px;min-width:0}
.c-ii b{font-size:11px;font-weight:600;letter-spacing:.07em;line-height:15px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-ii small{font-size:9px;letter-spacing:.06em;line-height:12px;text-transform:uppercase;white-space:nowrap}

/* seu time */
.c-team{left:517px;top:130px;width:413px;height:273px}
.c-tline{display:flex;align-items:center;gap:15px;margin:11px 18px 0 18px;height:34px}
.c-tline b{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.c-xs{width:23px;height:23px;object-fit:contain;flex:none;display:block}
.c-pcs{position:absolute;left:16px;right:16px;top:104px;height:150px;display:grid;grid-template-columns:repeat(5,1fr);gap:6.5px}
.c-pc{position:relative;overflow:hidden;border:0;border-radius:6px;background:#1c2438;will-change:transform,opacity}   /* camada propria fixa: sem troca de camada no fim da entrada (evitava o tranco) */
.c-pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.c-pc::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,0) 38%,rgba(10,14,26,.82) 100%)}
.c-pcap{position:absolute;left:0;right:0;bottom:8px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.c-pcap small{font-size:10px;letter-spacing:.06em;line-height:12px;color:rgba(255,255,255,.85)}
.c-pcap b{max-width:96%;font-size:12.5px;font-weight:700;letter-spacing:.04em;line-height:15px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* dinheiro */
.c-money{left:947px;top:130px;width:288px;height:273px;overflow:visible;z-index:6}   /* overflow visivel e z-index: o menu "Expandir marca" (css/marca.css) abre por cima dos paineis vizinhos */
.c-mrow{position:absolute;left:18px;top:58px;height:44px;display:flex;align-items:center;gap:13px;padding-left:2px}   /* o espaco vai de 44px (fim do titulo) ate 116px (c-mline): centro em 80px = top 58 + metade de 44 (centralizado so na vertical; horizontal fica a esquerda) */
.c-gold{width:34px;height:34px;object-fit:contain;flex:none;display:block}   /* moeda do painel Dinheiro (IMG.ui.gold) */
.c-mval{font-size:28px;font-weight:500;letter-spacing:.01em;line-height:1;font-variant-numeric:tabular-nums}
.c-mval.neg{color:#ff9aa5}   /* caixa negativo */
.c-neg{position:absolute;left:20px;top:97px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffb4bb}
.c-mline{position:absolute;left:18px;right:18px;top:116px;height:1px;background:rgba(255,255,255,.4)}
.c-dl{position:absolute;left:18px;right:19px;top:126px;display:flex;flex-direction:column;gap:4px;margin:0}
.c-dl div{display:flex;justify-content:space-between;align-items:center;height:24px}
.c-dl dt{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.c-dl dd{margin:0;font-size:14px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.95)}

/* painéis da linha de baixo */
.c-calp{left:47px;top:425px;width:311px;height:447px;will-change:transform,opacity}   /* idem: camada fixa, sem tranco no fim da entrada */
.c-twp{left:376px;top:425px;width:300px;height:448px}
.c-tabp{left:696px;top:425px;width:539px;height:448px;border-color:transparent}

/* calendario */
.c-calhead{display:flex;align-items:center;justify-content:space-between;height:41px;margin:0 17px;border-bottom:1px solid rgba(255,255,255,.4);box-sizing:border-box;padding:0 6px 0 9px}
.c-calhead b{font-size:14px;font-weight:600;letter-spacing:.16em;margin-top:3px}
.c-nb{display:flex;align-items:center;justify-content:center;width:26px;height:30px;color:#fff}
.c-nb svg.c-chv{width:9px;height:16px;stroke-width:1.5}
.c-nb:disabled{opacity:.3;cursor:default}
.c-cal{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:30px repeat(6,39.4px);justify-items:center;align-items:center;margin:10px 13px 0}
.c-dw{font-size:14px;font-weight:600;letter-spacing:.04em;color:#fff}
.c-d{position:relative;display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:8px;font-size:14px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.c-d.off{color:rgba(255,255,255,.42)}
.c-d.m{background:rgba(255,255,255,.17)}
.c-d.m::after{content:'';position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff}
.c-d.m.w::after{background:#4e9b6f}.c-d.m.l::after{background:#c0626a}   /* jogo ja feito: bolinha verde (vitoria) ou vermelha (derrota), tons escuros pasteis */
.c-d.n{background:#fff;color:#1a2234;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.c-d.o{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}   /* dia de playoffs (partida sua) */
.c-d.n.o{box-shadow:0 2px 10px rgba(0,0,0,.2)}
.c-dlogo{width:22px;height:22px;object-fit:contain;display:block;margin-bottom:5px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}   /* logo do adversario no lugar do numero do dia */
.c-d.n .c-dlogo{margin-bottom:0}
.c-legend{position:absolute;left:24px;right:27px;top:367px;height:51px;border-top:1px solid rgba(255,255,255,.4);display:flex;align-items:center;gap:30px;padding-left:1px}
.c-legend span{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.c-legend i{display:block;width:12px;height:12px;border-radius:50%;box-sizing:border-box}
.c-lp{background:#fff}.c-lw{background:#4e9b6f}.c-lx{background:#c0626a}

/* tweets */
.c-tws{margin-top:0;max-height:404px;overflow-y:auto;overscroll-behavior:contain}
.c-tws::-webkit-scrollbar{width:5px}   /* barra minimalista: fina, sem trilho e sem setas. NAO ponha scrollbar-width/scrollbar-color aqui: no Chrome/Edge atuais eles anulam isto e as setas voltam */
.c-tws::-webkit-scrollbar-button{display:none;width:0;height:0}
.c-tws::-webkit-scrollbar-track,.c-tws::-webkit-scrollbar-corner{background:transparent}
.c-tws::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border:0;border-radius:3px}
.c-tws::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.55)}
@supports (-moz-appearance:none){.c-tws{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}}   /* Firefox */
.c-tw{display:flex;gap:13px;height:133px;box-sizing:border-box;padding:17px 15px 0 14px;border-bottom:1px solid rgba(255,255,255,.3)}
.c-tw:last-child{border-bottom:0}
/* painel Tweets: link "Ver mercado >" (so texto clicavel, sem moldura) com bolinha de novidades, e tweets do Showtana (mercado) com a logo dos times no texto */
.c-twgo{position:relative;display:flex;align-items:center;gap:3px;height:20px;padding:0;margin:0;border:0;background:none;color:rgba(255,255,255,.72);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap;cursor:pointer;transition:color .15s}
.c-twgo:hover{color:#fff}
.c-twgo:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.c-twgo svg.c-ic{width:14px;height:14px}
.c-twbd{position:absolute;top:-10px;right:-3px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:#f4506b;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;font-style:normal}
.c-tw-m{height:auto;min-height:0;padding-bottom:16px}
.c-tw-m .c-twb p{-webkit-line-clamp:4;line-clamp:4}
.c-tch{white-space:nowrap}   /* logo + sigla do time no tweet do mercado: nunca quebram a linha entre si (a quebra so pode acontecer ANTES do bloco inteiro) */
.c-tl{display:inline-block;width:17px;height:17px;object-fit:contain;vertical-align:-4px;margin:0 3px 0 1px}   /* inline-block: no modo escuro a logo da PAIN/GENGA vira <canvas> (logofx.js) e canvas{display:block} (style.css) a jogava para outra linha */
.c-twe{padding:26px 22px;font-size:13px;line-height:20px;color:rgba(255,255,255,.7)}
.c-av{flex:none;width:62px;height:62px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.c-av0{background:radial-gradient(circle at 35% 30%,#7d8fbe,#2c3558)}
.c-av1{background:radial-gradient(circle at 35% 30%,#c9c6d8,#59607e)}
.c-av2{background:radial-gradient(circle at 35% 30%,#7f6a7d,#2b2236)}
.c-av{position:relative;overflow:hidden}
.c-avi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.c-twb{flex:1;min-width:0}
.c-twh{display:flex;align-items:center;gap:6px;height:20px;margin-top:5px;white-space:nowrap;overflow:hidden}
.c-twh b{font-size:14.5px;font-weight:700;letter-spacing:.02em}
.c-twh small{font-size:10.5px;letter-spacing:.02em;color:rgba(255,255,255,.62)!important;overflow:hidden;text-overflow:ellipsis}
.c-vf{width:16px;height:16px}
.c-twb p{margin-top:5px!important;font-size:13.5px;line-height:21px;color:rgba(255,255,255,.93);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-twm{display:flex;gap:22px;margin-top:10px;height:20px;align-items:center}
.c-twa{display:flex;align-items:center;gap:8px;height:20px;font-size:11.5px;color:rgba(255,255,255,.7);transition:color .15s}
.c-twa:hover{color:#fff}
.c-twa:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.c-twa-l.on{color:#f4506b}
.c-twa-l.on svg.c-ic{fill:currentColor}
.c-twa-r.on{color:#3ecf72}
.c-twa-r.on svg.c-ic{stroke-width:2.2}
.c-twa-c[aria-expanded="true"]{color:#8cc4ff}
.c-twa.twp svg.c-ic{animation:twpop .28s ease}
@keyframes twpop{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.c-twa.twp svg.c-ic{animation:none}}
/* comentarios: a expansao fica escondida ate o tweet ganhar .open */
.c-tw.open{height:auto;min-height:133px;padding-bottom:14px}
.c-tw.open .c-twb p{display:block;height:auto;-webkit-line-clamp:unset;line-clamp:unset}
.c-twcm{display:none;margin-top:8px}
.c-tw.open .c-twcm{display:block}
.c-twcl{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.c-twc{font-size:12px;line-height:17px;color:rgba(255,255,255,.9);overflow-wrap:anywhere}
.c-twc b{font-weight:700;margin-right:6px}
.c-twf{display:flex;gap:6px;align-items:center}
.c-twin{flex:1;min-width:0;height:30px;box-sizing:border-box;padding:0 12px;border-radius:15px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:12px;outline:none}
.c-twin::placeholder{color:rgba(255,255,255,.5)}
.c-twin:focus{border-color:rgba(255,255,255,.75)}
.c-twsend{flex:none;height:30px;padding:0 13px;border-radius:15px;background:#fff;color:#000;font-size:11.5px;font-weight:600}
.c-twsend:hover,.c-twsend:focus-visible{background:#e6eaff}
.c-twm svg.c-ic{width:17px;height:17px;stroke-width:1.5}

/* tabela */
.c-th,.c-tr{display:grid;grid-template-columns:30px 1fr 52px 52px;align-items:center;text-align:center}
.c-th{margin:11px 14px 0;height:26px;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.c-th span:nth-child(2){text-align:left;padding-left:15px}
.c-trs{margin:8px 14px 0}
.c-tr{height:42.4px;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,.22);font-size:13.5px;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
.c-tr:last-child{border-bottom:0}
.c-tr.me{height:42px;margin:0;border:0;border-radius:3px;background:rgba(255,255,255,.13);color:#fff;font-weight:700}
.c-tr.me+.c-tr{margin-top:0}
.c-tm{display:flex;align-items:center;gap:19px;text-align:left;padding-left:15px;min-width:0;text-transform:uppercase}
.c-tm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-tm .c-xs{width:22px;height:22px}
.c-pos,.c-pts{font-weight:600}
.c-lgn{font-size:12px;font-weight:600;letter-spacing:.14em;text-align:center;min-width:58px;margin-top:2px}
.c-tnav{display:flex;align-items:center;margin-right:14px;padding-right:14px;border-right:1px solid rgba(255,255,255,.3)}   /* TIER 1 / TIER 2 (setinhas + nome), a esquerda do nome da liga */
.c-tn{font-size:12px;font-weight:600;letter-spacing:.14em;text-align:center;min-width:56px;margin-top:2px;white-space:nowrap}
.c-main.re>*,.c-main.re .c-tr,.c-main.re .c-grp,.c-main.re .c-tw,.c-main.re .c-pc{animation:none}   /* depois de atualizar um painel nao reanima a entrada */

/* tabela e playoffs na mesma janela (.c-tabp): faixa com o botao que alterna + corpo da aba ativa */
.c-sws{display:flex;align-items:center;justify-content:space-between;height:30px;margin:0 18px;padding:0 1px 0 0px;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,.22)}
.c-sw{display:inline-flex;align-items:center;gap:8px;height:22px;padding:0 10px;border:1px solid rgba(255,255,255,.5);border-radius:4px;background:rgba(255,255,255,.08);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .15s,transform .12s}
.c-sw:hover{background:rgba(255,255,255,.22)}.c-sw:active{transform:scale(.96)}
.c-sw svg.c-chv{width:7px;height:12px;stroke-width:1.8}
.c-psub{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
/* cena da campea (Kai'Sa 3D, js/vendor/kai3d.js): logo do campeao a 50% atras, canvas 3D transparente na frente (arrastar gira), botoes embaixo */
.c-champ{position:absolute;left:0;right:0;top:44px;bottom:62px;overflow:hidden}
.c-chlogo{position:absolute;left:50%;top:50%;width:62%;height:86%;transform:translate(-50%,-50%);object-fit:contain;opacity:.6;filter:grayscale(1) brightness(1.15) contrast(1.8);filter:url(#fx-bw);pointer-events:none;user-select:none;-webkit-user-select:none}   /* mesmo visual das logos do draft (.d-lg): P&B com curva #fx-bw (index.html) e 60% de opacidade */
.c-chlogo.lg-w{filter:brightness(0) invert(1)}   /* os modos abaixo sao os do draft.css (.d-lg.lg-w / lg-inv / lg-k), escolhidos por dLogo/dLogoScan em draft.js */
.c-chlogo.lg-inv{filter:grayscale(1) invert(.9);filter:url(#fx-inv)}
.c-chlogo.lg-k{filter:url(#fx-key)}
.c-kai-cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.c-kai-cv.gira{cursor:grabbing}
.c-chbtns{position:absolute;left:18px;right:18px;bottom:14px;display:flex;justify-content:center;gap:10px}
.c-chbtns .c-play{flex:1;min-width:0;padding:0 6px!important;font-size:12px;letter-spacing:.1em;white-space:nowrap}
.c-tabp .c-th{margin:5px 14px 0;height:22px;padding-right:var(--sb,0px)}
.c-tabp .c-trs{margin:4px 14px 0;max-height:333px;overflow-y:auto;overflow-x:hidden;position:relative}
.c-tabp .c-tr:not(.me){height:41px}
.c-nvid{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:.25;z-index:-1;pointer-events:none;user-select:none;-webkit-user-select:none}   /* fundo animado do painel Proxima partida; fica POR CIMA do vidro do painel (o gradiente e o blur do .c-p pintam antes, z-index:-1 so manda a imagem para tras do texto); .5 -> .25 = 50% menos de opacidade (assets/video/proxima-bg.webp; proxima-msi.webp na etapa MSI e proxima-worlds.webp na etapa WORLDS), criado por bgVidFix() em utils.js */

.c-grp{display:flex;align-items:center;gap:10px;height:26px;padding-left:4px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}   /* faixa com o nome do grupo (liga com grupos, ex.: LPL) */
.c-grp::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.3)}
#c-playoff{position:absolute;left:0;right:0;top:74px;bottom:0;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;user-select:none;-webkit-user-select:none}   /* chave com rolagem lateral SEM barra */
#c-playoff::-webkit-scrollbar{display:none}
#c-playoff.pan{cursor:grab}                      /* chave mais larga que a janela: o mouse vira mao de arrastar */
#c-playoff.pan.drag{cursor:grabbing}
#c-playoff:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:-2px}
.c-brk{display:block;flex:none;margin:0 auto}    /* tamanho natural (atributos width/height do SVG); cabendo, fica centralizado; senao, comeca na esquerda e rola */
.c-brk rect{fill:rgba(10,14,28,.22);stroke:rgba(255,255,255,.62);stroke-width:1.1}
.c-brk path{stroke:rgba(255,255,255,.62);stroke-width:1.1;stroke-linecap:square}
.c-brk .c-crown path{fill:rgba(255,255,255,.88);stroke:none}
.c-brk text{fill:rgba(255,255,255,.88);font-size:12px;font-weight:500;letter-spacing:.04em;stroke:none}
.c-brk .sc{text-anchor:end;font-variant-numeric:tabular-nums}
.c-brk .pd{fill:rgba(255,255,255,.45);font-weight:400}
.c-brk .lo{fill:rgba(255,255,255,.5)}
.c-brk image.lo{opacity:.5}
.c-brk .wn{font-weight:700;fill:#fff}
.c-brk .sec{font-size:9.5px;letter-spacing:.16em;fill:rgba(255,255,255,.7)}
.c-brk .ch{font-size:13px;font-weight:700;letter-spacing:.1em;fill:#fff}
.c-brk .me rect{fill:rgba(255,255,255,.17);stroke:#fff}
.c-brk .dv{stroke:rgba(255,255,255,.25)}

/* aviso */
.c-toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,12px);padding:12px 22px;border-radius:6px;background:transparent;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;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9}
.c-toast.on{opacity:1;transform:translate(-50%,0)}


/* botoes: Jogar (proxima partida) e Gerenciar (seu time) */
.c-play,.c-mng{display:inline-flex;align-items:center;justify-content:center;border:0!important;border-radius:0;background:rgba(255,255,255,.14)!important;color:#fff;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .15s,transform .12s}
.c-play{height:34px;padding:0 30px!important;font-size:13px}
.c-phr{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0;margin-left:12px}
.c-phr b{font-size:11px;font-weight:600;letter-spacing:.07em;line-height:15px;text-transform:uppercase;white-space:nowrap}
.c-phr small{font-size:9px;letter-spacing:.06em;line-height:12px;text-transform:uppercase;white-space:nowrap}
.c-btns{gap:10px}
.c-btns .c-play{flex:1;min-width:0;padding:0 6px!important;font-size:12px;letter-spacing:.1em;white-space:nowrap}
.c-mng{height:26px;margin-left:auto;padding:0 14px!important;font-size:11px}
.c-rep{display:inline-flex;align-items:center;gap:9px;margin-left:12px}
.c-rep-q{width:18px;height:18px;padding:0;border:1px solid rgba(255,255,255,.4)!important;border-radius:50%!important;background:none;color:rgba(255,255,255,.7);font:inherit;font-size:10px;font-weight:600;line-height:16px;text-align:center;cursor:help;transition:border-color .15s,color .15s,background-color .15s}
.c-rep-q:hover,.c-rep-q:focus-visible{border-color:rgba(255,255,255,.9)!important;color:#fff;background:rgba(255,255,255,.08)}
.c-rep-q:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:2px}
.c-rep-tip{display:none;position:absolute;right:12px;top:48px;z-index:5;width:330px;box-sizing:border-box;padding:12px 14px;background:rgba(18,22,38,.97);border:1px solid rgba(255,255,255,.5);border-radius:5px;font-size:12px;font-weight:400;letter-spacing:.02em;line-height:17px;text-transform:none;white-space:normal}
.c-rep-tip b{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.c-rep-tip span{display:block;margin-top:6px}
.c-rep-q:hover+.c-rep-tip,.c-rep-q:focus-visible+.c-rep-tip{display:block}
.c-play:hover,.c-mng:hover{background:rgba(255,255,255,.28)!important}.c-play:active,.c-mng:active{transform:scale(.96)}
/* so os botoes Jogar (data-act="draft") e proximo split (data-act="split"): fundo branco e fonte preta; Avancar dia e Simular continuam translucidos */
.c-play[data-act="draft"],.c-play[data-act="split"]{background:#fff!important;color:#000}
.c-play[data-act="draft"]:hover,.c-play[data-act="draft"]:focus-visible,.c-play[data-act="split"]:hover,.c-play[data-act="split"]:focus-visible{background:#e6eaff!important}

/* ---- animacao de entrada (mesma ideia do menu inicial): fundo suave, barra do topo, cada painel em sequencia e, dentro deles, jogadores/tweets/linhas da tabela ---- */
.c-bg{animation:bgz .9s ease both}
.c-shade{animation:scrin .72s ease both}
.c-nav>:not(.c-menu){animation:hin .36s ease backwards}   /* a animacao fica nos FILHOS, nunca no .c-nav: opacity num ancestral impede o blur (backdrop-filter) do .c-navbg ate o fim da entrada; o .c-menu tem a propria animacao */
.c-main>*{animation:hin .39s ease both}
.c-main>:nth-child(1){animation-delay:0.13s}
.c-main>:nth-child(2){animation-delay:0.2s}
.c-main>:nth-child(3){animation-delay:0.26s}
.c-main>:nth-child(4){animation-delay:0.33s}
.c-main>:nth-child(5){animation-delay:0.39s}
.c-main>:nth-child(6){animation-delay:0.46s}
.c-main>:nth-child(7){animation-delay:0.52s}
.c-pc,.c-tw{animation:hin .36s ease backwards}
.c-tw{will-change:transform,opacity}   /* camada propria fixa (igual .c-pc): sem troca de camada no fim da entrada, o texto e o avatar do tweet nao tremem */
.c-pc:nth-child(1){animation-delay:0.4s}
.c-pc:nth-child(2){animation-delay:0.46s}
.c-pc:nth-child(3){animation-delay:0.51s}
.c-pc:nth-child(4){animation-delay:0.56s}
.c-pc:nth-child(5){animation-delay:0.61s}
.c-tw:nth-child(1){animation-delay:0.56s}
.c-tw:nth-child(2){animation-delay:0.62s}
.c-tw:nth-child(3){animation-delay:0.69s}
@keyframes rin{from{opacity:0;transform:translateX(-12px)}}   /* so horizontal: deslocamento vertical aumentaria a area rolavel da lista e a barra de rolagem piscaria */
.c-tr,.c-grp{animation:rin .36s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.5s + min(var(--i,0),9)*.04s)}   /* --i = posicao na janela da lista, posta por carStandScroll (career.js); vale para linhas e faixas de grupo */
.c-brk>*{animation:rin .36s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.5s + min(var(--i,0),7)*.07s)}   /* chave dos playoffs: cada jogo entra em cascata por coluna (--i = coluna, posta por carBrkIdx em career.js); titulos de fase entram junto da 1a coluna */
.c-brk>path{animation:scrin .5s ease backwards;animation-delay:.85s}   /* linhas de ligacao aparecem depois dos jogos */
.c-brk>.ch{animation-delay:1.05s}   /* "CAMPEAO: X" por ultimo */
.c-main.re .c-brk>*{animation:none}   /* depois de atualizar um painel nao reanima a entrada */

/* MODO ESCURO: logos de time (js/career/logofx.js) com a regra da tela de criar time. .lgx-w = toda branca (igual .nc-tlogo.lg-w) | .lgx-inv = preto vira branco (igual .nc-tlogo.lg-inv; filtro SVG #fx-inv no index.html, a 1a linha e fallback) */
.lgx-w{filter:brightness(0) invert(1)}
.lgx-inv{filter:grayscale(1) invert(.9);filter:url(#fx-inv)}