/* BRASLOL 2 - tela de criar carreira. Palco fixo de 1423x735 px (medidas da arte), escalado por JS (--k) e centralizado: NADA rola.
   Sem style="" no HTML (CSP): so classes aqui e style.setProperty('--k') no JS. Todas as classes comecam com nc- . */

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

.nc-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(.nc-root) button{font-family:inherit;color:inherit;margin:0;padding:0;border:0;background:none;cursor:pointer}
:where(.nc-root) h2,:where(.nc-root) p{margin:0;max-width:none}
.nc-root :focus-visible{outline:2px solid #fff;outline-offset:2px}
.nc-bg{position:absolute;inset:0;background:#121212;overflow:hidden}
.nc-bg::before{content:'';position:absolute;inset:0;background:url(../assets/img/backgrounds/criar-time.webp) center/cover no-repeat;opacity:.5}
/* mesmo escurecimento em degrade do menu inicial (#home::after em braslol.css): mais escuro a esquerda e embaixo */
.nc-bg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(18,18,18,.96) 0%,rgba(18,18,18,.78) 38%,rgba(18,18,18,.3) 72%,rgba(18,18,18,.05) 100%),
    linear-gradient(0deg,rgba(18,18,18,.95) 0%,rgba(18,18,18,.55) 22%,rgba(18,18,18,0) 55%),
    linear-gradient(180deg,rgba(18,18,18,.55) 0%,rgba(18,18,18,0) 22%)}
@media (max-width:700px){
  .nc-bg::after{background:linear-gradient(180deg,rgba(18,18,18,.65) 0%,rgba(18,18,18,.5) 40%,rgba(18,18,18,.92) 100%)}}

.nc-stage{position:absolute;left:50%;top:50%;width:1423px;height:735px;margin:-367.5px 0 0 -711.5px;transform:scale(var(--k,1));transform-origin:50% 50%;opacity:0}
.nc-stage.fit{opacity:1}

/* modal: MESMO visual dos paineis do dashboard (.c-p em career.css) e 20% menor que o antigo (862x499 -> 690x399), mantendo o mesmo centro na arte */
/* vidro igual aos paineis do dashboard (.c-p): transparente, com desfoque de 3.9px, sem borda */
.nc-panel{position:absolute;left:179px;top:167px;width:690px;height:399px;box-sizing:border-box;overflow:hidden;
  background:linear-gradient(135deg,rgba(40,47,69,.46),rgba(22,27,46,.53));backdrop-filter:blur(3.9px);-webkit-backdrop-filter:blur(3.9px);
  border:0;border-radius:5px;box-shadow:none}
/* cabecalho igual ao .c-ph do dashboard */
.nc-head{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}
.nc-head h2{font-size:15px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;color:#fff}
.nc-hd{display:none}

/* formulario: nick + idade */
.nc-form{position:absolute;left:18px;right:18px;top:52px;display:grid;grid-template-columns:1fr 150px;gap:12px}
.nc-f{display:flex;flex-direction:column;gap:6px}
.nc-f>span:first-child{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.nc-in{display:flex;align-items:center;gap:10px;height:34px;box-sizing:border-box;padding:0 12px;border:1px solid rgba(255,255,255,.4);border-radius:5px;background:rgba(255,255,255,.07);transition:background .15s,border-color .15s}
.nc-in:focus-within{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}
svg.nc-ic{width:15px;height:15px;flex:none;color:rgba(255,255,255,.6)}
.nc-in input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:13px;letter-spacing:.04em;user-select:text;-webkit-user-select:text}
.nc-in input::placeholder{color:rgba(255,255,255,.4)}
.nc-root .nc-in input:focus-visible{outline:0}   /* o destaque do campo ja e o .nc-in:focus-within; sem isso aparecia um retangulo branco enorme */

/* abas de divisao (so na regiao BR) */
.nc-tabs{display:flex;gap:4px;padding:3px;border-radius:5px;background:rgba(255,255,255,.07)}
.nc-tab{padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:background .15s,color .15s}
.nc-tab:hover{color:#fff}
.nc-tab.on{background:#fff;color:#000}

/* barra de regioes: continua ativa, as regioes nao sao mundos separados */
.nc-rbar{position:absolute;left:18px;right:18px;top:114px;display:flex;gap:6px}
.nc-rp{display:flex;align-items:center;gap:8px;height:30px;box-sizing:border-box;padding:0 12px 0 8px;border:0;border-radius:5px;background:transparent;font-size:12px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.66);transition:background .15s,color .15s}
.nc-rp:hover{background:rgba(255,255,255,.13);color:#fff}
.nc-rp.on{background:rgba(255,255,255,.2);color:#fff;font-weight:700}
.nc-rlogo{display:block;width:22px;height:22px;flex:none;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}   /* logos das ligas: todas BRANCAS (img ou canvas recortado) */
.nc-rlogo.nc-pend{opacity:0}   /* logo com texto ao lado: fica escondida ate o recorte terminar (ncCropOne em create.js) */

/* cartoes de time */
.nc-body{position:absolute;left:18px;right:18px;top:154px;bottom:8px;overflow-x:hidden;overflow-y:auto;overflow-anchor:none;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}   /* a lista rola se tiver muitos times */
.nc-teams{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:42px;gap:6px}
.nc-team{display:flex;align-items:center;gap:10px;min-width:0;padding:0 10px;border:0;border-radius:5px;background:transparent;text-align:left;transition:background .15s,transform .12s}
.nc-team:hover{background:rgba(255,255,255,.11)}
.nc-team:active{transform:scale(.98)}
.nc-team.sel{background:rgba(255,255,255,.17)}
.nc-tlogo{width:28px;height:28px;flex:none;object-fit:contain}
.nc-tlogo.lg-inv{filter:grayscale(1) invert(.9);filter:url(#fx-inv)}   /* logo predominantemente PRETA: mesmo efeito do draft (.d-lg.lg-inv em draft.css): preto vira branco. Filtro SVG #fx-inv no index.html. A 1a linha e fallback se o SVG falhar */
.nc-tlogo.lg-w{filter:brightness(0) invert(1)}   /* logo de 1 cor so, toda branca: mesmo efeito do draft (.d-lg.lg-w). Usada no LOS (NC_LOGO_W em create.js) */
.nc-tn{min-width:0;display:flex;flex-direction:column;gap:2px}
.nc-tn b{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.nc-tn small{font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.7)}
.nc-empty{padding-top:36px;text-align:center;font-size:14px;line-height:1.6;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.nc-empty small{font-size:12px;color:rgba(255,255,255,.55)}

/* rodape: Voltar (esquerda), mensagem (meio) e Confirmar (direita); botoes no estilo do Jogar/Gerenciar do dashboard */
.nc-foot{position:absolute;left:18px;right:18px;bottom:14px;height:32px;display:flex;align-items:center;gap:14px}
.nc-back,.nc-ok{flex:none;display:inline-flex;align-items:center;justify-content:center;height:32px;border-radius:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .15s,opacity .15s,transform .12s}
.nc-back{padding:0 16px!important;border:0!important;background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.85)}
.nc-ok{padding:0 26px!important;border:0!important;background:rgba(255,255,255,.14)!important;color:#fff}
.nc-back:hover{background:rgba(255,255,255,.2)!important;color:#fff}
.nc-ok:hover:not(:disabled){background:rgba(255,255,255,.28)!important}
.nc-back:active,.nc-ok:active:not(:disabled){transform:scale(.96)}
.nc-ok:disabled{opacity:.4;cursor:default}
.nc-msg{flex:1;min-width:0;text-align:center;font-size:12px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.6)}
.nc-msg.err{color:#ff9b9b}

/* ---- painel lateral "Estilo" (create.js: ncSidePanel): do lado direito do painel de times, mesma altura e mesmo vidro (.nc-panel).
   690 + 12 de vao + 363 = 1065 de largura: sobram 179px de cada lado no palco de 1423, entao o conjunto continua centralizado. ---- */
.nc-side{left:881px;width:363px}
.nc-sbody{position:absolute;left:18px;right:18px;top:52px;bottom:14px}

/* estilos em linhas no topo e, embaixo, a descricao do estilo clicado (so aparece ao clicar), com Vantagens e Desvantagens lado a lado */
.nc-cl{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;gap:4px}
.nc-cs{display:block;height:24px;box-sizing:border-box;padding:0 7px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.75);background:rgba(255,255,255,.06);transition:background .15s,color .15s,transform .12s}
.nc-cs:hover{background:rgba(255,255,255,.13);color:#fff}
.nc-cs:active{transform:scale(.97)}
.nc-cs.sel{background:rgba(255,255,255,.22);color:#fff}
.nc-cd{position:absolute;left:0;right:0;top:86px;bottom:0;box-sizing:border-box;overflow-y:auto;overflow-anchor:none;scrollbar-gutter:stable;will-change:transform;padding:6px 0 0 0;border-top:1px solid rgba(255,255,255,.3);touch-action:pan-y;user-select:text;-webkit-user-select:text}   /* scrollbar-gutter: o espaco da barra fica SEMPRE reservado; sem isso, a barra aparecia so nos estilos com texto longo, estreitava o texto e tudo refluia (tremida ao trocar de estilo) */
.nc-cd::-webkit-scrollbar{width:4px}   /* barra minimalista: fina, sem trilho e sem setas */
.nc-cd::-webkit-scrollbar-track{background:transparent}
.nc-cd::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px}
.nc-cd::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.55)}
@supports not selector(::-webkit-scrollbar){.nc-cd{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}}   /* Firefox (no Chrome/Edge, scrollbar-width ignoraria o ::-webkit-scrollbar acima) */
.nc-cdh{padding-top:24px;text-align:center;font-size:12px;line-height:1.6;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.nc-cdh small{font-size:11px;color:rgba(255,255,255,.5)}
.nc-dn{margin:0;font-size:14px;line-height:18px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.nc-d1{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px}
.nc-dt{margin:0;font-size:11px;line-height:15px;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.nc-dd{margin-top:6px;font-size:11px;line-height:15px;color:rgba(255,255,255,.88)}
.nc-dc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nc-dh{margin:6px 0 4px;font-size:10.5px;line-height:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.nc-dhp{color:#8fe3a4}
.nc-dhc{color:#ff9b9b}
.nc-dl{margin:0;padding:0;list-style:none}
.nc-dl li{position:relative;padding-left:11px;font-size:10.5px;line-height:14px;color:rgba(255,255,255,.82)}
.nc-dl li+li{margin-top:2px}
.nc-dl li::before{content:'';position:absolute;left:1px;top:5px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}

/* ---- animacao de entrada: o fundo e o vidro aparecem suaves e os itens entram em cascata, como no menu inicial (keyframes hin/scrin) ----
   A classe .ent so existe durante a entrada (create.js); por isso clicar em regiao/tier nao repete a animacao. */
.nc-bg::before{animation:scrin .9s ease backwards}
.nc-bg::after{animation:scrin .9s ease backwards}
.nc-panel{animation:scrin .45s ease backwards}
.nc-panel.ent>*{animation:hin .5s ease backwards}
.nc-panel.ent>.nc-rbar,.nc-panel.ent>.nc-body{animation:none}
.nc-panel.ent>.nc-head{animation-delay:0.08s}
.nc-panel.ent>.nc-form{animation-delay:0.14s}
.nc-panel.ent>.nc-sbody{animation-delay:0.14s}
.nc-panel.ent>.nc-foot{animation-delay:0.6s}
.nc-panel.ent .nc-rp,.nc-panel.ent .nc-team{animation:hin .5s ease backwards}
.nc-panel.ent .nc-rp:nth-child(1){animation-delay:0.19s}
.nc-panel.ent .nc-rp:nth-child(2){animation-delay:0.24s}
.nc-panel.ent .nc-rp:nth-child(3){animation-delay:0.29s}
.nc-panel.ent .nc-rp:nth-child(4){animation-delay:0.34s}
.nc-panel.ent .nc-rp:nth-child(5){animation-delay:0.39s}
.nc-panel.ent .nc-rp:nth-child(6){animation-delay:0.44s}
.nc-panel.ent .nc-team:nth-child(1){animation-delay:0.33s}
.nc-panel.ent .nc-team:nth-child(2){animation-delay:0.38s}
.nc-panel.ent .nc-team:nth-child(3){animation-delay:0.43s}
.nc-panel.ent .nc-team:nth-child(4){animation-delay:0.48s}
.nc-panel.ent .nc-team:nth-child(5){animation-delay:0.53s}
.nc-panel.ent .nc-team:nth-child(6){animation-delay:0.58s}
.nc-panel.ent .nc-team:nth-child(7){animation-delay:0.63s}
.nc-panel.ent .nc-team:nth-child(8){animation-delay:0.68s}
.nc-panel.ent .nc-team:nth-child(9){animation-delay:0.73s}
.nc-panel.ent .nc-team:nth-child(10){animation-delay:0.78s}
.nc-panel.ent .nc-team:nth-child(11){animation-delay:0.83s}
.nc-panel.ent .nc-team:nth-child(12){animation-delay:0.88s}
.nc-panel.ent .nc-team:nth-child(13){animation-delay:0.93s}
.nc-panel.ent .nc-team:nth-child(14){animation-delay:0.98s}
.nc-panel.ent .nc-team:nth-child(15){animation-delay:1.03s}
.nc-panel.ent .nc-team:nth-child(16){animation-delay:1.08s}