/* BRASLOL 2 - tela GERENCIAR TIME (roster).
   Reaproveita do career.css: .c-root .c-bg .c-shade .c-stage .c-nav .c-p .c-ph .c-toast .c-brand (e as animacoes hin/scrin).
   Classes novas comecam com r- . Sem style="" no HTML (CSP): so classes aqui e style.setProperty() no JS (CSSOM e permitido).
   Mesmo PALCO FIXO do painel (1620x941, escalado por JS): nada rola, exceto a lista de campeoes dentro do menu de maestria. */

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

/* ---- barra superior: voltar + nome do time ---- */
.r-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}
.r-back:hover{color:#fff}
.r-back svg.c-chv{width:9px;height:16px;stroke-width:1.6}
.r-navt{position:absolute;left:190px;top:0;height:28px;display:flex;align-items:center;gap:12px;padding-left:22px;border-left:1px solid rgba(255,255,255,.35);margin:9px 0;box-sizing:border-box}
.r-nlogo{width:24px;height:24px;object-fit:contain;flex:none;display:block}
.r-navt b{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.r-navt small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);white-space:nowrap}

/* ---- paineis ---- */
.r-main{position:absolute;inset:0;pointer-events:none}
.r-grid{left:47px;top:130px;width:900px;height:743px;border-color:transparent}
.r-det{left:967px;top:130px;width:590px;height:743px;border-color:transparent}
.r-cnt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-right:24px}
.r-cash{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.r-gold{width:22px;height:22px;object-fit:contain;flex:none;display:block}   /* moeda do cabecalho do Elenco (mesma imagem do painel Dinheiro: IMG.ui.gold) */

/* ---- elenco: grade 4x2 (8 vagas) ---- */
.r-cards{position:absolute;left:18px;right:18px;top:62px;bottom:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
.r-card{position:relative;overflow:hidden;border:0;border-radius:8px;background:#1c2438;transition:box-shadow .15s}
.r-card.on{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 10px 28px rgba(0,0,0,.35)}
.r-sel{position:absolute;inset:0;width:100%;height:100%;display:block;text-align:left}
.r-sel:focus-visible{outline-offset:-4px}
.r-pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block;transform:scale(.95);transform-origin:50% 0}   /* zoom da foto 5% menor */
.r-sel::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,14,26,.4) 0%,rgba(10,14,26,0) 24%,rgba(10,14,26,0) 50%,rgba(10,14,26,.92) 100%)}
.r-ovr{position:absolute;left:12px;top:10px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.r-ovr b{font-size:30px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.r-ovr small{margin-top:3px;font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.85)}
.r-cap{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:flex;flex-direction:column;gap:4px}
.r-cap small{font-size:10.5px;letter-spacing:.12em;color:rgba(255,255,255,.85)}
.r-cap b{font-size:19px;font-weight:700;letter-spacing:.05em;line-height:22px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-cap em{font-style:normal;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* botoes sobre a foto: maestria, titular, vender (coluna a direita) */
.r-acts{position:absolute;right:10px;top:10px;z-index:3;display:flex;flex-direction:column;gap:6px}
.r-cbtn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.75);background:rgba(18,24,42,.72);color:#fff;transition:background .15s,border-color .15s,transform .12s}   /* SEM backdrop-filter: o blur sobre a foto (que tem transform) era re-rasterizado quando o hover mudava a cor/borda (Vender e Aposentar) e o botao tremia. A borda anima junto com o fundo, sem pulo */
.r-cbtn:hover{background:rgba(255,255,255,.3)}.r-cbtn:active{transform:scale(.92)}
.r-cbtn.on{background:#fff;color:#1a2234;border-color:#fff}
.r-cbtn.on:hover{background:rgba(255,255,255,.85)}
.r-cbtn svg.r-ic{width:18px;height:18px;stroke-width:1.7}
.r-cbtn.r-cs:hover{background:rgba(220,70,70,.55);border-color:rgba(255,170,170,.95)}
.r-card.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:0;background:rgba(255,255,255,.04);color:rgba(255,255,255,.6)}   /* vaga livre: sem borda */
.r-plus{font-size:44px;font-weight:300;line-height:1;color:rgba(255,255,255,.4)}
.r-card.empty b{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.r-card.empty small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* ---- status do jogador ---- */
.r-none{position:absolute;left:0;right:0;top:44px;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 60px;text-align:center;color:rgba(255,255,255,.7)}
.r-none p{max-width:340px!important;font-size:14px;line-height:22px;letter-spacing:.04em}
.r-dbody{position:absolute;left:0;right:0;top:44px;bottom:0;animation:hin .3s ease both}
.r-id{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:18px 22px 0}
.r-id>div:first-child{min-width:0}
.r-nm{display:block;font-size:30px;font-weight:700;letter-spacing:.06em;line-height:34px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-id small{display:block;margin-top:3px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.r-big{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.r-big b{font-size:46px;font-weight:600}
.r-big small{margin-top:4px!important;font-size:10px!important}
.r-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 22px 0}
.r-chip{display:flex;flex-direction:column;justify-content:center;gap:4px;height:52px;box-sizing:border-box;padding:0 12px;border:0;border-radius:6px;background:rgba(255,255,255,.07);min-width:0}
.r-chip small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.r-chip b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.r-flag{width:22px;height:auto;max-height:16px;object-fit:contain;display:block}
.r-ats{margin:14px 22px 0}
.r-at{display:grid;grid-template-columns:272px minmax(0,1fr) 34px;align-items:center;gap:14px;height:46px;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,.18)}
.r-at:last-child{border-bottom:0}
.r-an{min-width:0}
.r-an b{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.14em}
.r-an small{display:block;margin-top:2px;font-size:10px;line-height:13px;letter-spacing:.02em;color:rgba(255,255,255,.62)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-bar,.r-mb{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.r-fill{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.5),#fff);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.r-at.top .r-fill{background:linear-gradient(90deg,rgba(77,146,190,.55),#4d92be)}
.r-av{text-align:right;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.r-at.top .r-av{color:#4d92be}
.r-at.z .r-av{color:rgba(255,255,255,.42)}
.r-foot{position:absolute;left:22px;right:22px;bottom:18px;height:74px;display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.4);padding-top:2px}
.r-train{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.r-train small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.r-train b{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- botoes ---- */
.r-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:38px;padding:0 18px;border:0;border-radius:0;background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .15s,transform .12s}
.r-btn:hover{background:rgba(255,255,255,.28)}.r-btn:active{transform:scale(.96)}
.r-btn svg.r-ic{width:18px;height:18px;stroke-width:1.6}
.r-sell{background:rgba(220,70,70,.22)}
.r-sell:hover{background:rgba(220,70,70,.42)}
.r-sm{height:28px;padding:0 12px;font-size:11px}

/* ---- menu flutuante (maestria): abre ao lado do botao clicado; --x e --y vem do JS (roPlace) ---- */
.r-pop{position:absolute;left:var(--x,0px);top:var(--y,0px);z-index:30;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;background:linear-gradient(135deg,rgba(46,54,78,.95),rgba(28,34,56,.97));border:1px solid transparent;border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.5);animation:hin .2s ease both}
.r-pch{width:410px;height:470px;background:linear-gradient(135deg,rgba(46,54,78,.58),rgba(28,34,56,.66));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.r-pt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.4)}
.r-pt b{min-width:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-note{font-size:11.5px;line-height:17px;color:rgba(255,255,255,.75)}
.r-q{width:100%;height:34px;box-sizing:border-box;flex:none;padding:0 12px;border:1px solid rgba(255,255,255,.5);border-radius:5px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:13px;letter-spacing:.04em;user-select:text;-webkit-user-select:text}
.r-q::placeholder{color:rgba(255,255,255,.5)}
.r-q:disabled{opacity:.5}
.r-cur{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.r-cur b{color:#fff;font-weight:700}
.r-chs{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:6px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;gap:8px;touch-action:pan-y}
.r-chp{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:rgba(255,255,255,.07);color:#fff;min-width:0;transition:background .15s,border-color .15s}
button.r-chp:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.8)}
.r-chp.on{border-color:#fff;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px #fff}
.r-chp.ph{opacity:.4}
.r-chimg{width:52px;height:52px;border-radius:6px;object-fit:cover;display:block}
.r-chimg.ph{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);font-size:22px;color:rgba(255,255,255,.55)}
.r-chp b{max-width:100%;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-chp .r-mb{width:100%;height:4px;border-radius:2px}
.r-chp small{font-size:9.5px;letter-spacing:.06em;color:rgba(255,255,255,.7)}
/* ---- caixinha de venda: expande por cima da parte de baixo do card (mesma ideia do .t-bid de teamsmarket.css) ---- */
.r-ask{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;flex-direction:column;gap:6px;box-sizing:border-box;padding:10px 12px 12px;background:#0e1322}
.r-al{display:flex;flex-direction:column;gap:4px}
.r-al span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.r-ai{width:100%;height:30px;box-sizing:border-box;padding:0 8px;border:0;border-radius:0;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;user-select:text;-webkit-user-select:text}
.r-ai::placeholder{color:rgba(255,255,255,.4)}
.r-ah{font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.r-aw{color:#ffb4b4}
.r-ab{display:flex;gap:4px}
.r-as,.r-ax{flex:1 1 0;min-width:0;height:28px;padding:0 2px;border:0;border-radius:0;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s}
.r-as{background:#fff;color:#1a2234}.r-as:hover{background:#e6eaff}
.r-ax{background:rgba(255,255,255,.14);color:#fff}.r-ax:hover{background:rgba(255,255,255,.24)}
.r-cbtn.r-cs.on{background:rgba(220,70,70,.55);border-color:rgba(255,170,170,.95);color:#fff}   /* jogador a venda */
/* ---- aposentadoria (28+ anos): botao no card e caixinha que cobre o card ---- */
.r-cbtn.r-cr:hover,.r-cbtn.r-cr.on{background:rgba(220,150,60,.55);border-color:rgba(255,215,170,.95);color:#fff}
.r-ret{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;box-sizing:border-box;padding:12px;background:#0e1322}
.r-rt{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.r-rb{flex-direction:column;gap:4px}
.r-rb .r-as,.r-rb .r-ax{flex:none;width:100%}
.r-rd{background:rgba(220,70,70,.35)}.r-rd:hover{background:rgba(220,70,70,.6)}
.r-odds{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.r-odds li{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.85)}
.r-odds b{font-variant-numeric:tabular-nums}
.r-root .c-toast{z-index:40}

/* ---- animacao de entrada (mesma ideia do painel): vidros em sequencia e cartas em cascata ---- */
.r-main>*{animation:hin .39s ease both}
.r-main>:nth-child(1){animation-delay:0.13s}
.r-main>:nth-child(2){animation-delay:0.2s}
.r-card{animation:hin .36s ease backwards}
.r-card:nth-child(1){animation-delay:0.29s}
.r-card:nth-child(2){animation-delay:0.33s}
.r-card:nth-child(3){animation-delay:0.38s}
.r-card:nth-child(4){animation-delay:0.42s}
.r-card:nth-child(5){animation-delay:0.46s}
.r-card:nth-child(6){animation-delay:0.51s}
.r-card:nth-child(7){animation-delay:0.55s}
.r-card:nth-child(8){animation-delay:0.59s}
.r-main.re>*,.r-main.re .r-card{animation:none}   /* depois de atualizar um painel nao reanima a entrada */