/* Comidinhas (a Bia, a coelhinha cozinheira): só o que as brincadeiras de comida precisam além do estilo.css. Tudo começa com co-. */

/* ---------- desenhos ---------- */
.co-svg, .co-bia-svg { display: block; width: 100%; height: auto; overflow: visible; }
.co-figura { display: grid; place-items: center; }
.co-figura .co-svg { width: 100%; }
.co-emoji { font-size: 3em; line-height: 1; }
.co-vapor { animation: co-vapor 1.6s ease-in-out infinite; }
@keyframes co-vapor { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: .8; transform: translateY(-3px); } }
.co-mastiga .co-boca-a { animation: co-mastiga .5s steps(1) infinite; }
.co-mastiga .co-boca-b { animation: co-mastiga .5s steps(1) infinite -.25s; }
@keyframes co-mastiga { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- menu ---------- */
.co-apresenta { width: 120px; }
.abertura-arte .co-bia-svg { width: 110px; margin: 0 auto; }
.co-brincadeira-emoji { background: #ffedd5; }
.co-menu-frutas { display: flex; justify-content: center; gap: 4px; margin: -4px 0; }
.co-menu-frutas span { width: 52px; animation: co-pulinho 2.4s var(--atraso, 0s) ease-in-out infinite; }
@keyframes co-pulinho { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-9px) rotate(-6deg); } 90% { transform: translateY(0) rotate(4deg); } }

/* ---------- comuns ---------- */
.tela[class*="tela-comida-"] .corpo { gap: 10px; }
.sem-voz .tela[class*="tela-comida"] .botao-ouvir { display: none; }
.co-vez .co-vez-nome { font-size: 22px; }
.co-vez .chip { padding: 3px 14px; }
.co-dourada {
  align-self: center; padding: 6px 16px; border-radius: 999px; background: linear-gradient(90deg, #fde047, #f59e0b);
  color: #78350f; font-weight: 900; font-size: 17px; box-shadow: 0 3px 0 #b45309; animation: pula .4s cubic-bezier(.2, 1.6, .4, 1);
}
.co-gesto {
  align-self: center; display: flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); box-shadow: var(--sombra); font-size: 21px; animation: co-respira 1.6s ease-in-out infinite;
}
.co-gesto-emoji { font-size: 26px; line-height: 1; }
@keyframes co-respira { 50% { transform: scale(1.05); } }
.co-adulto {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; border-radius: 16px;
  background: #fef3c7; border: 3px dashed #f59e0b; font-size: 15px; line-height: 1.2; text-align: center;
}
.co-adulto span { font-size: 24px; }
.co-instrucao {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 14px; border-radius: 20px;
  background: var(--branco); box-shadow: var(--sombra); font-size: clamp(18px, 5vw, 24px); line-height: 1.2; text-align: center;
}
.co-instrucao-emoji { font-size: 32px; line-height: 1; flex: none; }
.co-balanca { animation: treme .12s 4; }
.co-barra { position: absolute; left: 10%; right: 10%; bottom: 10px; height: 16px; background: rgba(42, 26, 94, .15); z-index: 4; }
.co-contador { position: absolute; left: 12px; top: 10px; z-index: 5; font-size: 24px; font-weight: 900; color: var(--roxo-escuro); letter-spacing: 2px; }

/* As coisas para arrastar: seguem o dedo; as que já foram usadas somem (sem mudar o lugar das outras). */
.co-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px;
  border-radius: 20px; background: var(--branco); box-shadow: 0 5px 0 rgba(42, 26, 94, .2);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.co-item small { font-size: 13px; font-weight: 800; line-height: 1.05; text-align: center; }
.co-item-arte { width: 100%; pointer-events: none; }
.co-pegando { z-index: 50; cursor: grabbing; box-shadow: 0 14px 22px rgba(42, 26, 94, .35); }
.co-voltando { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.co-usado { visibility: hidden; pointer-events: none; }
.co-proximo { animation: co-chama 1s ease-in-out infinite; box-shadow: 0 0 0 5px #fde047, 0 5px 0 rgba(42, 26, 94, .2); }
@keyframes co-chama { 50% { transform: scale(1.08); } }

/* ---------- a mãozinha que mostra o gesto ---------- */
.co-dica { position: absolute; z-index: 30; width: 0; height: 0; pointer-events: none; transition: opacity .25s; }
.co-dica.co-some { opacity: 0; }
.co-mao { position: absolute; left: -21px; top: -2px; width: 46px; }
.co-mao-dentro { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.co-dedo-svg { display: block; width: 100%; }
.co-dica-toque .co-mao { animation: co-toque 1.1s ease-in-out infinite; }
.co-dica-toque2 .co-mao { animation: co-toque2 1.4s ease-in-out infinite; }
.co-dica-esfrega .co-mao { animation: co-esfrega .7s ease-in-out infinite; }
.co-dica-desliza .co-mao { animation: co-esfrega 1.4s ease-in-out infinite; }
.co-dica-circulo .co-mao { animation: co-circulo 1.8s linear infinite; }
.co-dica-segura .co-mao { animation: co-segura 1.6s ease-in-out infinite; }
.co-dica-arrasta .co-mao { animation: co-arrasta 2s ease-in-out infinite; }
.co-dica-baixo .co-mao { animation: co-baixo 1.2s ease-in infinite; }
.co-dica-cima .co-mao { animation: co-cima 1.2s ease-out infinite; }
.co-dica-ligue .co-mao { animation-duration: 2.4s; }
@keyframes co-toque { 0%, 100% { transform: translateY(16px); } 45%, 55% { transform: translateY(0) scale(.9); } }
@keyframes co-toque2 { 0%, 100% { transform: translateY(16px); } 15%, 20% { transform: translateY(0) scale(.9); } 30% { transform: translateY(10px); } 40%, 45% { transform: translateY(0) scale(.9); } 60% { transform: translateY(16px); } }
@keyframes co-esfrega { 0%, 100% { transform: translateX(-38px) rotate(-8deg); } 50% { transform: translateX(38px) rotate(8deg); } }
@keyframes co-circulo {
  0% { transform: translate(50px, 0); } 12.5% { transform: translate(35px, 25px); } 25% { transform: translate(0, 35px); } 37.5% { transform: translate(-35px, 25px); }
  50% { transform: translate(-50px, 0); } 62.5% { transform: translate(-35px, -25px); } 75% { transform: translate(0, -35px); } 87.5% { transform: translate(35px, -25px); } 100% { transform: translate(50px, 0); }
}
@keyframes co-segura { 0%, 100% { transform: translateY(16px); } 25%, 85% { transform: translateY(0) scale(.88); } }
@keyframes co-arrasta { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; transform: translate(0, 0) scale(.9); } 75% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(.9); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes co-baixo { 0% { transform: translateY(-10px); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(90px); opacity: 0; } }
@keyframes co-cima { 0% { transform: translateY(70px); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
.co-onda { position: absolute; left: 21px; top: 2px; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 4px solid #fff; animation: co-onda 1.6s ease-out infinite; }
@keyframes co-onda { 0%, 25% { transform: scale(.2); opacity: 0; } 35% { opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
.co-pinca { position: absolute; left: 0; top: 0; }
.co-pinca i { position: absolute; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: #fde2c4; border: 3px solid var(--tinta); box-shadow: 0 3px 4px rgba(0, 0, 0, .25); }
.co-pinca i:nth-child(1) { animation: co-pinca-a 1.6s ease-in-out infinite; }
.co-pinca i:nth-child(2) { animation: co-pinca-b 1.6s ease-in-out infinite; }
.co-pinca span { position: absolute; left: 22px; top: -48px; font-size: 26px; }
@keyframes co-pinca-a { 0%, 15% { transform: translate(-8px, 8px); } 70%, 100% { transform: translate(-44px, 44px); } }
@keyframes co-pinca-b { 0%, 15% { transform: translate(8px, -8px); } 70%, 100% { transform: translate(44px, -44px); } }

/* ---------- a festa do acerto ---------- */
.co-festa { position: fixed; inset: 0; z-index: 66; display: grid; place-items: center; padding: 16px; background: rgba(30, 16, 70, .5); animation: aparece .2s ease-out; }
.co-festa.co-festa-sai { opacity: 0; transition: opacity .25s; }
.co-festa-caixa {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 18px;
  border-radius: 30px; background: radial-gradient(circle at 50% 30%, #fff 40%, #fff7ed); box-shadow: var(--sombra);
  animation: pula .4s cubic-bezier(.2, 1.6, .4, 1);
}
.co-festa-ouro .co-festa-caixa { border: 6px solid #fbbf24; box-shadow: 0 0 0 6px rgba(253, 224, 71, .5), 0 0 50px #fde047; }
.co-festa-prato { width: min(56vw, 230px); animation: co-surge .6s cubic-bezier(.2, 1.6, .4, 1); }
.co-festa-prato .co-pratao { width: 100%; }
.co-festa-nome { font-size: 26px; text-align: center; line-height: 1.15; }
.co-festa-bia { display: flex; align-items: center; gap: 6px; }
.co-festa-bia-arte { width: 88px; }
.co-hum { font-size: 38px; color: #f97316; text-shadow: 0 3px 0 #fed7aa; animation: co-hum .5s ease-in-out infinite alternate; }
.co-festa-nota { margin: 0; padding: 6px 12px; border-radius: 14px; background: #fef3c7; font-size: 16px; font-weight: 800; text-align: center; }
@keyframes co-surge { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
@keyframes co-hum { to { transform: scale(1.12) rotate(-3deg); } }

/* ---------- a Bia no canto, falando ---------- */
.co-bia { display: flex; align-items: center; gap: 10px; }
.co-bia-arte { width: 62px; flex: none; animation: balanca 2.4s ease-in-out infinite; }
.co-bia-fala {
  position: relative; flex: 1; padding: 10px 14px; border-radius: 18px; background: var(--branco); box-shadow: var(--sombra);
  font-size: 18px; font-weight: 800; line-height: 1.2;
}
.co-bia-fala::before { content: ""; position: absolute; left: -12px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right: 13px solid var(--branco); border-left: 0; }

/* ---------- ligar (tocar num e depois no outro) ---------- */
.co-ligue { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22%; padding: 4px 0; }
.co-ligue-coluna { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.co-ligue-item {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px;
  border-radius: 20px; background: var(--branco); box-shadow: 0 5px 0 rgba(42, 26, 94, .2); transition: transform .15s;
}
.co-ligue-arte { width: clamp(64px, 18vw, 110px); }
.tela-comida-dentro .co-ligue-arte { width: clamp(78px, 23vw, 130px); }
.co-ligue-item small { font-size: 14px; font-weight: 800; line-height: 1.1; }
.co-escolhido { transform: scale(1.06); box-shadow: 0 0 0 6px #fde047, 0 5px 0 rgba(42, 26, 94, .2); }
.co-ligado { background: #dcfce7; }
.co-linhas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }

/* ---------- zoom (pinça e lupa) ---------- */
.co-zoom { position: absolute; inset: 0; overflow: hidden; touch-action: none; border-radius: inherit; cursor: zoom-in; }
.co-zoom.co-perto { cursor: grab; }
.co-zoom-miolo { width: 100%; height: 100%; display: grid; place-items: center; transform-origin: 0 0; }
.co-zoom-arte { width: min(78%, 46vh); }
.co-semente { transform-box: fill-box; transform-origin: center; transition: fill .2s; }
.co-semente.co-achada { fill: #22c55e; animation: co-semente .4s cubic-bezier(.2, 1.6, .4, 1); }
.co-semente-ouro { fill: #fbbf24; }
@keyframes co-semente { 50% { transform: scale(2.2); } }
.co-lupas { position: absolute; right: 10px; top: 10px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.co-lupa { width: 58px; height: 58px; border-radius: 18px; background: var(--branco); box-shadow: 0 4px 0 rgba(42, 26, 94, .25); font-size: 19px; font-weight: 900; }
.co-lupa:active { transform: translateY(3px); }
.co-fato { padding: 10px 14px; border-radius: 18px; background: #ecfccb; box-shadow: var(--sombra); font-size: 19px; font-weight: 800; text-align: center; line-height: 1.25; }

/* ---------- o que dá para fazer? ---------- */
.co-alimento { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.co-alimento-desafio { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px 8px; }
.co-alimento-arte { width: clamp(84px, 17vh, 130px); filter: drop-shadow(0 6px 8px rgba(42, 26, 94, .25)); }
.co-alimento-arte.co-grande { width: clamp(110px, 21vh, 190px); animation: co-pulinho 2.6s ease-in-out infinite; }
.co-alimento-desafio .co-alimento-arte { width: clamp(70px, 13vh, 110px); }
.co-alimento-nome { color: var(--branco); font-size: 30px; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.co-mais, .co-seta { color: var(--branco); font-size: 34px; font-weight: 900; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.co-aparelho { padding: 6px; border-radius: 20px; background: rgba(255, 255, 255, .85); }
.co-pergunta {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 20px;
  background: var(--branco); box-shadow: var(--sombra); font-size: clamp(18px, 5vw, 23px); font-weight: 800; text-align: center; line-height: 1.2;
}
.co-ache { padding: 2px 12px; border-radius: 999px; background: #fde047; font-size: 17px; }
.co-opcoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.co-opcoes-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.co-opcao {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 24px;
  background: var(--branco); box-shadow: 0 6px 0 rgba(42, 26, 94, .22); transition: transform .1s, opacity .3s;
}
.co-opcao:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(42, 26, 94, .22); }
.co-opcao-arte { width: min(100%, 150px, 16vh); }
.co-opcoes-4 { gap: 8px; }
.co-opcoes-4 .co-opcao { padding: 6px; }
.co-opcoes-4 .co-opcao-arte { width: min(100%, 13vh); }
.co-opcoes-2 .co-opcao-arte { width: min(100%, 150px, 22vh); }
.co-opcao small { font-size: 15px; font-weight: 800; line-height: 1.1; }
.co-opcao.co-certa { background: #dcfce7; box-shadow: 0 0 0 6px #22c55e, 0 6px 0 #15803d; animation: pula .4s cubic-bezier(.2, 1.6, .4, 1); }
.co-opcao.co-errada { opacity: .45; }
.co-opcao:disabled { opacity: .45; }
.co-tambem { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 26px; background: var(--branco); box-shadow: var(--sombra); }
.co-tambem h2 { margin: 0; font-size: 23px; text-align: center; }
.co-tambem-lista { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.co-tambem-lista figure { margin: 0; width: 100px; text-align: center; animation: pula .5s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.co-tambem-lista figure:nth-child(2) { animation-delay: .15s; }
.co-tambem-lista figure:nth-child(3) { animation-delay: .3s; }
.co-tambem-lista figcaption { font-size: 14px; font-weight: 800; line-height: 1.1; }
.co-tambem-arte { width: 90px; margin: 0 auto; }
.co-tambem-fato { display: flex; align-items: center; gap: 10px; }
.co-tambem-fato p { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; }
.co-tambem-bia { width: 80px; flex: none; }

/* ---------- vamos cozinhar: escolher a receita ---------- */
.co-escolha { display: flex; align-items: center; gap: 10px; }
.co-escolha-bia { width: 74px; flex: none; animation: balanca 2.4s ease-in-out infinite; }
.co-escolha p { flex: 1; margin: 0; padding: 10px 14px; border-radius: 18px; background: var(--branco); box-shadow: var(--sombra); font-size: 19px; font-weight: 800; }
.co-receitas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.co-receita {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 22px;
  background: var(--branco); box-shadow: 0 6px 0 rgba(42, 26, 94, .2); text-align: center;
}
.co-receita:active { transform: translateY(4px); }
.co-receita-arte { width: 78px; }
.co-receita strong { font-size: 15px; line-height: 1.1; }
.co-receita small { font-size: 12px; opacity: .7; font-weight: 700; }

/* ---------- vamos cozinhar: a trilha dos passos e o palco ---------- */
.co-trilha { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; }
.co-trilha li {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; line-height: 1;
  background: rgba(255, 255, 255, .35); color: #fff; font-weight: 900;
}
.co-trilha li.co-feito { background: #22c55e; box-shadow: inset 0 -3px 0 #15803d; }
.co-trilha li.co-agora { background: var(--branco); transform: scale(1.22); box-shadow: 0 0 0 3px #fde047; }
.co-trilha li.co-fim { background: rgba(255, 255, 255, .6); }
.co-palco {
  position: relative; flex: 1 1 auto; min-height: 280px; max-height: 560px; border-radius: 28px; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: var(--sombra);
  background:
    linear-gradient(#e7b77a, #d69e5c) bottom / 100% 24% no-repeat,
    linear-gradient(#c08a3e, #c08a3e) 0 76% / 100% 6px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(147, 197, 253, .35) 39px 41px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(147, 197, 253, .35) 39px 41px),
    #f8fbff;
}
.co-palco-feito::after { content: "✨"; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 90px; animation: co-surge .5s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; z-index: 40; }

/* Os alvos (onde as coisas caem): tigela, liquidificador, panela, prato, assadeira e a massa da pizza. */
.co-alvo { position: absolute; left: 50%; transform: translateX(-50%); }
.co-alvo-tigela { top: 8%; width: min(54%, 34vh, 250px); }
.co-alvo-tigela.co-grande { top: 50%; width: min(86%, 52vh, 380px); transform: translate(-50%, -54%); }
.co-alvo-tigela .co-tigela-dentro { transition: opacity .4s; }
.co-redemoinho { transform: rotate(var(--giro, 0deg)); }
.co-alvo-liquidificador { top: 3%; width: min(40%, 32vh, 200px); }
.co-enche { transition: transform .5s ease-out; }
.co-alvo-panela { top: 6%; width: min(58%, 36vh, 260px); }
.co-panela-dentro { position: absolute; left: 25%; width: 50%; top: 18%; height: 22%; pointer-events: none; }
.co-panela-dentro i, .co-panela-dentro b { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #facc15; border: 1.5px solid #ca8a04; }
.co-alvo-prato { top: 6%; width: min(74%, 300px); height: 52%; }
.co-alvo-prato::before { content: ""; position: absolute; left: -4%; right: -4%; bottom: 0; height: 22%; border-radius: 50%; background: #fff; border: 3px solid var(--tinta); box-shadow: inset 0 -6px 0 #dbeafe; }
.co-alvo-assadeira { top: 6%; width: min(76%, 320px); height: 52%; }
.co-alvo-assadeira::before { content: ""; position: absolute; inset: auto 0 0 0; height: 70%; border-radius: 10px 10px 22px 22px; background: rgba(191, 219, 254, .55); border: 4px solid var(--tinta); }
.co-pilha { position: absolute; left: 8%; right: 8%; bottom: 9%; display: flex; flex-direction: column-reverse; align-items: center; }
.co-alvo-assadeira .co-pilha { bottom: 6%; left: 5%; right: 5%; }
.co-camada { width: 100%; margin-top: -4px; }
.co-camada svg { display: block; width: 100%; }
.co-camada-paoCima { width: 100%; }
.co-cai { animation: co-cai .4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes co-cai { from { transform: translateY(-60px); opacity: 0; } }
.co-alvo-disco { top: 5%; width: min(52%, 34vh, 240px); aspect-ratio: 1; }
.co-disco-camada { position: absolute; inset: 0; }
.co-disco-camada svg { width: 100%; height: 100%; display: block; }
.co-caindo { position: absolute; z-index: 20; width: 70px; margin-left: -35px; pointer-events: none; animation: co-caindo .6s ease-in forwards; }
@keyframes co-caindo { to { transform: translateY(60px) scale(.3); opacity: 0; } }
.co-agora-vai {
  position: absolute; left: 50%; top: 61%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; background: #fde047; font-size: 16px; font-weight: 900; white-space: nowrap;
}
.co-agora-arte { width: 30px; }
.co-bandeja { position: absolute; left: 3%; right: 3%; bottom: 3%; display: flex; justify-content: center; align-items: flex-end; gap: 8px; }
.co-bandeja .co-item { width: min(23%, 100px); }
.co-bandeja-5 .co-item, .co-bandeja-6 .co-item { width: min(18%, 86px); }
.co-bandeja-5 .co-item small, .co-bandeja-6 .co-item small { font-size: 11px; }

/* esfregar (lavar as mãos e a fruta) */
.co-torneira { position: absolute; left: 22%; width: 44%; top: -3%; max-width: 220px; }
.co-agua {
  position: absolute; left: calc(50% - 8px); width: 16px; top: 11%; bottom: 30%; border-radius: 8px; opacity: .85;
  background: repeating-linear-gradient(180deg, #7dd3fc 0 12px, #bae6fd 12px 22px); animation: co-agua .4s linear infinite;
}
@keyframes co-agua { to { background-position: 0 22px; } }
.co-esfrega-coisa { position: absolute; left: 50%; top: 24%; width: min(58%, 32vh, 260px); margin-left: calc(min(58%, 32vh, 260px) / -2); pointer-events: none; transition: transform .1s; }
.co-bolhas i {
  position: absolute; width: var(--t); height: var(--t); margin: calc(var(--t) / -2); border-radius: 50%; pointer-events: none; z-index: 6;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255, 255, 255, .5) 40%, rgba(186, 230, 253, .5));
  border: 2px solid rgba(255, 255, 255, .9); animation: co-bolha 1.6s ease-out forwards;
}
@keyframes co-bolha { from { transform: scale(.2); } 30% { transform: scale(1); } to { transform: translateY(-24px) scale(1.1); opacity: .8; } }
.co-enxagua .co-bolhas i { animation: co-estoura .5s ease-in forwards; }
@keyframes co-estoura { to { transform: translateY(80px) scale(.2); opacity: 0; } }
.co-enxagua .co-esfrega-coisa { filter: drop-shadow(0 0 12px #fff) brightness(1.08); }

/* ovo */
.co-ovo { position: absolute; left: 50%; top: 4%; width: min(32%, 22vh, 140px); aspect-ratio: 1; margin-left: calc(min(32%, 22vh, 140px) / -2); padding: 0; z-index: 3; }
.co-ovo > div { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), opacity .45s; }
.co-ovo-cima { clip-path: polygon(0 0, 100% 0, 100% 54%, 82% 54%, 74% 60%, 66% 50%, 56% 60%, 48% 48%, 38% 60%, 30% 50%, 20% 58%, 0 56%); }
.co-ovo-baixo { clip-path: polygon(0 56%, 20% 58%, 30% 50%, 38% 60%, 48% 48%, 56% 60%, 66% 50%, 74% 60%, 82% 54%, 100% 54%, 100% 100%, 0 100%); }
.co-ovo-trinca { opacity: 0; }
.co-trincado .co-ovo-trinca { opacity: 1; }
.co-aberto .co-ovo-cima { transform: translate(-34%, -30%) rotate(-35deg); opacity: 0; }
.co-aberto .co-ovo-baixo { transform: translate(34%, 10%) rotate(30deg); opacity: 0; }
.co-aberto .co-ovo-trinca { opacity: 0; }
.co-gema {
  position: absolute; z-index: 4; width: 40px; height: 40px; margin: -20px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fef08a, #facc15 45%, #f59e0b); box-shadow: 0 0 0 7px rgba(255, 255, 255, .8);
  animation: co-gema .65s ease-in forwards;
}
@keyframes co-gema { to { transform: translateY(var(--queda)) scale(.7); } }
.co-palco-ovo .co-alvo-tigela { top: auto; bottom: 6%; }
.co-palco-ovo .co-alvo-liquidificador { top: auto; bottom: 4%; width: min(36%, 28vh, 170px); }

/* mexer */
.co-colher { position: absolute; left: 84%; top: 40%; z-index: 8; width: 44px; margin: -24px 0 0 -22px; pointer-events: none; transform: rotate(18deg); transform-origin: 50% 20%; transition: transform .15s; }
.co-colher.co-mexendo { transform: rotate(-8deg) scale(1.05); }

/* bater no liquidificador (segurar) */
.co-segurar-zona { position: absolute; inset: 2% 10% 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.co-segurar-zona .co-alvo-liquidificador { position: relative; left: auto; top: auto; transform: none; width: auto; height: 70%; aspect-ratio: 1; }
.co-segurar-zona .co-alvo-liquidificador svg { height: 100%; width: auto; }
.co-botao-segura {
  display: flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; background: #6d4ce0; color: #fff;
  font-size: 22px; box-shadow: 0 6px 0 #4c2fb0; transition: transform .1s;
}
.co-apertado .co-botao-segura { transform: translateY(5px); box-shadow: 0 1px 0 #4c2fb0; background: #22c55e; }
.co-batendo .co-alvo-liquidificador { animation: co-chacoalha .09s linear infinite; }
.co-batendo .co-helice { transform-box: fill-box; transform-origin: center; animation: co-helice .12s linear infinite; }
.co-batendo .co-enche { filter: brightness(1.05); }
@keyframes co-chacoalha { 0%, 100% { transform: translate(-1.5px, 0) rotate(-.6deg); } 50% { transform: translate(1.5px, -1px) rotate(.6deg); } }
@keyframes co-helice { to { transform: scaleX(-1); } }

/* espremer */
.co-espremedor { position: absolute; left: 4%; bottom: 16%; width: min(62%, 40vh, 280px); aspect-ratio: 1; }
.co-esp-base { position: absolute; inset: 0; }
.co-esp-laranja { position: absolute; left: 22%; width: 56%; top: 10%; transform-origin: 50% 90%; }
.co-esp-laranja.co-aperta { animation: co-aperta .35s ease-out; }
@keyframes co-aperta { 40% { transform: scale(1.12, .78) translateY(8px); } }
.co-gota { position: absolute; left: 88%; top: 64%; width: 14px; height: 18px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #fb923c; border: 2px solid #c2410c; animation: co-gota .6s ease-in forwards; }
@keyframes co-gota { to { transform: translate(34px, 46px); opacity: 0; } }
.co-copo { position: absolute; right: 6%; bottom: 8%; width: min(32%, 24vh, 150px); }

/* cortar (faquinha de mentirinha) */
.co-tabua { position: absolute; left: 6%; right: 6%; bottom: 4%; }
.co-corte { position: absolute; left: 50%; top: 46%; width: min(46%, 30vh, 210px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.co-tira { position: absolute; inset: 0; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.co-corte.co-chop { animation: co-chop .3s ease-out; }
@keyframes co-chop { 40% { transform: translate(-50%, -46%) scale(1.04, .96); } }
.co-rastro { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
.co-faca { position: absolute; left: 82%; top: 18%; width: 92px; margin: -46px 0 0 -10px; z-index: 10; pointer-events: none; transform: rotate(-60deg); transition: transform .15s; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.co-faca.co-cortando { transform: rotate(-90deg) scale(1.1); }

/* forno (o adulto põe; a criança segura para assar) */
.co-forno { position: absolute; left: 50%; top: 4%; width: min(74%, 44vh, 320px); transform: translateX(-50%); cursor: pointer; }
.co-forno-arte .co-forno-janela { transition: fill .4s; }
.co-forno-dentro { position: absolute; left: 24%; width: 52%; top: 38%; height: 44%; display: grid; place-items: end center; overflow: hidden; pointer-events: none; }
.co-forno-dentro svg { width: 82%; transform: scaleY(var(--cresce, 1)); transform-origin: 50% 100%; transition: transform .2s; }
.co-assando { filter: drop-shadow(0 0 16px #fbbf24); }
.co-assando .co-forno-dentro { animation: co-calor .5s ease-in-out infinite alternate; }
@keyframes co-calor { to { filter: brightness(1.1) saturate(1.2); } }
.co-assado .co-forno-dentro svg { animation: pula .5s cubic-bezier(.2, 1.6, .4, 1); }
.co-luva { position: absolute; left: 4%; bottom: 30px; width: min(20%, 90px); transform: rotate(-12deg); animation: co-respira 1.6s ease-in-out infinite; pointer-events: none; }

/* fogão (pipoca, omelete, panqueca) */
.co-fogao { position: absolute; left: 50%; top: 6%; width: min(80%, 46vh, 340px); transform: translateX(-50%); cursor: pointer; }
.co-fogao .co-chama { transition: opacity .25s; }
.co-fogao .co-panela-dentro { top: 18%; height: 22%; }
.co-pipocas { overflow: visible; }
.co-pipoquinha { position: absolute; bottom: 0; width: 26px; animation: co-pula-pipoca .7s ease-out forwards; }
.co-pipoquinha svg { width: 100%; display: block; }
@keyframes co-pula-pipoca { 0% { transform: translateY(0) scale(.3); } 45% { transform: translateY(calc(var(--sobe) * -1)) rotate(var(--giro)) scale(1); } 100% { transform: translateY(-4px) rotate(var(--giro)); } }
.co-frigideira-dentro { position: absolute; left: 22%; width: 48%; top: 22%; height: 13%; pointer-events: none; }
.co-frigideira-dentro i { position: absolute; inset: 0 6%; border-radius: 50%; background: var(--cor); border: 2px solid rgba(42, 26, 94, .4); }
.co-frigideira-dentro i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #b45309; opacity: calc(var(--cozido, 0) * .45); }
.co-frigideira-dentro i.co-vira { animation: co-vira .9s ease-in-out; }
@keyframes co-vira { 50% { transform: translateY(-140px) rotateX(180deg) scale(1.2); } 100% { transform: rotateX(360deg); } }
.co-tampa-lugar { position: absolute; left: 18%; width: 64%; top: -6%; pointer-events: none; }
.co-tampa-lugar svg { width: 100%; display: block; animation: co-cai .4s cubic-bezier(.3, 1.5, .5, 1); }
.co-tampa { width: min(34%, 150px); }
.co-tampa svg { width: 100%; display: block; }

/* sovar a massa */
.co-massa-bola { position: absolute; left: 50%; top: 52%; width: min(60%, 40vh, 280px); padding: 0; transform: translate(-50%, -50%); transform-origin: 50% 80%; transition: transform 2.2s ease-out; }
.co-massa-bola.co-amassa { animation: co-amassa .3s ease-out; }
.co-massa-bola.co-crescendo { transform: translate(-50%, -58%) scale(1.45); }
@keyframes co-amassa { 40% { transform: translate(-50%, -50%) scale(1.18, .76); } }

/* congelar */
.co-geladeira { position: absolute; left: 50%; top: 3%; width: min(50%, 40vh, 240px); transform: translateX(-50%); cursor: pointer; }
.co-geladeira-picole { position: absolute; left: 30%; width: 40%; top: 46%; opacity: calc(.35 + var(--duro, 0) * .65); filter: saturate(calc(.4 + var(--duro, 0) * .6)); pointer-events: none; }
.co-gelando { filter: drop-shadow(0 0 14px #7dd3fc); }
.co-gelado .co-geladeira-picole { animation: pula .5s cubic-bezier(.2, 1.6, .4, 1); }
.co-flocos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.co-flocos i { position: absolute; top: -20px; color: #7dd3fc; font-size: 22px; font-style: normal; animation: co-floco var(--tempo, 1.4s) linear forwards; }
@keyframes co-floco { to { transform: translateY(380px) rotate(180deg); opacity: .3; } }

/* enfeitar */
.co-enfeitar { position: absolute; left: 50%; top: 46%; width: min(78%, 48vh, 340px); transform: translate(-50%, -50%); cursor: pointer; }
.co-enfeites { position: absolute; inset: 0; pointer-events: none; }
.co-enfeite { position: absolute; width: 15%; transform: translate(-50%, -50%); animation: co-cai .35s cubic-bezier(.3, 1.5, .5, 1); }
.co-enfeite.co-ouro { filter: drop-shadow(0 0 6px #fbbf24) sepia(.6) saturate(2.6) hue-rotate(-12deg); }
.co-enfeite-pote { position: absolute; right: 4%; bottom: 4%; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 18px; background: var(--branco); box-shadow: var(--sombra); font-size: 20px; }
.co-enfeite-mostra { width: 40px; }

/* resultado */
.co-resultado { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: 28px; background: var(--branco); box-shadow: var(--sombra); text-align: center; }
.co-resultado h2 { margin: 0; font-size: 28px; }
.co-resultado-arte { width: min(56vw, 34vh, 240px); padding: 10px; border-radius: 50%; background: radial-gradient(circle, #fef9c3 0 55%, rgba(254, 249, 195, 0) 70%); animation: co-pulinho 2.6s ease-in-out infinite; }
.co-resultado-bia { display: flex; align-items: center; gap: 10px; text-align: left; }
.co-resultado-bia > div { width: 76px; flex: none; }
.co-resultado-bia p { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
.co-ajudaram { margin: 0; font-weight: 800; }

/* ---------- a cesta da feira ---------- */
.co-pedido {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 14px; border-radius: 22px;
  background: var(--branco); box-shadow: var(--sombra); font-size: clamp(19px, 5.4vw, 25px); text-align: center; line-height: 1.15;
}
.co-pedido-arte { width: 48px; }
.co-pedido-cor { width: 42px; height: 42px; border-radius: 50%; background: var(--cor); border: 4px solid var(--tinta); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .2); }
.co-pedido-dupla { display: flex; }
.co-pedido-dupla .co-pedido-arte { width: 44px; }
.co-vagas { display: flex; gap: 5px; justify-content: center; }
.co-vagas i { width: 22px; height: 22px; border-radius: 50%; border: 3px dashed #a16207; }
.co-vagas i.co-cheia { background: #22c55e; border: 3px solid #15803d; animation: pula .35s cubic-bezier(.2, 1.6, .4, 1); }
.co-feira { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; touch-action: none; }
.co-banca {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; border-radius: 22px;
  background: repeating-linear-gradient(90deg, #fecaca 0 26px, #fff 26px 52px); box-shadow: var(--sombra);
}
.co-banca-4 { grid-template-columns: repeat(2, 1fr); padding: 10px 18%; }
.co-banca-6 { grid-template-columns: repeat(3, 1fr); }
.co-feira-item { padding: 4px; }
.co-banca-4 .co-feira-item { max-width: min(110px, 15vh); justify-self: center; width: 100%; }
.co-banca-6 .co-feira-item { max-width: min(100px, 14vh); justify-self: center; width: 100%; }
.co-cesta { position: relative; align-self: center; width: min(62%, 23vh, 250px); aspect-ratio: 1; }
.co-cesta-fundo, .co-cesta-frente { position: absolute; inset: 0; pointer-events: none; }
.co-cesta-frente { z-index: 3; }
.co-cesta-dentro { position: absolute; left: 8%; right: 8%; top: 0; height: 43%; z-index: 2; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; pointer-events: none; }
.co-na-cesta { width: 40%; margin: 0 -7% -2%; transform: rotate(var(--giro)); animation: co-cai .4s cubic-bezier(.3, 1.5, .5, 1); }
.co-cesta.co-pula { animation: co-pula-cesta .35s ease-out; }
@keyframes co-pula-cesta { 40% { transform: scale(1.06, .94) translateY(4px); } }

/* ---------- o prato colorido ---------- */
.co-mesa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; touch-action: none; }
.co-pratao { position: relative; width: min(66vw, 31vh, 300px); aspect-ratio: 1; filter: drop-shadow(0 8px 10px rgba(42, 26, 94, .25)); }
.co-pratao-fundo { position: absolute; inset: 0; }
.co-lugar {
  position: absolute; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; border: 3px dashed #c4b5fd; background: rgba(237, 233, 254, .35);
}
.co-lugar.co-ocupado { border-color: transparent; background: none; }
.co-lugar-dica { display: flex; flex-direction: column; align-items: center; font-size: 26px; line-height: 1; opacity: .75; text-align: center; }
.co-lugar-dica small { font-size: 9px; font-weight: 800; line-height: 1; max-width: 70px; }
.co-ocupado .co-lugar-dica { display: none; }
.co-no-prato { width: 104%; padding: 0; animation: co-cai .35s cubic-bezier(.3, 1.5, .5, 1); }
.co-no-prato svg { width: 100%; display: block; }
.co-prateleira { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: 100%; }
.co-prateleira-6 { grid-template-columns: repeat(3, 1fr); }
.co-prateleira-9, .co-prateleira-10 { grid-template-columns: repeat(5, 1fr); }
.co-prato-item { padding: 4px; }
.co-prato-item .co-item-arte { width: min(100%, 50px, 7vh); }
.co-prateleira-9 .co-prato-item small, .co-prateleira-10 .co-prato-item small { font-size: 10px; }
.co-pronto { align-self: center; }
.tela-comida-prato .co-bia-fala { font-size: 16px; padding: 8px 12px; }

/* ---------- fruta por dentro ---------- */
.co-palco-dentro .co-corte { top: 48%; width: min(54%, 34vh, 240px); }
.co-corte-inteira .co-svg { width: 100%; }
.co-metade { position: absolute; inset: 0; }
.co-metade-e { clip-path: inset(0 50% 0 0); animation: co-abre-e .6s cubic-bezier(.3, 1.3, .5, 1) forwards; }
.co-metade-d { clip-path: inset(0 0 0 50%); animation: co-abre-d .6s cubic-bezier(.3, 1.3, .5, 1) forwards; }
@keyframes co-abre-e { to { transform: translateX(-22%) rotate(-8deg); } }
@keyframes co-abre-d { to { transform: translateX(22%) rotate(8deg); } }
.co-palco-zoom { background: radial-gradient(circle at 50% 45%, #fff, #fef9c3 60%, #fde68a); }

/* ---------- memória ---------- */
.co-memoria { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; }
.co-memoria .carta { max-height: calc((100vh - 230px - var(--extra, 0px)) / var(--linhas)); }
.tela-comida-memoria .contagem { gap: 5px; }
.tela-comida-memoria .contagem-item { padding: 3px 9px; font-size: 14px; }
.co-carta-verso { background: repeating-conic-gradient(#fb923c 0 25%, #fdba74 0 50%) 0 0 / 28px 28px; border: 4px solid #fff; padding: 18%; }
.co-carta-verso .co-svg { width: 80%; max-width: 90px; }
.co-memoria .carta-frente { padding: 6px; }
.co-carta-arte { width: 86%; max-width: 150px; }
.co-memoria .carta-frente small { font-size: 13px; }
.carta-frente.co-carta-ouro { background: #fffbeb; box-shadow: inset 0 0 0 4px #f59e0b, 0 4px 0 rgba(42, 26, 94, .25); }

/* ---------- retorno: o balão que explica, mostrar o certo, o item escolhido e o alvo (tocar e tocar, controle remoto) ---------- */
.balao.co-balao-longo {
  top: 30%; width: max-content; max-width: min(92vw, 640px); padding: 12px 20px; border-radius: 26px;
  white-space: normal; text-align: center; font-size: clamp(18px, 4.8vw, 25px); line-height: 1.25;
}
.co-mostra { animation: co-mostra .6s ease-in-out 4; }
@keyframes co-mostra { 0%, 100% { box-shadow: 0 0 0 4px #22c55e, 0 5px 0 rgba(42, 26, 94, .2); } 50% { box-shadow: 0 0 0 11px rgba(34, 197, 94, .5), 0 5px 0 rgba(42, 26, 94, .2); } }
.co-lugar.co-mostra { background: rgba(187, 247, 208, .6); }
.co-item.co-escolhido { box-shadow: 0 0 0 6px #fde047, 0 5px 0 rgba(42, 26, 94, .2); transform: translateY(-6px) scale(1.06); }
.co-alvo-chama { animation: co-alvo-chama 1s ease-in-out infinite; }
@keyframes co-alvo-chama { 50% { filter: drop-shadow(0 0 14px #facc15) brightness(1.05); } }
.co-palco:focus-visible { outline: 5px solid #fde047; outline-offset: -5px; }
.co-item:focus-visible, .co-alvo:focus-visible, .co-cesta:focus-visible, .co-pratao:focus-visible, .co-fogao:focus-visible,
.co-forno:focus-visible, .co-geladeira:focus-visible, .co-segurar-zona:focus-visible { outline: 5px solid #fde047; outline-offset: 4px; border-radius: 20px; }

/* ---------- vamos cozinhar: o mapa da festa ---------- */
.co-gestos-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.co-gestos-lista .co-gesto { font-size: 16px; padding: 4px 12px; animation: none; }
.co-gestos-lista .co-gesto-emoji { font-size: 20px; }
.co-mapa-topo { display: flex; align-items: center; gap: 10px; }
.co-mapa-bia { width: 84px; flex: none; animation: balanca 2.4s ease-in-out infinite; }
.co-mapa-bia .co-guto-svg { width: 100%; display: block; }
.co-mapa-fala {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 18px;
  background: var(--branco); box-shadow: var(--sombra); line-height: 1.2;
}
.co-mapa-fala::before { content: ""; position: absolute; left: -12px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right: 13px solid var(--branco); border-left: 0; }
.co-mapa-fala strong { font-size: 19px; }
.co-mapa-fala span { font-size: 16px; font-weight: 700; }
.co-mapa-fala small { font-size: 13px; opacity: .75; font-weight: 700; }
.co-mapa { display: grid; gap: 12px; }
.co-mundo {
  padding: 10px 10px 12px; border-radius: 26px; box-shadow: var(--sombra); background: #fff8f0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 26%, #fff), #fff 70%);
}
.co-mundo h3 { margin: 0; font-size: 20px; color: var(--tinta); }
.co-mundo-texto { margin: 0 0 6px; font-size: 14px; font-weight: 700; opacity: .8; }
.co-mapa-trilha { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; align-items: start; }
.co-mapa-trilha::before { content: ""; position: absolute; left: 10%; right: 10%; top: 34px; border-top: 5px dashed #fcd34d; border-top-color: color-mix(in srgb, var(--cor) 55%, #fff); z-index: 0; }
.co-fase {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 0 4px;
  background: none; border: 0; color: var(--tinta); font: inherit; cursor: pointer; border-radius: 16px;
}
.co-fase:nth-child(even) { margin-top: 14px; }
.co-fase-arte {
  width: min(64px, 15vw); aspect-ratio: 1; display: grid; place-items: center; padding: 6px; border-radius: 50%;
  background: var(--branco); border: 4px solid var(--cor); box-shadow: 0 4px 0 rgba(42, 26, 94, .2); transition: transform .15s;
}
.co-fase-arte svg { width: 100%; height: 100%; display: block; }
.co-fase-num {
  position: absolute; left: calc(50% - min(32px, 7.5vw) - 6px); top: -4px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px;
  background: var(--cor); color: #fff; font-size: 14px; font-weight: 900; line-height: 24px; text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.co-fase-estrelas { font-size: 14px; letter-spacing: 1px; color: #f59e0b; text-shadow: 0 1px 0 #fff; min-height: 17px; }
.co-fase small { font-size: 11.5px; font-weight: 800; line-height: 1.05; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.co-fase:active .co-fase-arte { transform: scale(.94); }
.co-fase-atual .co-fase-arte { animation: co-fase-atual 1.4s ease-in-out infinite; }
@keyframes co-fase-atual { 50% { box-shadow: 0 0 0 7px rgba(253, 224, 71, .9), 0 4px 0 rgba(42, 26, 94, .2); transform: scale(1.06); } }
.co-fase-feita .co-fase-arte { border-color: #22c55e; }
.co-fase-chefao .co-fase-arte { border-color: #f59e0b; background: radial-gradient(circle, #fffbeb 55%, #fde68a); width: min(74px, 17vw); padding: 2px; }
.co-fase-chefao small { color: #b45309; }
.co-fase:disabled { cursor: default; }
.co-fase:disabled .co-fase-arte { filter: grayscale(1); opacity: .5; }
.co-fase:disabled .co-fase-num { background: #94a3b8; }
.co-fase:focus-visible { outline: 4px solid #fde047; outline-offset: 2px; }
.co-mapa-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* o chefão: os pedidos do Guto */
.co-chefao {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: 28px; text-align: center;
  background: radial-gradient(circle at 50% 20%, #fff 45%, #fef3c7); box-shadow: var(--sombra); border: 5px solid #fbbf24;
}
.co-chefao h2 { margin: 0; font-size: 26px; }
.co-chefao p { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.co-chefao-guto { width: min(40vw, 150px); animation: co-pulinho 2.4s ease-in-out infinite; }
.co-chefao-guto svg, .co-resultado-bia .co-guto-svg, .co-pergunta-bicho .co-guto-svg, .co-festa-bia-arte .co-guto-svg { width: 100%; display: block; }
.co-pedidos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.co-pedidos figure { margin: 0; width: 92px; padding: 6px; border-radius: 18px; background: var(--branco); box-shadow: 0 4px 0 rgba(42, 26, 94, .15); }
.co-pedidos figcaption { font-size: 13px; font-weight: 800; line-height: 1.1; }
.co-pedido-prato { width: 70px; margin: 0 auto; }
.co-pedido-feito { opacity: .6; background: #dcfce7 !important; }

/* a pergunta da Bia */
.co-pergunta-bia { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.co-pergunta-bicho { width: 72px; flex: none; }
.co-pergunta-arte { width: min(24vw, 96px); filter: drop-shadow(0 6px 8px rgba(42, 26, 94, .25)); animation: co-pulinho 2.6s ease-in-out infinite; }
.co-pergunta-bia .co-pergunta { flex: 1 1 200px; }
.co-respostas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.co-respostas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.co-resposta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 10px 6px;
  border-radius: 22px; background: var(--branco); box-shadow: 0 6px 0 rgba(42, 26, 94, .22); color: var(--tinta); font: inherit;
  transition: transform .1s, opacity .3s;
}
.co-resposta:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(42, 26, 94, .22); }
.co-resposta b { font-size: 17px; line-height: 1.1; text-align: center; }
.co-resposta-emoji { font-size: 42px; line-height: 1; }
.co-resposta-arte { width: min(100%, 92px, 14vh); }
.co-resposta.co-certa { background: #dcfce7; box-shadow: 0 0 0 6px #22c55e, 0 6px 0 #15803d; animation: pula .4s cubic-bezier(.2, 1.6, .4, 1); }
.co-resposta.co-errada, .co-resposta:disabled { opacity: .45; }
.co-resposta.co-certa:disabled { opacity: 1; }
.co-explica { padding: 10px 14px; border-radius: 18px; background: var(--branco); box-shadow: var(--sombra); font-size: 18px; font-weight: 800; line-height: 1.3; text-align: center; }
.co-explica-erro { background: #fff7ed; border: 3px solid #fb923c; }
.co-explica-certo { background: #dcfce7; border: 3px solid #22c55e; }
.co-explica[hidden] { display: none; }

/* o fim da fase */
.co-resultado-varios { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.co-resultado-varios .co-resultado-arte { width: min(28vw, 22vh, 130px); }
.co-praticou { margin: 0 0 8px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .92); font-size: 15px; line-height: 1.3; text-align: center; color: var(--tinta); }
.co-praticou p { margin: 4px 0 0; font-weight: 800; }
.co-fim-festa { margin: 0 0 8px; padding: 8px 12px; border-radius: 16px; background: #fef3c7; font-weight: 800; text-align: center; color: var(--tinta); }

@media (min-width: 900px) {
  .co-mapa { grid-template-columns: 1fr 1fr; }
  /* Na TV: fases maiores, para ver e mirar de longe. */
  .co-fase-arte { width: 76px; }
  .co-fase-chefao .co-fase-arte { width: 86px; }
  .co-fase-num { left: calc(50% - 46px); }
  .co-fase small { font-size: 13px; }
  .co-fase-estrelas { font-size: 16px; }
  .co-mapa-trilha::before { top: 40px; }
}
@media (min-aspect-ratio: 1/1) {
  .co-respostas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Na TV (tela deitada): a pergunta e as respostas grandes, para ler de longe. */
  .co-pergunta-bicho { width: 100px; }
  .co-pergunta-arte { width: min(14vh, 120px); }
  .co-resposta { min-height: min(26vh, 190px); }
  .co-resposta b { font-size: 22px; }
  .co-resposta-emoji { font-size: 58px; }
  .co-resposta-arte { width: min(100%, 130px, 16vh); }
  .co-explica { font-size: 21px; }
  .co-opcoes-4 { grid-template-columns: repeat(4, 1fr); }
  .co-banca-8 { grid-template-columns: repeat(8, 1fr); }
  .co-mesa { flex-direction: row; align-items: center; justify-content: center; }
  .co-prateleira { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .co-menu-frutas span, .co-alimento-arte.co-grande, .co-gesto, .co-resultado-arte, .co-bia-arte, .co-mapa-bia, .co-chefao-guto,
  .co-pergunta-arte, .co-fase-atual .co-fase-arte, .co-alvo-chama { animation: none; }
}