/* ============================================================
   KIDS LAST GAME — Componentes reutilizáveis
   Cartões, picker, comemoração, toasts, conquistas, explorador.
   ============================================================ */

/* ---------- Grid de jogos ---------- */
.game-grid {
  display: grid; gap: clamp(14px, 2.5vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  max-width: 1100px; margin: 0 auto;
}
.game-card {
  position: relative; background: #fff; border-radius: var(--raio);
  padding: 18px 14px 16px; text-align: center; box-shadow: var(--sombra);
  transition: transform .15s; border: 4px solid transparent;
}
.game-card:hover { transform: translateY(-6px) rotate(-1deg); }
.card-azul    { border-color: var(--azul); }
.card-verde   { border-color: var(--verde); }
.card-amarelo { border-color: var(--amarelo); }
.card-laranja { border-color: var(--laranja); }
.card-rosa    { border-color: var(--rosa); }
.game-card-emoji { font-size: clamp(58px, 12vw, 78px); line-height: 1; }
.game-card-title { font-size: 19px; margin: 8px 0 12px; color: var(--tinta); }
.btn-play { width: 100%; background: var(--verde); color: #fff; font-size: 18px; padding: 12px; }
.card-azul .btn-play { background: var(--azul); }
.card-amarelo .btn-play { background: var(--amarelo); color: var(--tinta); }
.card-laranja .btn-play { background: var(--laranja); }
.card-rosa .btn-play { background: var(--rosa); }

.fav-toggle {
  position: absolute; top: 8px; right: 8px; width: 42px; height: 42px;
  font-size: 26px; border-radius: 50%; color: var(--amarelo);
  background: rgba(255,255,255,.7); transition: transform .15s;
}
.fav-toggle:hover { transform: scale(1.2); }
.fav-toggle.is-fav { animation: pop-in .3s; }

/* ---------- Picker (escolha de tema/nível) ---------- */
.picker { text-align: center; padding: 18px 8px; }
.picker-title { font-size: clamp(22px, 5vw, 32px); color: var(--azul-d); margin-bottom: 20px; }
.picker-options { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; max-width: 720px; margin: 0 auto; }
.btn-pick { flex-direction: column; min-width: 150px; min-height: 120px; padding: 18px; gap: 6px; }
.pick-emoji { font-size: 44px; }
.btn-pick > span:last-child { font-size: 18px; }

/* ---------- Cabeçalho de jogo ---------- */
.game-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  max-width: 1100px; margin-left: auto; margin-right: auto;
}
.game-heading { font-size: clamp(20px, 4.5vw, 30px); color: var(--azul-d); flex: 1; text-align: center; }
.game-top-extra { min-width: 52px; display: flex; justify-content: flex-end; }
.game-body { max-width: 1100px; margin: 0 auto; }

/* ---------- Explorador de animais ---------- */
.animal-explorer {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  max-width: 1000px; margin: 0 auto;
}
.animal-chip {
  background: #fff; border-radius: 20px; padding: 14px 8px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s;
  border: 3px solid var(--ceu1);
}
.animal-chip:hover { transform: translateY(-4px); border-color: var(--azul); }
.animal-chip-emoji { font-size: 54px; }
.animal-chip-name { font-weight: 700; font-size: 15px; }
.wiggle { animation: wiggle .5s; }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg) scale(1.1)} 75%{transform:rotate(8deg) scale(1.1)} }

/* ---------- Conquistas ---------- */
.ach-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-width: 900px; margin: 0 auto 24px; }
.ach-card { background: #fff; border-radius: 20px; padding: 20px; text-align: center; box-shadow: var(--sombra); border: 3px solid transparent; }
.ach-card.got { border-color: var(--amarelo); }
.ach-card.locked { opacity: .65; filter: grayscale(.4); }
.ach-card-emoji { font-size: 52px; }
.ach-card-name { font-weight: 800; font-size: 18px; margin: 6px 0 4px; }
.ach-card-desc { font-size: 13px; color: #557; }
.stats-strip { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.stat { background: #fff; border-radius: 16px; padding: 12px 20px; text-align: center; box-shadow: var(--sombra); min-width: 84px; }
.stat b { display: block; font-size: 30px; color: var(--azul-d); }
.stat span { font-size: 13px; font-weight: 700; color: var(--verde-d); }

/* ---------- Comemoração ---------- */
.fx-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }
.celebrate-overlay {
  position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center;
  background: rgba(2,30,52,.45); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s;
}
.celebrate-overlay.show { opacity: 1; }
.celebrate-card {
  background: #fff; border-radius: 32px; padding: 32px 28px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); max-width: 90vw; transform: scale(.85);
  animation: pop-in .4s forwards;
}
.cel-emoji { font-size: 80px; animation: bob 1.2s ease-in-out infinite; }
.cel-stars { display: flex; gap: 10px; justify-content: center; margin: 10px 0; }
.cel-star { font-size: 50px; }
.cel-star.on { animation: star-pop .5s backwards; }
.cel-star.off { opacity: .25; filter: grayscale(1); }
.cel-msg { font-size: 28px; color: var(--azul-d); margin-bottom: 18px; }
.celebrate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@keyframes star-pop { 0%{transform:scale(0) rotate(-40deg)} 70%{transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes pop-in { 0%{transform:scale(.6); opacity:0} 100%{transform:scale(1); opacity:1} }

/* ---------- Toasts ---------- */
.toast {
  position: fixed; top: 84px; left: 50%; transform: translate(-50%, -20px);
  padding: 14px 26px; border-radius: 999px; font-weight: 800; font-size: 20px; color: #fff;
  box-shadow: var(--sombra); opacity: 0; transition: all .3s; z-index: 9995;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-good { background: var(--verde); }
.toast-try { background: var(--laranja); }

.achievement-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 9996;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 4px solid var(--amarelo); border-radius: 20px;
  padding: 12px 18px; box-shadow: var(--sombra);
  transform: translateX(120%); transition: transform .4s;
}
.achievement-toast.show { transform: translateX(0); }
.ach-emoji { font-size: 40px; }
.ach-text { font-size: 15px; }

.pop-star {
  position: fixed; font-size: 28px; z-index: 9997; pointer-events: none;
  animation: pop-star .7s ease-out forwards;
}
@keyframes pop-star {
  0% { transform: translate(0,0) scale(.4); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 0; }
}