/* Tico Freia o Impulso e Tico Muda a Regra (public/jogos-funcoes.js). */
.fn-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.fn-cab .progresso-pontos{margin:0}
.fn-chip{background:var(--lilas);color:var(--roxo-esc);font-weight:700;font-size:.85rem;border-radius:999px;padding:6px 14px}
.fn-arena{position:relative;max-width:760px;margin:0 auto;border-radius:28px;padding:18px 16px 14px;background:
  linear-gradient(180deg,rgba(223,241,251,.86) 0%,rgba(242,249,238,.8) 62%,rgba(217,239,200,.9) 62.2%,rgba(205,232,182,.94) 100%),url('/api/media/editorial-parque-novo.webp') center 30%/cover;box-shadow:0 10px 30px rgba(75,58,42,.12);overflow:hidden}
.fn-arena.fn-mr{background:linear-gradient(180deg,rgba(255,244,218,.9) 0%,rgba(251,235,208,.88) 70%,rgba(235,211,174,.95) 70.2%,rgba(226,198,155,.96) 100%),url('/api/media/editorial-sala-de-aula.webp') center/cover}
.fn-cena{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin-bottom:12px;min-height:150px}
.fn-tico{width:120px;height:150px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 6px rgba(75,58,42,.18))}
.fn-balao{position:relative;flex:1;max-width:520px;background:#fff;border-radius:24px;padding:14px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:1.25rem;font-weight:700;color:var(--ink);box-shadow:0 6px 16px rgba(75,58,42,.12);margin-bottom:34px}
.fn-balao::before{content:"";position:absolute;left:-12px;bottom:22px;border:12px solid transparent;border-right-color:#fff;border-left:0}
.fn-balao.grande{font-size:1.4rem;min-height:84px;justify-content:center}
.fn-balao.peq{font-size:1rem;margin:0 auto 10px;max-width:440px;padding:10px 14px}
.fn-balao.peq::before{display:none}
.fn-pal{color:var(--c);font-weight:800;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.08)}
.fn-ponto{display:inline-block;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 40%),var(--c);border:3px solid var(--e);position:relative;flex:none;vertical-align:middle}
.fn-ponto.risco::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px solid #E5483D;background:linear-gradient(135deg,transparent 45%,#E5483D 45% 55%,transparent 55%)}
.fn-ic{display:inline-flex;width:40px;height:40px;flex:none}
.fn-ic svg{width:100%;height:100%}
.fn-ic.grande{width:58px;height:58px}
.fn-botoes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px;max-width:640px;margin:6px auto 4px}
.fn-cor{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:4px;font:inherit;color:var(--ink);cursor:pointer;touch-action:manipulation}
.fn-cor i{display:block;width:min(130px,100%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.6) 0 14%,transparent 34%),var(--c);border:5px solid var(--e);box-shadow:0 8px 0 var(--e),0 12px 18px rgba(0,0,0,.18);transition:transform .12s,box-shadow .12s}
.fn-cor span{font-weight:700;font-size:1rem;text-transform:capitalize}
.fn-cor:active i,.fn-cor.fn-certo i{transform:translateY(6px);box-shadow:0 2px 0 var(--e),0 4px 8px rgba(0,0,0,.18)}
.fn-cor.fn-certo i{outline:6px solid #fff;outline-offset:2px}
.fn-cor.fn-certo::after{content:"";position:absolute;top:-6px;right:8%;width:44px;height:44px;border-radius:50%;background:#3FA457 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-9' stroke='white' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.fn-cor.fn-dica i{outline:5px dashed #fff;outline-offset:4px}
.fn-cor:disabled{cursor:default}
.fn-ops{animation:fn-balanca .4s}
@keyframes fn-balanca{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.fn-retorno{min-height:1.6em;text-align:center;font-weight:700;margin:10px 0 0;font-size:1.05rem}
.fn-retorno.ok{color:#2B7A3E}.fn-retorno.tente{color:var(--terracota)}
.fn-regra-ativa{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:8px 16px;margin:0 auto 10px;max-width:520px;font-size:1.05rem;background:#fff;border:4px solid #3FA457}
.fn-regra-ativa.nao{border-color:#E5483D;background:#FFF1EF}
.fn-regras{display:grid;gap:8px;max-width:560px;margin:0 auto 12px}
.fn-regras.oculto{justify-items:center}
.fn-regra-par{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;background:rgba(255,255,255,.88);border-radius:18px;padding:8px 12px;font-weight:600}
.fn-regra-par .fn-ponto{width:26px;height:26px}
.fn-regra-par.fn-igual{font-weight:500;font-size:.92rem;color:var(--ink2)}
.fn-seta{font-size:1.5rem;color:var(--roxo)}
.fn-quadro{width:min(360px,90%);margin:0 auto 14px;background:#fff;border-radius:24px;border:4px solid #EADBC0;min-height:150px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(75,58,42,.12)}
.fn-palavra{font-size:clamp(2.6rem,9vw,4rem);font-weight:800;letter-spacing:.04em}
.fn-pintada{position:relative;display:block;width:140px;height:140px;background:var(--c);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.fn-pintada img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.1);opacity:.45}
.fn-legenda{display:flex;gap:10px 18px;flex-wrap:wrap;justify-content:center;align-items:center;margin:10px 0;font-weight:600}
.fn-legenda>span{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:16px;padding:6px 10px;box-shadow:0 2px 6px rgba(75,58,42,.08)}
.fn-legenda .learning-art{width:54px;height:54px;object-fit:contain}
.fn-legenda.peq .learning-art{width:36px;height:36px}
.fn-legenda.peq{margin:0 0 10px}
.fn-tico.mini{width:46px;height:62px}
.fn-janela{position:relative;width:min(320px,88%);aspect-ratio:4/3;margin:0 auto 14px;border-radius:26px;background:#fff;border:6px solid #C9A274;box-shadow:inset 0 0 0 6px #F3E3C8,0 8px 18px rgba(75,58,42,.15);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fn-janela.mini{width:200px;margin-bottom:6px}
.fn-janela.fn-certo{border-color:#3FA457}
.fn-estimulo .learning-art{width:150px;height:150px;object-fit:contain;animation:fn-surge .3s ease-out}
.fn-tico-janela{position:absolute;left:6px;bottom:26px;width:96px;height:130px}
.fn-aguarde{color:var(--ink2);font-weight:700;font-size:1.2rem}
.fn-barra{position:absolute;left:12px;right:12px;bottom:10px;height:12px;border-radius:999px;background:#EFE5D3;overflow:hidden}
.fn-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7DA7D9,#8E5BC8);border-radius:inherit}
.fn-barra.larga{position:relative;left:auto;right:auto;bottom:auto;max-width:420px;margin:0 auto 14px}
.fn-apertar{display:block;margin:4px auto 0;width:150px;height:150px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55) 0 12%,transparent 32%),#E5483D;box-shadow:0 10px 0 #A92E25,0 14px 22px rgba(0,0,0,.2);color:#fff;font:800 1.1rem var(--fonte);letter-spacing:.06em;touch-action:manipulation;transition:transform .1s,box-shadow .1s}
.fn-apertar:active{transform:translateY(8px);box-shadow:0 2px 0 #A92E25,0 4px 10px rgba(0,0,0,.2)}
.fn-ja{color:#2B7A3E;font-size:1.8rem}
.fn-nao-ja{color:#B65E12;font-size:1.6rem}
.fn-balao .learning-art{width:56px;height:56px;object-fit:contain}
@keyframes fn-surge{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
/* Abertura, exemplo e avisos de mudança */
.fn-abertura,.fn-aviso{max-width:720px;margin:0 auto;background:var(--card);border-radius:28px;box-shadow:0 10px 30px rgba(75,58,42,.12);padding:20px 18px;text-align:center}
.fn-abertura h3,.fn-aviso h3{font-size:1.6rem;margin:4px 0 10px;color:var(--roxo-esc)}
.fn-desafio-n{display:inline-block;background:#FFF3C4;color:#7A5A0B;font-weight:700;border-radius:999px;padding:4px 14px;font-size:.85rem}
.fn-abre-corpo{display:flex;align-items:center;gap:14px;text-align:left;justify-content:center}
.fn-abre-txt{flex:1;max-width:460px}
.fn-abre-txt p{font-size:1.12rem;font-weight:600;margin:0 0 8px}
.fn-tico-abre{width:110px;height:140px}
.fn-exemplo{position:relative;margin:14px auto 0;max-width:560px;border:3px dashed #D7C3A2;border-radius:22px;padding:22px 12px 12px;background:#FFFCF5}
.fn-exemplo-rot{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--roxo);color:#fff;font-weight:700;font-size:.85rem;padding:3px 14px;border-radius:999px}
.fn-exemplo-txt{font-weight:600;margin:10px 0 0}
.fn-botoes.mini{max-width:420px;gap:8px}
.fn-botoes.mini .fn-cor i{width:min(72px,100%);border-width:4px;box-shadow:0 5px 0 var(--e)}
.fn-botoes.mini .fn-cor span{font-size:.85rem}
.fn-exemplo-alvo i{outline:5px solid #fff;outline-offset:2px}
.fn-mao{position:absolute;left:58%;top:42%;width:46px;height:46px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M18 26V9a3.5 3.5 0 0 1 7 0v12l9 1.6c3 .6 5 3.4 4.4 6.4L37 38c-.6 3-3 5-6 5H24c-2 0-4-1-5-3l-7-9c-1.6-2 .4-5 3-4Z' fill='%23FFE0C2' stroke='%234B3A2A' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:fn-toca 1.4s ease-in-out infinite;pointer-events:none}
@keyframes fn-toca{0%,100%{transform:translate(10px,14px)}50%{transform:translate(0,0) scale(.92)}}
.fn-grande{min-height:60px;font-size:1.15rem;padding:14px 30px;margin-top:16px}
.fn-duas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fn-aviso{display:grid;gap:8px;justify-items:center;background:linear-gradient(180deg,#FFF6D6,#fff);border:4px solid #F5BF22;animation:fn-aviso .5s ease-out}
.fn-aviso h3{font-size:2rem;color:#B65E12;letter-spacing:.02em}
.fn-aviso p{font-size:1.2rem;font-weight:700;margin:0 0 6px}
.fn-tico-aviso{width:120px;height:150px;animation:fn-pulo 1.2s ease-in-out 2}
@keyframes fn-aviso{from{transform:scale(.85) rotate(-2deg);opacity:0}to{transform:none;opacity:1}}
@keyframes fn-pulo{50%{transform:translateY(-14px) rotate(-4deg)}}
/* Tico Muda a Regra */
.fn-regra-atual b{flex:1;min-width:180px;text-align:left}
.fn-regra-atual{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#fff;border-radius:20px;padding:8px 12px;margin:0 auto 12px;max-width:640px;border:3px solid #B58ACB;font-size:1.05rem}
.fn-regra-atual.escondida{border-style:dashed}
.fn-tico-regra{width:46px;height:62px;margin:-6px 0 -6px}
.fn-item .learning-art.fn-pequeno{width:54px;height:54px}.fn-item .learning-art.fn-grande{width:92px;height:92px}
.fn-cenario{position:relative;height:110px;margin:-18px -16px 12px;overflow:hidden}
.fn-cenario img{width:100%;height:100%;object-fit:cover;display:block}
.fn-cenario span{position:absolute;left:14px;bottom:10px;background:rgba(255,255,255,.92);border-radius:999px;padding:4px 14px;font-weight:800;color:var(--roxo-esc)}
.fn-cenario.sem-fundo{background:linear-gradient(180deg,#E8DDF6,#F6EFFB);display:flex;align-items:center;justify-content:center}
.fn-enfeites{display:flex;gap:30px;opacity:.9}
.fn-enfeites .learning-art{width:76px;height:76px;object-fit:contain}
.fn-cenario.sem-fundo>span:last-child{position:absolute}
.fn-mesa{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:120px;padding:12px;margin:0 auto 14px;max-width:660px;background:rgba(255,255,255,.55);border-radius:22px}
.fn-mesa.uma{min-height:170px;align-items:center}
.fn-item{width:108px;height:108px;border-radius:22px;border:3px solid #EADBC0;background:#fff;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 5px 0 #E2CFAE;touch-action:none;transition:transform .15s,box-shadow .15s;padding:6px}
.fn-mesa.uma .fn-item{width:150px;height:150px}
.fn-item .learning-art{width:84px;height:84px;object-fit:contain;pointer-events:none}
.fn-item svg{pointer-events:none}
.fn-item.sel{border-color:var(--roxo);box-shadow:0 0 0 5px rgba(141,63,149,.25),0 8px 0 #E2CFAE;transform:translateY(-6px)}
.fn-item.arrastando{z-index:20;position:relative;cursor:grabbing;transition:none;box-shadow:0 18px 26px rgba(0,0,0,.22)}
.fn-item.fn-moldura{border:7px solid #E2A93B;box-shadow:0 0 0 3px #FFE6A6,0 5px 0 #C98E22;background:#FFFBEF}
.fn-moldura-ex{display:inline-flex;border:4px solid #E2A93B;border-radius:10px;padding:2px;background:#FFFBEF}
.fn-volta{animation:fn-volta .6s cubic-bezier(.3,1.4,.5,1) both}
.fn-mesa .fn-volta:nth-child(2){animation-delay:.08s}.fn-mesa .fn-volta:nth-child(3){animation-delay:.16s}.fn-mesa .fn-volta:nth-child(4){animation-delay:.24s}.fn-mesa .fn-volta:nth-child(5){animation-delay:.32s}.fn-mesa .fn-volta:nth-child(6){animation-delay:.4s}
@keyframes fn-volta{from{transform:translateY(160px) scale(.5);opacity:0}to{transform:none;opacity:1}}
.fn-caixas{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;max-width:680px;margin:0 auto}
.fn-caixa{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:3px solid transparent;border-radius:24px;background:rgba(255,255,255,.7);padding:10px 6px;cursor:pointer;font:inherit;color:var(--ink);min-height:150px;transition:transform .15s,border-color .15s}
.fn-caixa b{font-size:1rem}
.fn-caixa.alvo{border-color:var(--roxo);transform:scale(1.04)}
.fn-caixa.fn-dica{border:3px dashed var(--roxo)}
.fn-caixa.fn-recebeu{animation:fn-recebe .45s}
@keyframes fn-recebe{40%{transform:scale(1.07)}}
.fn-caixa-img{width:96px;height:96px;object-fit:contain}
.fn-caixa-img.mini{width:64px;height:64px}
.fn-bandeja{display:flex;align-items:center;justify-content:center;width:110px;height:96px;border-radius:20px;background:#F6E8CF;border:3px solid #D8BF96;box-shadow:inset 0 -8px 0 rgba(0,0,0,.05)}
.fn-bandeja.arte{background:#fff}
.fn-bandeja .learning-art{width:74px;height:74px;object-fit:contain}
.fn-bandeja.carta{background:#fff;border-color:#B58ACB}
.fn-caixa-svg{width:74px;height:74px}
.fn-dentro{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;min-height:36px}
.fn-dentro i{display:inline-flex;width:34px;height:34px}
.fn-dentro svg,.fn-dentro img{width:34px!important;height:34px!important;object-fit:contain}
.fn-dica-uso{text-align:center;margin:10px 0 0}
.fn-demo-mover{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.fn-demo-mover .fn-exemplo-txt{flex-basis:100%}
.fn-demo-mover .fn-forma:first-child{animation:fn-desliza 1.8s ease-in-out infinite}
@keyframes fn-desliza{0%,20%{transform:none}60%,100%{transform:translateX(30px) scale(.8);opacity:.4}}
/* Telas pequenas */
@media (max-width:600px){
  .fn-arena{padding:14px 10px 12px;border-radius:22px}
  .fn-tico{width:84px;height:110px}
  .fn-cena{min-height:110px}
  .fn-balao{font-size:1.05rem;padding:10px 12px;margin-bottom:22px}
  .fn-botoes{gap:8px}
  .fn-botoes[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px}
  .fn-cor i{width:min(110px,100%)}
  .fn-abre-corpo{flex-direction:column;text-align:center}
  .fn-tico-abre{width:90px;height:110px}
  .fn-item{width:88px;height:88px}
  .fn-item .learning-art{width:68px;height:68px}
  .fn-item .learning-art.fn-grande{width:76px;height:76px}.fn-item .learning-art.fn-pequeno{width:46px;height:46px}
  .fn-item svg.fn-forma{width:68px;height:68px}
  .fn-mesa.uma .fn-item{width:130px;height:130px}
  .fn-caixa{min-height:130px;padding:8px 4px}
  .fn-caixa-img,.fn-bandeja{width:80px;height:76px}
  .fn-caixa b{font-size:.85rem}
  .fn-cenario{height:84px;margin:-14px -10px 10px}
  .fn-aviso h3{font-size:1.6rem}
}
/* Menos movimento: sem pulos, balanços nem mãozinha animada. */
.fn-calmo *,.fn-calmo{animation:none!important}
@media (prefers-reduced-motion:reduce){.fn-mao,.fn-volta,.fn-aviso,.fn-tico-aviso,.fn-ops,.fn-demo-mover .fn-forma{animation:none!important}}