/* ============================================================
   JOGO DO PIPO — COMPONENTES
   Escrito só com var(--token). Tamanhos em cqw: 1cqw = 1% da
   largura do palco. Posições verticais em % do palco.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}

/* ---------- PALCO ----------
   A tela do jogo. Sempre 16:9, com o cenário da fase no fundo. */
.palco{
  position:relative;
  width:100%;
  aspect-ratio:var(--palco-largura) / var(--palco-altura);
  container-type:inline-size;
  overflow:hidden;
  background:var(--hud-azul-claro) center / cover no-repeat;
  font-family:var(--fonte-texto);
  color:var(--hud-tinta);
  user-select:none;
  -webkit-user-select:none;
  /* dedo de criança: dois toques seguidos não dão zoom, e o toque demorado
     não abre o menu de "salvar imagem" */
  touch-action:manipulation;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
/* toda figura mora dentro de um botão: o toque é dele, não da imagem */
.palco img{pointer-events:none;-webkit-user-drag:none;}
/* ---------- O PALCO NA PAREDE ----------
   Em tela cheia o palco é o maior 16:9 que cabe na janela deixando a
   margem de madeira dos quatro lados. Nunca corta, nunca deforma e
   nunca cria barra de rolagem. Tablet é 4:3 e sobra mais parede em
   cima e embaixo; monitor é mais largo e sobra mais dos lados.

   A segunda linha de cada par usa dvh, que no celular e no tablet
   desconta a barra de endereço quando ela está à mostra; navegador
   antigo fica na primeira. */
.palco--tela{
  --palco-w:min(100vw - 2 * var(--parede-margem),
    calc((100vh - 2 * var(--parede-margem)) * var(--palco-largura) / var(--palco-altura)));
  --palco-w:min(100vw - 2 * var(--parede-margem),
    calc((100dvh - 2 * var(--parede-margem)) * var(--palco-largura) / var(--palco-altura)));
  width:var(--palco-w);
  margin:0 auto;
  border-radius:calc(var(--friso) * .9);
  /* o friso é feito de sombras sem desfoque, uma dentro da outra */
  box-shadow:
    0 0 0 calc(var(--friso) * .16) var(--friso-fio),
    0 0 0 calc(var(--friso) * .86) var(--friso-claro),
    0 0 0 var(--friso) var(--friso-escuro),
    0 calc(var(--friso) * .6) calc(var(--friso) * 1.6) var(--friso) var(--sombra-parede);
}

/* ---------- PAREDE DE MADEIRA ----------
   Vai no <body>. Três camadas: a fresta entre as tábuas, o veio e a cor.
   O veio é ruído esticado na horizontal, desenhado em SVG dentro do
   próprio CSS: não existe arquivo de imagem. As duas cores do veio
   estão dentro do SVG porque data-URI não enxerga var(); são o mesmo
   marrom do --friso-fio. */
.parede{
  background:
    repeating-linear-gradient(0deg,
      var(--madeira-fresta) 0 3px, var(--madeira-luz) 3px 5px, transparent 5px var(--parede-tabua)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='336'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.22' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.27 0 0 0 0 0.10 1.5 0 0 0 -0.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E"),
    linear-gradient(var(--madeira-clara), var(--madeira));
}
.palco svg{display:block;width:100%;height:100%;overflow:visible;}
.palco img{display:block;-webkit-user-drag:none;}
/* Antes da primeira rodada a referência e as três opções ainda não têm
   imagem. O navegador desenha um contorno fino em toda <img> sem src que
   tenha tamanho definido: eram os três retângulos na tela de início. */
.palco img:not([src]){visibility:hidden;}

/* ---------- ESTRELA ----------
   O desenho mora no hud.js. O degradê e o reflexo só aparecem com
   --estrela-luz em 1. */
.estrela{
  flex:none;
  aspect-ratio:1;
  fill:var(--estrela-vazia);
  stroke:var(--estrela-vazia-borda);
  stroke-width:1.9;
  stroke-linejoin:round;
  --estrela-luz:0;
}
.estrela.acesa{fill:var(--estrela);stroke:var(--estrela-borda);--estrela-luz:1;}
.estrela.acende{animation:estrela-acende var(--dur-estrela) var(--mola);}

/* ---------- MEDALHA ----------
   A medalha da fase é a arte do Marco (imagens-web/medalhas, recortada
   por ferramentas/recortar_medalhas.py). No painel entra a versão
   pequena, só a moeda e as fitas. O lugar ainda vazio é a mesma medalha
   sem cor e apagada, para a criança ver o que falta ganhar. */
.medalha{
  flex:none;
  display:block;
  width:100%;
  filter:grayscale(1) contrast(.75) brightness(1.05);
  opacity:.6;
}
.medalha.ganha{
  filter:drop-shadow(0 0.15cqw 0.15cqw var(--sombra-medalha));
  opacity:1;
}
.medalha.cai{animation:medalha-cai var(--dur-medalha) var(--mola);}

/* ---------- ÁREA DE TOQUE ----------
   O botão é desenhado na proporção do palco; quando o desenho fica menor
   que --alvo-minimo, esta área invisível passa dele e o dedo acerta do
   mesmo jeito. Centrada no botão, e faz parte dele: tocar nela é tocar
   no botão. */
.botao-casa::after,
.botao-som::after,
.painel--botao::after,
.botao-medalhas::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:max(100%, var(--alvo-minimo));
  height:max(100%, var(--alvo-minimo));
  translate:-50% -50%;
}

/* ---------- BOTÃO DE CASA ---------- */
.botao-casa{
  position:absolute;
  left:1.8%;top:2.6%;
  width:var(--botao-casa);height:var(--botao-casa);
  padding:calc(var(--botao-casa) * .22);
  border:0.45cqw solid var(--hud-branco);
  border-radius:var(--raio-circulo);
  background:linear-gradient(var(--hud-azul-claro), var(--hud-azul));
  box-shadow:var(--sombra-chapada), var(--sombra-painel);
  color:var(--hud-branco);
  cursor:pointer;
  transition:transform var(--dur-toque) var(--suave);
}
.botao-casa:active{transform:translateY(0.25cqw) scale(.95);}
.botao-casa:focus-visible,
.opcao:focus-visible{outline:0.35cqw solid var(--hud-tinta);outline-offset:0.25cqw;}

/* ---------- PAINEL ----------
   Caixa de vidro leitoso com o título numa pílula azul que monta
   na borda de cima. Usado em "Medalhas das fases" e "Progresso". */
.painel{
  position:relative;
  padding:1.9cqw 0.8cqw 0.8cqw;
  border:0.22cqw solid var(--hud-borda);
  border-radius:var(--raio-lg);
  background:var(--hud-painel);
  box-shadow:var(--sombra-painel);
}
.painel__titulo{
  position:absolute;
  left:0.6cqw;top:-1.1cqw;
  margin:0;
  padding:0.25cqw 1.3cqw;
  border:0.18cqw solid var(--hud-branco);
  border-radius:var(--raio-pilula);
  background:var(--hud-azul);
  color:var(--hud-branco);
  font:800 var(--texto-painel)/1.3 var(--fonte-titulo);
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* painel que se toca (o das medalhas, que leva à tela "Minhas medalhas") */
.painel--botao{
  cursor:pointer;
  transition:transform var(--dur-toque) var(--suave);
}
.painel--botao:active{transform:scale(.97);}
.painel--botao:focus-visible{outline:0.35cqw solid var(--hud-tinta);outline-offset:0.25cqw;}

/* a coluna da direita: medalhas em cima, progresso embaixo */
.lateral{
  position:absolute;
  left:var(--lateral-x);top:var(--lateral-topo);
  width:var(--lateral-largura);
  display:grid;
  gap:1.9cqw;
  padding-top:1.1cqw;      /* a pílula do primeiro título sobe */
}

/* ---------- MEDALHAS DAS FASES ---------- */
.medalhas{
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  align-items:center;
  gap:0.15cqw;
  margin:0;padding:0;list-style:none;
}

/* ---------- PROGRESSO DA FASE ----------
   Um cartão por referência da fase. --colunas vem do HTML. */
.progresso{
  display:grid;
  grid-template-columns:repeat(var(--colunas, 5), 1fr);
  gap:0.4cqw;
  margin:0;padding:0;list-style:none;
}
.progresso__item{
  display:grid;
  justify-items:center;
  gap:0.25cqw;
  padding:0.5cqw 0.2cqw 0.4cqw;
  border-radius:var(--raio-sm);
  background:var(--hud-cartao);
  transition:background-color var(--dur-entra) var(--suave);
}
.progresso__figura{height:3.6cqw;width:100%;object-fit:contain;}
.progresso__estrelas{display:flex;justify-content:center;gap:0.1cqw;width:100%;}
.progresso__estrelas .estrela{width:28%;max-width:1.3cqw;}
.progresso__conta{
  font:800 var(--texto-contador)/1 var(--fonte-titulo);
  color:var(--hud-tinta);
}
.progresso__item.completo{background:var(--hud-completo);}
/* fases com muitas referências (números, formas, cores): duas
   fileiras, figura menor, uma estrela só e sem contador */
.progresso--compacto .progresso__figura{height:2.5cqw;}
.progresso--compacto .progresso__conta{display:none;}
.progresso--compacto .progresso__estrelas .estrela{width:42%;}

/* ---------- BARRA DE ESTRELAS ---------- */
.barra{
  position:absolute;
  left:var(--barra-x);top:var(--barra-topo);
  width:var(--barra-largura);height:var(--barra-altura);
  display:flex;
  align-items:center;
  gap:0.5cqw;
  padding:0.25cqw 0.7cqw 0.25cqw 0.25cqw;
  border:0.22cqw solid var(--hud-borda);
  border-radius:var(--raio-pilula);
  background:var(--hud-painel);
  box-shadow:var(--sombra-painel);
}
.barra__conta{
  flex:none;
  align-self:stretch;
  display:grid;
  place-items:center;
  min-width:4.8cqw;
  padding:0 0.6cqw;
  border-radius:var(--raio-pilula);
  background:var(--hud-azul);
  color:var(--hud-branco);
  font:800 var(--texto-barra)/1 var(--fonte-titulo);
}
.barra__estrelas{
  flex:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-width:0;
}
.barra__estrelas .estrela{flex:0 1 2.7cqw;min-width:0;}

/* ---------- REFERÊNCIA ----------
   A letra, o número, o pincel ou a forma, no centro, com os
   raios de luz em volta. */
.referencia{
  position:absolute;
  left:50%;top:var(--ref-topo);
  height:var(--ref-altura);
  aspect-ratio:1.15;
  transform:translateX(-50%);
  display:grid;
  grid-template:100% / 100%;   /* sem isto a linha cresce com a imagem */
  place-items:center;
}
.referencia__figura{
  /* a caixa manda, não a imagem: o I é bem mais alto que o A e,
     sem isto, vazava para cima da moldura do meio */
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(var(--sombra-figura));
  animation:respira var(--respira) ease-in-out infinite;
}
/* A referência escrita: uma placa com o nome, no lugar da figura. É mais
   larga que a caixa da referência e transborda igual para os dois lados. */
.referencia__figura[hidden],.referencia__texto[hidden]{display:none;}
.referencia__texto{
  grid-area:1 / 1;
  place-self:center;
  width:max-content;max-width:30cqw;
  padding:1.1cqw 2.4cqw 0.9cqw;
  border-radius:var(--raio-lg);
  background:var(--hud-branco);
  box-shadow:var(--sombra-chapada), var(--sombra-painel);
  color:var(--hud-tinta);
  font:800 var(--texto-referencia)/1.05 var(--fonte-titulo);
  letter-spacing:.02em;
  text-align:center;
  text-transform:uppercase;
  animation:respira var(--respira) ease-in-out infinite;
}
.referencia.entra .referencia__texto{
  animation:entra var(--dur-entra) var(--mola) both,
            respira var(--respira) ease-in-out var(--dur-entra) infinite;
}
/* no progresso, a figura da referência escrita só aparece depois do acerto */
.progresso__item--segredo:not(.completo) .progresso__figura{visibility:hidden;}
.referencia.entra .referencia__figura{
  animation:entra var(--dur-entra) var(--mola) both,
            respira var(--respira) ease-in-out var(--dur-entra) infinite;
}
.referencia__raios{
  position:absolute;
  inset:-6% -24%;
  pointer-events:none;
  animation:raios var(--pulso) ease-in-out infinite;
}
.referencia__raios i{
  position:absolute;
  left:50%;top:50%;
  width:4.2cqw;height:1.1cqw;
  margin:-0.55cqw 0 0 -2.1cqw;
  border-radius:var(--raio-pilula);
  background:var(--raio-de-luz);
  transform:rotate(var(--angulo)) translateX(11.5cqw);
}

/* ---------- MOLDURA ----------
   Uma por moldura pintada no cenário. A .moldura não tem tamanho: é um
   ponto, o centro da moldura pintada. Os dois filhos (o halo e o botão
   da opção) se centralizam nesse ponto. Assim tudo o que pertence a uma
   moldura é posicionado a partir do centro dela, e não em fileira.

   As três ficam dentro de .opcoes, que não desenha nada: só existe para
   a ordem delas (1, 2, 3) e para carregar o estado "nomes à mostra". */
.opcoes{display:contents;}
.moldura{
  position:absolute;
  left:var(--cx);top:var(--moldura-cy);
  width:0;height:0;
}
.moldura:nth-child(1){--cx:var(--moldura-1-cx);--cor:var(--moldura-1);}
.moldura:nth-child(2){--cx:var(--moldura-2-cx);--cor:var(--moldura-2);}
.moldura:nth-child(3){--cx:var(--moldura-3-cx);--cor:var(--moldura-3);}

/* ---------- HALO ----------
   O brilho em volta de uma moldura. É uma peça só, igual nas três e
   usada uma vez por moldura: uma caixa invisível do tamanho do quadro,
   centrada na moldura e atrás dele, que desenha a luz do lado de fora
   de si, dando a volta inteira. Copia o brilho que vem pintado na moldura da
   direita.

   Sem recorte nenhum (decisão do Guilherme, 10/10/2026): o brilho passa
   por cima do que estiver em volta, inclusive da base do Pipo na
   primeira moldura e da borda da moldura vizinha. Recortado, ele ficava
   incompleto e diferente do da direita.

   Apagado por padrão. Acende com .acesa na .moldura (hud.acender) e
   fica mais forte no acerto (.certa). */
.halo{
  position:absolute;
  left:0;top:0;
  /* o tamanho e o canto exatos do quadro que ele contorna */
  width:var(--quadro-largura);height:var(--quadro-altura);
  translate:-50% -50%;
  border-radius:var(--quadro-raio);
  box-shadow:var(--halo);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-entra) var(--suave);
}
.moldura.acesa .halo{opacity:1;}
.moldura.certa .halo{opacity:1;box-shadow:var(--halo-forte);}

/* ---------- QUADRO ----------
   A moldura de cada opção, desenhada pelo jogo: borda colorida com
   volume de plástico e miolo branco. As três são idênticas.

   As molduras que vinham pintadas no cenário foram apagadas da imagem
   (ferramentas/apagar_molduras.py). Desenhadas, o halo abraça uma forma
   exata, o espaçamento é o que o jogo quiser, e a moldura pode acender,
   pulsar ou mudar de cor. O que não some é o brilho pintado em volta
   de onde ficava a moldura da direita: ele está na imagem do cenário. */
.quadro{
  position:absolute;
  left:0;top:0;
  width:var(--quadro-largura);height:var(--quadro-altura);
  translate:-50% -50%;
  border-radius:var(--quadro-raio);
  /* mais claro em cima, mais fechado embaixo: a curva do plástico */
  background:linear-gradient(
    color-mix(in srgb, var(--cor), white 26%),
    var(--cor) 42%,
    color-mix(in srgb, var(--cor), black 14%));
  box-shadow:inset 0 0.22cqw 0.18cqw var(--quadro-luz), inset 0 -0.3cqw 0.25cqw var(--quadro-sombra);
  pointer-events:none;
}
.quadro::before{          /* o reflexo: um fio claro correndo no alto da borda */
  content:"";
  position:absolute;
  inset:calc(var(--quadro-borda) * .22);
  border-radius:calc(var(--quadro-raio) - var(--quadro-borda) * .22);
  border-top:calc(var(--quadro-borda) * .2) solid var(--quadro-luz);
  filter:blur(0.06cqw);
}
.quadro::after{           /* o miolo branco, afundado na borda */
  content:"";
  position:absolute;
  inset:var(--quadro-borda);
  border-radius:calc(var(--quadro-raio) - var(--quadro-borda));
  background:var(--quadro-miolo);
  box-shadow:inset 0 0.22cqw 0.3cqw var(--quadro-sombra);
}

/* ---------- OPÇÃO ----------
   O botão de uma moldura, centrado nela, sobre o miolo branco pintado.
   Dentro: a figura e o nome dela. */
.opcao{
  position:absolute;
  left:0;top:0;
  width:var(--moldura-miolo);height:var(--moldura-miolo-altura);
  translate:-50% -50%;
  display:grid;
  /* a linha da figura é o que sobra depois do nome, e não cresce com a
     imagem: figura alta (a unha) encolhe para caber em vez de descer
     para cima do nome */
  grid-template:minmax(0, 1fr) auto / 100%;
  justify-items:center;
  align-items:center;
  gap:0.7cqw;
  padding:1.1cqw 1.4cqw 0.6cqw;
  border:0;
  border-radius:var(--moldura-raio-miolo);
  background:none;
  color:var(--hud-tinta);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.opcao__figura{
  width:100%;height:100%;
  object-fit:contain;
  transform-origin:50% 100%;   /* ao comemorar cresce para cima, longe do nome */
  filter:drop-shadow(var(--sombra-figura));
  animation:entra var(--dur-entra) var(--mola) both,
            respira var(--respira) ease-in-out var(--dur-entra) infinite;
  transition:transform var(--dur-toque) var(--suave);
}
/* cada figura entra e respira um pouco depois da anterior */
.moldura:nth-child(2) .opcao__figura{animation-delay:var(--passo-entrada), calc(var(--dur-entra) + .5s);}
.moldura:nth-child(3) .opcao__figura{animation-delay:calc(var(--passo-entrada) * 2), calc(var(--dur-entra) + 1s);}
.opcao:active .opcao__figura{transform:scale(.92);}

/* O nome começa escondido: a criança tem de reconhecer a figura, não
   ler. Ele só aparece depois do acerto (.opcoes.nomes), nas três
   figuras, para ela aprender como cada uma se chama. O lugar dele fica
   reservado desde o início, senão a figura pularia ao aparecer. */
.opcao__nome:empty{display:none;}
/* Nome comprido ("Triângulo isósceles") quebrava em duas linhas e, como o
   lugar do nome fica reservado, encolhia a figura dele: as três opções
   ficavam de tamanhos diferentes. Menor e em uma linha só, o lugar é o
   mesmo para todas. */
.opcao .opcao__nome--longo{font-size:var(--texto-nome-longo);line-height:calc(var(--texto-nome) * 1.1);white-space:nowrap;}
.opcao__nome{
  font:800 var(--texto-nome)/1.1 var(--fonte-titulo);
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:0;
  translate:0 0.6cqw;
}
/* A transição mora só aqui, na ida. Se morasse na regra de cima, o nome
   da rodada NOVA apareceria por um instante enquanto o da anterior
   sumia devagar: a criança veria a resposta antes de escolher. */
.opcoes.nomes .opcao__nome{
  opacity:1;
  translate:0 0;
  transition:opacity var(--dur-nome) var(--suave), translate var(--dur-nome) var(--mola);
}
.opcoes.nomes .moldura:nth-child(2) .opcao__nome{transition-delay:.08s;}
.opcoes.nomes .moldura:nth-child(3) .opcao__nome{transition-delay:.16s;}

.opcao.certa .opcao__figura{animation:comemora var(--dur-comemora) var(--mola) both;}
/* Erro: contorno neon vermelho seguindo o recorte da figura, e um
   tremor curto. Depois ela fica com o contorno, um pouco mais clara
   e sem aceitar toque, para a criança ver qual já tentou. Nada de X,
   nada de cinza: é só "essa não", sem susto. */
.opcao.errada .opcao__figura{
  filter:var(--contorno-erro);
  animation:treme var(--dur-treme) var(--suave) both;
}
.opcao.apagada{cursor:default;}
.opcao.apagada .opcao__figura{animation:none;filter:var(--contorno-erro);opacity:.6;}

/* ---------- BALÃO DO PIPO ---------- */
.balao{
  position:absolute;
  left:29.2%;top:11.5%;
  max-width:8.6cqw;
  /* a palavra mais comprida manda: "ACERTOU!" não cabe em 8.6cqw e
     saía pela direita. O min-width ganha do max-width. */
  min-width:min-content;
  padding:0.7cqw 1.1cqw;
  border-radius:var(--raio-lg);
  background:var(--hud-branco);
  box-shadow:var(--sombra-painel);
  color:var(--hud-azul);
  font:800 var(--texto-balao)/1.05 var(--fonte-titulo);
  text-align:center;
  text-transform:uppercase;
  transform:rotate(-6deg);
  transform-origin:0 100%;
  animation:entra var(--dur-entra) var(--mola) both;
}
.balao::after{          /* o bico, apontando para o Pipo */
  content:"";
  position:absolute;
  left:0.9cqw;bottom:-0.9cqw;
  border:0.6cqw solid transparent;
  border-top-color:var(--hud-branco);
  border-left-color:var(--hud-branco);
}
.balao[hidden]{display:none;}

/* ---------- RODAPÉ ---------- */
.rodape{
  position:absolute;
  left:0;right:0;bottom:0;
  height:var(--rodape-altura);
  display:flex;
  align-items:center;
  gap:1.2cqw;
  padding:0 2.2cqw;
  border-top:0.22cqw solid var(--hud-azul-claro);
  background:linear-gradient(var(--hud-azul), var(--hud-azul-fundo));
  color:var(--hud-branco);
  font:700 var(--texto-rodape)/1 var(--fonte-texto);
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.rodape__marca{
  display:flex;align-items:center;gap:0.6cqw;
  font:800 var(--texto-marca)/1 var(--fonte-titulo);
}
.rodape__marca .estrela{width:2.2cqw;}
.rodape__lema{padding-left:1.2cqw;border-left:0.12cqw solid var(--hud-divisor);}
.rodape__selos{
  display:flex;align-items:center;
  margin:0 0 0 auto;padding:0;list-style:none;
}
.rodape__selos li{
  display:flex;align-items:center;gap:0.6cqw;
  padding:0 1.4cqw;
  font-weight:800;
}
.rodape__selos li + li{border-left:0.12cqw solid var(--hud-divisor);}
.rodape__selos svg{width:1.9cqw;height:1.9cqw;}
.icone{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- CONFETE ----------
   Pedacinhos que saltam de um ponto. O hud.js cria os <i>. */
.confete{position:absolute;width:0;height:0;pointer-events:none;}
.confete i{
  position:absolute;
  width:0.9cqw;height:0.9cqw;
  border-radius:0.2cqw;
  background:var(--cor);
  animation:confete var(--dur-comemora) var(--suave) both;
}

/* ============================================================
   ANIMAÇÕES
   Só transform e opacity: rodam lisas em celular simples.
   ============================================================ */
@keyframes respira{
  0%,100%{translate:0 0;}
  50%{translate:0 -0.5cqw;}
}
@keyframes entra{
  from{opacity:0;scale:.3;}
  to{opacity:1;scale:1;}
}
@keyframes comemora{
  0%{scale:1;rotate:0deg;}
  40%{scale:1.16;rotate:-6deg;}
  70%{scale:1.08;rotate:5deg;}
  100%{scale:1;rotate:0deg;}
}
@keyframes treme{
  0%,100%{translate:0 0;}
  20%{translate:-0.7cqw 0;}
  40%{translate:0.6cqw 0;}
  60%{translate:-0.4cqw 0;}
  80%{translate:0.2cqw 0;}
}
@keyframes estrela-acende{
  0%{scale:.1;rotate:-200deg;filter:drop-shadow(var(--brilho-estrela-forte));}
  50%{scale:2.2;rotate:14deg;filter:drop-shadow(var(--brilho-estrela-forte));}
  72%{scale:.88;rotate:-5deg;}
  100%{scale:1;rotate:0deg;}
}
@keyframes faisca-anel{
  0%{scale:.15;opacity:1;}
  100%{scale:1;opacity:0;}
}
@keyframes faisca-raio{
  0%{translate:0 0;scale:1 .3;opacity:1;}
  100%{translate:var(--dx) var(--dy);scale:1 1;opacity:0;}
}
@keyframes medalha-cai{
  0%{translate:0 -6cqw;opacity:0;scale:1.8;}
  60%{translate:0 0.3cqw;opacity:1;scale:1.25;}
  100%{translate:0 0;scale:1;}
}
@keyframes raios{
  0%,100%{opacity:.95;scale:1;}
  50%{opacity:.55;scale:.94;}
}
@keyframes confete{
  0%{translate:0 0;rotate:0deg;opacity:1;}
  100%{translate:var(--dx) var(--dy);rotate:var(--giro);opacity:0;}
}

/* ============================================================
   VIDA NO PAINEL
   O que se mexe sozinho, sem ninguém tocar em nada.
   ============================================================ */

/* a próxima estrela da barra fica chamando */
.barra .estrela.proxima{
  fill:var(--hud-completo);
  stroke:var(--estrela-borda);
  animation:estrela-pulsa var(--pulsa) ease-in-out infinite;
}
/* as estrelas já ganhas cintilam devagar, cada uma no seu tempo */
.barra .estrela.acesa{
  filter:drop-shadow(var(--brilho-estrela-acesa));
  animation:cintila var(--cintila) ease-in-out infinite;
}
.barra .estrela.acesa:nth-child(3n+1){animation-delay:-1.1s;}
.barra .estrela.acesa:nth-child(3n+2){animation-delay:-2.3s;}
.barra .estrela.acesa.acende{animation:estrela-acende var(--dur-estrela) var(--mola);}

/* o cartão da referência da vez, no progresso da fase */
/* O cartão da vez pulsa pelo contorno, sem crescer. Crescendo, o cartão
   largo das fases de uma referência só (os bichos) saía do painel. O
   contorno mais grosso (0.4cqw) cabe na margem do painel (0.8cqw) e no
   vão entre os cartões. */
.progresso__item.atual{
  box-shadow:0 0 0 0.22cqw var(--estrela);
  animation:cartao-pulsa var(--pulsa) ease-in-out infinite;
}
/* medalha conquistada balança de leve */
.medalha.ganha{animation:medalha-balanca var(--cintila) ease-in-out infinite;transform-origin:50% 0;}
.medalha.ganha.cai{animation:medalha-cai var(--dur-medalha) var(--mola);}

/* a figura levanta quando o mouse passa (só onde existe mouse) */
@media (hover:hover){
  .opcao:not(.apagada):hover .opcao__figura{transform:translateY(-0.4cqw) scale(1.05);}
}

/* ---------- ESTRELA VOADORA ----------
   Sai da figura certa e voa até o lugar dela na barra. O caminho
   é calculado pelo hud.js. */
.estrela-voadora{
  position:absolute;
  left:0;top:0;
  width:5cqw;height:5cqw;
  margin:-2.5cqw 0 0 -2.5cqw;
  pointer-events:none;
  filter:drop-shadow(var(--brilho-estrela)) drop-shadow(var(--brilho-estrela-forte));
}
.estrela-voadora--rastro{filter:none;}

/* ---------- FAÍSCA ----------
   O anel e os raios em volta da estrela da barra que acabou de acender. */
.faisca{position:absolute;width:0;height:0;pointer-events:none;}
.faisca::before{
  content:'';
  position:absolute;
  left:0;top:0;
  width:var(--faisca-anel);height:var(--faisca-anel);
  margin:calc(var(--faisca-anel) / -2) 0 0 calc(var(--faisca-anel) / -2);
  border:0.3cqw solid var(--estrela);
  border-radius:var(--raio-circulo);
  animation:faisca-anel var(--dur-faisca) var(--suave) both;
}
.faisca i{
  position:absolute;
  left:0;top:0;
  width:0.36cqw;height:1.4cqw;
  margin:-0.7cqw 0 0 -0.18cqw;
  border-radius:var(--raio-pilula);
  background:var(--estrela-clara);
  box-shadow:var(--brilho-estrela-acesa);
  rotate:var(--angulo);
  animation:faisca-raio var(--dur-faisca) var(--suave) both;
}

/* ---------- BOTÃO DE SOM ---------- */
.botao-som{
  position:absolute;
  /* encosta na casa, qualquer que seja o tamanho dela */
  left:calc(1.8% + var(--botao-casa) + 1.2cqw);top:3.6%;
  width:var(--botao-som);height:var(--botao-som);
  padding:calc(var(--botao-som) * .2);
  border:0.35cqw solid var(--hud-branco);
  border-radius:var(--raio-circulo);
  background:linear-gradient(var(--hud-azul-claro), var(--hud-azul));
  box-shadow:var(--sombra-chapada), var(--sombra-painel);
  color:var(--hud-branco);
  cursor:pointer;
  transition:transform var(--dur-toque) var(--suave);
}
.botao-som:active{transform:translateY(0.25cqw) scale(.95);}
.botao-som:focus-visible,
.botao:focus-visible{outline:0.35cqw solid var(--hud-tinta);outline-offset:0.25cqw;}
.botao-som .som-desligado{display:none;}
.botao-som[aria-pressed="true"] .som-desligado{display:block;}
.botao-som[aria-pressed="true"] .som-ligado{display:none;}

/* ---------- CORTINA E CARTÃO ----------
   Telas por cima do cenário: o início e o fim da fase. */
.cortina{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  place-items:center;
  align-content:center;
  gap:2cqw;
  background:var(--cortina);
  animation:aparece var(--dur-entra) var(--suave) both;
}
.cortina[hidden]{display:none;}
.cartao{
  display:grid;
  justify-items:center;
  gap:1.4cqw;
  padding:2.6cqw 4cqw 3cqw;
  border:0.4cqw solid var(--hud-borda);
  border-radius:calc(var(--raio-lg) * 2);
  background:var(--hud-branco);
  box-shadow:var(--sombra-painel);
  text-align:center;
  animation:entra var(--dur-entra) var(--mola) both, sem-toque var(--dur-entra) step-end;
}
.cartao__titulo{
  margin:0;
  color:var(--hud-azul);
  font:800 var(--texto-cartao)/1 var(--fonte-titulo);
}
.cartao__texto{margin:0;font:700 var(--texto-botao)/1.2 var(--fonte-texto);}
.cartao__medalha{
  width:15cqw;
  margin:-5cqw 0 -0.6cqw;      /* sai um pouco por cima do cartão */
  filter:drop-shadow(0 0.4cqw 0.5cqw var(--sombra-medalha));
  animation:medalha-cai var(--dur-medalha) var(--mola) both,
            medalha-balanca var(--cintila) ease-in-out var(--dur-medalha) infinite;
}

/* ---------- PRÊMIO ----------
   A hora em que a medalha é ganha: ela surge grande no meio do palco,
   com raios girando atrás, e depois voa para o lugar dela na fileira
   de medalhas (o voo é calculado pelo hud.js). */
.premio{
  position:absolute;
  left:50%;top:46%;
  z-index:4;
  width:var(--premio);
  aspect-ratio:1;
  translate:-50% -50%;
  pointer-events:none;
}
.premio__raios{
  position:absolute;
  inset:-38%;
  border-radius:var(--raio-circulo);
  background:repeating-conic-gradient(var(--raio-de-luz) 0 9deg, transparent 9deg 22.5deg);
  /* some no centro (atrás da medalha) e nas pontas */
  -webkit-mask:radial-gradient(closest-side, transparent 30%, #000 46%, transparent 100%);
          mask:radial-gradient(closest-side, transparent 30%, #000 46%, transparent 100%);
  opacity:.85;
  animation:aparece var(--dur-premio) var(--suave) both, gira var(--premio-gira) linear infinite;
}
.premio__medalha{
  position:relative;
  display:block;
  width:100%;
  filter:drop-shadow(0 0.8cqw 1cqw var(--sombra-medalha));
  animation:premio-surge var(--dur-premio) var(--mola) both,
            respira var(--respira) ease-in-out var(--dur-premio) infinite;
}
.cartao__estrelas{display:flex;gap:0.3cqw;}
.cartao__estrelas .estrela{width:2.2cqw;animation:estrela-acende var(--dur-estrela) var(--mola) both;}

/* botão de texto, verde, com a sombra chapada de brinquedo */
.botao{
  padding:0.9cqw 3cqw 1cqw;
  border:0.35cqw solid var(--hud-branco);
  border-radius:var(--raio-pilula);
  background:var(--moldura-3);
  box-shadow:var(--sombra-botao), var(--sombra-painel);
  color:var(--hud-branco);
  font:800 var(--texto-botao)/1.1 var(--fonte-titulo);
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform var(--dur-toque) var(--suave);
}
.botao:active{transform:translateY(0.4cqw);}
/* o botão de segunda opção: azul, um pouco menor */
.botao--segundo{
  background:var(--hud-azul);
  box-shadow:var(--sombra-chapada), var(--sombra-painel);
  font-size:calc(var(--texto-botao) * .8);
}
.cartao__botoes{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.4cqw;}
/* o cartão de opções: em duas colunas os quatro botões cabem no celular */
.cartao__lista{display:grid;grid-template-columns:1fr 1fr;gap:1.1cqw;}
.botao--perigo{background:var(--perigo);box-shadow:0 0.3cqw 0 var(--perigo-fundo), var(--sombra-painel);}
/* cartão e estante não aceitam toque enquanto crescem: os botões ainda
   estão fora do lugar */
@keyframes sem-toque{from,to{pointer-events:none;}}
.cartao .botao,.estante .botao,.abertura__pular{min-height:var(--alvo-minimo);}
/* botão feito de uma arte do Marco (o "Iniciar jogo") */
.botao-arte{
  width:34cqw;
  padding:0;border:0;background:none;
  cursor:pointer;
  animation:respira var(--respira) ease-in-out infinite;
  transition:transform var(--dur-toque) var(--suave);
}
.botao-arte img{width:100%;}
.botao-arte:active{transform:scale(.94);}

@keyframes estrela-pulsa{
  0%,100%{scale:1;filter:drop-shadow(0 0 0 transparent);}
  50%{scale:1.4;filter:drop-shadow(var(--brilho-estrela-forte));}
}
@keyframes cintila{
  0%,84%,100%{scale:1;rotate:0deg;filter:drop-shadow(var(--brilho-estrela-acesa));}
  92%{scale:1.35;rotate:14deg;filter:drop-shadow(var(--brilho-estrela-forte));}
}
@keyframes cartao-pulsa{
  0%,100%{box-shadow:0 0 0 0.16cqw var(--estrela), inset 0 0 0 0 var(--estrela-brilho-dentro);}
  50%{box-shadow:0 0 0 0.4cqw var(--estrela), inset 0 0 0.9cqw 0 var(--estrela-brilho-dentro);}
}
@keyframes premio-surge{
  0%{scale:0;rotate:-200deg;}
  70%{scale:1.12;rotate:8deg;}
  100%{scale:1;rotate:0deg;}
}
@keyframes gira{
  to{rotate:360deg;}
}
@keyframes medalha-balanca{
  0%,100%{rotate:-5deg;}
  50%{rotate:5deg;}
}
@keyframes aparece{
  from{opacity:0;}
  to{opacity:1;}
}

/* ============================================================
   TELA INICIAL
   A arte do Marco já traz os botões pintados. ".toque" é a área
   invisível por cima de cada um; as posições estão em tokens.css.
   ============================================================ */
.toque{
  position:absolute;
  padding:0;border:0;
  border-radius:var(--raio-pilula);
  background:none;
  cursor:pointer;
  /* no celular pequeno o botão pintado fica com menos de 40 px de altura:
     a área de toque passa um pouco dele, para baixo */
  min-height:var(--alvo-minimo);
}
.toque:active{background:var(--toque-aperto);}
.toque:focus-visible,
.botao-medalhas:focus-visible,
.lugar:focus-visible{outline:0.35cqw solid var(--hud-tinta);outline-offset:0.25cqw;}
.toque--iniciar{
  left:var(--inicial-iniciar-x);top:var(--inicial-iniciar-y);
  width:var(--inicial-iniciar-l);height:var(--inicial-iniciar-a);
  /* um anel claro que abre e some, chamando para o botão */
  animation:chama var(--chama) ease-out infinite;
}
.toque--opcoes{
  left:var(--inicial-opcoes-x);top:var(--inicial-opcoes-y);
  width:var(--inicial-opcoes-l);height:var(--inicial-opcoes-a);
}
.toque--sair{
  left:var(--inicial-sair-x);top:var(--inicial-sair-y);
  width:var(--inicial-sair-l);height:var(--inicial-sair-a);
}
/* o atalho para as medalhas, que a arte não tem: uma pílula no canto */
.botao-medalhas{
  position:absolute;
  left:1.8%;top:2.6%;
  display:flex;align-items:center;gap:0.8cqw;
  padding:0.4cqw 1.2cqw 0.4cqw 0.7cqw;
  border:0.35cqw solid var(--hud-branco);
  border-radius:var(--raio-pilula);
  background:linear-gradient(var(--hud-azul-claro), var(--hud-azul));
  box-shadow:var(--sombra-chapada), var(--sombra-painel);
  color:var(--hud-branco);
  font:800 var(--texto-atalho)/1 var(--fonte-titulo);
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform var(--dur-toque) var(--suave);
}
.botao-medalhas:active{transform:translateY(0.25cqw) scale(.97);}
.botao-medalhas img{width:2.6cqw;min-width:22px;}
.botao-medalhas b{
  padding:0.3cqw 0.8cqw;
  border-radius:var(--raio-pilula);
  background:var(--hud-branco);
  color:var(--hud-tinta);
}

/* ---------- VÍDEO DE ABERTURA ---------- */
.abertura{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  background:var(--video-fundo);
}
.abertura__pular{position:absolute;right:2.4%;bottom:4.5%;}

/* ---------- MINHAS MEDALHAS ----------
   A estante: um lugar por fase, em duas fileiras de cinco. Cada lugar
   é um botão que leva à fase. */
.estante{
  display:grid;
  justify-items:center;
  gap:1cqw;
  width:var(--estante-largura);
  padding:1.6cqw 2.4cqw 2.2cqw;
  border:0.4cqw solid var(--hud-borda);
  border-radius:calc(var(--raio-lg) * 2);
  background:var(--hud-branco);
  box-shadow:var(--sombra-painel);
  animation:entra var(--dur-entra) var(--mola) both, sem-toque var(--dur-entra) step-end;
}
.estante__titulo{margin:0;color:var(--hud-azul);font:800 var(--texto-cartao)/1 var(--fonte-titulo);}
.estante__conta{
  margin:0;
  padding:0.2cqw 1.4cqw;
  border-radius:var(--raio-pilula);
  background:var(--hud-completo);
  font:800 var(--texto-barra)/1.3 var(--fonte-titulo);
}
.estante__lugares{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1cqw;
  width:100%;
  margin:0;padding:0;list-style:none;
}
.lugar{
  display:grid;
  justify-items:center;
  gap:0.2cqw;
  width:100%;
  padding:0.9cqw 0.4cqw 0.8cqw;
  border:0.25cqw solid var(--hud-borda);
  border-radius:var(--raio-lg);
  background:var(--hud-cartao);
  color:var(--hud-tinta);
  font:800 var(--texto-lugar)/1.15 var(--fonte-titulo);
  cursor:pointer;
  transition:transform var(--dur-toque) var(--suave);
}
.lugar:active{transform:scale(.96);}
.lugar__medalha{
  height:var(--lugar-medalha);width:100%;
  object-fit:contain;
  filter:grayscale(1) contrast(.75) brightness(1.05);
  opacity:.55;
}
.lugar__fase{color:var(--hud-tinta-suave);text-transform:uppercase;letter-spacing:.03em;}
.lugar--ganha{border-color:var(--estrela);background:var(--hud-completo);}
.lugar--ganha .lugar__medalha{
  filter:drop-shadow(0 0.3cqw 0.3cqw var(--sombra-medalha));
  opacity:1;
  animation:medalha-balanca var(--cintila) ease-in-out infinite;
  transform-origin:50% 0;
}
.lugar:disabled{cursor:default;opacity:.6;}
@keyframes chama{
  0%{box-shadow:0 0 0 0 var(--toque-chama);}
  70%,100%{box-shadow:0 0 0 1.6cqw var(--toque-chama-fim);}
}

/* ============================================================
   PALCO PEQUENO (celular deitado)
   Abaixo de 760 px de palco o rodapé não comporta tudo com letra
   legível: sai o lema, ficam a marca e os quatro selos.
   ============================================================ */
@container (max-width:760px){
  .rodape{gap:0.8cqw;padding:0 1.4cqw;}
  .rodape__lema{display:none;}
  .rodape__selos li{padding:0 1cqw;gap:0.5cqw;}
  .rodape__selos svg{width:2.2cqw;height:2.2cqw;}
}

/* Quem pediu menos movimento no aparelho recebe só troca de
   opacidade: nada pula, nada gira, nada treme. */
@media (prefers-reduced-motion: reduce){
  .palco *,.palco *::before,.palco *::after{
    animation-duration:.01s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01s !important;
  }
  .confete,.faisca,.estrela-voadora,.premio__raios{display:none;}
}