/* Soma com Objetos — criança de 5 anos, celular primeiro. */
:root{
  --fundo:#EAF6FF; --tinta:#22303E; --fraco:#5B7186;
  --sol:#FFB703; --verde:#2FBF71; --rosa:#FF6BA9;
  --cartao:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--fundo);color:var(--tinta);
  font-family:'Segoe UI',ui-rounded,system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;
}
#hud{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 6px;
}
.placa{
  background:var(--cartao);border:3px solid #CBE3F5;border-radius:16px;
  padding:8px 16px;font-weight:800;font-size:clamp(18px,3.4vmin,26px);
}
.btn-redondo{
  width:clamp(64px,11vmin,88px);height:clamp(64px,11vmin,88px);border-radius:50%;
  font-size:clamp(30px,6vmin,44px);line-height:1;
  background:var(--cartao);border:3px solid #CBE3F5;cursor:pointer;
}
.btn-redondo:active{transform:scale(.93)}
#palco{
  position:relative;flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;
  padding:4px 12px calc(env(safe-area-inset-bottom,0px) + 12px);
}
#pergunta{font-size:clamp(22px,4.4vmin,34px);font-weight:800;text-align:center;margin:2px 0 8px}
#pergunta-emoji{font-size:clamp(34px,7vmin,58px)}
/* Os dois grupos têm SEMPRE o mesmo formato e tamanho (rev. 1, item 7):
   empilhados no retrato, lado a lado no tablet/paisagem; objetos em
   grade de até 5 por linha, como a criança conta. */
#grupos{
  display:flex;align-items:stretch;justify-content:center;gap:10px;
  width:100%;max-width:640px;flex-direction:column;
}
@media (min-width:700px){
  #grupos{max-width:760px}
}
/* Uma linha de até 5 por grupo: poucos objetos ficam GRANDES, cinco
   dividem a largura (sempre ≥64 px). As caixas ficam idênticas. */
.grupo{
  flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;
  background:var(--cartao);border:3px solid #CBE3F5;border-radius:18px;
  padding:8px;min-height:clamp(120px,22vmin,200px);
}
.obj{
  flex:1 1 0;min-width:64px;max-width:110px;aspect-ratio:1/1;min-height:64px;
  border-radius:18px;
  font-size:clamp(38px,9vmin,72px);line-height:1;
  background:#F2F7FB;border:3px solid #D5E5F2;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease,background .12s ease;
}
/* Telas altas: conteúdo centralizado (nas baixas, topo + rolagem). */
@media (min-height:700px){
  #palco{justify-content:center}
}
@media (min-width:700px){
  .grupo{padding:14px}
}
#grupoB{border-color:#F3D3E2}
#mais{font-size:clamp(36px,7vmin,56px);font-weight:900;color:var(--fraco);
  display:flex;align-items:center;justify-content:center}
/* Tela baixa (celular deitado): enxuga margens para caber sem rolagem. */
@media (max-height:520px){
  #pergunta{margin:0 0 4px}
  .grupo{min-height:88px;padding:8px}
  #dica-contar{margin:4px 0 0}
  #opcoes{margin-top:6px}
  .num{width:72px;height:72px;font-size:36px;border-radius:18px}
  .obj{max-width:64px}
}
/* Deitado com largura de sobra: grupos lado a lado, iguais (rev. 1, item 7). */
@media (max-height:520px) and (min-width:600px){
  #grupos{flex-direction:row;align-items:stretch}
  #mais{font-size:32px;padding:0 4px}
  .grupo{min-height:0;padding:6px;gap:2px}
  .obj{max-width:76px}
}
@media (min-width:700px) and (min-height:521px){
  .obj{max-width:140px}
  .num{width:clamp(96px,16vmin,128px);height:clamp(96px,16vmin,128px);
    font-size:clamp(48px,9vmin,72px)}
}
.obj.aceso{
  background:#FFF3C4;border-color:var(--sol);transform:scale(1.12);
  box-shadow:0 4px 0 rgba(0,0,0,.08);
}
.obj:active{transform:scale(1.05)}
#dica-contar{color:var(--fraco);font-size:16px;font-weight:700;margin:8px 0 2px}
#opcoes{display:flex;gap:14px;margin-top:10px}
.num{
  width:96px;height:96px;border-radius:24px;font-size:48px;font-weight:900;
  background:var(--cartao);border:4px solid #CBE3F5;cursor:pointer;color:var(--tinta);
  box-shadow:0 5px 0 rgba(0,0,0,.10);
}
.num:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.10)}
.num.certo{border-color:var(--verde);background:#D9F7E7;animation:pulo .5s ease}
.num.errado{border-color:var(--rosa);background:#FFE3EE;animation:treme .4s ease}
@keyframes pulo{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes treme{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
#aviso{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  background:rgba(34,48,62,.92);color:#fff;font-weight:900;
  font-size:clamp(26px,7vw,40px);border-radius:18px;padding:12px 26px;
  opacity:0;pointer-events:none;text-align:center;max-width:92vw;
}
#aviso.mostra{animation:sobe 1.4s ease forwards}
@keyframes sobe{
  0%{opacity:0;transform:translate(-50%,-40%) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  75%{opacity:1;transform:translate(-50%,-52%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-66%) scale(1)}
}
.tela{
  position:fixed;inset:0;z-index:40;background:linear-gradient(180deg,#EAF6FF,#CDE9FA);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;transition:opacity .25s ease,visibility .25s;overflow-y:auto;
}
/* visibility:hidden tira a tela da árvore de acessibilidade: some o 2º
   botão "JOGAR" (o da tela de fim, escondida) — rev. 1, item 1. */
.tela.oculta{opacity:0;visibility:hidden;pointer-events:none}
.tela h1{
  font-size:clamp(1.8rem,10vw,3rem);font-weight:900;color:#3D8BE8;
  text-shadow:0 4px 0 rgba(0,0,0,.06);margin-bottom:10px;
}
.tela p{color:var(--fraco);font-size:19px;line-height:1.6;margin-bottom:14px}
#demo{font-size:52px;margin-bottom:14px}
.btn-grande{
  width:min(360px,90%);padding:22px;border:none;border-radius:22px;
  background:var(--verde);color:#06351F;font-size:26px;font-weight:900;
  cursor:pointer;box-shadow:0 6px 0 #1E8A52;min-height:72px;
}
.btn-grande:active{transform:translateY(4px);box-shadow:0 2px 0 #1E8A52}
#fim h1{color:var(--verde)}
#fim-estrelas{font-size:56px;margin:6px 0 18px}
@media (prefers-reduced-motion: reduce){
  .num.certo,.num.errado,#aviso.mostra{animation:none}
  #aviso.mostra{opacity:1}
  *{transition:none !important}
}