/* Tico em Foco: missões de atenção e Leitura e Compreensão (public/jogos-foco.js). */
.fo-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.fo-chip{background:var(--lilas);color:var(--roxo-esc);font-weight:700;font-size:.85rem;border-radius:999px;padding:6px 14px}
.fo-formato{background:#FFF4D6;color:#8A5A00;font-weight:700;font-size:.8rem;border-radius:999px;padding:5px 12px}
.fo-passo{margin-left:auto;color:var(--ink2);font-weight:700;font-size:.85rem}
.fo-grande{font-size:1.15rem;padding:14px 28px;display:block;margin:16px auto 0}
.fo-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#1F3A6E;color:#fff;font-weight:800;font-size:.95rem;flex:none}
.fo-num.vazio{background:#fff;border:2px dashed #B9A88F}

/* Abertura de cada missão */
.fo-abertura{max-width:640px;margin:0 auto;text-align:center;background:linear-gradient(180deg,#FFF9EC,#FFF);border-radius:28px;padding:20px 18px 22px;box-shadow:0 10px 26px rgba(75,58,42,.1)}
.fo-abertura h3{font-size:1.6rem;margin:10px 0 6px;color:#1F3A6E}
.fo-abre-corpo{display:flex;align-items:center;gap:16px;text-align:left}
.fo-abre-corpo p{font-size:1.15rem;line-height:1.5;margin:0;background:#fff;border:3px solid #1F3A6E;border-radius:22px;padding:14px 16px;position:relative}
.fo-abre-corpo p::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);border:11px solid transparent;border-right-color:#1F3A6E;border-left:0}
.fo-pose{object-fit:contain;filter:drop-shadow(0 6px 6px rgba(75,58,42,.16))}
.fo-pose-abre{width:118px;height:190px;flex:none}

/* Figuras */
.fo-figs{display:grid;grid-template-columns:repeat(min(var(--n),4),minmax(0,1fr));gap:12px;max-width:640px;margin:8px auto}
.fo-fig,.fo-cel,.fo-op{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#fff;border:3px solid #EADBC0;border-radius:22px;padding:10px 6px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;touch-action:manipulation;box-shadow:0 4px 0 #EADBC0;transition:transform .1s}
.fo-fig:active,.fo-cel:active,.fo-op:active{transform:translateY(3px);box-shadow:0 1px 0 #EADBC0}
.fo-fig .learning-art,.fo-cel .learning-art,.fo-op .learning-art{object-fit:contain;max-width:100%;height:auto}
.fo-fig .fo-num{position:absolute;top:-10px;left:-10px}
.fo-certo{border-color:#3FA457!important;background:#EAF6E8!important;box-shadow:0 4px 0 #3FA457!important}
.fo-dica{outline:4px dashed #F4A259;outline-offset:3px}
.fo-ops{animation:fo-balanca .4s}
@keyframes fo-balanca{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.fo-modelo{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 12px;background:#FFE9E4;border:3px solid #E5483D;border-radius:22px;padding:8px 16px;width:fit-content;font-weight:800;color:#A92E25}
.fo-modelo.peq{padding:4px 14px}
.fo-modelo b{font-size:1.2rem}
.fo-contador{text-align:center;font-weight:800;color:#1F3A6E;margin:0 0 8px;font-size:1.1rem}
.fo-grade{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:8px;max-width:560px;margin:0 auto 12px;background:#fff;border:3px solid #1F3A6E;border-radius:24px;padding:12px}
.fo-cel{padding:6px;border-width:2px;border-radius:16px;box-shadow:none;aspect-ratio:1}
.fo-cel .learning-art{width:min(72px,100%)}
.fo-cel.fo-achou{border-color:#3FA457;background:#EAF6E8}
.fo-cel.fo-achou::after{content:"";position:absolute;inset:4px;border:4px solid #3FA457;border-radius:50%}
.fo-quadro-obs{background:#F5F8FF;border:3px dashed #7DA7D9;border-radius:24px;padding:12px;max-width:640px;margin:0 auto}
.fo-obs-tit{text-align:center;font-weight:800;color:#1F3A6E;margin:0 0 8px}
.fo-mostra{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.fo-mostra-it{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;background:#fff;border-radius:18px;padding:8px 10px;min-width:96px}
.fo-mostra-it .fo-num{margin-bottom:2px}
.fo-ficaram{margin-bottom:12px}
.fo-ficaram .fo-mostra-it .learning-art{width:64px;height:64px}
.fo-regra{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 10px}
.fo-regra-it{display:inline-flex;align-items:center;gap:6px;background:#fff;border:3px solid #3FA457;border-radius:16px;padding:4px 12px 4px 6px;font-weight:800}
.fo-regra-it.nao{border-color:#C9B8A2;color:var(--ink2)}
.fo-aviso{background:#E84A8A;color:#fff;text-align:center;font-weight:900;letter-spacing:.04em;border-radius:999px;padding:10px 16px;margin:0 auto 14px;max-width:520px;font-size:1.15rem}
.fo-troca{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.fo-sai,.fo-entra{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;background:#fff;border:3px solid #E5483D;border-radius:22px;padding:10px 14px}
.fo-sai .learning-art{opacity:.55;filter:grayscale(.6)}
.fo-entra{border-color:#3FA457}
.fo-seta{font-size:2rem;color:#1F3A6E}
.fo-instr{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:3px solid #1F3A6E;border-radius:20px;padding:12px 16px;max-width:640px;margin:0 auto 12px;font-size:1.1rem}
.fo-instr span{flex:none;background:#FFF4D6;border-radius:999px;padding:4px 10px;font-size:.85rem;font-weight:700}
.fo-situacao{display:flex;align-items:center;gap:14px;max-width:620px;margin:0 auto 14px}
.fo-situacao p,.fo-aberta p{flex:1;margin:0;background:#fff;border:3px solid #1F3A6E;border-radius:22px;padding:16px;font-size:1.2rem;font-weight:600;line-height:1.45}
.fo-pose-sit{width:96px;height:150px;flex:none}
.fo-duas{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:0 auto}
.fo-escolha{font:inherit;font-weight:800;font-size:1.15rem;border-radius:22px;padding:18px 10px;border:3px solid;cursor:pointer;touch-action:manipulation}
.fo-escolha.esperar{background:#FFE9E4;border-color:#E5483D;color:#A92E25}
.fo-escolha.agir{background:#EAF6E8;border-color:#3FA457;color:#28733A}
.fo-escolha:disabled{cursor:default;opacity:.75}
.fo-escolha.fo-certo{opacity:1;outline:5px solid #3FA457;outline-offset:3px}

/* Leitura e Compreensão */
.fo-texto{max-width:720px;margin:0 auto;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 10px 28px rgba(75,58,42,.12)}
.fo-texto h3{font-size:1.5rem;color:#1F3A6E;margin:16px 20px 6px}
.fo-paragrafos p{font-size:1.25rem;line-height:1.65;margin:0 0 12px;color:var(--ink)}
.fo-texto .fo-paragrafos{padding:0 20px}
.fo-texto-botoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:6px 16px 20px}
.fo-cena{position:relative;height:190px;display:flex;align-items:flex-end;justify-content:center;gap:10px;background:linear-gradient(180deg,#DFF1FB 0%,#F2F9EE 64%,#D9EFC8 64.5%,#CDE8B6 100%);background-size:cover;background-position:center 40%}
.fo-cena.com-fundo::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.55))}
.fo-cena.sem-fundo{background:linear-gradient(180deg,#FFF4D6 0%,#FFF9EC 62%,#F6E7C8 62.5%,#EFDDB7 100%)}
.fo-decor{position:relative;z-index:1;margin-bottom:22px;background:rgba(255,255,255,.9);border-radius:50%;width:96px;height:96px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(75,58,42,.12)}
.fo-decor .learning-art{width:74px;height:74px;object-fit:contain}
.fo-pessoas{position:relative;z-index:1;display:flex;align-items:flex-end;gap:2px}
.fo-pose-cena{height:170px;width:auto;max-width:260px;object-fit:contain}
.fo-pessoas:has(.fo-pose-cena[src*="/pai_"]){align-self:stretch}
.fo-pessoas:has(.fo-pose-cena[src*="/pai_"]) .fo-pose-cena{height:70%}
.fo-pessoas .fo-pose-cena[src*="/pai_"]{height:96%}
.fo-reler{max-width:720px;margin:0 auto 12px;background:#FFFCF5;border:2px solid #EADBC0;border-radius:20px;padding:10px 16px}
.fo-reler summary{cursor:pointer;font-weight:800;color:#1F3A6E}
.fo-reler .fo-paragrafos p{font-size:1.05rem;margin:8px 0}
.fo-pista{background:#FFE58A;border-radius:6px;padding:0 3px;box-shadow:0 0 0 2px #F5BF22}
.fo-pergunta{max-width:720px;margin:0 auto}
.fo-pergunta h4{font-size:1.35rem;color:#1F3A6E;margin:6px 0 12px;line-height:1.35}
.fo-ops-lista{display:grid;gap:10px}
.fo-ops-lista.com-fig{grid-template-columns:repeat(min(var(--n),3),minmax(0,1fr))}
.fo-ops-lista:not(.com-fig) .fo-op{flex-direction:row;justify-content:flex-start;text-align:left;font-size:1.1rem;padding:14px 16px}
.fo-op span{font-size:1.05rem}
.fo-op .learning-art{width:80px;height:80px}
.fo-op.fo-marcada{border-color:#7DA7D9;background:#E4F1FF;box-shadow:0 4px 0 #7DA7D9}
.fo-cor{display:block;width:64px;height:64px;border-radius:50%;background:var(--c);border:4px solid rgba(0,0,0,.12)}
.fo-rosto{width:84px;height:84px;object-fit:contain}
.fo-pose-op{height:92px;width:auto}
.fo-afirmacao{font-size:1.3rem;font-weight:700;text-align:center;background:#fff;border:3px solid #1F3A6E;border-radius:22px;padding:16px;margin:0 auto 14px;max-width:600px}
.fo-frase{font-size:1.35rem;font-weight:600;text-align:center;line-height:1.6;margin:4px 0 14px}
.fo-lacuna{display:inline-block;min-width:110px;border-bottom:3px solid #1F3A6E;color:transparent}
.fo-lacuna.fo-preenchida{color:#28733A;font-weight:800;border-color:#3FA457}
.fo-palavras{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fo-palavra{font:inherit;font-weight:800;font-size:1.15rem;background:#fff;border:3px solid #EADBC0;border-radius:999px;padding:10px 20px;cursor:pointer;box-shadow:0 4px 0 #EADBC0}
.fo-ligar{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:600px;margin:0 auto 8px}
.fo-col{display:grid;gap:10px;align-content:start}
.fo-liga{display:flex;align-items:center;justify-content:center;gap:8px;min-height:86px;background:#fff;border:3px solid #EADBC0;border-radius:20px;padding:8px 10px;font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer}
.fo-liga .learning-art{width:66px;height:66px}
.fo-liga .fo-pose-op{height:70px}
.fo-liga.fo-sel{border-color:#7DA7D9;background:#E4F1FF}
.fo-liga.fo-ligado{border-color:var(--lig);background:color-mix(in srgb,var(--lig) 16%,#fff);cursor:default}
.fo-ordem{display:grid;gap:10px;max-width:620px;margin:0 auto}
.fo-ordem-it{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:3px solid #EADBC0;border-radius:20px;padding:12px 14px;font:inherit;font-weight:700;font-size:1.1rem;cursor:pointer;box-shadow:0 4px 0 #EADBC0}
.fo-aberta{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.fo-aberta p{font-size:1.05rem;font-weight:500}

@media (max-width:560px){
  .fo-figs{grid-template-columns:repeat(min(var(--n),3),minmax(0,1fr));gap:8px}
  .fo-abre-corpo{flex-direction:column;text-align:center}
  .fo-abre-corpo p::before{display:none}
  .fo-pose-abre{width:90px;height:140px}
  .fo-grade{gap:5px;padding:8px}
  .fo-cena{height:150px}
  .fo-pose-cena{height:136px}
  .fo-decor{width:72px;height:72px;margin-bottom:16px}
  .fo-decor .learning-art{width:54px;height:54px}
  .fo-paragrafos p{font-size:1.12rem}
  .fo-ops-lista.com-fig{gap:8px}
  .fo-op .learning-art{width:60px;height:60px}
  .fo-pose-sit{width:70px;height:110px}
  .fo-situacao p{font-size:1.05rem;padding:12px}
}
@media (prefers-reduced-motion:reduce){.fo-ops{animation:none}}

/* Frase do Tico e dica para o adulto nas histórias */
.fo-frase-tico{display:flex;align-items:center;gap:12px;margin:14px 0 6px;padding:10px 16px 10px 10px;background:#FFF3D6;border-left:6px solid #E8A33D;border-radius:18px;font-weight:800;font-size:clamp(1.02rem,2.6vw,1.15rem);color:#5A3B12}
.fo-frase-tico .fo-pose-frase{width:54px;height:54px;object-fit:contain;flex-shrink:0}
.fo-dica-adulto{margin:8px 0 4px;background:#F1ECF8;border-radius:14px;padding:8px 14px;font-size:.92rem}
.fo-dica-adulto summary{cursor:pointer;font-weight:700;color:#6B3D8C}
.fo-dica-adulto p{margin:6px 0 2px}

/* Classificar: ajuda ou não ajuda */
.fo-classificar{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:10px 0}
.fo-cl-it{background:var(--card,#fff);border:3px solid #EDE3D3;border-radius:20px;padding:12px 10px;display:grid;justify-items:center;gap:6px;text-align:center;font-weight:700;font-size:clamp(.95rem,2.4vw,1.02rem);box-shadow:0 3px 0 #EDE3D3}
.fo-cl-it .learning-art,.fo-cl-it .fo-rosto,.fo-cl-it .fo-pose{width:64px;height:64px;object-fit:contain}
.fo-cl-bts{display:flex;gap:6px;width:100%}
.fo-cl-bt{flex:1;min-height:44px;border-radius:999px;border:2px solid;font:inherit;font-weight:800;font-size:.86rem;cursor:pointer}
.fo-cl-bt.sim{background:#E9F6EA;border-color:#3FA457;color:#1F6B2C}.fo-cl-bt.nao{background:#FDE9E7;border-color:#E2574C;color:#9C2A20}
.fo-cl-it.lado-sim{border-color:#3FA457;background:#F2FAF2}.fo-cl-it.lado-nao{border-color:#E2574C;background:#FEF4F3}
.fo-cl-res{display:block;width:100%;padding:8px;border-radius:999px;font-size:.88rem}.lado-sim .fo-cl-res{color:#1F6B2C}.lado-nao .fo-cl-res{color:#9C2A20}
@media (max-width:560px){.fo-classificar{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}