/* Costura do kit retrô (retro.css) com o app da Escola. Carregado por último.
   Pedido do senhor em 06/11/2026: capivara em 32 bits, estética de game retrô, experiência de celular. */

:root { --r-s: 6px; --r-m: 8px; --r-l: 12px; --r-xl: 14px; }

/* botões de game: a forma fica no ::before do retro.css; aqui só tiramos o que o .btn antigo punha */
.btn.btn-px, .btn.btn-px:active, .btn.btn-px[disabled] { box-shadow: none; border-radius: 0; background: none; filter: none; }
.btn.btn-px[disabled], .btn.btn-px[aria-disabled="true"] { opacity: 1; }
.btn.btn-px { min-height: 56px; font-size: 26px; padding-inline: 28px; }
.btn.btn-px .ic { width: 20px; height: 20px; stroke-width: 2.5; }
.btn-px.erro { --c1: #fb7185; --c2: #fda4af; --labio: #9f1239; --cor: #3b0a14; --brilho: rgba(255, 241, 242, .6); }
.btn-texto { font-family: var(--fonte-px); font-size: 22px; font-weight: 400; letter-spacing: .03em; }

/* fonte de game nos títulos curtos e números */
.unidade-cab h3 { font: 400 28px/1 var(--fonte-px); letter-spacing: .02em; }
.unidade-cab .conta { font: 400 22px var(--fonte-px); }
.pop h4 { font: 400 30px/1.05 var(--fonte-px); letter-spacing: .02em; }
.ofensiva-grande strong { font: 400 46px/1 var(--fonte-px); }
.perfil-topo strong { font: 400 28px/1 var(--fonte-px); letter-spacing: .02em; }
.bloco h2 { font: 400 26px/1 var(--fonte-px); letter-spacing: .02em; }
.placar-final b { font: 400 40px/1 var(--fonte-px); letter-spacing: .02em; }
.chefao-cartao strong { font: 400 28px/1 var(--fonte-px); letter-spacing: .02em; }
.pagina-cab .titulo { font: 400 clamp(38px, 7vw, 48px)/1 var(--fonte-px); letter-spacing: .02em; }
.titulo-resultado { font-size: clamp(44px, 9vw, 60px); text-align: center; text-wrap: balance; }
.etapa-rotulo { font: 400 22px var(--fonte-px); letter-spacing: .03em; }
.marca { font: 400 28px var(--fonte-px); letter-spacing: .02em; }

/* login */
.login-marca { display: flex; align-items: center; gap: 8px; font: 700 15px var(--texto); color: var(--fg2); margin-bottom: 18px; }
.login-capy { margin-bottom: 10px; filter: drop-shadow(0 8px 0 rgba(0,0,0,.35)); }
.login-titulo { font-size: clamp(46px, 10vw, 64px); margin: 0; text-align: center; }
.login-cartao.vidro { border-radius: var(--r-l); }

/* placar do topo e avatar em pixel */
.topo-placar { gap: 10px; }
.avatar-px { display: grid; place-items: center; background: #3a2416; overflow: hidden; }
.avatar-px .sprite-px { margin-top: 6px; }
.perfil-topo .avatar-px { width: 64px; height: 64px; }

/* trilha: céu noturno em pixel, rolando junto com a trilha */
.painel .col-trilha { background-color: #0d0a0c; background-image: url('/img/pixel/tile-trilha.svg'), linear-gradient(180deg, rgba(40,18,12,.0), rgba(60,20,12,.35)); background-size: 384px 384px, 100% 100%; background-attachment: local, local; image-rendering: pixelated; }
.trilha { isolation: isolate; }
.ceu .nuvem-px, .ceu .vaga-lume { z-index: -1; }
.trilha::after { content: ''; display: block; height: 40px; margin: 34px -16px 0; background: url('/img/pixel/grama.svg') 0 0 / 128px 100% repeat-x; image-rendering: pixelated; }

/* nós da trilha em pixel (forma do retro.css; aqui só neutralizamos o desenho antigo) */
.no.no-px { width: calc(var(--px) * 18); height: calc(var(--px) * 17); border-radius: 0; }
.no.no-px::before { border: 0; border-radius: 0; inset: 0; transform: none; opacity: 1; }
.no.no-px:not(.atual)::before { animation: none; }
.no.no-px:active { transform: translateX(var(--x, 0)) translateY(var(--px)); }
.coroa-px { position: absolute; top: -10px; right: -10px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.capy-no { position: absolute; top: 50%; left: calc(50% + var(--x, 0px) - 36px - 96px - 6px); transform: translateY(-58%); pointer-events: none; z-index: 1; }
.capy-no.esq { left: calc(50% + var(--x, 0px) + 36px + 6px); }
.balao-comecar { font-size: 22px; letter-spacing: .04em; border-radius: 4px; padding: 6px 12px 4px; color: #c2410c; }
.unidade-cab, .chefao-cartao, .pop { border-radius: var(--r-l); }
.chefao-cartao.aberta .selo { border-radius: 8px; }

/* prêmio: baú no canto do ingresso */
.ingresso { border-radius: var(--r-l); }
.bau-premio { position: absolute; top: 16px; right: 16px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)); }
.ingresso .valor { font: 400 84px/1 var(--fonte-px); letter-spacing: 0; gap: 8px; }
.ingresso .valor small { font-size: 30px; }

/* lição */
.barra-licao { flex: 1; }
.licao-topo .pilula-px { min-height: 40px; }
.licao-pe .retorno img.sprite-px { width: calc(48px * var(--escala)); height: calc(48px * var(--escala)); border: 0; border-radius: 0; object-fit: contain; }
.retorno strong { font: 400 30px/1 var(--fonte-px); letter-spacing: .02em; }
.capy-resultado { filter: drop-shadow(0 8px 0 rgba(0,0,0,.4)); }
.opcao, .peca, .afirmacao, .cartao-texto, .zap, .video-caixa, .codigo-app, .guia, .bloco, .atalho, .conquista, .placar-final div { border-radius: var(--r-m); }
.abas { border-radius: 14px; } .abas a { border-radius: 10px; }

@media (max-width: 480px) {
  .btn.btn-px { font-size: 24px; }
  .capy-no { display: none; }
  .ingresso .valor { font-size: 70px; }
}
.contexto { margin: 0 0 -8px; font-size: 15px; }

/* ===== ajustes do crítico (06/11/2026) ===== */
[hidden] { display: none !important; }
/* 1. "+2 XP" inteiro no mesmo tamanho */
.placar-final b span { font: inherit; color: inherit; }
.placar-final .ac.ruim b { color: var(--erro); }
/* 2. barra de lições do prêmio não vira bolinha */
.passo-premio .barra > i { width: 0; height: 100%; border-radius: inherit; display: block; background: linear-gradient(90deg, #f59e0b, #fbbf24); }
/* 5. popover opaco, com setinha para o nó */
.pop { background: #1f1411; backdrop-filter: none; -webkit-backdrop-filter: none; scroll-margin: 16px 0 140px; }
.pop::before { content: ''; position: absolute; top: -8px; left: calc(var(--ox, 50%) - 8px); border: 8px solid transparent; border-top: 0; border-bottom-color: #1f1411; }
/* 6. ícones de jogo em pixel */
.selo-px, .unidade.atual .unidade-cab .selo.selo-px, .unidade.fechada .unidade-cab .selo.selo-px { background: none !important; box-shadow: none !important; width: 52px; height: 52px; }
.unidade.fechada .selo-px img { filter: grayscale(1) brightness(.7); }
.unidade.atual .selo-px img { filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.ofensiva-grande .icone-px { width: 48px; height: 48px; }
.dia i { background: rgba(255,255,255,.06); }
.dia.feito i { background: rgba(249,115,22,.25); box-shadow: inset 0 0 0 2px rgba(249,115,22,.6); }
.abas a .icone-px { width: 32px; height: 32px; }
.abas a:not([aria-current]) .icone-px { filter: grayscale(.85) brightness(.8); }
.aba-rosto { border-radius: 50%; background: #3a2416; }
/* 7. pergunta no alto da tela, como no Duolingo */
.licao-meio { justify-content: flex-start; padding-top: clamp(8px, 3vh, 28px); }
.licao-meio .resultado { margin-top: clamp(0px, 4vh, 40px); }
/* 9. login sem mancha de blur e sem rolar no iPhone */
.login-cartao.vidro { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(30,22,20,.92); }
@media (max-width: 480px) and (max-height: 900px) {
  .login-capy { --escala: 2 !important; margin-bottom: 4px; }
  .login-titulo { font-size: 44px; }
  .login .sub { font-size: 15px; margin-top: 6px; }
  .login-cartao { margin-top: 18px; padding: 18px; }
  .beneficios { gap: 6px; margin-top: 12px; }
  .rodape-login { margin-top: 10px; }
  .login-marca { margin-bottom: 8px; }
}
/* 10. polimento */
.barra-licao::before { background: #2a1c16; }
.no-linha.fechada .no-rotulo { opacity: 1; color: rgba(255,255,255,.6); }
.no-linha.fechada .no-rotulo b { color: rgba(255,255,255,.72); }
.topo-placar > * { min-height: 44px; min-width: 44px; }
.topo-placar .avatar { width: 44px; height: 44px; }
@media (hover: none) { .opcao .tecla { display: none; } }
@media (min-width: 1200px) {
  .fundo { background: url('/img/pixel/tile-trilha.svg') 0 0 / 384px repeat, radial-gradient(1200px 800px at 8% -10%, rgba(120, 52, 18, .45), transparent 60%), #0d0a0c; image-rendering: pixelated; opacity: .75; }
}
/* 8. capivara também no iPhone, menor e do lado de dentro; o rótulo do nó atual desce para baixo */
@media (max-width: 480px) {
  .ceu .nuvem-px { opacity: .35; }
  .capy-no { display: block; width: 64px !important; height: 64px !important; --escala: 1.3333 !important; left: calc(50% + var(--x, 0px) + 36px + 6px); }
  .capy-no.esq { left: calc(50% + var(--x, 0px) - 36px - 64px - 6px); }
  .no-linha:has(.no.atual) .no-rotulo { top: calc(100% + 6px); left: 50%; transform: translateX(calc(-50% + var(--x, 0px))); width: 160px; text-align: center; }
  .no-linha:has(.no.atual) { margin-bottom: 34px; }
}
.conquista .icone-px { width: 32px; height: 32px; } .conquista:not(.tem) .icone-px { filter: grayscale(1) brightness(.55); opacity: .7; }

/* ===== segunda passada do crítico (06/11/2026) ===== */
.ceu .nuvem-px { opacity: .2; }
@media (max-width: 480px) { .ceu .nuvem-px { display: none; } }
.video-info span { white-space: nowrap; }
@media (max-width: 480px) { .video-info .barra { width: 96px; } }
.etapa-titulo { letter-spacing: -.015em; }
.cartao-texto h3 { letter-spacing: -.01em; }
.guia-cab b, .no-rotulo b { letter-spacing: 0; }
.abas { bottom: 0; border-radius: 14px 14px 0 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); border-bottom: 0; }
.ingresso .corte::before, .ingresso .corte::after { background: #120c0b; }

/* vídeos das lições na identidade nova: em pé (9:16) */
.video-caixa { aspect-ratio: 9 / 16; width: auto; height: min(62vh, 680px); max-width: 100%; }
.video-caixa video { object-fit: contain; background: #000; }
@media (max-width: 480px) { .video-caixa { height: min(58vh, 560px); } }

/* ===== mini tutorial e cartão de formatura (06/11/2026) ===== */
.tutorial { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(8, 5, 5, .86); animation: tutEntra var(--base) var(--padrao) both; }
.tutorial.saindo { animation: tutSai 200ms var(--padrao) both; }
@keyframes tutEntra { from { opacity: 0; } }
@keyframes tutSai { to { opacity: 0; } }
.tut-cartao { position: relative; width: min(100%, 440px); max-height: calc(100dvh - 32px); overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 22px 20px; text-align: center; border-radius: var(--r-l); background: #1d1310; border: 1px solid rgba(251,191,36,.28); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); animation: tutSobe var(--lento) var(--mola) both; }
@keyframes tutSobe { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.tut-fechar { position: absolute; top: 8px; right: 8px; }
.tut-arte { min-height: 150px; display: grid; place-items: center; }
.tut-linha { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.tut-no { pointer-events: none; }
.tut-seta { color: var(--mudo); }
.tut-valor { font-size: 64px; color: var(--ouro); line-height: 1; }
.tut-texto { margin: 0; color: #e3e6ec; font-size: 16px; line-height: 1.55; max-width: 36ch; text-wrap: pretty; }
.tut-acoes { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.tut-acoes .btn-px { flex: 1; }
.perfil-acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.cartao-dlg { width: min(100%, 460px); gap: 16px; }
.cartao-previa { width: 100%; aspect-ratio: 4 / 5; display: grid; place-items: center; }
.cartao-img { width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); image-rendering: auto; }
.cartao-acoes { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
@media (max-height: 760px) { .cartao-img { width: 78%; } .tut-arte { min-height: 120px; } }
.tut-titulo { font-size: 40px; margin: 0; background: none; -webkit-text-fill-color: #fb923c; color: #fb923c; text-wrap: balance; }
#tutorial .tut-cartao { min-height: min(530px, calc(100dvh - 32px)); }
#tutorial .pontinhos { margin-top: auto; }
#tutorial .tut-arte .pilula-px { transform: scale(1.35); margin: 0 10px; }
.cartao-dlg { padding-top: 52px; }
.toast { z-index: 80; }