/* O console do plicflix developers (docs/DEVELOPERS.md): um fluxo guiado por
   etapas, no padrão dos consoles de loja (Google Play Console, Steamworks). */
.site-developers { --painel2:#1b1538; --linha:#ffffff14; --texto2:#d9d3f0; }
.site-developers main { max-width:1280px; }
.site-developers h1 { letter-spacing:-.5px; }
.site-developers .quem .eu { display:flex; align-items:center; gap:10px; color:var(--texto); }
.site-developers .quem .eu i { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--magenta),var(--roxo)); display:grid; place-items:center; font-style:normal; font-weight:800; }
.site-developers .quem .eu small { display:block; color:var(--suave); font-size:12px; line-height:1.1; }
.site-developers .quem .eu b { display:block; font-size:13px; line-height:1.2; }

/* botões e pílulas */
.botao.grande, button.grande { padding:13px 22px; font-size:16px; border-radius:12px; }
.botao.fantasma, button.fantasma { background:transparent; border:1px solid #ffffff33; color:var(--texto); }
.botao.fantasma:hover, button.fantasma:hover { background:#ffffff10; }
button.armado { background:var(--vermelho) !important; color:#fff !important; }
.pilula { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:99px; background:#ffffff14; color:var(--texto2); }
.pilula.ok { background:#14a35226; color:#5cf09a; } .pilula.aviso { background:#ffc23a22; color:var(--amarelo); }
.pilula.pendente { background:#19d3f01f; color:var(--ciano); } .pilula.espera { background:#a104f826; color:#d29bff; }
.pilula.opcional { background:#ffffff10; color:var(--suave); }
.ponto { width:9px; height:9px; border-radius:50%; display:inline-block; background:#888; }
.ponto.online { background:var(--verde); box-shadow:0 0 0 3px #2bd96b33; } .ponto.offline { background:var(--vermelho); } .ponto.instavel { background:var(--amarelo); }
code { background:#ffffff12; padding:1px 6px; border-radius:6px; font-size:13px; }
.copiar { cursor:pointer; border:1px dashed #ffffff33; background:#ffffff0a; color:var(--texto); padding:3px 10px; border-radius:8px; font:13px ui-monospace,Menlo,monospace; display:inline-flex; gap:8px; align-items:center; }
.copiar::after { content:"⧉"; color:var(--suave); } .copiar.copiado::after { content:"✓ copiado"; color:var(--verde); font-family:system-ui; }
pre.codigo { white-space:pre-wrap; word-break:break-all; background:#07051a; border:1px solid var(--linha); border-radius:12px; padding:14px 16px; overflow:auto; font:13px/1.55 ui-monospace,Menlo,monospace; color:#e6defc; position:relative; margin:10px 0; }
pre.codigo .copiar { position:absolute; top:8px; right:8px; }

/* cabeçalho de página */
.cabeca { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:6px 0 22px; }
.cabeca h1 { margin:0; font-size:32px; } .cabeca p { margin:4px 0 0; color:var(--suave); }

/* primeiros passos do estúdio */
.comeco { background:linear-gradient(120deg,#2a0d4a,#15102e 60%); border:1px solid #a104f855; border-radius:18px; padding:22px; margin-bottom:26px; }
.comeco h2 { margin:0 0 4px; font-size:19px; } .comeco > p { margin:0 0 16px; color:var(--suave); }
.passos-estudio { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; counter-reset:p; }
.passos-estudio li { list-style:none; background:#0b082099; border:1px solid var(--linha); border-radius:14px; padding:14px; position:relative; }
.passos-estudio li b { display:block; margin:6px 0 2px; } .passos-estudio li p { margin:0 0 8px; color:var(--suave); font-size:13px; }
.passos-estudio li .n { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; background:#ffffff14; }
.passos-estudio li.feito .n { background:var(--verde); color:#04210f; } .passos-estudio li.feito { opacity:.78; }
.passos-estudio { padding:0; margin:0; }

/* cartões dos jogos no painel */
.jogos { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; }
.cartao-jogo { background:var(--painel); border:1px solid var(--borda); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; color:var(--texto); transition:transform .15s, border-color .15s; }
.cartao-jogo:hover { transform:translateY(-3px); border-color:#a104f888; text-decoration:none; }
.cartao-jogo .capa { aspect-ratio:16/8; background:#1d1640 center/cover; position:relative; display:grid; place-items:center; }
.cartao-jogo .capa .inicial { font-size:46px; font-weight:900; color:#ffffff55; }
.cartao-jogo .capa .logo { max-width:70%; max-height:60%; filter:drop-shadow(0 4px 10px #000a); }
.cartao-jogo .capa .pilula { position:absolute; top:10px; left:10px; backdrop-filter:blur(6px); background:#0b0820cc; }
.cartao-jogo .corpo { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.cartao-jogo h3 { margin:0; color:var(--texto); font-size:17px; }
.cartao-jogo .prox { color:var(--suave); font-size:13px; margin-top:auto; }
.barra { height:6px; border-radius:99px; background:#ffffff14; overflow:hidden; } .barra i { display:block; height:100%; background:linear-gradient(90deg,var(--magenta),var(--ciano)); border-radius:99px; }
.cartao-jogo.novo { border-style:dashed; align-items:center; justify-content:center; min-height:250px; color:var(--suave); font-weight:700; gap:10px; }
.cartao-jogo.novo span { font-size:40px; line-height:1; color:var(--magenta); }
.cartao-jogo.novo small { text-align:center; font-weight:400; padding:0 24px; }

/* o jogo: o topo com o banner */
.jogo-topo { position:relative; border-radius:20px; overflow:hidden; margin:-6px 0 22px; border:1px solid var(--borda); background:#140f2c; }
.jogo-topo::before { content:""; position:absolute; inset:0; background:var(--banner) center/cover; opacity:.35; filter:saturate(1.1); }
.jogo-topo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0b0820f2 30%,#0b082099); }
.jogo-topo > * { position:relative; z-index:1; }
.jogo-topo .dentro { display:flex; gap:20px; align-items:center; padding:22px 24px 18px; flex-wrap:wrap; }
.jogo-topo .poster { width:84px; aspect-ratio:2/3; border-radius:12px; object-fit:cover; box-shadow:0 8px 24px #000a; background:#ffffff14; display:grid; place-items:center; font-size:34px; font-weight:900; color:#ffffff66; }
.jogo-topo h1 { margin:0 0 6px; font-size:30px; }
.jogo-topo .meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--suave); font-size:14px; }
.jogo-topo .acoes { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.volta { display:inline-block; color:var(--suave); font-size:14px; margin:14px 24px 0; }
.trilha { display:flex; gap:0; padding:0 24px 18px; margin:0; list-style:none; flex-wrap:wrap; }
.trilha li { display:flex; align-items:center; gap:8px; color:var(--suave); font-size:13px; font-weight:600; }
.trilha li + li::before { content:""; width:38px; height:2px; background:#ffffff22; margin:0 10px; }
.trilha li i { width:22px; height:22px; border-radius:50%; border:2px solid #ffffff33; display:grid; place-items:center; font-style:normal; font-size:11px; }
.trilha li.feito i { background:var(--verde); border-color:var(--verde); color:#04210f; } .trilha li.feito { color:var(--texto); }
.trilha li.agora i { border-color:var(--magenta); box-shadow:0 0 0 4px #dc0df733; } .trilha li.agora { color:var(--texto); }

/* o console: menu de etapas + conteúdo */
.console { display:grid; grid-template-columns:260px 1fr; gap:26px; align-items:start; }
.menu-jogo { position:sticky; top:76px; background:var(--painel); border:1px solid var(--borda); border-radius:16px; padding:10px; }
.menu-jogo .grupo { font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:#ffffff66; font-weight:800; margin:14px 10px 6px; }
.menu-jogo a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:var(--texto2); font-size:14px; }
.menu-jogo a:hover { background:#ffffff0d; text-decoration:none; }
.menu-jogo a.ativo { background:linear-gradient(90deg,#dc0df72e,#dc0df70a); color:#fff; font-weight:700; box-shadow:inset 3px 0 0 var(--magenta); }
.menu-jogo a small { margin-left:auto; color:#ffffff55; font-size:11px; }
.menu-jogo .geral { font-weight:700; }
.menu-jogo .geral .anel { margin-left:auto; font-size:12px; color:var(--suave); }
.sinal { width:20px; height:20px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px; font-weight:900; border:2px solid #ffffff2e; }
.ok > .sinal, .sinal.ok { background:var(--verde); border-color:var(--verde); color:#04210f; } .ok > .sinal::after, .sinal.ok::after { content:"✓"; }
.aviso > .sinal, .sinal.aviso { border-color:var(--amarelo); color:var(--amarelo); } .aviso > .sinal::after, .sinal.aviso::after { content:"!"; }
.espera > .sinal, .sinal.espera { border-color:#d29bff; color:#d29bff; } .espera > .sinal::after, .sinal.espera::after { content:"…"; }
.opcional > .sinal, .sinal.opcional { border-style:dashed; }

.secao-topo { margin-bottom:20px; }
.secao-topo .passo { font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--magenta); }
.secao-topo h2 { margin:4px 0 6px; font-size:26px; } .secao-topo p { margin:0 0 12px; color:var(--suave); max-width:760px; }
.bloco { background:var(--painel); border:1px solid var(--borda); border-radius:16px; padding:22px; margin-bottom:18px; }
.bloco > h3:first-child { margin-top:0; color:var(--texto); font-size:17px; }
.bloco .ajuda { color:var(--suave); font-size:13px; margin:-4px 0 14px; }
.seguinte { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--linha); padding-top:18px; margin-top:8px; color:var(--suave); flex-wrap:wrap; }

/* visão geral */
.progresso { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.progresso .anel { --p:0; width:96px; height:96px; border-radius:50%; background:conic-gradient(var(--magenta) calc(var(--p)*1%), #ffffff14 0); display:grid; place-items:center; flex:none; }
.progresso .anel b { width:76px; height:76px; border-radius:50%; background:var(--painel); display:grid; place-items:center; font-size:20px; }
.progresso h3 { margin:0 0 4px; color:var(--texto); font-size:19px; } .progresso p { margin:0 0 12px; color:var(--suave); }
.lista-etapas { list-style:none; padding:0; margin:0; }
.lista-etapas li { display:flex; gap:14px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--linha); }
.lista-etapas li:last-child { border-bottom:0; }
.lista-etapas .sinal { width:30px; height:30px; font-size:13px; }
.lista-etapas .sinal:not(.ok):not(.aviso):not(.espera)::after { content:attr(data-n); color:var(--suave); }
.lista-etapas .txt { flex:1; min-width:0; } .lista-etapas .txt b { display:block; } .lista-etapas .txt small { color:var(--suave); }
.fatos { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.fato { background:#0b082088; border:1px solid var(--linha); border-radius:12px; padding:12px 14px; }
.fato small { display:block; color:var(--suave); font-size:12px; margin-bottom:4px; } .fato b { font-size:18px; }

/* formulários */
.campo { margin-bottom:16px; } .campo label { margin:0 0 6px; } .campo .ajuda { margin:6px 0 0; }
.contador { float:right; font-size:12px; color:var(--suave); font-weight:500; } .contador.curto { color:var(--amarelo); } .contador.bom { color:#5cf09a; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip { background:#ffffff0f; border:1px solid #ffffff22; color:var(--texto2); border-radius:99px; padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.chip.ligado { background:#dc0df733; border-color:var(--magenta); color:#fff; }
.opcoes { display:flex; flex-wrap:wrap; gap:10px; }
.opcao { position:relative; } .opcao input { position:absolute; opacity:0; pointer-events:none; }
.opcao span { display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid #ffffff26; border-radius:12px; cursor:pointer; font-weight:600; font-size:14px; background:#0b0820; }
.opcao input:checked + span { border-color:var(--magenta); background:#dc0df722; color:#fff; }
.opcao input:focus-visible + span { outline:2px solid var(--roxo); }
.idade { width:30px; height:30px; border-radius:7px; display:grid; place-items:center; font-weight:900; font-size:13px; color:#000; }
.idade.L { background:#1ea94b; color:#fff; } .idade.i10 { background:#0b8fd6; color:#fff; } .idade.i12 { background:#f7c600; } .idade.i14 { background:#f08a00; } .idade.i16 { background:#e0261d; color:#fff; } .idade.i18 { background:#111; color:#fff; border:1px solid #fff4; }
.salvar { position:sticky; bottom:12px; z-index:3; display:flex; justify-content:flex-end; gap:12px; align-items:center; background:#15102ef2; border:1px solid var(--borda); border-radius:14px; padding:12px 14px; backdrop-filter:blur(8px); box-shadow:0 10px 30px #0008; }
.salvar span { color:var(--suave); font-size:13px; margin-right:auto; }
.duas-largas { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }

/* prévia ao vivo do destaque */
.ao-vivo { position:sticky; top:76px; }
.ao-vivo .tela { border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#140f2c center/cover; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; border:1px solid var(--borda); }
.ao-vivo .tela::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#0b0820f5 10%,#0b082066 60%,transparent); }
.ao-vivo .tela > * { position:relative; }
.ao-vivo .tela img { max-width:60%; max-height:70px; object-fit:contain; object-position:left; margin-bottom:8px; }
.ao-vivo .tela h4 { margin:0 0 6px; font-size:20px; } .ao-vivo .tela p { margin:0 0 8px; font-size:12px; color:#e9e4fb; }
.ao-vivo .tela .gen { font-size:11px; color:var(--suave); }
.ao-vivo .tela .bt { display:flex; gap:6px; } .ao-vivo .tela .bt i { font-style:normal; font-size:11px; font-weight:800; background:#fff; color:#000; padding:5px 10px; border-radius:7px; } .ao-vivo .tela .bt i + i { background:#ffffff30; color:#fff; }

/* mídia: envio com arrastar e soltar */
.midias { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.midia-cartao { background:var(--painel); border:1px solid var(--borda); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; }
.midia-cartao h3 { margin:0; color:var(--texto); font-size:16px; display:flex; align-items:center; gap:10px; }
.midia-cartao h3 .pilula { margin-left:auto; }
.midia-cartao .atual { border-radius:12px; overflow:hidden; background:#0b0820; display:grid; place-items:center; min-height:150px; border:1px solid var(--linha); }
.midia-cartao .atual img, .midia-cartao .atual video { width:100%; max-height:260px; object-fit:contain; display:block; }
.midia-cartao .atual.xadrez { background:repeating-conic-gradient(#2a2346 0 25%,#1b1536 0 50%) 0/18px 18px; }
.midia-cartao .atual.vazio { color:#ffffff55; font-size:13px; }
.specs { display:flex; flex-wrap:wrap; gap:6px; } .specs span { font-size:12px; padding:3px 9px; border-radius:7px; background:#ffffff0d; color:var(--texto2); }
.envio { margin:0; }
.envio input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.zona { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; border:2px dashed #ffffff2e; border-radius:14px; padding:18px; cursor:pointer; color:var(--suave); font-size:14px; transition:.15s; margin:0; font-weight:500; }
.zona b { color:var(--texto); } .zona:hover, .zona.sobre { border-color:var(--magenta); background:#dc0df714; color:var(--texto); }
.zona .icone { font-size:24px; }
.envio .estado { font-size:13px; margin-top:8px; min-height:18px; } .envio .estado.erro { color:#ff8a95; } .envio .estado.ok { color:#5cf09a; }
.envio progress { width:100%; height:6px; appearance:none; border:0; border-radius:99px; overflow:hidden; background:#ffffff14; display:none; margin-top:8px; }
.envio progress::-webkit-progress-bar { background:#ffffff14; } .envio progress::-webkit-progress-value { background:linear-gradient(90deg,var(--magenta),var(--ciano)); }
.envio.enviando progress { display:block; }
.capturas { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.capturas figure { margin:0; position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:#0b0820; }
.capturas figure img { width:100%; height:100%; object-fit:cover; display:block; }
.capturas figure form { position:absolute; top:8px; right:8px; margin:0; opacity:0; transition:.15s; }
.capturas figure:hover form, .capturas figure:focus-within form { opacity:1; }
.capturas figure button { background:#0b0820dd; padding:5px 10px; font-size:12px; border-radius:8px; }
.capturas .envio .zona { aspect-ratio:16/9; height:100%; }

/* chaves */
.chave-nova { border:1px solid var(--amarelo); background:linear-gradient(120deg,#3a2a00,#15102e 70%); }
.chave-nova .chave { font:16px ui-monospace,Menlo,monospace; background:#07051a; border:1px dashed var(--amarelo); border-radius:12px; padding:14px 16px; word-break:break-all; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.tabela { width:100%; border-collapse:collapse; } .tabela th { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:#ffffff77; }
.tabela td, .tabela th { padding:12px 10px; border-bottom:1px solid var(--linha); } .tabela tr:last-child td { border-bottom:0; }
.tabela .mono { font:13px ui-monospace,Menlo,monospace; color:var(--texto2); }
.tabela small { color:var(--suave); display:block; }
details.recolhido summary { cursor:pointer; color:var(--suave); font-size:14px; }
.nota { display:flex; gap:12px; background:#19d3f012; border:1px solid #19d3f040; border-radius:12px; padding:12px 14px; color:var(--texto2); font-size:14px; margin-bottom:16px; }
.nota.atencao { background:#ffc23a14; border-color:#ffc23a55; } .nota.erro { background:#ff4d5e17; border-color:#ff4d5e66; }
.nota > i { font-style:normal; font-size:18px; line-height:1.3; }
.nota p { margin:0; }

/* entrar / cadastro */
.porta { max-width:440px; margin:30px auto; } .porta .bloco { padding:26px; }
.duas-porta { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px; align-items:start; }
ol.passos-lista { padding-left:0; list-style:none; counter-reset:n; margin:0; }
ol.passos-lista li { counter-increment:n; display:block; position:relative; padding:10px 0 10px 40px; min-height:46px; border-bottom:1px solid var(--linha); color:var(--texto2); }
ol.passos-lista li::before { content:counter(n); position:absolute; left:0; top:9px; width:26px; height:26px; border-radius:50%; background:#dc0df733; color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; }
ol.passos-lista li:last-child { border-bottom:0; }

/* o início (público) */
.heroi-dev { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:28px; align-items:center; padding:30px 0 10px; }
.heroi-dev h1 { font-size:46px; line-height:1.08; margin:0 0 14px; letter-spacing:-1px; }
.heroi-dev h1 em { font-style:normal; background:linear-gradient(90deg,var(--magenta),var(--ciano)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.heroi-dev p { color:var(--texto2); font-size:17px; } .heroi-dev .cta { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 8px; }
.numeros { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.numeros div { background:var(--painel); border:1px solid var(--borda); border-radius:16px; padding:18px; } .numeros b { display:block; font-size:30px; background:linear-gradient(90deg,var(--magenta),var(--ciano)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.numeros small { color:var(--suave); }
.etapas-publicas { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; counter-reset:e; }
.etapas-publicas div { background:var(--painel); border:1px solid var(--borda); border-radius:16px; padding:18px; counter-increment:e; }
.etapas-publicas div::before { content:counter(e); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--magenta),var(--roxo)); font-weight:900; margin-bottom:10px; }
.etapas-publicas p { color:var(--suave); font-size:14px; margin:6px 0 0; }

@media (max-width: 900px) {
  .site-developers .topo { flex-wrap:wrap; gap:8px 12px; padding:10px 14px; }
  .site-developers .topo nav { order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; }
  .site-developers .topo nav a { white-space:nowrap; }
  .site-developers .quem { margin-left:auto; } .site-developers .quem .eu span { display:none; }
  .trilha li + li::before { width:14px; margin:0 6px; }
  .jogo-topo .acoes { margin-left:0; }
  .console, .duas-largas, .duas-porta, .heroi-dev { grid-template-columns:1fr; }
  .menu-jogo, .ao-vivo { position:static; }
  .heroi-dev h1 { font-size:34px; }
  .site-developers main { padding:20px 16px 60px; }
}

/* a lista de conferência (compartilhada com o admin): o ✓/✗ já vem no texto */
.conferencia .sinal { width:22px; height:22px; font-size:12px; }
.conferencia .sinal::after { content:none !important; }
.conferencia .ok .sinal { color:#04210f; }
.conferencia .falta .sinal { border-color:var(--vermelho); color:var(--vermelho); background:transparent; }
.conferencia li { align-items:flex-start; }

/* os números do jogo: colunas por dia */
.grafico { display:flex; align-items:flex-end; gap:4px; height:160px; padding:8px 0; border-bottom:1px solid var(--linha); }
.grafico .coluna { flex:1; height:100%; display:flex; align-items:flex-end; }
.grafico .coluna i { display:block; width:100%; min-height:2px; border-radius:4px 4px 0 0; background:linear-gradient(0deg,var(--roxo),var(--magenta)); }
.grafico .coluna:hover i { background:var(--ciano); }
.grafico-eixo { display:flex; justify-content:space-between; color:var(--suave); font-size:12px; margin-top:6px; }
a.fato { color:var(--texto); } a.fato:hover { border-color:var(--magenta); text-decoration:none; }