/* Escola do Revendedor CapyPlay · camada retrô 16/32 bits.
   Carregar DEPOIS do app.css. Não muda nada sozinha: só age onde uma classe daqui for usada.
   Unidade de tudo: --px = tamanho na tela de 1 pixel da arte (padrão 4px = sprites em 4x).
   Caminhos relativos a este arquivo (public/), funcionam no servidor e abrindo direto do disco. */

@font-face {
  font-family: 'Jersey 10';
  src: url('fonts/jersey-10.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* alternativa (o "C" e o "5" dela se confundem com "O" e "S"; por isso não é a padrão) */
@font-face {
  font-family: 'Pixelify Sans';
  src: url('fonts/pixelify-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --px: 4px;
  --fonte-px: 'Jersey 10', 'Outfit', system-ui, sans-serif;
  --fonte-px-alt: 'Pixelify Sans', 'Outfit', system-ui, sans-serif;
  /* paleta retrô: mesma identidade da Capy, em tons de pixel */
  --px-contorno: #2a1206;
  --px-borda: #4a2c1c;
  --px-borda-clara: #6b4128;
  --px-fundo: #17110e;
  --px-fundo-2: #211814;
  --px-trilho: #0f0b09;
  --px-ouro: #fbbf24; --px-ouro-claro: #fde68a; --px-ouro-escuro: #d98a06;
  --px-laranja: #f97316; --px-vermelho: #ef4444; --px-labio: #8a1c0c;
  --px-ok: #34d399; --px-ok-claro: #a7f3d0; --px-ok-escuro: #047857;
  --px-erro: #fb7185; --px-erro-escuro: #9f1239;
  --px-texto-escuro: #1c0a03;
}

/* ---------------------------------------------------------------- base */
.px, img.px, .px img { image-rendering: pixelated; image-rendering: crisp-edges; }
@supports (image-rendering: pixelated) { .px, img.px, .px img { image-rendering: pixelated; } }

.fonte-px { font-family: var(--fonte-px); font-weight: 400; font-synthesis: none; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.fonte-px-alt { font-family: var(--fonte-px-alt); font-weight: 500; }
.titulo-px {
  font-family: var(--fonte-px); font-weight: 400; font-synthesis: none; line-height: 1; letter-spacing: .02em;
  color: var(--px-laranja);
  background: linear-gradient(180deg, #fdba74 0 35%, #f97316 35% 70%, #ef4444 70%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 calc(var(--px) * .75) 0 var(--px-contorno));
}

/* ícones de 16x16: --escala 1, 2 (padrão), 3, 4 */
.icone-px { --escala: 2; width: calc(16px * var(--escala)); height: calc(16px * var(--escala)); flex: none; image-rendering: pixelated; vertical-align: middle; }
.sprite-px { --escala: 4; width: calc(48px * var(--escala)); height: calc(48px * var(--escala)); image-rendering: pixelated; }
.sprite-px.rosto { width: calc(32px * var(--escala)); height: calc(32px * var(--escala)); }

/* ---------------------------------------------------------------- caixa com borda em degraus
   As formas ficam em ::before (borda) e ::after (miolo) para o foco e a sombra não serem cortados.
   Sombra de pixel: adicione .sombra-px (usa filter, acompanha os degraus). */
.caixa-px {
  --p: var(--px); --cb: var(--px-borda); --cf: var(--px-fundo);
  position: relative; isolation: isolate;
  padding: calc(var(--p) * 4) calc(var(--p) * 5);
  color: var(--fg, #f8fafc);
}
.caixa-px::before, .caixa-px::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.caixa-px::before {
  inset: 0; background: var(--cb);
  clip-path: polygon(calc(var(--p) * 2) 0, calc(100% - var(--p) * 2) 0, calc(100% - var(--p) * 2) var(--p), calc(100% - var(--p)) var(--p), calc(100% - var(--p)) calc(var(--p) * 2), 100% calc(var(--p) * 2), 100% calc(100% - var(--p) * 2), calc(100% - var(--p)) calc(100% - var(--p) * 2), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p) * 2) calc(100% - var(--p)), calc(100% - var(--p) * 2) 100%, calc(var(--p) * 2) 100%, calc(var(--p) * 2) calc(100% - var(--p)), var(--p) calc(100% - var(--p)), var(--p) calc(100% - var(--p) * 2), 0 calc(100% - var(--p) * 2), 0 calc(var(--p) * 2), var(--p) calc(var(--p) * 2), var(--p) var(--p), calc(var(--p) * 2) var(--p));
}
.caixa-px::after {
  inset: var(--p); background: var(--cf);
  box-shadow: inset 0 var(--p) 0 rgba(255, 255, 255, .06), inset 0 calc(var(--p) * -1) 0 rgba(0, 0, 0, .35);
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, calc(100% - var(--p)) var(--p), 100% var(--p), 100% calc(100% - var(--p)), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p)) 100%, var(--p) 100%, var(--p) calc(100% - var(--p)), 0 calc(100% - var(--p)), 0 var(--p), var(--p) var(--p));
}
.caixa-px.ouro { --cb: var(--px-ouro-escuro); --cf: #241a0c; }
.caixa-px.chama { --cb: var(--px-laranja); --cf: #1f120c; }
.caixa-px.ok { --cb: var(--px-ok-escuro); --cf: #0b1c16; }
.caixa-px.erro { --cb: var(--px-erro-escuro); --cf: #1e0d12; }
.caixa-px.clara { --cf: var(--px-fundo-2); }
.sombra-px { filter: drop-shadow(0 var(--px) 0 rgba(0, 0, 0, .55)); }

/* ---------------------------------------------------------------- botão de game que afunda
   O lábio de baixo (2 px de arte) some pela metade quando aperta; o rótulo desce junto. */
.btn-px {
  --p: var(--px); --c1: var(--px-vermelho); --c2: var(--px-laranja); --labio: var(--px-labio); --brilho: rgba(255, 236, 200, .55); --cor: var(--px-texto-escuro);
  appearance: none; border: 0; background: none; margin: 0; cursor: pointer;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--p) * 2);
  min-height: 48px; padding: calc(var(--p) * 3) calc(var(--p) * 6) calc(var(--p) * 4);
  font: 400 calc(var(--p) * 6)/1 var(--fonte-px); font-synthesis: none; letter-spacing: .04em; color: var(--cor); text-decoration: none;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform 40ms steps(1, end);
}
.btn-px::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--c1), var(--c2));
  box-shadow: inset 0 calc(var(--p) * -2) 0 var(--labio), inset 0 var(--p) 0 var(--brilho);
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, calc(100% - var(--p)) var(--p), 100% var(--p), 100% calc(100% - var(--p)), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p)) 100%, var(--p) 100%, var(--p) calc(100% - var(--p)), 0 calc(100% - var(--p)), 0 var(--p), var(--p) var(--p));
}
.btn-px:hover::before { filter: brightness(1.08) saturate(1.05); }
.btn-px:active, .btn-px.apertado { transform: translateY(var(--p)); }
.btn-px:active::before, .btn-px.apertado::before {
  bottom: var(--p);
  box-shadow: inset 0 calc(var(--p) * -1) 0 var(--labio), inset 0 var(--p) 0 rgba(0, 0, 0, .12);
}
.btn-px:focus-visible { outline: calc(var(--p) / 2) solid var(--px-ouro); outline-offset: var(--p); }
.btn-px.ok { --c1: #34d399; --c2: #6ee7b7; --labio: #047857; --cor: #052e1f; --brilho: rgba(236, 253, 245, .6); }
.btn-px.ouro { --c1: #f59e0b; --c2: #fbbf24; --labio: #92400e; --cor: #2a1503; --brilho: rgba(255, 251, 230, .7); }
.btn-px.neutro { --c1: #2c221d; --c2: #3a2c24; --labio: #120c0a; --cor: #f8fafc; --brilho: rgba(255, 255, 255, .12); }
.btn-px.pequeno { min-height: 40px; padding: calc(var(--p) * 2) calc(var(--p) * 4) calc(var(--p) * 3); font-size: calc(var(--p) * 5); }
.btn-px:disabled, .btn-px[aria-disabled="true"] { cursor: not-allowed; transform: none; --c1: #2a2522; --c2: #2a2522; --labio: #151110; --cor: #9a918b; --brilho: transparent; }

/* ---------------------------------------------------------------- barra de XP em blocos
   <div class="barra-px" style="--valor:60; --blocos:10" role="progressbar" aria-valuenow="60"><span></span></div>
   O preenchimento anda de bloco em bloco (arredonda para baixo). */
.barra-px {
  --p: var(--px); --blocos: 10; --valor: 0;
  --c-claro: var(--px-ouro-claro); --c-base: var(--px-ouro); --c-escuro: var(--px-ouro-escuro);
  position: relative; isolation: isolate; display: block;
  height: calc(var(--p) * 6); padding: var(--p);
}
.barra-px::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--px-contorno);
  box-shadow: inset 0 0 0 var(--p) var(--px-contorno), inset 0 calc(var(--p) * 2) 0 #000;
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, calc(100% - var(--p)) var(--p), 100% var(--p), 100% calc(100% - var(--p)), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p)) 100%, var(--p) 100%, var(--p) calc(100% - var(--p)), 0 calc(100% - var(--p)), 0 var(--p), var(--p) var(--p));
}
.barra-px > span {
  display: block; height: 100%; max-width: 100%;
  width: calc(var(--valor) * 1%);
  width: calc(100% / var(--blocos) * round(down, var(--valor) * var(--blocos) / 100, 1));
  background: linear-gradient(180deg, var(--c-claro) 0 var(--p), var(--c-base) var(--p) calc(100% - var(--p)), var(--c-escuro) calc(100% - var(--p)));
  transition: width 360ms steps(4, end);
}
.barra-px::after {
  content: ""; position: absolute; inset: var(--p); pointer-events: none;
  background: linear-gradient(90deg, transparent calc(100% - var(--p)), var(--px-contorno) 0) 0 0 / calc(100% / var(--blocos)) 100% repeat-x;
}
.barra-px.ok { --c-claro: var(--px-ok-claro); --c-base: var(--px-ok); --c-escuro: var(--px-ok-escuro); }
.barra-px.chama { --c-claro: #fdba74; --c-base: var(--px-laranja); --c-escuro: #c2410c; }

/* ---------------------------------------------------------------- pílula de contador (XP, ofensiva, vidas) */
.pilula-px {
  --p: var(--px);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: calc(var(--p) * 1.5);
  min-height: 40px; padding: var(--p) calc(var(--p) * 3) var(--p) calc(var(--p) * 2);
  font: 400 calc(var(--p) * 6)/1 var(--fonte-px); font-synthesis: none; font-variant-numeric: tabular-nums; color: var(--fg, #f8fafc);
}
.pilula-px::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--px-fundo-2);
  box-shadow: inset 0 0 0 calc(var(--p) / 2) var(--px-borda), inset 0 calc(var(--p) * -1) 0 rgba(0, 0, 0, .35);
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, calc(100% - var(--p)) var(--p), 100% var(--p), 100% calc(100% - var(--p)), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p)) 100%, var(--p) 100%, var(--p) calc(100% - var(--p)), 0 calc(100% - var(--p)), 0 var(--p), var(--p) var(--p));
}
.pilula-px .icone-px { --escala: 2; }
.pilula-px.ouro { color: var(--px-ouro); }
.pilula-px.chama { color: #fdba74; }

/* ---------------------------------------------------------------- nó da trilha (lição)
   <a class="no-px atual"><img class="icone-px" src="img/pixel/livro.svg" alt=""></a>
   estados: .feito, .atual, .bloqueado, .premio */
.no-px {
  --p: var(--px); --c1: #3a2a20; --c2: #2a1d16; --aro: var(--px-borda-clara);
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center; width: calc(var(--p) * 18); height: calc(var(--p) * 17);
  padding-bottom: calc(var(--p) * 2);
  color: inherit; text-decoration: none;
}
.no-px::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 40% 30%, var(--c1), var(--c2) 70%);
  box-shadow: inset 0 0 0 var(--p) var(--aro), inset 0 calc(var(--p) * -3) 0 rgba(0, 0, 0, .4);
  clip-path: polygon(calc(var(--p) * 4) 0, calc(100% - var(--p) * 4) 0, calc(100% - var(--p) * 4) var(--p), calc(100% - var(--p) * 2) var(--p), calc(100% - var(--p) * 2) calc(var(--p) * 2), calc(100% - var(--p)) calc(var(--p) * 2), calc(100% - var(--p)) calc(var(--p) * 4), 100% calc(var(--p) * 4), 100% calc(100% - var(--p) * 4), calc(100% - var(--p)) calc(100% - var(--p) * 4), calc(100% - var(--p)) calc(100% - var(--p) * 2), calc(100% - var(--p) * 2) calc(100% - var(--p) * 2), calc(100% - var(--p) * 2) calc(100% - var(--p)), calc(100% - var(--p) * 4) calc(100% - var(--p)), calc(100% - var(--p) * 4) 100%, calc(var(--p) * 4) 100%, calc(var(--p) * 4) calc(100% - var(--p)), calc(var(--p) * 2) calc(100% - var(--p)), calc(var(--p) * 2) calc(100% - var(--p) * 2), var(--p) calc(100% - var(--p) * 2), var(--p) calc(100% - var(--p) * 4), 0 calc(100% - var(--p) * 4), 0 calc(var(--p) * 4), var(--p) calc(var(--p) * 4), var(--p) calc(var(--p) * 2), calc(var(--p) * 2) calc(var(--p) * 2), calc(var(--p) * 2) var(--p), calc(var(--p) * 4) var(--p));
}
.no-px .icone-px { --escala: 3; }
.no-px.feito { --c1: #3fe0a6; --c2: #0f8a63; --aro: #065f46; }
.no-px.atual { --c1: #fed7aa; --c2: #f97316; --aro: #9a3412; }
.no-px.premio { --c1: #fcd34d; --c2: #b45309; --aro: #78350f; }
.no-px.bloqueado { --c1: #2a2421; --c2: #1a1513; --aro: #3a302a; }
.no-px.bloqueado .icone-px { opacity: .85; }
.no-px.atual::before { animation: px-aro 1.2s steps(1, end) infinite; }
.no-px:focus-visible { outline: calc(var(--p) / 2) solid var(--px-ouro); outline-offset: calc(var(--p) * 2); }

/* ---------------------------------------------------------------- capivara animada (2 quadros)
   <div class="capy-anima" role="img" aria-label="Capivara da CapyPlay"></div>
   Pisca a cada ~4 s (troca de quadro com steps) e respira 1 pixel de arte. */
.capy-anima {
  --escala: 4;
  display: inline-block; width: calc(48px * var(--escala)); height: calc(48px * var(--escala));
  background: url('img/pixel/capy-parada-folha.svg') 0 0 / 200% 100% no-repeat;
  image-rendering: pixelated;
  animation: capy-pisca 4.2s steps(1, end) infinite, capy-respira 1.6s steps(1, end) infinite;
}
@keyframes capy-pisca { 0% { background-position: 0 0; } 93% { background-position: 100% 0; } 97%, 100% { background-position: 0 0; } }
@keyframes capy-respira { 0% { transform: translateY(0); } 50% { transform: translateY(calc(var(--escala) * 1px)); } 100% { transform: translateY(0); } }

/* ---------------------------------------------------------------- reações
   Adicione a classe e remova no 'animationend' para poder repetir. */
.px-pula { animation: px-pula 520ms steps(1, end) 1; }
@keyframes px-pula {
  0% { transform: translateY(0); }
  14% { transform: translateY(calc(var(--px) * -3)); }
  28% { transform: translateY(calc(var(--px) * -5)); }
  44% { transform: translateY(calc(var(--px) * -6)); }
  60% { transform: translateY(calc(var(--px) * -4)); }
  76% { transform: translateY(calc(var(--px) * -1)); }
  88% { transform: translateY(0) scaleY(.96); }
  100% { transform: translateY(0); }
}
.px-treme { animation: px-treme 380ms steps(1, end) 1; }
@keyframes px-treme {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(calc(var(--px) * -1)); }
  25% { transform: translateX(var(--px)); }
  37% { transform: translateX(calc(var(--px) * -1)); }
  50% { transform: translateX(var(--px)); }
  62% { transform: translateX(calc(var(--px) * -0.5)); }
  75% { transform: translateX(calc(var(--px) * 0.5)); }
}

/* moeda subindo "+10": <span class="px-ganho"><img class="icone-px" src="img/pixel/moeda-xp.svg" alt="">+10</span> */
.px-ganho {
  display: inline-flex; align-items: center; gap: calc(var(--px) * 1.5); pointer-events: none;
  font: 400 calc(var(--px) * 8)/1 var(--fonte-px); font-synthesis: none; color: var(--px-ouro);
  text-shadow: 0 calc(var(--px) / 2) 0 var(--px-contorno), calc(var(--px) / 2) 0 0 var(--px-contorno), calc(var(--px) / -2) 0 0 var(--px-contorno), 0 calc(var(--px) / -2) 0 var(--px-contorno);
  animation: px-ganho 900ms steps(1, end) 1 forwards;
}
@keyframes px-ganho {
  0% { transform: translateY(0); opacity: 1; }
  12% { transform: translateY(calc(var(--px) * -2)); }
  25% { transform: translateY(calc(var(--px) * -4)); }
  40% { transform: translateY(calc(var(--px) * -6)); }
  55% { transform: translateY(calc(var(--px) * -8)); }
  70% { transform: translateY(calc(var(--px) * -9)); opacity: 1; }
  82% { transform: translateY(calc(var(--px) * -10)); opacity: .6; }
  92% { opacity: .3; }
  100% { transform: translateY(calc(var(--px) * -11)); opacity: 0; }
}
@keyframes px-aro {
  0% { box-shadow: inset 0 0 0 var(--p) var(--px-ouro), inset 0 calc(var(--p) * -3) 0 rgba(0, 0, 0, .4); }
  50% { box-shadow: inset 0 0 0 var(--p) var(--aro), inset 0 calc(var(--p) * -3) 0 rgba(0, 0, 0, .4); }
}

/* ---------------------------------------------------------------- cenário
   .fundo-trilha: céu noturno em pixel (tile 96x96 em 4x) sobre o fundo escuro quente da marca.
   .chao-grama: faixa de grama que repete na horizontal (pé da trilha). */
.fundo-trilha {
  background-color: var(--bg, #0a0a0c);
  background-image:
    url('img/pixel/tile-trilha.svg'),
    radial-gradient(60% 40% at 15% 0%, rgba(120, 40, 20, .28), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(110, 20, 40, .22), transparent 70%);
  background-size: calc(96px * var(--escala-tile, 4)) calc(96px * var(--escala-tile, 4)), auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  image-rendering: pixelated;
}
.chao-grama {
  height: calc(10px * var(--escala, 4));
  background: url('img/pixel/grama.svg') 0 0 / calc(32px * var(--escala, 4)) 100% repeat-x;
  image-rendering: pixelated;
}
.nuvem-px { position: absolute; image-rendering: pixelated; opacity: .9; animation: px-nuvem 90s linear infinite alternate; pointer-events: none; }
@keyframes px-nuvem { from { transform: translateX(0); } to { transform: translateX(calc(var(--px) * 24)); } }
.vaga-lume {
  position: absolute; width: calc(7px * var(--escala, 3)); height: calc(7px * var(--escala, 3));
  background: url('img/pixel/vaga-lume.svg') center / contain no-repeat; image-rendering: pixelated; pointer-events: none;
  animation: px-vagalume-voa 7s steps(14, end) infinite alternate, px-vagalume-pisca 2.4s steps(1, end) infinite;
}
.vaga-lume:nth-of-type(2n) { animation-duration: 9s, 3.1s; animation-delay: -2s, -1s; }
.vaga-lume:nth-of-type(3n) { animation-duration: 11s, 2.7s; animation-delay: -5s, -.4s; }
@keyframes px-vagalume-voa { 0% { transform: translate(0, 0); } 33% { transform: translate(calc(var(--px) * 3), calc(var(--px) * -4)); } 66% { transform: translate(calc(var(--px) * -2), calc(var(--px) * -7)); } 100% { transform: translate(calc(var(--px) * 4), calc(var(--px) * -2)); } }
@keyframes px-vagalume-pisca { 0%, 60% { opacity: 1; } 70% { opacity: .35; } 80% { opacity: .8; } 90% { opacity: .2; } }

/* ---------------------------------------------------------------- movimento reduzido
   Sem pulos, tremidas, voos nem piscadas; o "+10" só aparece e some. */
@media (prefers-reduced-motion: reduce) {
  .capy-anima, .px-pula, .px-treme, .nuvem-px, .vaga-lume, .no-px.atual::before { animation: none !important; }
  .px-ganho { animation: px-ganho-calmo 900ms steps(1, end) 1 forwards; }
  .btn-px, .barra-px > span { transition: none; }
}
@keyframes px-ganho-calmo { 0%, 70% { opacity: 1; } 85% { opacity: .5; } 100% { opacity: 0; } }