/* ============================================================
   PIPO · desafios novos (11–18)
   Mesma identidade: madeira, painéis creme, cartões brancos com
   "degrau" embaixo, cores vivas e cantos bem redondos.
   ============================================================ */

/* ---------- 11 · barco das formas ---------- */
.desafio-formas { gap: 12px; }
.fb-cena {
  position: relative; width: min(100%, 460px); flex: none; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 14px 10px 0; border-radius: 24px;
  background: linear-gradient(180deg, #A9E2FF, #E3F6FF 70%);
  box-shadow: 0 0 0 4px #fff, var(--sombra-cartao);
}
.fb-barco {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  width: clamp(210px, calc((var(--app-h) - 400px) * 1.25), 88%);
  animation: fb-boiar 2.6s ease-in-out infinite;
}
.fb-mastro { position: absolute; top: -8px; bottom: 36px; left: 50%; width: 12px; margin-left: -6px; background: linear-gradient(90deg, #DDA064, #A8652F); border: 3px solid var(--madeira-escura); border-radius: 6px; }
.fb-vela {
  position: relative; z-index: 1; width: 100%; margin-bottom: 6px;
  display: grid; grid-template-columns: repeat(var(--colunas), 1fr); gap: 8px; padding: 12px;
  background: #FFFDF6; border: 4px solid #E3C99A; border-radius: 20px 20px 10px 10px;
  box-shadow: inset 0 -8px 0 #F4E6C8, 0 4px 0 rgba(122, 74, 30, .25);
}
.fb-vaga { aspect-ratio: 1; display: grid; place-items: center; padding: 3px; }
.fb-vaga svg, .fb-peca svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fb-vaga:not(.cheia) { animation: pulsar-vaga 1.6s ease-in-out infinite; }
.fb-casco { width: 100%; height: clamp(40px, 7vw, 56px); display: block; }
.fb-mar { position: relative; z-index: 2; width: calc(100% + 20px); height: 26px; margin-top: -16px; background: linear-gradient(#5CC6FF, #2C9BEA); }
.fb-mar::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px;
  background: radial-gradient(circle at 50% 100%, #5CC6FF 62%, transparent 64%) 0 0 / 28px 12px repeat-x;
}
.fb-cena.zarpou .fb-barco { animation: fb-zarpar 1.5s ease-in forwards; }
@keyframes fb-boiar { 50% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes fb-zarpar { 20% { transform: translateY(-6px) rotate(-2deg); } 100% { transform: translateX(130%) rotate(4deg); } }
.fb-ilha {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px;
  width: min(100%, 460px); min-height: 84px; padding: 12px;
  background: var(--creme); border: 3px solid var(--creme-borda); border-radius: 22px; box-shadow: 0 5px 0 #E3C58E;
}
.fb-peca { width: clamp(54px, 15vw, 72px); aspect-ratio: 1; cursor: grab; touch-action: none; filter: drop-shadow(0 4px 0 rgba(90, 52, 19, .22)); }

/* ---------- 12 · conta-frutas ---------- */
.desafio-conta { gap: 20px; }
.cf-linha { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 540px); flex-wrap: wrap; }
.cf-fileira {
  flex: 1 1 220px; max-width: 420px; display: grid; grid-template-columns: repeat(var(--colunas), 1fr); gap: 8px; padding: 10px;
  background: repeating-linear-gradient(180deg, #C8864A 0 16px, #BD7C41 16px 32px);
  border: 4px solid var(--madeira-escura); border-radius: 20px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--madeira-sombra);
}
.cf-casa {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px; cursor: pointer;
  background: #fff; box-shadow: inset 0 -4px 0 #F0E2C6; display: grid; place-items: center;
  font-size: clamp(24px, 7.5vw, 40px); font-family: var(--emoji); line-height: 1;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .45s;
}
.cf-casa.vazia { background: rgba(255, 246, 226, .55); box-shadow: inset 0 3px 6px rgba(90, 52, 19, .18); cursor: default; }
.cf-casa.contada::after {
  content: attr(data-n); position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--verde); color: #fff; font: 700 15px var(--fonte); display: grid; place-items: center;
  box-shadow: 0 2px 0 var(--verde-escuro); animation: marca .25s ease;
}
.cf-casa.guardada { transform: scale(.55); opacity: .3; }
.cf-igual { font: 700 36px var(--fonte); color: var(--madeira-escura); }
.cf-caixa {
  flex: none; width: clamp(72px, 20vw, 96px); aspect-ratio: 1; border-radius: 20px;
  background: #fff; border: 4px dashed var(--creme-borda);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.cf-caixa-num { font: 700 clamp(34px, 10vw, 48px) var(--fonte); color: var(--laranja); }
.cf-caixa-fruta { font-size: 22px; font-family: var(--emoji); }
.cf-numeros { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 460px; }
.cf-numero {
  width: clamp(56px, 15vw, 74px); aspect-ratio: 1; font: 700 clamp(30px, 9vw, 40px) var(--fonte);
  background: #fff; border: 3px solid #F3E3C3; border-radius: 20px; box-shadow: 0 6px 0 #EAD4A8; color: var(--tinta);
}
.cf-numero:active { transform: translateY(3px); box-shadow: 0 3px 0 #EAD4A8; }
.cf-numero.certo { background: #E6FBF0; border-color: var(--verde); box-shadow: 0 6px 0 var(--verde); color: var(--verde-escuro); }

/* ---------- 13 · cesta do pipo ---------- */
.desafio-cesta { gap: 10px; }
.cs-placar {
  flex: none; padding: 4px 18px; border-radius: 14px; color: #fff; font: 700 20px var(--fonte);
  background: linear-gradient(180deg, var(--madeira-clara), var(--madeira)); border: 3px solid var(--madeira-escura);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--madeira-sombra); text-shadow: 0 2px 0 var(--madeira-escura);
}
.cs-placar b { font-size: 28px; color: #FFE27A; }
.cs-quadra {
  position: relative; width: 100%; max-width: 620px; flex: 1; min-height: 240px; overflow: hidden; touch-action: none;
  border-radius: 24px; background: linear-gradient(180deg, #8FD6FF, #D9F3FF 75%);
  box-shadow: 0 0 0 4px #fff, var(--sombra-cartao);
}
.cs-chao { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(#8ED36B, #5DB548); border-top: 5px solid #4E9E3A; }
.cs-poste { position: absolute; width: 10px; background: linear-gradient(90deg, #A9B5C2, #6F7C8A); border-radius: 5px; }
.cs-tabela { position: absolute; background: #fff; border: 4px solid #3B82C4; border-radius: 10px; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.cs-tabela i { position: absolute; left: 30%; right: 30%; bottom: 12%; height: 36%; border: 3px solid #FF7A45; border-bottom: 0; }
.cs-aro { position: absolute; z-index: 3; border-top: 6px solid #FF5A1F; border-radius: 4px; pointer-events: none; }
.cs-aro svg { width: 100%; height: 100%; display: block; }
.cs-bola { position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; line-height: 1; font-family: var(--emoji); pointer-events: none; will-change: transform; }
.cs-mira { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.cs-mira circle { fill: #fff; stroke: rgba(30, 58, 116, .35); stroke-width: 2; }
.cs-passaro { position: absolute; left: 0; top: 0; z-index: 3; font-size: 32px; line-height: 1; font-family: var(--emoji); pointer-events: none; }
.cs-dica {
  position: absolute; right: 12px; bottom: 20%; z-index: 4; pointer-events: none;
  background: rgba(58, 42, 24, .78); color: #fff; font-weight: 600; font-size: 15px;
  padding: 8px 14px; border-radius: 999px; animation: dica-mao 1.6s ease-in-out infinite;
}

/* ---------- 14 · hora do lanche ---------- */
.desafio-lanche { gap: 14px; --tam: clamp(42px, min(13vw, calc(var(--app-h) * .07)), 58px); }
.hl-bandeja {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 8px;
  width: min(100%, 460px); min-height: 72px; padding: 10px 12px;
  background: repeating-linear-gradient(180deg, #C8864A 0 16px, #BD7C41 16px 32px);
  border: 4px solid var(--madeira-escura); border-radius: 22px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--madeira-sombra);
}
.hl-lanche {
  width: var(--tam); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: calc(var(--tam) * .62); font-family: var(--emoji); line-height: 1;
  box-shadow: 0 4px 0 rgba(90, 52, 19, .35); cursor: grab; touch-action: none;
}
.hl-salao { display: flex; flex-direction: column; justify-content: center; gap: 12px; width: min(100%, 460px); }
.hl-mesa {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px 12px;
  background: repeating-conic-gradient(#FFD6D6 0 25%, #FFFFFF 0 50%) 0 0 / 30px 30px;
  border: 4px solid #F08A8A; border-radius: 22px; box-shadow: 0 5px 0 #D46A6A;
  transition: border-color .3s, box-shadow .3s;
}
.hl-placa {
  flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  font-size: 28px; font-family: var(--emoji); line-height: 1;
  background: linear-gradient(180deg, var(--madeira-clara), var(--madeira)); border: 3px solid var(--madeira-escura); box-shadow: 0 3px 0 var(--madeira-sombra);
}
.hl-lugares { flex: 1; display: flex; justify-content: space-around; gap: 6px; }
.hl-lugar { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hl-bicho { font-size: calc(var(--tam) * .62); font-family: var(--emoji); line-height: 1; }
.hl-prato {
  width: var(--tam); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #fff 52%, #E9F0F6 54%, #fff 68%);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15), inset 0 0 0 2px #DDE6EE;
  font-size: calc(var(--tam) * .6); font-family: var(--emoji); line-height: 1;
}
.hl-mesa.feliz { border-color: var(--verde); box-shadow: 0 5px 0 var(--verde-escuro); }
.hl-mesa.feliz .hl-bicho { animation: quicar .7s ease-in-out 2; }

/* ---------- motor de traçado (números e letras) ---------- */
.tr-svg { display: block; height: 100%; max-width: 100%; touch-action: none; cursor: pointer; overflow: visible; }
.tr-guia, .tr-miolo, .tr-cheio { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tr-cheio { transition: stroke-dashoffset .12s linear; }
.tr-pedra { transform-box: fill-box; transform-origin: center; }
.tr-pedra.quebrada { animation: tr-quebrar .35s ease forwards; }
.tr-inicio { fill: #3FC23C; stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: tr-pulsar 1s ease-in-out infinite; }
.tr-seta { fill: #fff; }
.tr-marcador { pointer-events: none; }
@keyframes tr-pulsar { 50% { transform: scale(1.3); } }
@keyframes tr-quebrar { 40% { transform: scale(1.35); } 100% { transform: scale(0); opacity: 0; } }
/* cano: tubo cinza-azulado, pedras no caminho, gosma colorida */
.tr-cano .tr-guia { stroke: #8FA3B5; stroke-width: 30; }
.tr-cano .tr-miolo { stroke: #3A2A1E; stroke-width: 20; }
.tr-cano .tr-cheio { stroke: var(--tr-cor); stroke-width: 17; filter: drop-shadow(0 0 4px var(--tr-cor)); }
.tr-cano .tr-pedra { fill: #A39480; stroke: #6E604F; stroke-width: 2; }
.tr-cano.tr-completo .tr-guia { stroke: #B5C6D6; }
/* letra: caminho claro e pontilhado sobre a folha de caderno */
.tr-letra .tr-guia { stroke: #F3EBDD; stroke-width: 26; }
.tr-letra .tr-miolo { stroke: #CDB894; stroke-width: 2.5; stroke-dasharray: 5 7; }
.tr-letra .tr-cheio { stroke: var(--tr-cor); stroke-width: 20; }
.tr-letra .tr-pedra { fill: #CDB894; }
.tr-letra .tr-pedra.quebrada { animation: none; opacity: 0; }
.tr-completo .tr-cheio { animation: tr-brilho .7s ease; }
@keyframes tr-brilho { 50% { filter: brightness(1.3) drop-shadow(0 0 6px var(--tr-cor)); } }

/* ---------- 15 · cano dos números ---------- */
.desafio-numeros { gap: 12px; }
.tn-cena { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 540px); flex: 1; min-height: 0; max-height: 470px; }
.tn-info {
  flex: none; width: clamp(68px, 20vw, 110px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; text-align: center;
  background: var(--creme); border: 3px solid var(--creme-borda); border-radius: 20px; box-shadow: 0 5px 0 #E3C58E;
}
.tn-info b { font: 700 clamp(40px, 12vw, 60px) var(--fonte); line-height: 1; color: var(--gosma); -webkit-text-stroke: 2px rgba(0, 0, 0, .15); }
.tn-info small { font-size: 15px; font-weight: 600; color: var(--tinta-suave); }
.tn-info em { font-style: normal; font-weight: 700; color: var(--gosma); font-size: 1.2em; }
.tn-figura { font-size: clamp(30px, 9vw, 42px); font-family: var(--emoji); line-height: 1; }
.tn-pontos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; font-size: clamp(13px, 3.6vw, 18px); font-family: var(--emoji); line-height: 1.1; }
.tn-pontos i, .tn-grupo i { font-style: normal; }
.tn-caixa {
  flex: 1; align-self: stretch; min-width: 0; min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 8px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .09) 0 7px, transparent 8px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, .08) 0 5px, transparent 6px) 0 0 / 38px 38px,
    linear-gradient(180deg, #B98256, #8E5A33);
  border: 4px solid var(--madeira-escura); border-radius: 24px;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, .25), 0 5px 0 var(--madeira-sombra);
}
.tn-planta { flex: none; position: relative; align-self: flex-end; width: clamp(54px, 15vw, 80px); display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.tn-broto, .tn-flor { font-size: clamp(32px, 10vw, 50px); font-family: var(--emoji); line-height: 1; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.tn-flor { position: absolute; top: -8px; transform: scale(0); opacity: 0; }
.tn-vaso { width: 76%; height: 30px; background: linear-gradient(#E0784A, #B9532A); border-radius: 4px 4px 14px 14px; border-top: 7px solid #F08B5B; }
.tn-cena.cheio .tn-broto { transform: scale(0); opacity: 0; }
.tn-cena.cheio .tn-flor { transform: scale(1.25); opacity: 1; }
.tn-grupos { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: entrar-pulo .4s ease both; }
.tn-grupo {
  width: clamp(92px, 27vw, 120px); min-height: 72px; padding: 8px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px;
  font-size: clamp(16px, 4.6vw, 22px); font-family: var(--emoji); line-height: 1.1;
  background: #fff; border: 3px solid #F3E3C3; border-radius: 20px; box-shadow: 0 6px 0 #EAD4A8;
}
.tn-grupo.certo { background: #E6FBF0; border-color: var(--verde); box-shadow: 0 6px 0 var(--verde); }

/* ---------- 16 · escrevendo com o pipo ---------- */
.desafio-palavras { gap: 12px; }
.pl-tira {
  display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 18px 8px 10px;
  background: var(--creme); border: 3px solid var(--creme-borda); border-radius: 22px; box-shadow: 0 5px 0 #E3C58E;
  transition: border-color .3s, box-shadow .3s;
}
.pl-tira.pronta { border-color: var(--verde); box-shadow: 0 5px 0 var(--verde-escuro); }
.pl-figura { flex: none; width: clamp(46px, 13vw, 62px); height: clamp(46px, 13vw, 62px); display: grid; place-items: center; font-size: clamp(36px, 10vw, 50px); font-family: var(--emoji); line-height: 1; }
.pl-figura img { width: 100%; height: 100%; object-fit: contain; }
.pl-palavra { display: flex; gap: 1px; font: 700 clamp(28px, 8.5vw, 44px) var(--fonte); letter-spacing: 1px; color: #D6C4A0; line-height: 1.1; }
.pl-palavra span { display: inline-block; transition: color .3s; }
.pl-palavra span.atual { color: var(--tinta); text-decoration: underline 4px var(--laranja); text-underline-offset: 6px; }
.pl-folha {
  position: relative; flex: 1; min-height: 0; width: min(100%, 360px); max-height: 460px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 5px solid var(--madeira); border-radius: 24px;
  box-shadow: inset 0 0 0 3px var(--creme-borda), 0 6px 0 var(--madeira-escura);
}
.pl-linhas {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 30px, #FFC9C9 30px 32px, transparent 32px),
    repeating-linear-gradient(180deg, transparent 0 38px, #E4EFF9 38px 40px);
}
.pl-caixa { position: relative; height: 100%; width: 100%; padding: 10px; display: flex; align-items: center; justify-content: center; }

/* ---------- 17 · hora da higiene ---------- */
.desafio-higiene { gap: 12px; }
.hg-cena {
  position: relative; width: min(100%, 480px); flex: 1; min-height: 200px; max-height: 380px; overflow: hidden;
  border-radius: 24px; box-shadow: 0 0 0 4px #fff, var(--sombra-cartao); touch-action: none;
}
.hg-dentes { background: radial-gradient(circle at 50% 45%, #FFDCC6, #F4BA98); }
.hg-banho { background: #DDF3FF; }
.hg-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
.hg-dente { fill: #FFF8E6; stroke: #E6D6B5; stroke-width: 2; transition: fill .4s; }
.hg-cena.limpo .hg-dente { fill: #fff; stroke: #DCE8F2; }
.hg-alvo { transition: opacity .12s; }
.hg-alvo.sumiu { opacity: 0 !important; transition: opacity .3s; }
.hg-germe > g { transform-box: fill-box; transform-origin: center; animation: pet 1.4s ease-in-out infinite; }
.hg-brilho { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hg-banho .hg-brilho { fill: #FFC93C; }
.hg-cena.limpo .hg-brilho { animation: hg-brilhar 1.2s ease-in-out infinite; }
.hg-cena.limpo .hg-brilho:nth-child(2) { animation-delay: .3s; }
.hg-cena.limpo .hg-brilho:nth-child(3) { animation-delay: .6s; }
.hg-cena.limpo .hg-brilho:nth-child(4) { animation-delay: .9s; }
@keyframes hg-brilhar { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } }
.hg-cursor { pointer-events: none; opacity: 0; transition: opacity .12s; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
.hg-cena.esfregando .hg-cursor { opacity: 1; }
.hg-creme { display: none; }
.hg-ferr.com-pasta .hg-creme, .hg-cursor.com-pasta .hg-creme { display: inline; }
.hg-respingo { fill: #3FB6FF; animation: hg-cair .6s linear forwards; }
@keyframes hg-cair { to { transform: translateY(46px); opacity: 0; } }
.hg-barra {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 12px; max-width: 100%;
  background: repeating-linear-gradient(180deg, #C8864A 0 16px, #BD7C41 16px 32px);
  border: 4px solid var(--madeira-escura); border-radius: 22px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--madeira-sombra);
}
.hg-ferr {
  width: clamp(62px, 17vw, 78px); display: flex; flex-direction: column; align-items: center; padding: 6px 4px 4px;
  background: var(--creme); border: 3px solid #fff; border-radius: 18px; box-shadow: 0 4px 0 var(--madeira-sombra);
  font: 600 12px var(--fonte); color: var(--tinta); transition: transform .15s, background .15s;
}
.hg-ferr .hg-ico { width: clamp(38px, 11vw, 48px); height: clamp(38px, 11vw, 48px); }
.hg-ferr.ativa { background: #E6FBF0; border-color: var(--verde); transform: translateY(-5px); }
.hg-ferr.proxima { animation: pulso 1.1s ease-out infinite; }
.hg-ferr.usada { opacity: .55; }
.jogo-missao-icone .hg-ico { width: 30px; height: 30px; vertical-align: middle; }

/* ---------- 18 · corrida da floresta ---------- */
.desafio-corrida { gap: 14px; }
.cr-pista {
  position: relative; width: min(100%, 620px); padding: 10px 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  background: linear-gradient(#8ED36B, #6CC04F); border: 4px solid #4E9E3A; border-radius: 22px; box-shadow: 0 5px 0 #3B7F2B;
}
.cr-raia {
  position: relative; height: clamp(62px, calc(var(--app-h) * .1), 92px); margin: 0 10px; border-radius: 14px;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .4) 18px 32px) center / 100% 4px no-repeat, #D9A066;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .12);
}
.cr-corredor { position: absolute; bottom: 2px; left: 0; z-index: 2; height: 118%; aspect-ratio: 1; display: grid; place-items: end center; transition: left .45s cubic-bezier(.3, 1.3, .5, 1); }
.cr-pipo img { height: 100%; width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .18)); }
.cr-rival { transition: none; height: 100%; }
.cr-rival span { font-size: clamp(38px, calc(var(--app-h) * .07), 62px); font-family: var(--emoji); line-height: 1; animation: quicar .4s ease-in-out infinite; }
.cr-rival.parado span { animation: none; }
.cr-pipo.saltar img { animation: cr-salto .45s ease; }
.cr-pipo.tropecar img { animation: tremer .45s ease; }
.cr-pista.venceu .cr-pipo img { animation: quicar .6s ease-in-out infinite; }
@keyframes cr-salto { 40% { transform: translateY(-16%); } }
.cr-chegada {
  position: absolute; top: 0; bottom: 0; z-index: 1; width: 14px; opacity: .9;
  left: calc(10px + (100% - 20px) * .86 + 22px);
  background: repeating-conic-gradient(#2B2B2B 0 25%, #fff 0 50%) 0 0 / 14px 14px;
}
.cr-cartao {
  min-width: 110px; min-height: 80px; padding: 8px 18px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--creme); border: 3px solid var(--creme-borda); border-radius: 22px; box-shadow: 0 5px 0 #E3C58E;
}
.cr-num { font: 700 clamp(46px, 13vw, 64px) var(--fonte); line-height: 1; color: var(--laranja); text-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.cr-cartao .cr-dado { width: clamp(56px, 16vw, 72px); height: auto; }
.cr-mais { font: 700 34px var(--fonte); color: var(--madeira-escura); }
.cr-trofeu { font-size: 56px; font-family: var(--emoji); line-height: 1; }
.cr-opcoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; max-width: 100%; }
.cr-opcao {
  width: clamp(78px, 23vw, 100px); aspect-ratio: 1; padding: 8px; display: grid; place-items: center;
  font: 700 clamp(40px, 12vw, 54px) var(--fonte); color: var(--tinta);
  background: #fff; border: 3px solid #F3E3C3; border-radius: 22px; box-shadow: 0 6px 0 #EAD4A8;
}
.cr-opcao:active { transform: translateY(3px); box-shadow: 0 3px 0 #EAD4A8; }
.cr-opcao .cr-dado { width: 100%; height: 100%; }
.cr-opcao.larga { width: clamp(124px, 40vw, 170px); aspect-ratio: auto; padding: 8px 6px; }
.cr-grade { width: 100%; display: block; }
.cr-opcao.certo { background: #E6FBF0; border-color: var(--verde); box-shadow: 0 6px 0 var(--verde); }
.cr-opcao.errado { animation: tremer .45s ease; }
.cr-opcao.piscar { animation: cr-piscar .45s ease 3; }
@keyframes cr-piscar { 50% { transform: scale(1.08); box-shadow: 0 0 0 6px #FFC93C, 0 6px 0 #EAD4A8; } }

/* ---------- tela deitada (16:9): peças lado a lado ---------- */
@media (min-aspect-ratio: 4/3) and (min-height: 480px) {
  .desafio-formas, .desafio-lanche, .desafio-higiene { flex-direction: row; gap: 24px; }
  .fb-cena { width: min(56%, 520px); }
  .fb-barco { width: clamp(220px, calc((var(--app-h) - 330px) * 1.5), 90%); }
  .fb-ilha { width: min(38%, 360px); align-self: center; }
  .cf-casa { max-height: calc((var(--app-h) - 420px) / 2); }
  .hl-bandeja { width: min(34%, 300px); align-self: center; }
  .hl-salao { width: min(60%, 520px); }
  .desafio-lanche { --tam: clamp(40px, calc((var(--app-h) - 360px) / 4.6), 58px); }
  .tn-cena { max-height: calc(var(--app-h) - 280px); }
  .desafio-palavras { flex-direction: row; gap: 28px; }
  .pl-tira { flex-direction: column; padding: 16px 18px; }
  .pl-folha { width: min(46%, 360px); height: calc(var(--app-h) - 290px); flex: none; }
  .hg-cena { flex: none; min-height: 0; max-height: none; height: calc(var(--app-h) - 290px); width: min(62%, calc((var(--app-h) - 290px) * 1.36)); }
  .hg-barra { flex-direction: column; flex-wrap: wrap; max-height: calc(var(--app-h) - 290px); align-self: center; }
  .desafio-corrida { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 14px 24px; }
  .cr-pista { width: min(100%, 760px); }
  .cr-raia { height: clamp(52px, calc((var(--app-h) - 420px) / 2), 84px); }
}