/* Brincar — jogos de toque para crianças pequenas. Sem texto, alvos grandes. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  font-family: system-ui, sans-serif;
  background: #7C4DFF;
}

button {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: none;
}

.screen {
  position: fixed;
  inset: 0;
  display: none;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.active { display: block; }

/* ── Menu ─────────────────────────────────────────────── */
#menu {
  background: radial-gradient(circle at 30% 20%, #B388FF, #7C4DFF 60%, #651FFF);
}
.tiles {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 4vmin;
  padding: 5vmin;
}
@media (orientation: landscape) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
.tile {
  background: var(--c);
  border-radius: 8vmin;
  box-shadow: 0 2vmin 0 rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  transition: transform 0.12s;
}
.tile span { font-size: 18vmin; line-height: 1; }
.tile:active, .tile.pressed { transform: translateY(1.5vmin) scale(0.96); box-shadow: 0 0.5vmin 0 rgba(0, 0, 0, 0.25); }
.tile:nth-child(odd) span { animation: wobble 3s ease-in-out infinite; }
.tile:nth-child(even) span { animation: wobble 3s ease-in-out -1.5s infinite; }
@keyframes wobble {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg) scale(1.06); }
}

/* ── Botão casa (manter carregado) ────────────────────── */
#home {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 2.5vmin);
  left: calc(env(safe-area-inset-left) + 2.5vmin);
  width: 16vmin;
  height: 16vmin;
  max-width: 76px;
  max-height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: none;
  place-items: center;
  z-index: 50;
  opacity: 0.7;
}
body.in-game #home { display: grid; }
#home span { font-size: 7.5vmin; line-height: 1; position: relative; }
#home svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#home .ring-bg { fill: none; stroke: rgba(0, 0, 0, 0.08); stroke-width: 8; }
#home .ring {
  fill: none;
  stroke: #7C4DFF;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 276.5;
  stroke-dashoffset: 276.5;
}
#home.holding { opacity: 1; }
#home.holding .ring { transition: stroke-dashoffset var(--hold, 1.2s) linear; stroke-dashoffset: 0; }

/* ── Balões ───────────────────────────────────────────── */
#balloons { background: linear-gradient(#81D4FA, #E1F5FE); }
.cloud {
  position: absolute;
  font-size: 22vmin;
  opacity: 0.9;
  animation: drift 40s linear infinite;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translateX(-30vmin); }
  to { transform: translateX(130vw); }
}
.balloon {
  position: absolute;
  bottom: -40vmin;
  width: 26vmin;
  height: 32vmin;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.7) 0 9%, transparent 10%), var(--c);
  animation: rise var(--t, 8s) linear forwards;
  touch-action: none;
}
.balloon::after {
  /* o nó e o fio */
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0.6vmin;
  height: 14vmin;
  background: rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}
@keyframes rise {
  from { transform: translate(0, 0); }
  50% { transform: translate(var(--sway, 4vmin), -65vh); }
  to { transform: translate(0, calc(-100vh - 50vmin)); }
}

.balloon.away { opacity: 0; transition: opacity 0.6s; pointer-events: none; }

/* Nível e barra dos balões já rebentados (no topo, ao centro). */
.b-hud {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 4vmin);
  left: 50%;
  transform: translateX(-50%);
  width: min(56vw, 420px);
  display: flex;
  align-items: center;
  gap: 2vmin;
  z-index: 5;
  pointer-events: none;
}
.b-level {
  flex: none;
  width: 11vmin;
  height: 11vmin;
  max-width: 56px;
  max-height: 56px;
  border-radius: 50%;
  background: #FFC107;
  color: #fff;
  font-size: min(6vmin, 30px);
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 0.8vmin 0 rgba(0, 0, 0, 0.15);
  text-shadow: 0 0.3vmin 0 rgba(0, 0, 0, 0.2);
}
.b-bar {
  flex: 1;
  height: 4.5vmin;
  max-height: 24px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
.b-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #FF5252, #FFEB3B, #66BB6A);
  background-size: min(56vw, 420px) 100%;
  transition: width 0.25s;
}
.b-banner {
  position: absolute;
  left: 50%;
  top: 45%;
  font-size: 22vmin;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1.2vmin 0 rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 6;
  animation: banner 1.4s ease forwards;
}
@keyframes banner {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(0.9); opacity: 0; }
}

.particle {
  position: absolute;
  width: 4vmin;
  height: 4vmin;
  border-radius: 50%;
  background: var(--c);
  pointer-events: none;
  animation: burst 0.6s ease-out forwards;
}
@keyframes burst {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}
.pop-emoji {
  position: absolute;
  font-size: 14vmin;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: popEmoji 0.9s ease-out forwards;
}
@keyframes popEmoji {
  from { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  60% { transform: translate(-50%, -90%) scale(1.2); opacity: 1; }
  to { transform: translate(-50%, -120%) scale(1); opacity: 0; }
}

/* ── Animais ──────────────────────────────────────────── */
#animals { background: linear-gradient(#AED581 0 0) bottom / 100% 45% no-repeat, #B3E5FC; }
.animal-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 3vmin;
  padding: 20vmin 5vmin 5vmin;
}
@media (orientation: landscape) {
  .animal-grid { grid-template-columns: repeat(3, 1fr); padding: 5vmin 5vmin 5vmin 22vmin; }
}
.animal {
  display: grid;
  place-items: center;
  border-radius: 6vmin;
  background: rgba(255, 255, 255, 0.55);
}
.animal span { font-size: 22vmin; line-height: 1; display: block; }
.animal.bounce span { animation: bounce 0.7s ease; }
.reroll, .corner-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 2.5vmin);
  right: calc(env(safe-area-inset-right) + 2.5vmin);
  width: 16vmin;
  height: 16vmin;
  max-width: 76px;
  max-height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  font-size: 8vmin;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, 0.15);
}
.reroll:active { transform: rotate(90deg) scale(0.92); }
.corner-btn { z-index: 5; }
.corner-btn:active { transform: scale(0.9); }
@keyframes bounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.3) rotate(-10deg); }
  50% { transform: scale(0.9) rotate(8deg); }
  75% { transform: scale(1.15) rotate(-4deg); }
  100% { transform: scale(1); }
}

/* ── Pintar ───────────────────────────────────────────── */
#paint { background: #fff; }
.paint-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.palette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 2vmin);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5vmin;
  padding: 0 3vmin;
  pointer-events: none;
}
.swatch {
  pointer-events: auto;
  width: 13vmin;
  height: 13vmin;
  max-width: 64px;
  max-height: 64px;
  border-radius: 50%;
  background: var(--c);
  border: 1.2vmin solid #fff;
  box-shadow: 0 0.6vmin 1.5vmin rgba(0, 0, 0, 0.3);
  display: grid;
  place-items: center;
  font-size: 7vmin;
  transition: transform 0.15s;
}
.swatch.selected { transform: scale(1.25); }

/* ── Música ───────────────────────────────────────────── */
#piano { background: #263238; }
.keys {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2vmin;
  padding: 20vmin 3vmin 3vmin;
}
@media (orientation: landscape) {
  .keys { flex-direction: row; padding: 3vmin 22vmin 3vmin 22vmin; }
}
.key {
  flex: 1;
  border-radius: 3vmin;
  background: var(--c);
  box-shadow: inset 0 -1.5vmin 0 rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  font-size: 9vmin;
  transition: transform 0.08s, filter 0.08s;
}
.key.on { transform: scale(0.96); filter: brightness(1.35); }
.key.on span { animation: bounce 0.5s ease; }
.key span { display: block; line-height: 1; }

/* ── Estrelas ─────────────────────────────────────────── */
#stars { background: radial-gradient(circle at 50% 120%, #283593, #0D1240 70%); }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* ── Esconde-esconde ──────────────────────────────────── */
#hide { background: linear-gradient(#81C784 0 0) bottom / 100% 60% no-repeat, #B3E5FC; }
.bushes {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 3vmin;
  padding: 20vmin 5vmin 5vmin;
}
@media (orientation: landscape) {
  .bushes { grid-template-columns: repeat(3, 1fr); padding: 5vmin 5vmin 5vmin 22vmin; }
}
.bush { position: relative; display: grid; place-items: center; }
.bush .who, .bush .leaf {
  position: absolute;
  font-size: 24vmin;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1), opacity 0.25s;
}
.bush .who { transform: scale(0.2); opacity: 0; }
.bush.open .who { transform: scale(1); opacity: 1; animation: bounce 0.7s ease 0.2s; }
.bush.open .leaf { transform: translateY(18vmin) scale(0.5); opacity: 0; }
.bush.shake .leaf { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
.confetti {
  position: absolute;
  top: -5vmin;
  font-size: 8vmin;
  pointer-events: none;
  animation: fall var(--t, 2s) linear forwards;
}
@keyframes fall {
  to { transform: translate(var(--dx, 0), 110vh) rotate(540deg); }
}

/* ── Limpar ───────────────────────────────────────────── */
#clean {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 2px, transparent 2px) 0 0 / 14vmin 14vmin,
    linear-gradient(rgba(255, 255, 255, 0.5) 2px, transparent 2px) 0 0 / 14vmin 14vmin,
    #B2EBF2;
}
.clean-base, .clean-dirt { position: absolute; inset: 0; width: 100%; height: 100%; }
.clean-dirt { touch-action: none; }
#clean.enter .clean-base, #clean.enter .clean-dirt { animation: cleanIn 0.5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cleanIn {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
#clean.shiny .clean-base { animation: shine 0.9s ease; }
@keyframes shine {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.12) rotate(-4deg); filter: brightness(1.35); }
  70% { transform: scale(0.96) rotate(3deg); }
  100% { transform: scale(1); filter: brightness(1); }
}
.sponge {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16vmin;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  filter: drop-shadow(0 1vmin 1vmin rgba(0, 0, 0, 0.25));
}
.sponge.on { opacity: 1; }
.bubble {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95) 0 15%, rgba(255, 255, 255, 0.35) 40%, rgba(179, 229, 252, 0.25) 70%);
  border: 0.4vmin solid rgba(255, 255, 255, 0.8);
  pointer-events: none;
  animation: bubble 1.1s ease-out forwards;
}
@keyframes bubble {
  from { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); opacity: 0; }
}

/* ── Boas-vindas ──────────────────────────────────────── */
#welcome {
  background: radial-gradient(circle at 50% 30%, #FFE082, #FFB300 70%, #FF8F00);
}
.welcome-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  padding: 6vmin;
  text-align: center;
  color: #4E342E;
}
.welcome-wave { font-size: 26vmin; line-height: 1; animation: wave 1.2s ease-in-out infinite; transform-origin: 70% 80%; }
@keyframes wave {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(18deg); }
  75% { transform: rotate(-12deg); }
}
.welcome-msg { font-size: 9vmin; line-height: 1.2; max-width: 18ch; word-break: break-word; }
.welcome-go {
  margin-top: 3vmin;
  font-size: 16vmin;
  line-height: 1;
  width: 30vmin;
  height: 30vmin;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2vmin 0 rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ── Botão de configuração (canto do menu, discreto) ──── */
#settings-btn {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 1vmin);
  right: calc(env(safe-area-inset-right) + 1vmin);
  width: 10vmin;
  height: 10vmin;
  max-width: 48px;
  max-height: 48px;
  font-size: 5.5vmin;
  opacity: 0.45;
  z-index: 5;
}
#menu .tiles { padding-top: 11vmin; }

/* ── Código dos pais ──────────────────────────────────── */
#pin, #settings { background: #ECEFF1; color: #263238; }
.pin-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vmin;
  padding: 5vmin;
}
.pin-title { font-size: 5.5vmin; font-weight: 600; }
.pin-dots { display: flex; gap: 4vmin; }
.pin-dots i { width: 5vmin; height: 5vmin; border-radius: 50%; border: 0.8vmin solid #546E7A; }
.pin-dots i.on { background: #546E7A; }
.pin-dots.wrong { animation: shake 0.4s ease; }
.pin-dots.wrong i { border-color: #E53935; }
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vmin;
  width: min(80vmin, 360px);
}
.pin-pad button {
  aspect-ratio: 1.4;
  border-radius: 3vmin;
  background: #fff;
  font-size: min(8vmin, 36px);
  box-shadow: 0 0.6vmin 0 rgba(0, 0, 0, 0.12);
}
.pin-pad button:active { transform: translateY(0.5vmin); box-shadow: none; }

/* ── Configuração ─────────────────────────────────────── */
#settings { overflow-y: auto; touch-action: pan-y; }
.settings-box {
  max-width: 520px;
  margin: 0 auto;
  padding: 6vmin 5vmin;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 17px;
}
.settings-box h2 { font-size: 24px; }
.settings-box label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.settings-box label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
.settings-box input:not([type]), .settings-box textarea {
  font: inherit;
  font-weight: 400;
  padding: 12px;
  border: 1px solid #B0BEC5;
  border-radius: 10px;
  background: #fff;
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
  resize: vertical;
}
.settings-box select {
  font: inherit;
  font-weight: 400;
  padding: 12px;
  border: 1px solid #B0BEC5;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  touch-action: auto;
}
.settings-box input[type="checkbox"] { width: 24px; height: 24px; }
.settings-box small { font-weight: 400; color: #607D8B; }
.settings-actions { display: flex; gap: 12px; }
.settings-actions button {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #B0BEC5;
  font-size: 17px;
}
.settings-actions .primary { background: #7C4DFF; border-color: #7C4DFF; color: #fff; font-weight: 600; }
.settings-saved { text-align: center; color: #2E7D32; font-weight: 600; }

/* ── Versão ───────────────────────────────────────────── */
.menu-version {
  position: absolute;
  right: calc(env(safe-area-inset-right) + 2vmin);
  bottom: calc(env(safe-area-inset-bottom) + 0.8vmin);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.settings-version { text-align: center; font-size: 14px; color: #78909C; }

/* ── Gravação da mensagem ─────────────────────────────── */
.rec-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid #B0BEC5;
  border-radius: 12px;
  background: #F5F7F8;
}
.rec-title { font-weight: 600; }
.rec-box small { color: #607D8B; }
.rec-btn.recording { background: #E53935; border-color: #E53935; color: #fff; font-weight: 600; }
.settings-actions button:disabled { opacity: 0.4; }