/* ============================================================
   PIPO · visual de cada desafio
   ============================================================ */
svg text { font-family: var(--emoji); }
.cena-item { cursor: pointer; }
/* itens de cena já usam "transform" para a posição: animamos o desenho de dentro */
.cena-item.pular, .cena-item.balancar, .cena-item.tremer { animation: none; }
.cena-item text { transform-box: fill-box; transform-origin: center; }
.cena-item.pular text { animation: pular .45s cubic-bezier(.3, 1.6, .5, 1); }
.cena-item.balancar text { animation: balancar .5s ease; }
.cena-item.achado text { opacity: .25; transition: opacity .4s .35s; }
.cartao-branco { background: #fff; border-radius: 24px; box-shadow: var(--sombra-cartao); }

/* ---------- 01 · quebra-cabeça ---------- */
.qc { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.qc-tabuleiro {
  position: relative; display: grid; gap: 3px; flex: none;
  width: min(100%, 470px, calc((var(--app-h) - 390px) * 1.333));
  aspect-ratio: 4 / 3; padding: 6px;
  background: #fff; border-radius: 18px; box-shadow: var(--sombra-cartao);
}
.qc-guia { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); opacity: .2; filter: grayscale(.4); border-radius: 12px; transition: opacity .6s; }
.qc-vaga { position: relative; z-index: 1; border-radius: 8px; border: 2px dashed rgba(123, 97, 255, .35); overflow: hidden; }
.qc-vaga.cheia { border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
.qc-vaga svg, .qc-peca svg { width: 100%; height: 100%; display: block; }
.qc-encaixou { animation: pular .4s cubic-bezier(.3, 1.6, .5, 1); }
.qc-completo { gap: 0; }
.qc-completo .qc-guia { opacity: 0; }
.qc-completo .qc-vaga { border-radius: 0; box-shadow: none; animation: onda .7s ease both; }
@keyframes onda { 50% { transform: translateY(-10px) scale(1.05); } }
.qc-bandeja {
  width: min(100%, 520px); flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px;
  padding: 6px 4px 10px; align-content: start;
}
.qc-peca {
  border-radius: 10px; overflow: hidden; background: #fff; cursor: grab;
  box-shadow: 0 0 0 3px #fff, 0 6px 0 3px rgba(58, 46, 92, .12);
}
.fantasma-arraste.qc-peca { border-radius: 6px; }

/* ---------- 02 · 7 erros ---------- */
.se-topo { display: flex; align-items: center; gap: 12px; }
.se-contador { background: #fff; border-radius: 999px; padding: 8px 20px; font-size: 22px; box-shadow: 0 4px 0 #E3DDF5; }
.se-contador b { font-size: 26px; color: var(--roxo); }
.btn-dica { width: 52px; height: 52px; border-radius: 50%; background: #FFF4D6; font-size: 26px; box-shadow: 0 4px 0 #F5D98A; font-family: var(--emoji); }
.btn-dica:active { transform: translateY(3px); box-shadow: 0 1px 0 #F5D98A; }
.se-par { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.se-figura {
  width: min(100%, 460px, calc((var(--app-h) - 330px) / 2 * 1.333));
  border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 4px #fff, var(--sombra-cartao);
  touch-action: manipulation;
}
.se-figura svg { display: block; width: 100%; height: auto; cursor: pointer; }
.se-marca { fill: rgba(255, 59, 107, .12); stroke: #FF3B6B; stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: marca .45s cubic-bezier(.3, 1.8, .5, 1); }
.se-dica { fill: rgba(255, 201, 60, .25); stroke: #FFB020; stroke-width: 6; stroke-dasharray: 12 8; animation: piscar-dica .5s ease-in-out infinite alternate; }
.se-onda { fill: none; stroke: rgba(58, 46, 92, .4); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: onda-toque .5s ease-out forwards; }
@keyframes marca { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes piscar-dica { from { opacity: .4; } to { opacity: 1; } }
@keyframes onda-toque { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* ---------- 03 · encontre o objeto ---------- */
.en-pedidos { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.en-chip {
  position: relative; width: 64px; height: 64px; border-radius: 20px;
  background: #fff; border: 3px dashed #E3DDF5; box-shadow: 0 4px 0 #EEE8FB;
  display: grid; place-items: center; font-size: 36px; font-family: var(--emoji);
}
.en-chip.ok { border: 3px solid var(--verde); background: #E6FBF0; }
.en-chip.ok::after, .ts-chip.ok::after {
  content: '✓'; position: absolute; right: -8px; top: -8px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--verde); color: #fff;
  font: 700 16px/26px var(--fonte); text-align: center;
}
.en-cena { width: min(100%, 520px, calc((var(--app-h) - 320px) * 1.333)); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 4px #fff, var(--sombra-cartao); }
.en-cena svg { display: block; width: 100%; height: auto; }

/* ---------- 04 · memória ---------- */
.mm-grade {
  display: grid; grid-template-columns: repeat(var(--colunas), 1fr); gap: 10px;
  width: min(100%, 460px, calc((var(--app-h) - 300px) / var(--linhas) * var(--colunas) * .8));
}
.mm-carta { aspect-ratio: 4 / 5; perspective: 700px; position: relative; }
.mm-dentro { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.mm-carta.virada .mm-dentro { transform: rotateY(180deg); }
.mm-face {
  position: absolute; inset: 0; border-radius: 18px;
  display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 5px 0 rgba(58, 46, 92, .15);
}
.mm-verso {
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .25) 0 12%, transparent 13%), linear-gradient(135deg, #9784FF, #6A4FF0);
  border: 4px solid #fff;
}
.mm-verso span { color: rgba(255, 255, 255, .9); font-size: clamp(22px, 6vw, 34px); }
.mm-frente { background: #fff; transform: rotateY(180deg); border: 4px solid #EEE8FB; font-size: clamp(30px, 9vw, 54px); font-family: var(--emoji); }
.mm-carta.achada .mm-frente { background: #E6FBF0; border-color: var(--verde); }

/* ---------- 05 · sequência ---------- */
.sq-fila {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  background: #fff; padding: 16px; border-radius: 24px; box-shadow: var(--sombra-cartao); max-width: 100%;
}
.sq-item {
  width: clamp(52px, 15vw, 70px); height: clamp(52px, 15vw, 70px); border-radius: 16px;
  background: #F6F3FF; display: grid; place-items: center;
  font-size: clamp(30px, 9vw, 44px); font-family: var(--emoji);
  animation: entrar-pulo .4s cubic-bezier(.3, 1.5, .5, 1) both;
}
.sq-vaga { background: #FFF4D6; border: 3px dashed #FFB020; color: #FFB020; font: 700 34px var(--fonte); animation: entrar-pulo .4s both, pulsar-vaga 1.2s ease-in-out .6s infinite; }
@keyframes pulsar-vaga { 50% { transform: scale(1.08); } }
.sq-opcoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sq-opcao {
  width: clamp(78px, 22vw, 96px); height: clamp(78px, 22vw, 96px); border-radius: 24px;
  background: #fff; box-shadow: 0 6px 0 #E3DDF5; display: grid; place-items: center;
  font-size: clamp(40px, 12vw, 54px); font-family: var(--emoji);
}
.sq-opcao:active { transform: translateY(3px); box-shadow: 0 3px 0 #E3DDF5; }
.sq-opcao.certa { background: #E6FBF0; box-shadow: 0 6px 0 var(--verde); }
.sq-numero { display: flex; flex-direction: column; align-items: center; font-family: var(--fonte); font-weight: 700; color: var(--roxo); line-height: 1; }
.sq-numero small { font-size: 9px; letter-spacing: 1px; color: var(--laranja); max-width: 46px; word-break: break-all; line-height: .9; margin-top: 2px; }
.sq-voando { position: fixed; margin: 0; z-index: 46; pointer-events: none; }

/* ---------- 06 · qual é o diferente ---------- */
.df-grade {
  display: grid; grid-template-columns: repeat(var(--colunas), 1fr); gap: 10px;
  width: min(100%, 440px, calc((var(--app-h) - 290px) * var(--colunas) / var(--linhas)));
}
.df-item {
  aspect-ratio: 1; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 #EEE8FB;
  display: grid; place-items: center; padding: 14%;
  animation: entrar-pulo .35s cubic-bezier(.3, 1.5, .5, 1) both;
}
.df-item:active { transform: scale(.96); }
.df-emoji { display: inline-block; font-family: var(--emoji); line-height: 1; font-size: calc(min(440px, 100vw - 32px) / var(--colunas) * .46); }
.df-item .forma-svg { width: 100%; height: 100%; }
.df-item.certo { background: #E6FBF0; box-shadow: 0 0 0 4px var(--verde), 0 5px 0 #EEE8FB; }
.df-grade.resolvida .df-item:not(.certo) { opacity: .4; transition: opacity .3s; }

/* ---------- 07 · o que mudou ---------- */
.mu-tempo { width: min(100%, 360px); height: 12px; background: #EEE8FB; border-radius: 6px; overflow: hidden; }
.mu-tempo i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #FFB020, #FF7EB6); border-radius: 6px; transition-property: width; transition-timing-function: linear; }
.mu-tempo.correndo i { width: 0; }
.mu-palco { position: relative; overflow: hidden; background: #fff; border-radius: 28px; padding: 16px; box-shadow: var(--sombra-cartao); width: min(100%, 420px); }
.mu-grade { display: grid; grid-template-columns: repeat(var(--colunas), 1fr); gap: 12px; }
.mu-casa {
  position: relative; aspect-ratio: 1; border-radius: 20px; background: #F6F3FF;
  display: grid; place-items: center; font-size: clamp(40px, 12vw, 64px); font-family: var(--emoji);
}
.mu-casa.certa { background: #E6FBF0; box-shadow: 0 0 0 4px var(--verde); }
.mu-era {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  font: 600 14px var(--fonte); font-style: normal; color: #fff; background: var(--tinta);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.mu-cortina {
  position: absolute; top: 0; bottom: 0; width: 51%; z-index: 2;
  background: repeating-linear-gradient(90deg, #FF6B6B 0 18px, #F25555 18px 36px);
  transition: transform .5s cubic-bezier(.6, 0, .3, 1);
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}
.mu-cortina::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: radial-gradient(circle at 9px 0, #FFC93C 8px, transparent 9px) 0 0 / 18px 16px repeat-x; }
.mu-cortina-e { left: 0; transform: translateX(-102%); }
.mu-cortina-d { right: 0; transform: translateX(102%); }
.mu-palco.fechada .mu-cortina { transform: translateX(0); }
.mu-botoes { display: flex; gap: 12px; min-height: 66px; align-items: center; }

/* ---------- 08 · labirinto ---------- */
.lb-hud { display: flex; gap: 10px; min-height: 42px; }
.lb-hud-item { background: #fff; border-radius: 999px; padding: 6px 16px; font-size: 20px; font-weight: 700; box-shadow: 0 3px 0 #EEE8FB; }
.lb-hud-item:first-child:not(.ok) { filter: grayscale(1); opacity: .5; }
.lb-hud-item.ok { box-shadow: 0 0 0 3px var(--amarelo); }
.lb-tabuleiro { position: relative; width: min(100%, 460px, calc((var(--app-h) - 300px) * var(--prop))); touch-action: none; cursor: pointer; }
.lb-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-chao { fill: #8FD18B; }
.lb-piso { fill: #EEF9DE; }
.lb-parede, .lb-borda { fill: none; stroke: #2F9E44; stroke-width: 14; stroke-linecap: round; }
.lb-rastro { fill: none; stroke: #FFC93C; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 22; }
.lb-porta rect { fill: #B07D52; stroke: #7A5230; stroke-width: 4; }
.lb-porta { transition: opacity .6s .2s; }
.lb-porta.aberta { opacity: 0; }
.lb-porta.balancar { animation: none; }
.lb-porta.balancar rect, .lb-porta.balancar text { animation: tremer .45s ease; }
.lb-ent {
  position: absolute; width: var(--cel, 60px); height: var(--cel, 60px);
  margin: calc(var(--cel, 60px) / -2) 0 0 calc(var(--cel, 60px) / -2);
  display: grid; place-items: center; line-height: 1;
  font-size: calc(var(--cel, 60px) * .6); font-family: var(--emoji);
  transition: left .14s ease, top .14s ease; pointer-events: none; z-index: 2;
}
.lb-heroi { z-index: 3; font-size: calc(var(--cel, 60px) * .7); filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .2)); }
.lb-objetivo { animation: flutuar 2s ease-in-out infinite; }
.lb-estrelinha { font-size: calc(var(--cel, 60px) * .42); animation: flutuar 1.6s ease-in-out infinite; }
.lb-chave { animation: balancar 1.6s ease-in-out infinite; }
.lb-ent.pega { animation: pega .5s ease forwards; }
@keyframes pega { to { transform: scale(1.8); opacity: 0; } }

/* ---------- 09 · ligue os pares ---------- */
.lp-quadro {
  position: relative; display: flex; justify-content: space-between;
  width: min(100%, 400px); flex: 1; max-height: 540px; padding: 6px 2px; touch-action: none;
}
.lp-linhas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lp-coluna { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.lp-item {
  width: clamp(70px, 21vw, 90px); aspect-ratio: 1; border-radius: 24px;
  background: #fff; box-shadow: 0 5px 0 #E3DDF5; display: grid; place-items: center; padding: 12px;
  transition: transform .15s, box-shadow .15s; touch-action: none;
}
.lp-item.ativo { transform: scale(1.08); box-shadow: 0 0 0 4px var(--roxo), 0 5px 0 #E3DDF5; }
.lp-item.feito { box-shadow: 0 0 0 4px var(--cor-par), 0 5px 0 #E3DDF5; }
.lp-item.tremer { animation: tremer .45s; }
.lp-emoji { font-size: clamp(38px, 11vw, 50px); line-height: 1; font-family: var(--emoji); }
.lp-pequeno { font-size: clamp(22px, 6vw, 28px); }
.lp-sombra { filter: brightness(0) opacity(.75); }
.lp-item .forma-svg { width: 100%; height: 100%; }
.lp-linha { stroke-width: 8; stroke-linecap: round; }
.lp-linha.feita { stroke-width: 10; }

/* ---------- 10 · caça ao tesouro ---------- */
.desafio-tesouro { gap: 12px; }
.ts-lista { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ts-chip {
  position: relative; display: flex; align-items: center; gap: 6px;
  background: #fff; border: 3px dashed #F0D9A8; border-radius: 999px; padding: 4px 12px 4px 6px;
  box-shadow: 0 3px 0 #EEE8FB;
}
.ts-chip-emoji { font-size: 26px; font-family: var(--emoji); }
.ts-chip-nome { font-weight: 600; font-size: 15px; }
.ts-chip.ok { border: 3px solid var(--verde); background: #E6FBF0; }
.ts-chip.ok .ts-chip-nome { opacity: .6; text-decoration: line-through; }
.ts-janela { position: relative; width: 100%; flex: 1; min-height: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 4px #fff, var(--sombra-cartao); background: #38BDF8; }
.ts-rolagem { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; }
.ts-rolagem::-webkit-scrollbar { display: none; }
.ts-mundo { display: block; height: 100%; width: auto; aspect-ratio: 16 / 9; }
.ts-frente { pointer-events: none; }
.ts-dica {
  position: absolute; right: 12px; bottom: 12px; pointer-events: none;
  background: rgba(46, 36, 82, .8); color: #fff; font-weight: 600; font-size: 15px;
  padding: 8px 14px; border-radius: 999px; animation: dica-mao 1.6s ease-in-out infinite;
  transition: opacity .4s;
}
.ts-janela.explorou .ts-dica { opacity: 0; }
@keyframes dica-mao { 50% { transform: translateX(-10px); } }
.ts-final {
  position: absolute; inset: 0; z-index: 25;
  background: radial-gradient(circle at 50% 55%, #FFE08A, #F2B54A 55%, #B5652D);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  animation: entrar-pulo .4s ease both;
}
.ts-titulo {
  margin: 0; color: #fff; text-align: center; line-height: 1.05;
  font-size: clamp(34px, 10vw, 48px);
  text-shadow: 0 4px 0 #B5652D, 0 10px 24px rgba(0, 0, 0, .2);
  animation: letra 1.6s ease-in-out infinite;
}
.ts-bau { width: min(72vw, 280px); overflow: visible; }
.ts-raios { fill: #FFF3BF; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s; }
.ts-final.aberto .ts-raios { opacity: .75; animation: girar 9s linear infinite; }
.ts-tampa { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.ts-final.aberto .ts-tampa { transform: translate(-8px, -30px) rotate(-26deg); }
.ts-ouro { opacity: 0; transform: translateY(12px); transition: opacity .4s .15s, transform .5s .15s; }
.ts-final.aberto .ts-ouro { opacity: 1; transform: translateY(-4px); }