/* Estilos dos doze jogos de escuta e de habilidades sociais, trazidos da versão completa.
   O bloco inicial liga os nomes de cor e de medida usados por esses jogos aos do aplicativo. */
:root{
  --r:var(--raio); --r-g:28px; --r-p:14px;
  --sombra-forte:0 18px 40px -16px rgba(75,58,42,.35);
  --azul-cl:#E4EEFA; --verde-cl:#E6F3E3; --coral-cl:#FCE6DE; --amarelo-cl:#FFF4D2;
  --emoji:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--azul-cl:#23303F;--verde-cl:#22332A;--coral-cl:#3D2A24;--amarelo-cl:#3A321F;--sombra-forte:0 18px 40px -16px rgba(0,0,0,.7)}
}
:root[data-theme="dark"]{--azul-cl:#23303F;--verde-cl:#22332A;--coral-cl:#3D2A24;--amarelo-cl:#3A321F;--sombra-forte:0 18px 40px -16px rgba(0,0,0,.7)}
.em{font-family:var(--emoji);font-style:normal;line-height:1}
.palco .ic{width:1.25em;height:1.25em;flex-shrink:0;vertical-align:-.25em}
.fig-emo{font-size:2rem;line-height:1;flex-shrink:0}
.fig-img img,.tico-foto{width:64px;height:64px;object-fit:contain}
.emo-6{grid-template-columns:repeat(3,1fr)}
.emo-6 .face{width:78px;height:78px}
@media (min-width:640px){.emo-6{grid-template-columns:repeat(6,1fr)}}
.lista-ideias .opcao{grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:left}
.lista-ideias .opcao .fig-img img{width:46px;height:46px}
.lista-ideias .opcao .fig-emo,.lista-ideias .opcao .em{font-size:1.9rem}
.opcao .em{font-size:2.3rem}
.opcao.vista{opacity:.75}

@keyframes escutar { 0%, 100% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } }
@keyframes onda { 0%, 100% { height: 8px; opacity: .5 } 50% { height: 32px; opacity: 1 } }
.rotulo, legend { font-weight: 600; font-size: .92rem; padding: 0 }
.balao-fala { background: var(--card); border-radius: var(--r); padding: 12px 16px; box-shadow: var(--sombra); font-size: 1rem }
.balao-fala b { font-family: var(--mao); font-size: 1.5rem; color: var(--roxo); display: block; line-height: 1.1 }
.demo-row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap } .demo-row.baixo { margin-top: 6px }
.demo-col { display: grid; gap: 8px; width: min(100%, 320px) }
.demo-balao, .demo-opcao { background: #fff; border-radius: 14px; padding: 10px 12px; font-size: .9rem; font-weight: 600; color: #4B3A2A; position: relative; box-shadow: 0 2px 0 rgba(0,0,0,.05) }
.demo-opcao.fraca { opacity: .6 }
.demo-mem { width: 64px; height: 76px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; position: relative; padding: 6px } .demo-mem.verso { background: var(--roxo); color: #fff; font-weight: 800; font-family: var(--fonte); font-size: 1.6rem } .demo-mem.cheia { box-shadow: 0 0 0 3px var(--verde) } .demo-mem img { width: 100% }
.alvo-demo { box-shadow: 0 0 0 3px var(--amarelo) !important }
.lista-ideias { grid-template-columns: 1fr } .lista-ideias .opcao { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; padding: 12px 16px } .lista-ideias .opcao .em { font-size: 1.9rem }
.emo-6 { grid-template-columns: repeat(3, 1fr) } .emo-6 .face { width: 78px; height: 78px }@media (min-width: 640px){ .emo-6 { grid-template-columns: repeat(6, 1fr) }}
.explica { background: var(--lilas); border-radius: var(--r-p); padding: 12px 16px; margin: 14px 0 }
.explica.ok { background: var(--ok-bg); color: var(--ok-fg) } .explica p { margin: 0 } .explica p + p { margin-top: 6px }
.numeros { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.numeros button { width: 70px; height: 70px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--sombra); font-size: 1.8rem; font-weight: 800 } .numeros button.feito { background: var(--verde); color: #fff } .mem-carta.verso { background: var(--roxo); color: #fff; box-shadow: 0 4px 0 var(--roxo-esc) }

/* e se */
.situacao-ese { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: end; background: var(--coral-cl); border-radius: var(--r-g); padding: 14px 16px 0; margin-bottom: 16px; overflow: hidden }
.situacao-ese.mudou { background: var(--amarelo-cl); align-items: center; padding-bottom: 14px }
.ese-tico img, .ese-tico svg { width: 100%; display: block; margin-bottom: -4px } .ese-texto { padding-bottom: 14px } .ese-texto p { font-size: 1.12rem; font-weight: 600; margin: 8px 0 4px }
.placar-pares { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px }
.grade-pares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 520px; margin: 0 auto }@media (max-width: 420px){ .grade-pares { grid-template-columns: repeat(3, 1fr) }} .carta-par.aberta .verso { display: none } .carta-par .verso .ic { width: 40%; height: 40%; opacity: .5 }
.festa-tico { width: 200px; margin: 0 auto 4px } .festa-tico img { width: 100% }

/* =====================================================================
   Jogos de habilidades auditivas
   ===================================================================== */
.prep-aud { display: grid; gap: 16px; max-width: 760px; margin: 0 auto }
.prep-missao { display: flex; gap: 14px; align-items: center } .prep-missao .prep-tico { width: 110px; height: auto; flex: none }
.prep-missao .balao-fala p { margin: 0; font-weight: 600 }
.prep-conforto h3, .ajustes-aud summary { margin: 0 0 6px; font-size: 1.05rem }
.ajustes-aud summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center }
.ajustes-grade { display: grid; gap: 4px 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 12px }
.vol { display: flex; gap: 12px; align-items: center; font-weight: 600; margin-top: 10px } .vol input { flex: 1; padding: 0; border: 0; accent-color: var(--roxo) }
.barra-aud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 4px 0 14px }
.barra-aud .btn { min-height: 40px }
.chip-cond { font-size: .8rem; background: var(--azul-cl); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-weight: 600 }
.ouvindo { display: grid; justify-items: center; gap: 8px; padding: 24px 0 }
.ouvindo .ouvindo-tico { width: 150px; height: auto; animation: escutar 2.4s ease-in-out infinite }
.ouvindo p { margin: 0; font-weight: 700; font-size: 1.15rem; color: var(--roxo) }
.ondas { display: flex; gap: 6px; align-items: flex-end; height: 34px } .ondas i { width: 10px; border-radius: 6px; background: var(--roxo); animation: onda 1s ease-in-out infinite }
.ondas i:nth-child(2) { animation-delay: .15s } .ondas i:nth-child(3) { animation-delay: .3s }@media (prefers-reduced-motion: reduce){ .ondas i, .ouvindo .ouvindo-tico { animation: none } .ondas i { height: 20px }}
.pergunta-aud { display: flex; gap: 12px; align-items: center; justify-content: center; margin-bottom: 12px } .pergunta-aud h3 { margin: 0; font-size: 1.25rem }
.pergunta-aud .mini-tico { width: 64px; height: auto } .fig-aud { font-size: 2.8rem; line-height: 1.1; font-family: var(--emoji) } .fig-aud .em { font-size: 2.8rem }
.botoes-gigantes { grid-template-columns: 1fr 1fr } .botoes-gigantes .opcao { min-height: 150px; font-size: 1.25rem; letter-spacing: .04em }
.botoes-gigantes .sinal { font-size: 3.4rem; line-height: 1; font-weight: 800 } .igual-btn { background: var(--verde-cl) } .dif-btn { background: var(--coral-cl) }
.grade-sons { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); margin: 10px 0 }
.carta-som { border: 3px solid transparent; background: var(--card); border-radius: var(--r); padding: 12px 8px; box-shadow: var(--sombra); display: grid; justify-items: center; gap: 4px; font-weight: 700; font-size: .85rem; min-height: 104px }
.carta-som .em { font-size: 2.4rem } .carta-som.tocando { border-color: var(--roxo); background: var(--lilas) } .carta-som.sel { border-color: var(--roxo); background: var(--lilas) }
.contas-sons { display: flex; gap: 10px; justify-content: center } .contas-sons i { width: 18px; height: 18px; border-radius: 50%; background: var(--line); transition: background .2s } .contas-sons i.on { background: var(--roxo) }
.vagas-sons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px } .demo-opcao.grande { font-size: 1.1rem; font-weight: 800 }
.grade-siga { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); max-width: 560px; margin: 0 auto }@media (max-width: 420px){ .grade-siga { grid-template-columns: repeat(3, 1fr) }}
.obj-tocar { aspect-ratio: 1; border: 3px solid transparent; background: var(--card); border-radius: var(--r); box-shadow: var(--sombra); padding: 12px; position: relative; display: flex; align-items: center; justify-content: center }
.obj-tocar svg { width: 100%; height: 100% } .obj-tocar .fig-emo .em, .obj-tocar .fig-emo { font-size: 2.6rem; font-family: var(--emoji) }
.obj-tocar.tocado { border-color: var(--roxo) } .obj-tocar.alvo-certo { box-shadow: 0 0 0 4px var(--verde) }
.ordem-toque { position: absolute; top: 4px; right: 6px; font-weight: 800; color: var(--roxo); font-size: 1rem }
.cena-siga { position: relative; width: 100%; max-width: 680px; aspect-ratio: 10 / 7; margin: 0 auto; border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); touch-action: none }
.cena-svg { position: absolute; inset: 0; width: 100%; height: 100% }
.cachorro-cena { position: absolute; left: 66%; top: 84%; width: 12%; height: 15%; display: flex; align-items: center; justify-content: center; font-size: clamp(1.6rem, 6vw, 2.8rem); pointer-events: none }
.obj-siga { width: clamp(38px, 9vw, 56px); height: clamp(38px, 9vw, 56px); border: 0; background: transparent; padding: 2px; display: flex; align-items: center; justify-content: center; touch-action: none }
.obj-siga svg { width: 100%; height: 100% } .obj-siga .fig-emo, .obj-siga .em { font-size: clamp(1.6rem, 6vw, 2.4rem); font-family: var(--emoji) }
.obj-siga.selecionada { outline: 3px solid var(--roxo); border-radius: 12px; background: var(--lilas) }
.bandeja-siga { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 72px; max-width: 680px; margin: 12px auto; padding: 10px; border: 2px dashed var(--line); border-radius: var(--r); background: var(--card) }
.bandeja-siga .obj-siga { width: 60px; height: 60px; background: var(--bg2); border-radius: 14px }
.ouvindo-tico.mini { width: 60px }
.ouvindo .tico-img.ouvindo-tico { width: auto; max-width: 160px; height: 190px; object-fit: contain }
.pergunta-aud .tico-img.mini-tico { width: auto; height: 84px; object-fit: contain }
.prep-missao .tico-img.prep-tico { width: auto; height: 150px; object-fit: contain }

/* =====================================================================
   Jogos de teoria da mente, linguagem e habilidades sociais
   ===================================================================== */
.modos-jogo { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.chips-sel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px }
.chip-sel { display: inline-flex; gap: 6px; align-items: center; border: 2px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .9rem; font-weight: 600; background: var(--card); cursor: pointer }
.chip-sel input { width: auto } .chip-sel:has(input:checked) { border-color: var(--roxo); background: var(--lilas) }
.pergunta-social { text-align: center; margin: 10px 0 12px; font-size: 1.2rem }
.opcao .fig-emo { font-size: 2.3rem; font-family: var(--emoji); line-height: 1.1 }
.lista-ideias .opcao .fig-img img { width: 46px; height: 46px } .lista-ideias .opcao .face { width: 52px; height: 52px } .lista-ideias .opcao .fig-emo { font-size: 1.9rem }
.painel-adulto { background: var(--amarelo-cl) } .painel-adulto .row { margin-top: 8px }
.tirinha { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 6px }
.quadro-cena { background: var(--card); border: 3px solid var(--ink); border-radius: 16px; padding: 10px; display: grid; justify-items: center; gap: 6px; box-shadow: var(--sombra) }
.quadro-cena img { width: auto; height: 110px; object-fit: contain } .quadro-cena .em-cena { font-size: 3.4rem; line-height: 110px; font-family: var(--emoji) }
.quadro-cena p { margin: 0; font-size: .95rem; text-align: center; font-weight: 600 }
.adivinha { display: grid; justify-items: center; gap: 8px; text-align: center; background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra); margin-bottom: 12px }
.adivinha p { margin: 0; font-size: 1.25rem; font-weight: 700; max-width: 560px } .adivinha .mini-tico { height: 90px; width: auto }
.pistas { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: var(--r); padding: 14px; box-shadow: var(--sombra) }
.pistas .mini-tico { height: 100px; width: auto; flex: none } .pistas p { margin: 6px 0 0; font-size: 1.1rem; font-weight: 600 }
.roleta-area { position: relative; width: min(320px, 82vw); aspect-ratio: 1; margin: 6px auto 14px }
.roleta { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 6px var(--card), var(--sombra-forte) }
.roleta svg { width: 100%; height: 100% }
.roleta-icone { position: absolute; left: 50%; top: 50%; font-size: clamp(1.4rem, 6vw, 2rem); transform: translate(-50%, -50%) rotate(var(--a)) translateY(-34%) translateY(calc(min(320px, 82vw) * -.12)) rotate(calc(-1 * var(--a))); font-family: var(--emoji) }
.roleta-ponteiro { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-size: 2.2rem; color: var(--roxo); z-index: 2; text-shadow: 0 2px 0 #fff }
.mini-roleta { width: 120px; height: 120px; border-radius: 50%; position: relative; background: conic-gradient(#F2C94C 0 45deg, #E98A6B 0 90deg, #7DA7D9 0 135deg, #B58ACB 0 180deg, #6FBF9B 0 225deg, #F4A259 0 270deg, #E05A47 0 315deg, #5DB7C4 0) }
.mini-roleta i { display: none }
.grade-caixas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-width: 620px; margin: 0 auto }
.caixa-surpresa .num { position: relative; text-shadow: 0 2px 0 rgba(0,0,0,.2) }
.caixa-demo { width: 56px; height: 56px; border-radius: 12px; background: #E98A6B; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative }
.desafio-cx { text-align: center; background: var(--card); border-radius: var(--r); padding: 18px; box-shadow: var(--sombra); margin-bottom: 12px } .desafio-cx p { font-size: 1.25rem; font-weight: 700; margin: 10px 0 0 }
.consequencia .cons-tico img { height: 120px; width: auto }@media (max-width: 520px){ .consequencia, .pistas { flex-direction: column; text-align: center }} .vista-chip { font-size: .72rem; color: var(--ink2); font-weight: 600 }
.conversa-final { display: grid; justify-items: center; gap: 8px } .conversa-final .mini-tico { height: 100px; width: auto }
.grade-memoria { grid-template-columns: repeat(var(--cols, 4), 1fr) !important; max-width: min(100%, calc(var(--cols, 4) * 92px)); margin: 0 auto }@media (max-width: 560px){ .grade-memoria { grid-template-columns: repeat(min(var(--cols, 4), 5), 1fr) !important; gap: 6px } .grade-memoria .carta-par { padding: 4px }}
.grade-memoria .carta-par .frente .em { font-size: clamp(1.4rem, 5vw, 2.2rem) }