/* Base visual compartilhada por todos os jogos (crianças de 2 a 4 anos). */
:root {
  --bg: #ffe066;
  --tinta: #8a4b00;
  --sombra: #e0a800;
  --ok: #2fa84f;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  background: var(--bg);
  color: var(--tinta);
  transition: background-color .5s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
[hidden] { display: none !important; }

/* telas de jogo ocupam a tela inteira, respeitando o notch */
.tela {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4vmin;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
}
.tela h1 { font-size: clamp(3rem, 14vmin, 7rem); font-weight: 700; line-height: 1; text-align: center; }
.gigante { font-size: clamp(5rem, 28vmin, 14rem); line-height: 1; }

/* botões "de brinquedo": branco, sombra sólida embaixo, afundam ao tocar */
.play, .redondo, .cartao, .pilula {
  background: #fff;
  box-shadow: 0 10px 0 var(--sombra);
  transition: transform .12s, box-shadow .12s;
}
.play:active, .redondo:active, .cartao:active, .pilula:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--sombra); }

.play {
  width: clamp(120px, 28vmin, 190px); aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--tinta);
  animation: pulsar 1.6s ease-in-out infinite;
}
.play svg { width: 44%; height: 44%; margin-left: 8%; }

.pilula {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 72px; padding: 0 32px;
  border-radius: 99px;
  font-size: clamp(1.3rem, 4vmin, 1.8rem); font-weight: 700;
}
.pilula svg { width: 30px; height: 30px; }

.jogo { justify-content: flex-start; gap: 2vmin; }
.barra { width: 100%; max-width: 1100px; display: flex; align-items: center; gap: 16px; }
.redondo {
  flex: none; width: 64px; height: 64px;
  border-radius: 50%;
  box-shadow: 0 6px 0 var(--sombra);
  display: grid; place-items: center;
  color: var(--tinta);
}
.redondo:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--sombra); }
.redondo svg { width: 30px; height: 30px; }
.progresso { flex: 1; height: 20px; border-radius: 99px; background: rgba(255, 255, 255, .55); overflow: hidden; }
.progresso i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--tinta); transition: width .6s; }

.palco {
  flex: 1; width: 100%; max-width: 1100px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  gap: 3vmin;
}

/* cartões de resposta */
.opcoes { --t: min(27vw, 23vh, 210px); display: flex; flex-wrap: wrap; gap: min(4vw, 32px); justify-content: center; }
.cartao {
  width: var(--t); aspect-ratio: 1;
  border-radius: 28px;
  font-size: calc(var(--t) * .58); line-height: 1;
  display: grid; place-items: center;
}
.cartao.certo { animation: pular .6s; box-shadow: 0 10px 0 var(--ok), 0 0 0 8px var(--ok); }
.cartao.errado { animation: tremer .45s; opacity: .45; }
.cartao.dica { animation: pulsar 1s ease-in-out infinite; box-shadow: 0 10px 0 var(--sombra), 0 0 0 8px #fff; }

.entra { animation: entrar .45s cubic-bezier(.3, 1.5, .5, 1); }

@keyframes pulsar { 50% { transform: scale(1.07); } }
@keyframes tremer { 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } }
@keyframes pular { 40% { transform: translateY(-26px) scale(1.08); } }
@keyframes entrar { from { transform: scale(.4); opacity: 0; } }

.confete {
  position: fixed; left: var(--x); top: var(--y); z-index: 9;
  font-size: clamp(28px, 6vmin, 48px);
  pointer-events: none;
  animation: voar 1.1s ease-out forwards;
}
@keyframes voar { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.6); opacity: 0; } }

/* celular deitado: pouca altura, joga lado a lado */
@media (orientation: landscape) and (max-height: 520px) {
  .palco { flex-direction: row; }
  .opcoes { --t: min(13vw, 34vh, 150px); flex-wrap: nowrap; gap: 2.5vw; }
  .redondo { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}