/* ============================================================
   KIDS LAST GAME — Tema: mascotes, histórias e profundidade 3D
   ============================================================ */

/* ---------- Profundidade / 3D (passe global) ---------- */
body {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.7), transparent 40%),
    radial-gradient(circle at 85% 8%, rgba(251,191,36,.18), transparent 38%),
    linear-gradient(180deg, var(--ceu2) 0%, #f0fdf4 100%);
}
.game-card, .color-thumb, .alf-card, .animal-chip, .son-opt, .num-opt, .ach-card, .stat {
  background-image: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}
/* emojis ganham relevo */
.game-card-emoji, .pick-emoji, .ct-emoji, .alf-emoji, .animal-chip-emoji,
.son-opt-emoji, .hero-sun, .cel-emoji, .his-emoji, .reader-art, .splash-logo {
  filter: drop-shadow(0 6px 6px rgba(2,32,64,.25));
}
.game-card {
  box-shadow: 0 2px 0 rgba(2,132,199,.12), 0 14px 26px rgba(2,132,199,.20);
}
.game-card:hover { box-shadow: 0 2px 0 rgba(2,132,199,.12), 0 22px 40px rgba(2,132,199,.28); }
/* botões com bisel 3D */
.btn-big, .btn-play {
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.08));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 6px 0 rgba(0,0,0,.14), 0 10px 18px rgba(2,132,199,.22);
}
.btn-big:active, .btn-play:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.14); transform: translateY(2px); }
.btn-round, .icon-btn, .tool-btn, .dbtn, .swatch { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 6px 14px rgba(2,132,199,.22); }
.hero, .num-scene, .enc-field, .bal-field, .mem-grid, .err-panel-wrap {
  box-shadow: inset 0 2px 10px rgba(255,255,255,.5), 0 12px 26px rgba(2,132,199,.18);
}

.card-roxo { border-color: var(--roxo); }
.card-roxo .btn-play { background: var(--roxo); }

.grid-title { text-align: center; font-size: clamp(20px, 4.5vw, 28px); color: var(--azul-d); margin: 6px 0 16px; }

/* selo de recomendado pelo mascote */
.rec-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--amarelo); color: var(--tinta); font-weight: 800; font-size: 12px;
  padding: 4px 12px; border-radius: 999px; box-shadow: var(--sombra); white-space: nowrap; z-index: 2;
}
.game-card.is-rec { border-color: var(--amarelo); }

/* ---------- Mascotes ---------- */
.masc-hero { padding-bottom: 22px; }
.masc-chooser { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.masc-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: linear-gradient(180deg,#fff,#eef6ff); border-radius: 26px; padding: 12px 18px 16px;
  box-shadow: 0 10px 24px rgba(2,132,199,.22); border: 4px solid transparent; transition: transform .15s;
}
.masc-pick:hover { transform: translateY(-6px) scale(1.03); }
.masc-pick.sel { border-color: var(--amarelo); box-shadow: 0 14px 30px rgba(251,191,36,.4); }
.masc-art { width: 120px; height: 128px; display: grid; place-items: center; }
.masc-svg { width: 120px; height: 128px; filter: drop-shadow(0 8px 8px rgba(2,32,64,.22)); }
.masc-name { font-weight: 800; font-size: 20px; color: var(--tinta); display: flex; flex-direction: column; line-height: 1.05; }
.masc-name i { font-style: normal; font-size: 13px; color: var(--verde-d); font-weight: 700; }
.masc-pick.sel .masc-svg { animation: wiggle .6s; }

/* chip do jogador no topo */
.player-chip {
  display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px 0 6px;
  border-radius: 999px; background: #fff; box-shadow: var(--sombra); font-weight: 800; color: var(--tinta);
}
.player-chip .pc-art { width: 38px; height: 40px; }
.player-chip .pc-art .masc-svg { width: 38px; height: 40px; }
.player-chip .pc-empty { font-size: 24px; }
.player-chip .pc-name { font-size: 15px; }
.player-chip:not(.on) .pc-name { display: none; }
@media (max-width: 720px) { .player-chip .pc-name { display: none; } }

/* ---------- Histórias ---------- */
.his-gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); max-width: 900px; margin: 0 auto; }
.his-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 14px;
  background: linear-gradient(180deg,#fff,#f3f8ff); border-radius: 22px; box-shadow: var(--sombra);
  border: 4px solid transparent; transition: transform .15s;
}
.his-card:hover { transform: translateY(-6px); }
.his-emoji { font-size: 64px; }
.his-titulo { font-weight: 800; font-size: 18px; text-align: center; color: var(--tinta); }
.his-go { font-weight: 800; color: #fff; background: var(--roxo); padding: 8px 16px; border-radius: 14px; }
.card-azul.his-card { border-color: var(--azul); }
.card-verde.his-card { border-color: var(--verde); }
.card-rosa.his-card { border-color: var(--rosa); }
.card-amarelo.his-card { border-color: var(--amarelo); }
.card-laranja.his-card { border-color: var(--laranja); }

.reader { max-width: 640px; margin: 0 auto; text-align: center; position: relative; }
.reader-lib { position: absolute; top: -4px; left: 0; }
.reader-title { font-size: clamp(20px,5vw,30px); color: var(--roxo); margin-bottom: 12px; }
.reader-art {
  font-size: clamp(70px, 18vw, 120px); line-height: 1.1; min-height: 140px;
  display: grid; place-items: center; background: linear-gradient(180deg,#ede9fe,#faf5ff);
  border-radius: 24px; box-shadow: var(--sombra); padding: 16px; margin-bottom: 14px;
}
.reader-art.pop { animation: pop-in .4s; }
.reader-text { font-size: clamp(18px, 4vw, 24px); font-weight: 700; color: var(--tinta); min-height: 84px; line-height: 1.4; }
.reader-dots { display: flex; gap: 8px; justify-content: center; margin: 14px 0; }
.r-dot { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; transition: all .2s; }
.r-dot.on { background: var(--roxo); transform: scale(1.3); }
.reader-ctrl { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }

@media (max-width: 520px) {
  .masc-art, .masc-svg { width: 96px; height: 104px; }
}