/* ============================================================
   Jogos da Teacher Amanda — visual
   Tudo com prefixo jg- : o mesmo arquivo roda no "Testar" do painel da
   Amanda (que tem Bootstrap) e, depois, no portal do aluno.
   Público: 4 a 7 anos, quase sempre no celular — alvos grandes.
   ============================================================ */
/* Base "auto" (e não 0%) em toda a coluna do jogo: com flex: 1 o Safari do iPhone deixa
   o jogo na altura mínima e o overflow:hidden do .jg corta o que passa (a última fileira). */
.jg-host { display: flex; flex-direction: column; flex: 1 0 auto; }
.jg-host > .jg { flex: 1 0 auto; }

.jg {
  --jg-laranja: #FF6B35; --jg-laranja-esc: #e55a24;
  --jg-roxo: #6D3FD1;    --jg-roxo-esc: #4c2a99;  --jg-roxo-claro: #EFE8FF;
  --jg-verde: #22C55E;   --jg-verde-esc: #15803D;
  --jg-amarelo: #FFD23F; --jg-texto: #2E2350;     --jg-suave: #6B6489;
  --jg-sombra: 0 6px 0 rgba(46, 35, 80, .12);
  position: relative;
  display: flex; flex-direction: column;
  min-height: min(76vh, 720px);
  background: var(--jg-fundo, #fff); border-radius: 22px; box-shadow: var(--jg-sombra);
  overflow: hidden;
  /* Arial negrito. A Arimo (gêmea gratuita da Arial) vem primeiro porque o Android
     não tem Arial — lá ela vira Roboto. */
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: var(--jg-texto);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.jg *, .jg *::before, .jg *::after { box-sizing: border-box; }
.jg button { font-family: inherit; color: inherit; }
.jg-conteudo { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }

.jg-fig-img   { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.jg-fig-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; line-height: 1; pointer-events: none; }
.jg-fig-texto { font-weight: 800; line-height: 1.05; text-align: center; word-break: break-word; color: var(--jg-roxo); pointer-events: none; }
.jg-vazio { margin: auto; padding: 2rem 1.5rem; text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--jg-suave); max-width: 380px; }

/* ---------- Temas: fundo + decoração que flutua ---------- */
.jg-tema-praia    { --jg-fundo: linear-gradient(180deg, #C9EEFF 0%, #FFF8E1 62%, #FFE4A8 100%); }
.jg-tema-fazenda  { --jg-fundo: linear-gradient(180deg, #D7F3FF 0%, #F1FBE6 58%, #C9EBA6 100%); }
.jg-tema-espaco   { --jg-fundo: linear-gradient(180deg, #DDD3FF 0%, #EFE8FF 55%, #FFE6F4 100%); }
.jg-tema-floresta { --jg-fundo: linear-gradient(180deg, #E1F7E6 0%, #F4FBEF 58%, #CDEDBE 100%); }
.jg-tema-mar      { --jg-fundo: linear-gradient(180deg, #D6F5FF 0%, #BDEBF7 55%, #9EDCEE 100%); }
.jg-tema-doces    { --jg-fundo: linear-gradient(180deg, #FFE4F1 0%, #FFF4E6 58%, #FFDDEA 100%); }
.jg-tema-festa    { --jg-fundo: linear-gradient(180deg, #FFF3D6 0%, #FFE8F0 58%, #E6EEFF 100%); }
.jg:not(.jg-tema-padrao) .jg-inicio,
.jg:not(.jg-tema-padrao) .jg-fim { background: transparent; }
.jg:not(.jg-tema-padrao) .jg-topo { background: rgba(255, 255, 255, .82); }
.jg:not(.jg-tema-padrao) .jg-ceu { background: var(--jg-fundo); }

.jg-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.jg-deco span {
  position: absolute; font-size: clamp(1.6rem, 6vw, 2.4rem); opacity: .45; line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  animation: jg-flutua-deco 5s ease-in-out infinite;
}

/* ---------- Botões ---------- */
.jg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: none; border-radius: 18px; padding: .8rem 1.5rem;
  font: inherit; font-size: 1.35rem; font-weight: 800; line-height: 1.1;
  color: #fff !important; background: var(--jg-laranja); box-shadow: 0 5px 0 var(--jg-laranja-esc);
  cursor: pointer; transition: transform .08s, box-shadow .08s;
}
.jg-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--jg-laranja-esc); }
.jg-btn[disabled] { opacity: .45; cursor: default; transform: none; }
.jg-btn-roxo { background: var(--jg-roxo); box-shadow: 0 5px 0 var(--jg-roxo-esc); }
.jg-btn-roxo:active { box-shadow: 0 1px 0 var(--jg-roxo-esc); }

/* ---------- Início e fim ---------- */
.jg-inicio, .jg-fim {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem 1rem; gap: .2rem;
  background: radial-gradient(circle at 50% 0%, #FFE9DC 0%, #fff 65%);
}
.jg-mascote { width: 120px; height: 120px; object-fit: contain; animation: jg-flutua 3s ease-in-out infinite; }
.jg-mascote-emoji {
  display: grid; place-items: center; font-size: 88px; line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.jg-inicio-icone { font-size: 3rem; line-height: 1; margin-top: -.4rem; }
/* Títulos no estilo do "HELLO" do Canva: Fredoka, contorno escuro grosso e uma
   faixa de brilho no alto de cada letra. O brilho é o mesmo texto repetido por
   cima (data-t), recortado num gradiente que se repete a cada linha — então
   funciona também quando o título quebra em duas linhas. */
.jg-titulo-marca {
  --jg-tm-cor: #fd9115; --jg-tm-brilho: #ffe2b8; --jg-tm-contorno: #1c1c1c;
  font-family: 'Fredoka', 'Baloo 2', system-ui, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.25;
}
.jg-comando { --jg-tm-cor: #ae80db; --jg-tm-brilho: #efe3fa; }
.jg-tm {
  position: relative; display: inline-block; max-width: 100%;
  color: var(--jg-tm-cor);
  -webkit-text-stroke: .24em var(--jg-tm-contorno); paint-order: stroke fill;
  filter: drop-shadow(0 .08em 0 rgba(0, 0, 0, .2));
}
.jg-tm::after {
  content: attr(data-t);
  content: attr(data-t) / "";
  position: absolute; inset: 0; pointer-events: none;
  /* contorno da cor da letra por cima: afasta o brilho da borda preta */
  -webkit-text-stroke: .07em var(--jg-tm-cor); paint-order: normal; color: transparent;
  background: linear-gradient(transparent 0 29%, var(--jg-tm-brilho) 29% 44%, transparent 44%) 0 0 / 100% 1.25em repeat-y;
  -webkit-background-clip: text; background-clip: text;
  opacity: .9;
}
.jg-inicio-titulo { font-size: clamp(1.35rem, 5.4vw, 1.9rem); margin: .4rem 0 .1rem; }
.jg-comando { font-size: clamp(1.1rem, 4.6vw, 1.5rem); }
.jg-ajuda { font-size: 1.1rem; color: var(--jg-suave); margin: 0 0 1rem; max-width: 380px; }
.jg-aviso { font-size: 1.1rem; color: #B45309; font-weight: 700; }
.jg-btn-jogar {
  font-size: 1.7rem; padding: .9rem 2.6rem;
  background: var(--jg-verde); box-shadow: 0 6px 0 var(--jg-verde-esc);
  animation: jg-respira 1.6s ease-in-out infinite;
}
.jg-btn-jogar:active { box-shadow: 0 1px 0 var(--jg-verde-esc); }

.jg-fim-frase { font-size: clamp(1.7rem, 7vw, 2.3rem); margin: 0; }
.jg-estrelas { display: flex; gap: .4rem; margin: .4rem 0; }
.jg-estrela { font-size: 3.2rem; line-height: 1; filter: grayscale(1); opacity: .25; }
.jg-estrela.ganhou {
  filter: none; opacity: 1;
  animation: jg-estrela-entra .55s cubic-bezier(.3, 1.6, .5, 1) both;
  animation-delay: calc(var(--n) * .28s);
}
.jg-fim-texto { font-size: 1.2rem; color: var(--jg-suave); font-weight: 700; margin: 0 0 1rem; }
.jg-fim-botoes { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; align-items: center; }
/* "Próximo" da trilha: a barrinha embaixo enche até ir sozinho para a próxima etapa */
.jg-btn-proximo {
  position: relative; overflow: hidden;
  background: var(--jg-verde); box-shadow: 0 5px 0 var(--jg-verde-esc);
}
.jg-btn-proximo:active { box-shadow: 0 1px 0 var(--jg-verde-esc); }
.jg-btn-proximo.contando::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%;
  background: rgba(255, 255, 255, .85); transform-origin: left; transform: scaleX(0);
  animation: jg-espera var(--jg-espera, 8s) linear forwards;
}
@keyframes jg-espera { to { transform: scaleX(1); } }

/* comemoração final */
.jg-confete {
  position: absolute; top: -14px; width: 10px; height: 14px; border-radius: 2px;
  pointer-events: none; z-index: 5;
  animation: jg-confete 2s ease-in forwards;
}
.jg-confete.jg-emoji-cai, .jg-confete.jg-sobe {
  width: auto; height: auto; font-size: 1.8rem; line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.jg-confete.jg-sobe { top: auto; bottom: -50px; animation-name: jg-sobe-festa; font-size: 2.3rem; }
.jg-fogo {
  position: absolute; z-index: 5; width: 9px; height: 9px; border-radius: 50%;
  margin: -4px 0 0 -4px; pointer-events: none;
  animation: jg-fogo 1.1s ease-out forwards;
}
/* faíscas de cada acerto */
.jg-faisca {
  position: absolute; z-index: 7; pointer-events: none; line-height: 1;
  font-size: 1.4rem; margin: -.7rem 0 0 -.7rem;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  animation: jg-caco .8s ease-out forwards;
}
.jg-faisca.quadrado { width: 11px; height: 11px; border-radius: 3px; margin: -5px 0 0 -5px; }

/* ---------- Abertura: logo da Amanda com a vinheta ---------- */
.jg-abertura {
  position: absolute; inset: 0; z-index: 10; overflow: hidden; cursor: pointer;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #c9a6ee 0%, #ae80db 30%, #6D3FD1 70%, #3f2280 100%);
  animation: jg-aparece .25s ease-out;
}
.jg-abertura.saindo { animation: jg-abertura-sai .35s ease-in forwards; }
.jg-abertura-raios {
  position: absolute; inset: -60%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .13) 0 10deg, transparent 10deg 20deg);
  animation: jg-gira 9s linear infinite;
}
.jg-abertura-logo {
  position: relative; width: min(68%, 300px); height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, .55)) drop-shadow(0 8px 0 rgba(0, 0, 0, .18));
  animation: jg-logo-entra .9s cubic-bezier(.2, 1.5, .4, 1) both, jg-logo-pulsa 1.6s ease-in-out .9s infinite;
}
.jg-abertura-brilho {
  position: absolute; font-size: 2rem; line-height: 1; opacity: 0;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  animation: jg-brilho-pisca 1.2s ease-out both;
}
.jg-figurinha { width: 140px; height: 140px; }
.jg-fim .jg-figurinha { width: 160px; height: 160px; }

/* figurinha da Amanda que aparece no canto a cada resposta */
.jg-reacao {
  position: absolute; right: .4rem; bottom: .4rem; z-index: 6;
  width: clamp(84px, 24vw, 124px); height: auto; pointer-events: none;
  transform-origin: 70% 100%;
  filter: drop-shadow(0 4px 0 rgba(46, 35, 80, .15));
  animation: jg-reacao 1.25s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
.jg-reacao.errou { animation-name: jg-reacao-triste; animation-timing-function: ease-out; }

/* ---------- Topo do jogo ---------- */
.jg-topo {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem; border-bottom: 3px solid #F4F1FB; background: #fff;
}
.jg-progresso { flex: 1; height: 14px; background: #F1ECFA; border-radius: 999px; overflow: hidden; }
.jg-progresso > div {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--jg-amarelo), var(--jg-laranja));
  transition: width .5s;
}
.jg-placar {
  display: inline-flex; align-items: center; gap: .25rem;
  background: #FFF5D6; color: #B7791F; font-weight: 800; font-size: 1.2rem;
  padding: .15rem .75rem; border-radius: 999px;
}
.jg-placar.pulou { animation: jg-pula .4s; }
.jg-btn-som {
  width: 44px; height: 44px; border-radius: 14px; border: none;
  background: #F4F1FB; font-size: 1.3rem; cursor: pointer;
}
.jg-palco { flex: 1 0 auto; position: relative; display: flex; flex-direction: column; }

.jg-elogio {
  position: absolute; left: 50%; top: 40%; z-index: 6;
  font-size: clamp(2.1rem, 9vw, 3rem); font-weight: 800; white-space: nowrap;
  -webkit-text-stroke: 2px #fff; paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: jg-elogio 1.1s ease-out forwards;
}
.jg-estrela-voa {
  position: fixed; z-index: 3000; font-size: 2.1rem; line-height: 1;
  margin: -1rem 0 0 -1rem; pointer-events: none;
  animation: jg-voa .65s cubic-bezier(.5, -.3, .7, 1) forwards;
}

.jg-falante {
  width: 84px; height: 84px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--jg-laranja); box-shadow: 0 6px 0 var(--jg-laranja-esc);
  font-size: 2.4rem; cursor: pointer;
}
.jg-falante:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--jg-laranja-esc); }
.jg-falante.falando { animation: jg-fala .6s ease-out; }
.jg-falante.pequeno { width: 60px; height: 60px; font-size: 1.7rem; }

.balanca { animation: jg-balanca .45s !important; }

/* ---------- Cartões ---------- */
.jg-cartoes { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 1rem; }
.jg-cartao { width: min(74vw, 300px); aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; perspective: 900px; cursor: pointer; touch-action: pan-y; }
.jg-cartao-dentro { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s; }
.jg-cartao.virado .jg-cartao-dentro { transform: rotateY(180deg); }
.jg-cartao-frente, .jg-cartao-verso {
  position: absolute; inset: 0; padding: 1.2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  border-radius: 28px; background: #fff; border: 6px solid var(--jg-roxo-claro);
  box-shadow: 0 8px 0 rgba(46, 35, 80, .12);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.jg-cartao-verso { transform: rotateY(180deg); background: #FFF8F2; border-color: #FFD9C7; container-type: inline-size; }
.jg-cartao-frente .jg-fig-emoji { font-size: clamp(5rem, 28vw, 7.5rem); }
.jg-cartao-frente .jg-fig-img { max-height: 72%; }
.jg-cartao-verso .jg-fig-emoji { font-size: 3.6rem; }
.jg-cartao-verso .jg-fig-img { max-height: 42%; }
.jg-cartao-palavra {
  font-size: min(3rem, calc(88cqi / (var(--len, 6) * .66))); font-weight: 800; color: var(--jg-laranja);
  text-align: center; line-height: 1.1; word-break: keep-all; overflow-wrap: normal;
}
.jg-cartao-dica { font-size: .95rem; color: var(--jg-suave); font-weight: 700; }
.jg-cartao.vem-dir { animation: jg-vem-dir .35s ease-out; }
.jg-cartao.vem-esq { animation: jg-vem-esq .35s ease-out; }
.jg-cartoes-nav { display: flex; align-items: center; gap: 1rem; }
.jg-nav { min-width: 84px; }

/* ---------- Ouça e toque ---------- */
.jg-ouvir { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 1rem; }
/* minmax(0, 1fr): com 1fr o Safari alarga a coluna até o tamanho natural da figura (tela cortada) */
.jg-opcoes { display: grid; gap: .8rem; width: 100%; max-width: 500px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jg-opcoes.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
.jg-carta {
  position: relative; aspect-ratio: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: .7rem .7rem 1.6rem;
  background: #fff; border: 4px solid var(--jg-roxo-claro); border-radius: 22px;
  box-shadow: var(--jg-sombra); cursor: pointer;
  transition: transform .1s, background .2s, border-color .2s;
}
.jg-carta:active { transform: translateY(3px); }
/* A figura ocupa a área útil da carta (o espaço do padding), presa pela posição absoluta:
   largura/altura em % dentro de caixa com aspect-ratio é o que o Safari erra (figura minúscula). */
.jg-carta .jg-fig-img { position: absolute; top: .7rem; left: .7rem; width: calc(100% - 1.4rem); height: calc(100% - 2.3rem); }
.jg-carta .jg-fig-emoji { font-size: clamp(3rem, 15vw, 4.6rem); }
.jg-carta .jg-fig-texto { font-size: clamp(1.3rem, 6vw, 1.9rem); }
.jg-legenda {
  position: absolute; left: 0; right: 0; bottom: .3rem;
  font-weight: 800; font-size: 1.15rem; color: var(--jg-verde-esc);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.jg-opcoes.com-palavra .jg-legenda { opacity: 1; transform: none; color: var(--jg-roxo); }
.jg-carta.certa { border-color: var(--jg-verde); background: #DCFCE7; animation: jg-pula .5s; }
.jg-carta.certa .jg-legenda { opacity: 1; transform: none; color: var(--jg-verde-esc); }
.jg-carta.errada { animation: jg-balanca .45s; opacity: .35; filter: grayscale(1); cursor: default; }

/* ---------- Estoure o balão ---------- */
.jg-modelo-baloes .jg-palco { overflow: hidden; }
.jg-ceu {
  position: relative; flex: 1 0 auto; min-height: 400px; overflow: hidden;
  background: linear-gradient(180deg, #A9DCFF 0%, #DDF1FF 55%, #FFF1E2 100%);
}
.jg-ceu > .jg-falante { position: absolute; top: .8rem; left: .8rem; z-index: 4; width: 70px; height: 70px; font-size: 2rem; }
.jg-nuvem {
  position: absolute; left: 0; width: 120px; height: 36px; border-radius: 999px;
  background: #fff; opacity: .85; pointer-events: none;
  animation: jg-nuvem 34s linear infinite;
}
.jg-nuvem::before, .jg-nuvem::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.jg-nuvem::before { width: 54px; height: 54px; left: 18px; top: -26px; }
.jg-nuvem::after  { width: 40px; height: 40px; left: 60px; top: -18px; }
.jg-nuvem.n1 { top: 14%; animation-delay: -6s; }
.jg-nuvem.n2 { top: 46%; animation-duration: 46s; animation-delay: -30s; }
.jg-nuvem.n3 { top: 76%; animation-duration: 40s; animation-delay: -18s; }

.jg-balao {
  --larg: clamp(74px, 21vw, 124px);
  position: absolute; top: 100%; left: var(--x); margin-left: calc(var(--larg) / -2);
  width: var(--larg); padding: 0; border: 0; background: none; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; touch-action: manipulation;
  animation: jg-subir var(--dur) linear var(--atraso) infinite;
}
.jg-balao-corpo {
  position: relative; width: 100%; aspect-ratio: 5 / 6;
  display: grid; place-items: center;
  border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .7) 0 8%, transparent 9%), var(--cor);
  box-shadow: inset -9px -12px 0 rgba(0, 0, 0, .13);
  animation: jg-balanco 2.6s ease-in-out infinite;
}
.jg-balao-corpo::after {
  content: ''; position: absolute; bottom: -9px; left: 50%; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid var(--cor);
}
.jg-balao-fig {
  position: relative; width: 68%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: rgba(255, 255, 255, .93);
}
.jg-balao-fig .jg-fig-emoji { font-size: calc(var(--larg) * .36); }
.jg-balao-fig .jg-fig-img   { position: absolute; left: 9%; top: 9%; width: 82%; height: 82%; }
.jg-balao-fig .jg-fig-texto { font-size: calc(var(--larg) * .15); padding: 0 .25rem; }
.jg-balao-palavra {
  position: absolute; bottom: 6%; left: 4%; right: 4%; text-align: center;
  font-size: calc(var(--larg) * .14); font-weight: 800; line-height: 1; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25); word-break: break-word;
}
.jg-balao-fio { width: 2px; height: 46px; margin-top: 8px; background: rgba(46, 35, 80, .35); }
.jg-balao.estourou { pointer-events: none; }
.jg-balao.estourou .jg-balao-corpo { animation: jg-estoura .25s ease-out forwards; }
.jg-balao.estourou .jg-balao-fio   { animation: jg-cai .6s ease-in forwards; }
.jg-balao.balanca { animation: jg-subir var(--dur) linear var(--atraso) infinite !important; }
.jg-balao.balanca .jg-balao-corpo { animation: jg-balanca .45s; }
.jg-balao.embora { opacity: 0; transition: opacity .5s; pointer-events: none; }

/* ---------- Pegue a toupeira ---------- */
.jg-toca { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem .6rem; }
.jg-gramado {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .9rem;
  width: 100%; max-width: 480px; padding: .9rem .8rem .4rem;
  background: linear-gradient(180deg, #B6E59A, #93D46F); border-radius: 26px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08), var(--jg-sombra);
}
.jg-buraco { position: relative; aspect-ratio: 1 / 1.08; }
.jg-buraco::before {           /* o buraco */
  content: ''; position: absolute; left: 3%; right: 3%; bottom: 5%; height: 26%;
  border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #2b1a0e 0 55%, #4a2f18 56% 100%);
}
.jg-poco { position: absolute; left: 8%; right: 8%; top: 0; bottom: 18%; overflow: hidden; z-index: 1; }
.jg-toupeira {
  position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  transform: translateY(105%); transition: transform .22s ease-out; touch-action: manipulation;
}
.jg-toupeira.cima { transform: translateY(6%); }
.jg-toupeira-corpo {
  position: absolute; bottom: 0; left: 8%; right: 8%; height: 96%;
  border-radius: 50% 50% 16% 16% / 44% 44% 16% 16%;
  background:
    radial-gradient(circle at 34% 22%, #1f1f1f 0 5%, transparent 5.5%),
    radial-gradient(circle at 66% 22%, #1f1f1f 0 5%, transparent 5.5%),
    radial-gradient(ellipse at 50% 34%, #f59ab0 0 8%, transparent 8.5%),
    linear-gradient(180deg, #b07c50, #8a5a35);
}
.jg-toupeira-placa {
  position: relative; z-index: 1; margin-bottom: 6%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 4px solid #F6E7CF; box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.jg-toupeira-placa .jg-fig-emoji { font-size: clamp(1.5rem, 8vw, 2.5rem); }
.jg-toupeira-placa .jg-fig-img { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; }
.jg-toupeira-placa .jg-fig-texto { font-size: .85rem; padding: 0 .2rem; }
.jg-toupeira-palavra { position: absolute; bottom: 4%; font-size: .7rem; font-weight: 800; color: var(--jg-roxo); }
.jg-toupeira.bateu .jg-toupeira-corpo { animation: jg-amassa .35s ease-out; }
.jg-toupeira.bateu .jg-toupeira-placa { box-shadow: 0 0 0 4px var(--jg-verde); }
.jg-toupeira.balanca { animation: none !important; }
.jg-toupeira.balanca .jg-toupeira-placa { animation: jg-balanca .45s; }
.jg-buraco-borda {
  position: absolute; left: 3%; right: 3%; bottom: 5%; height: 13%; z-index: 2;
  border-radius: 0 0 50% 50% / 0 0 100% 100%; background: #6b4423;
}

/* ---------- Certo ou errado ---------- */
.jg-certo { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1rem; }
.jg-certo-fig {
  position: relative; width: clamp(150px, 46vw, 220px); aspect-ratio: 1; padding: .8rem;
  display: grid; place-items: center;
  background: #fff; border: 5px solid var(--jg-roxo-claro); border-radius: 28px; box-shadow: var(--jg-sombra);
}
.jg-certo-fig .jg-fig-img { position: absolute; top: .8rem; left: .8rem; width: calc(100% - 1.6rem); height: calc(100% - 1.6rem); }
.jg-certo-fig .jg-fig-emoji { font-size: clamp(4rem, 22vw, 6.5rem); }
.jg-certo-fig .jg-fig-texto { font-size: 1.6rem; }
.jg-certo-ouve { display: flex; align-items: center; gap: .7rem; }
.jg-certo-palavra { font-size: 1.7rem; font-weight: 800; background: #fff; padding: .15rem 1rem; border-radius: 16px; box-shadow: var(--jg-sombra); }
.jg-certo-revela { min-height: 2.2rem; font-size: 1.5rem; font-weight: 800; color: var(--jg-verde-esc); }
.jg-certo-revela.corrige { color: var(--jg-laranja); }
.jg-certo-botoes { display: flex; gap: 1.2rem; }
.jg-certo-btn {
  width: clamp(108px, 33vw, 150px); aspect-ratio: 1; border: none; border-radius: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  font-size: 3.2rem; line-height: 1; color: #fff !important; cursor: pointer;
}
.jg-certo-btn span { font-size: 1.15rem; font-weight: 800; }
.jg-certo-btn.sim { background: var(--jg-verde); box-shadow: 0 6px 0 var(--jg-verde-esc); }
.jg-certo-btn.nao { background: #EF4444; box-shadow: 0 6px 0 #B91C1C; }
.jg-certo-btn:active { transform: translateY(4px); }
.jg-certo-btn.certa { animation: jg-pula .5s; box-shadow: 0 0 0 6px #FFD23F, 0 6px 0 rgba(0, 0, 0, .2); }
.jg-certo-btn.errada { animation: jg-balanca .45s; opacity: .5; }

/* ---------- Jogo da memória ---------- */
.jg-mem { display: grid; gap: .6rem; width: 100%; max-width: 540px; margin: auto; padding: .9rem; }
.jg-mem.n4  { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 340px; }
.jg-mem.n6  { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; }
.jg-mem.n8  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jg-mem.n12 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }
@media (min-width: 640px) { .jg-mem.n12 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 600px; } }
.jg-mem-carta { aspect-ratio: 1; padding: 0; border: 0; background: none; perspective: 700px; cursor: pointer; }
.jg-mem-dentro {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .4s;
}
.jg-mem-carta.virada .jg-mem-dentro { transform: rotateY(180deg); }
.jg-mem-verso, .jg-mem-frente {
  position: absolute; inset: 0; border-radius: 18px;
  display: grid; place-items: center; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 5px 0 rgba(46, 35, 80, .15);
}
.jg-mem-verso {
  border: 4px solid #fff; color: var(--jg-amarelo); font-size: 2rem;
  background: repeating-linear-gradient(45deg, var(--jg-roxo) 0 12px, #7C52DB 12px 24px);
}
.jg-mem-frente { transform: rotateY(180deg); background: #fff; border: 4px solid var(--jg-roxo-claro); padding: .35rem; container-type: inline-size; }
.jg-mem-frente .jg-fig-emoji { font-size: clamp(2.2rem, 10vw, 3.4rem); }
.jg-mem-palavra {
  font-weight: 800; font-size: min(1.5rem, calc(92cqi / (var(--len, 6) * .66))); line-height: 1.1;
  text-align: center; word-break: keep-all; overflow-wrap: normal; color: var(--jg-roxo);
}
.jg-mem-carta.achada { animation: jg-pula .5s; cursor: default; }
.jg-mem-carta.achada .jg-mem-frente { border-color: var(--jg-verde); background: #F0FDF4; }

/* ---------- Arraste a palavra ---------- */
.jg-arr { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; max-width: 600px; margin: 0 auto; padding: 1rem .8rem; flex: 1 0 auto; justify-content: center; }
.jg-alvos { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jg-alvos.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jg-alvos.n1 { grid-template-columns: minmax(0, 240px); justify-content: center; }
.jg-alvo {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 0;
  padding: .5rem; background: #fff; border: 4px solid var(--jg-roxo-claro); border-radius: 20px;
  box-shadow: var(--jg-sombra); transition: transform .12s, border-color .12s, background .12s;
}
.jg-alvo.sobre { border-color: var(--jg-laranja); background: #FFF4EE; transform: scale(1.04); }
.jg-alvo.feito { border-color: var(--jg-verde); background: #F0FDF4; }
.jg-alvo-fig { position: relative; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.jg-alvo-fig .jg-fig-emoji { font-size: clamp(2.6rem, 12vw, 3.8rem); }
/* figura do tamanho da caixa 4:3 (antes uma figura em pé esticava a carta) */
.jg-alvo-fig .jg-fig-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.jg-alvo-vaga {
  width: 100%; min-height: 2.7rem; padding: .1rem .3rem;
  display: grid; place-items: center; text-align: center;
  border: 3px dashed #CBD5E1; border-radius: 14px;
  font-weight: 800; font-size: 1.25rem; line-height: 1.1; color: var(--jg-verde-esc);
}
.jg-alvo.feito .jg-alvo-vaga { border: 3px solid var(--jg-verde); background: #DCFCE7; animation: jg-pula .4s; }
.jg-fichas { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; min-height: 3.5rem; }
.jg-ficha {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-size: 1.3rem; font-weight: 700; line-height: 1.1;
  padding: .6rem 1.15rem; border: none; border-radius: 16px;
  color: #fff; background: var(--jg-roxo); box-shadow: 0 5px 0 var(--jg-roxo-esc);
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  transition: transform .1s, background .15s;
}
.jg-ficha.selecionada { background: var(--jg-laranja); box-shadow: 0 5px 0 var(--jg-laranja-esc); transform: translateY(-4px); }
.jg-ficha.arrastando { opacity: .3; }
.jg-ficha.usada { visibility: hidden; }
.jg-fantasma {
  position: fixed; left: 0; top: 0; margin: 0; z-index: 3000; pointer-events: none;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .25); transition: none;
}

/* ---------- Monte a palavra / a frase ---------- */
.jg-letras { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; width: 100%; max-width: 620px; margin: 0 auto; padding: 1rem .8rem; flex: 1 0 auto; }
.jg-letras-topo { display: flex; align-items: center; gap: .9rem; }
.jg-letras-fig {
  position: relative; width: clamp(120px, 38vw, 170px); aspect-ratio: 1; padding: .6rem;
  display: grid; place-items: center; cursor: pointer;
  background: #fff; border: 4px solid var(--jg-roxo-claro); border-radius: 24px; box-shadow: var(--jg-sombra);
}
.jg-letras-fig .jg-fig-img { position: absolute; top: .6rem; left: .6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); }
.jg-letras-fig .jg-fig-emoji { font-size: clamp(3.4rem, 18vw, 5rem); }
.jg-letras-fig .jg-fig-texto { font-size: 1.4rem; }
.jg-vagas { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.jg-vaga {
  width: 2.6rem; height: 3.1rem; display: grid; place-items: center;
  border-bottom: 5px solid #CBD5E1; font-size: 2rem; font-weight: 800; line-height: 1;
}
.jg-vaga.fixa { width: 1.1rem; border-color: transparent; }
.jg-vaga.cheia { border-color: var(--jg-roxo); color: var(--jg-roxo); animation: jg-pula .3s; }
.jg-vagas.completa .jg-vaga.cheia { border-color: var(--jg-verde); color: var(--jg-verde-esc); }
.jg-pecas { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; max-width: 560px; }
.jg-peca {
  width: 3.4rem; height: 3.4rem; border: none; border-radius: 16px;
  font-size: 1.8rem; font-weight: 800; color: #fff !important;
  background: var(--jg-laranja); box-shadow: 0 5px 0 var(--jg-laranja-esc); cursor: pointer;
}
.jg-peca:active, .jg-frase-peca:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--jg-laranja-esc); }
.jg-peca.usada, .jg-frase-peca.usada { visibility: hidden; }
.jg-peca.dica, .jg-frase-peca.dica { animation: jg-dica .8s ease-in-out infinite; }
.jg-letras.longa .jg-vaga { width: 1.9rem; height: 2.6rem; font-size: 1.5rem; }
.jg-letras.longa .jg-peca { width: 2.9rem; height: 2.9rem; font-size: 1.5rem; }
.jg-frase-vagas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 560px; }
.jg-frase-vaga {
  min-width: 3.4rem; min-height: 2.8rem; padding: .2rem .6rem;
  display: grid; place-items: center;
  border-bottom: 5px solid #CBD5E1; font-size: 1.6rem; font-weight: 800; line-height: 1.1;
}
.jg-frase-vaga.cheia { border-color: var(--jg-roxo); color: var(--jg-roxo); animation: jg-pula .3s; }
.jg-frase-vagas.completa .jg-frase-vaga { border-color: var(--jg-verde); color: var(--jg-verde-esc); }
.jg-frase-peca {
  padding: .6rem 1.1rem; border: none; border-radius: 16px;
  font-size: 1.45rem; font-weight: 800; line-height: 1.1; color: #fff !important;
  background: var(--jg-laranja); box-shadow: 0 5px 0 var(--jg-laranja-esc); cursor: pointer;
}

/* ---------- Caça-palavras ---------- */
.jg-caca { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: .9rem .6rem; }
.jg-caca-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; max-width: 560px; }
.jg-caca-item {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem;
  border: 2px solid var(--jg-roxo-claro); border-radius: 12px; background: #fff;
  font-weight: 800; font-size: 1rem; letter-spacing: .03em; cursor: pointer;
}
.jg-caca-item .jg-fig-emoji { font-size: 1.4rem; }
.jg-caca-item .jg-fig-img { width: 28px; height: 28px; }
.jg-caca-item.achou { background: #DCFCE7; border-color: var(--jg-verde); color: var(--jg-verde-esc); text-decoration: line-through; }
.jg-caca-grade {
  display: grid; grid-template-columns: repeat(var(--tam), minmax(0, 1fr)); gap: 3px;
  width: min(100%, 460px); padding: 6px;
  background: #fff; border-radius: 16px; box-shadow: var(--jg-sombra); touch-action: none;
}
.jg-cel {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px;
  font-weight: 800; line-height: 1; font-size: calc(min(92vw, 460px) / var(--tam) * .5);
  background: #F7F4FE; color: var(--jg-texto); cursor: pointer;
}
.jg-cel.marcando { background: #FFD3BD; }
.jg-cel.inicio { background: #FFB38F; box-shadow: inset 0 0 0 3px var(--jg-laranja); }
.jg-cel.achada { background: var(--achada); color: #fff; }
.jg-cel.errou { animation: jg-pisca-erro .45s; }

/* ---------- Quebra-cabeça ---------- */
.jg-quebra { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.jg-quebra-topo { display: flex; align-items: center; gap: .8rem; }
.jg-quebra-modelo { width: 74px; height: 74px; border-radius: 16px; background-size: cover; border: 3px solid #fff; box-shadow: var(--jg-sombra); }
.jg-quebra-grade {
  display: grid; grid-template-columns: repeat(var(--lado), minmax(0, 1fr)); gap: 4px;
  width: min(84vw, 380px); aspect-ratio: 1; padding: 4px;
  background: #fff; border-radius: 18px; box-shadow: var(--jg-sombra);
  transition: gap .4s, padding .4s, box-shadow .4s;
}
.jg-peca-q {
  padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background-repeat: no-repeat; background-size: calc(var(--lado) * 100%);
  transition: transform .15s, box-shadow .15s, border-radius .4s;
}
.jg-peca-q.sel { transform: scale(.9); box-shadow: 0 0 0 4px var(--jg-laranja); }
.jg-peca-q.trocou { animation: jg-pula .3s; }
.jg-quebra-grade.completo { gap: 0; padding: 0; box-shadow: 0 0 0 6px var(--jg-verde), var(--jg-sombra); }
.jg-quebra-grade.completo .jg-peca-q { border-radius: 0; }
.jg-quebra-palavra { min-height: 2.4rem; font-size: 2rem; font-weight: 800; color: var(--jg-laranja); }
.jg-carregando { width: 48px; height: 48px; border-radius: 50%; background: var(--jg-laranja); animation: jg-respira 1s ease-in-out infinite; }

/* ---------- Roleta ---------- */
.jg-roleta { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.4rem 1rem 1rem; }
.jg-roda { position: relative; width: min(82vw, 380px); aspect-ratio: 1; }
.jg-roda-svg { width: 100%; height: 100%; transform-origin: 50% 50%; filter: drop-shadow(0 6px 0 rgba(46, 35, 80, .15)); }
.jg-roda-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.jg-roda-texto { font-family: 'Arimo', Arial, Helvetica, sans-serif; font-weight: 700; fill: #fff; }
.jg-roda-seta {
  position: absolute; top: -14px; left: 50%; z-index: 2; transform: translateX(-50%);
  border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 30px solid var(--jg-texto);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15));
}
.jg-roda-centro {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: 28%; aspect-ratio: 1; border-radius: 50%; border: 5px solid #fff;
  background: var(--jg-laranja); color: #fff !important; font-weight: 800; font-size: clamp(1rem, 4.5vw, 1.35rem);
  box-shadow: 0 5px 0 var(--jg-laranja-esc); cursor: pointer;
}
.jg-roda-centro:active { transform: translate(-50%, -46%); }
.jg-roleta-resta { margin: 0; font-weight: 700; color: var(--jg-suave); font-size: 1.1rem; }
.jg-roleta-saiu {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1rem;
  background: rgba(46, 35, 80, .35); animation: jg-aparece .2s ease-out;
}
.jg-roleta-cartao {
  width: min(100%, 340px); padding: 1.4rem 1.1rem; text-align: center;
  background: #fff; border-radius: 28px; box-shadow: 0 10px 0 rgba(0, 0, 0, .15);
  animation: jg-estrela-entra .45s cubic-bezier(.3, 1.6, .5, 1);
}
.jg-roleta-fig { height: 120px; display: grid; place-items: center; }
.jg-roleta-fig .jg-fig-emoji { font-size: 5.5rem; }
.jg-roleta-fig .jg-fig-img { max-height: 120px; }
.jg-roleta-palavra { font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 800; color: var(--jg-laranja); line-height: 1.1; word-break: break-word; }
.jg-roleta-fale { font-size: 1.15rem; color: var(--jg-suave); font-weight: 700; margin: .2rem 0 1rem; }

/* ---------- Forca de balões ---------- */
.jg-forca-urso { position: relative; width: 140px; height: clamp(120px, 38vw, 170px); display: flex; align-items: flex-end; justify-content: center; }
.jg-forca-bicho { font-size: 4rem; line-height: 1; position: relative; z-index: 1; }
.jg-forca-baloes { position: absolute; left: 0; right: 0; top: 0; height: 70%; }
.jg-forca-balao {
  position: absolute; bottom: 0; left: calc(4% + var(--k) * 14%);
  width: 32px; height: 40px; border-radius: 50% 50% 46% 46%; background: var(--cor);
  transform-origin: 50% 160%; transform: rotate(calc((var(--k) - 2.5) * 9deg)) translateY(calc(-1 * (var(--k) % 2) * 14px));
  box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .12); transition: transform .9s ease-in, opacity .9s ease-in;
}
.jg-forca-balao::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 30px; background: #9CA3AF; }
.jg-forca-balao.voou { transform: translateY(-260px) rotate(20deg); opacity: 0; }
.jg-forca .jg-peca { width: 3rem; height: 3rem; font-size: 1.5rem; }
.jg-forca .jg-peca.usada { visibility: visible; background: var(--jg-verde); box-shadow: 0 5px 0 var(--jg-verde-esc); cursor: default; }
.jg-forca .jg-peca.errada { background: #CBD5E1; box-shadow: 0 5px 0 #94A3B8; cursor: default; }
.jg-vaga.revelada { color: #DC2626 !important; border-color: #FCA5A5 !important; }

/* ---------- Anagrama ---------- */
.jg-anagrama-fila { gap: .45rem; }
.jg-anagrama-fixa { align-self: center; font-size: 1.8rem; font-weight: 800; color: var(--jg-suave); min-width: .6rem; }
.jg-anagrama .jg-peca { background: var(--jg-roxo); box-shadow: 0 5px 0 var(--jg-roxo-esc); transition: transform .12s; }
.jg-anagrama .jg-peca.no-lugar { background: var(--jg-verde); box-shadow: 0 5px 0 var(--jg-verde-esc); }
.jg-anagrama .jg-peca.sel { transform: translateY(-8px) scale(1.08); box-shadow: 0 0 0 4px var(--jg-amarelo), 0 5px 0 var(--jg-roxo-esc); }
.jg-anagrama .jg-peca.trocou { animation: jg-pula .3s; }
.jg-anagrama-fila.completa .jg-peca { animation: jg-pula .5s; }

/* ---------- Abra a caixa ---------- */
.jg-caixas { display: grid; gap: .8rem; width: 100%; max-width: 560px; margin: auto; padding: 1rem .8rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jg-caixas.m { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; }
.jg-caixas.p { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 340px; }
.jg-caixa {
  position: relative; aspect-ratio: 1; border: none; border-radius: 18px; cursor: pointer;
  background: var(--cor); box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
  display: grid; place-items: center; color: #fff !important; overflow: hidden;
  animation: jg-respira 2.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .1s);
}
.jg-caixa::before { content: ''; position: absolute; left: 42%; width: 16%; top: 0; bottom: 0; background: rgba(255, 255, 255, .35); }
.jg-caixa::after  { content: ''; position: absolute; top: 42%; height: 16%; left: 0; right: 0; background: rgba(255, 255, 255, .35); }
.jg-caixa-laco { position: absolute; top: -.1rem; font-size: 1.6rem; z-index: 1; }
.jg-caixa-num { position: relative; z-index: 1; font-size: clamp(1.6rem, 7vw, 2.3rem); font-weight: 800; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.jg-caixa:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.jg-caixa.aberta { background: #fff; border: 4px solid var(--jg-roxo-claro); box-shadow: var(--jg-sombra); animation: jg-pula .4s; cursor: default; }
.jg-caixa.aberta::before, .jg-caixa.aberta::after { display: none; }
.jg-caixa-fig { display: grid; place-items: center; width: 100%; height: 100%; padding: .4rem; }
.jg-caixa-fig .jg-fig-emoji { font-size: clamp(2rem, 9vw, 3rem); }
.jg-caixa-fig .jg-fig-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.jg-caixa-fig .jg-fig-texto { font-size: clamp(.8rem, 3.4vw, 1.1rem); }

/* ---------- Bingo ---------- */
.jg-bingo-topo { display: flex; align-items: center; gap: 1rem; }
.jg-bingo-titulo { font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 800; letter-spacing: .12em; color: var(--jg-laranja); -webkit-text-stroke: 1px var(--jg-laranja-esc); }
.jg-bingo-cartela.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 480px; gap: .55rem; }
.jg-bingo-cartela .jg-carta.marcada::after {
  content: '⭐'; position: absolute; top: .2rem; right: .35rem; font-size: 1.3rem; animation: jg-estrela-entra .45s;
}
.jg-bingo-cartela .jg-carta.marcada { cursor: default; }
.jg-bingo-cartela .jg-carta.linha { background: #FEF3C7; border-color: var(--jg-amarelo); }
.jg-bingo { position: relative; }
.jg-bingo-aviso {
  position: absolute; left: 50%; top: 45%; z-index: 6; transform: translate(-50%, -50%);
  font-size: clamp(2.6rem, 14vw, 4.4rem); font-weight: 800; color: var(--jg-laranja); white-space: nowrap;
  -webkit-text-stroke: .08em #fff; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0, 0, 0, .15);
  animation: jg-estrela-entra .45s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none;
}

/* ---------- Celular (até 600px): figuras com pelo menos 80px ---------- */
@media (max-width: 600px) {
  /* Ouça e toque com 3 figuras: 2 colunas, a terceira centralizada embaixo */
  .jg-opcoes.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 500px; }
  .jg-opcoes.n3 > .jg-carta:last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - .8rem) / 2); }
  .jg-carta .jg-fig-img { top: .4rem; left: .4rem; width: calc(100% - .8rem); height: calc(100% - 2rem); }

  /* Balão maior; a figura vira uma placa branca de 86% do balão (a figura fica com ~81%).
     O clamp no left segura o balão dentro do céu. */
  .jg-balao {
    --larg: clamp(100px, 28vw, 140px);
    left: clamp(calc(var(--larg) / 2), var(--x), calc(100% - var(--larg) / 2));
  }
  .jg-balao-fig { width: 86%; border-radius: 22%; }
  .jg-balao-fig .jg-fig-img { left: 3%; top: 3%; width: 94%; height: 94%; }
  .jg-balao-fig .jg-fig-emoji { font-size: calc(var(--larg) * .5); }
  .jg-balao-palavra {
    top: calc(100% + 12px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
    padding: .1rem .45rem; border-radius: 8px; white-space: nowrap;
    font-size: calc(var(--larg) * .13); color: var(--jg-roxo); background: #fff; text-shadow: none;
  }

  /* Toupeira: buracos mais altos, toupeira ocupando o buraco e a placa (quadrada) quase do
     tamanho dela — a figura fica com ~85% da largura da toupeira. Os 6 continuam no gramado. */
  .jg-toca { padding: .8rem .25rem; }
  .jg-gramado { gap: .3rem .35rem; padding: .5rem .4rem .3rem; }
  .jg-buraco { aspect-ratio: 1 / 1.3; }
  .jg-buraco::before { height: 22%; }
  .jg-buraco-borda { height: 11%; }
  .jg-poco { left: 2%; right: 2%; bottom: 15%; }
  .jg-toupeira-corpo {
    left: 4%; right: 4%;
    background:
      radial-gradient(circle at 34% 12%, #1f1f1f 0 4.5%, transparent 5%),
      radial-gradient(circle at 66% 12%, #1f1f1f 0 4.5%, transparent 5%),
      linear-gradient(180deg, #b07c50, #8a5a35);
  }
  .jg-toupeira-placa { width: 90%; margin-bottom: 4%; border-radius: 20%; border-width: 2px; }
  .jg-toupeira-placa .jg-fig-img { left: 0; top: 0; width: 100%; height: 100%; }
  .jg-toupeira-placa .jg-fig-emoji { font-size: clamp(2.6rem, 14vw, 3.4rem); }
  .jg-toupeira-palavra { bottom: 3px; padding: 0 .3rem; border-radius: 6px; background: rgba(255, 255, 255, .92); font-size: .8rem; }

  /* Arraste a palavra: palavras menores para caberem em menos linhas */
  .jg-arr { gap: .9rem; padding: .8rem .5rem; }
  .jg-fichas { gap: .5rem; }
  .jg-ficha { font-size: 1.1rem; padding: .5rem .85rem; }
}

/* ---------- "Testar" no painel da Amanda ---------- */
.jg-teste { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: #FFF8F2; }
.jg-teste-topo {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; padding: .6rem 1rem;
  background: #fff; box-shadow: 0 2px 0 rgba(46, 35, 80, .08);
  font-family: 'Baloo 2', system-ui, sans-serif;
}
.jg-teste-topo strong { flex: 1; font-size: 1.15rem; }
.jg-teste > .jg-host { flex: 1; overflow: auto; width: 100%; max-width: 900px; margin: 0 auto; padding: 1rem; }
.jg-teste.celular > .jg-host { max-width: 400px; }

/* ---------- Animações ---------- */
@keyframes jg-flutua  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes jg-flutua-deco { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }
@keyframes jg-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes jg-pula    { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes jg-balanca { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes jg-fala    { 0% { box-shadow: 0 6px 0 var(--jg-laranja-esc), 0 0 0 0 rgba(255, 107, 53, .5); } 100% { box-shadow: 0 6px 0 var(--jg-laranja-esc), 0 0 0 22px rgba(255, 107, 53, 0); } }
@keyframes jg-dica    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(255, 210, 63, .8), 0 5px 0 var(--jg-laranja-esc); } }
@keyframes jg-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes jg-reacao {
  0%   { transform: translateY(60%) scale(.3) rotate(-12deg); opacity: 0; }
  22%  { transform: translateY(0) scale(1.08) rotate(4deg); opacity: 1; }
  34%  { transform: scale(1) rotate(-2deg); }
  80%  { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: translateY(30%) scale(.85); opacity: 0; }
}
@keyframes jg-reacao-triste {
  0%   { transform: translateY(70%); opacity: 0; }
  20%  { transform: translateY(0); opacity: 1; }
  32%  { transform: translateX(-4px) rotate(-3deg); }
  44%  { transform: translateX(4px) rotate(3deg); }
  56%  { transform: none; }
  82%  { transform: none; opacity: 1; }
  100% { transform: translateY(40%); opacity: 0; }
}
@keyframes jg-elogio  {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  70%  { transform: translate(-50%, -60%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -110%) scale(1); opacity: 0; }
}
@keyframes jg-voa {
  30%  { transform: translate(0, -34px) scale(1.5); }
  100% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: .85; }
}
@keyframes jg-estrela-entra { from { transform: scale(0) rotate(-120deg); } to { transform: none; } }
@keyframes jg-confete  { to { transform: translateY(var(--queda)) rotate(var(--giro)); } }
@keyframes jg-sobe-festa { to { transform: translateY(calc(-1 * var(--queda))) rotate(calc(var(--giro) / 8)); } }
@keyframes jg-fogo     { 0% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 30px)) scale(.4); opacity: 0; } }
@keyframes jg-subir    { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--alto, 500px) - 100%)); } }
@keyframes jg-balanco  { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes jg-estoura  { to { transform: scale(1.5); opacity: 0; } }
@keyframes jg-cai      { to { transform: translateY(80px); opacity: 0; } }
@keyframes jg-caco     { to { transform: translate(var(--dx), var(--dy)) rotate(220deg); opacity: 0; } }
@keyframes jg-nuvem    { from { transform: translateX(-180px); } to { transform: translateX(calc(100vw + 60px)); } }
@keyframes jg-amassa   { 0% { transform: scale(1, 1); } 40% { transform: scale(1.15, .8); } 100% { transform: scale(1, 1); } }
@keyframes jg-vem-dir  { from { transform: translateX(70px) rotate(5deg); opacity: 0; } }
@keyframes jg-vem-esq  { from { transform: translateX(-70px) rotate(-5deg); opacity: 0; } }
@keyframes jg-abertura-sai { to { opacity: 0; transform: scale(1.08); } }
@keyframes jg-gira { to { transform: rotate(360deg); } }
@keyframes jg-logo-entra { 0% { transform: scale(.25) rotate(-8deg); opacity: 0; filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: scale(1) rotate(0); } }
@keyframes jg-logo-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes jg-brilho-pisca { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.3) rotate(40deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@keyframes jg-pisca-erro { 0%, 100% { background: #F7F4FE; } 40% { background: #FECACA; } }

/* Sem movimento: os balões ficam parados, lado a lado */
@media (prefers-reduced-motion: reduce) {
  .jg-reacao, .jg-reacao.errou { animation: jg-aparece 1.25s linear forwards; }
  .jg-ceu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; padding: 5.5rem .5rem 1rem; }
  .jg-balao, .jg-balao.balanca { position: relative; top: auto; left: auto; margin: 0; animation: none !important; }
  .jg-balao-corpo, .jg-deco span { animation: none; }
  .jg-nuvem { display: none; }
}