/* ============================================================
   MUNDO DA ALICE — tema "fofura rubro-negra"
   Creme quentinho, vermelho Flamengo suave, cantos super
   redondos, letras gordinhas (Baloo 2) e botões gigantes
   para mãozinhas de 5 anos.
   ============================================================ */

@font-face {
  font-family: 'Baloo 2';
  src: url('/core/fonts/baloo2.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --vermelho: #e84d4d;
  --vermelho-forte: #d92632;
  --vermelho-suave: #ffe3dd;
  --fundo: #fff6ee;
  --cartao: #ffffff;
  --cartao2: #fff0e6;
  --borda: #f3d9c8;
  --texto: #4a3636;
  --titulo: #d92632;
  --destaque: #ffb703;
  --ativo: rgb(255 183 3 / 18%);
  --veu: rgb(74 54 54 / 55%);
  --botao: var(--vermelho-forte);
  --botao-sombra: #a31d26;
  --raio: 26px;
  --raio-botao: 22px;
  --fonte-titulo: 'Baloo 2', system-ui, sans-serif;
  --fonte-corpo: 'Baloo 2', system-ui, sans-serif;
  --fonte-placar: 'Baloo 2', system-ui, sans-serif;
}

body {
  background: var(--fundo);
  font-weight: 500;
}

/* Bolinhas e corações flutuando ao fundo */
.fundo-festa {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}

.fundo-festa span {
  position: absolute; bottom: -60px;
  font-size: 2rem; opacity: 0.5;
  animation: subir linear infinite;
}

@keyframes subir {
  from { transform: translateY(0) rotate(-8deg); }
  to { transform: translateY(-115vh) rotate(8deg); }
}

/* ---------- Home ---------- */
.home {
  max-width: 880px; margin: 0 auto;
  padding: 0 16px 48px;
}

.home-topo {
  display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px;
}

.heroi { text-align: center; padding: clamp(10px, 4vw, 30px) 8px 8px; }

.heroi-figura { font-size: clamp(3.4rem, 11vw, 5.4rem); animation: pula-pula 2.4s ease-in-out infinite; display: inline-block; }

@keyframes pula-pula {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-16px) rotate(-4deg); }
  60% { transform: translateY(0); }
  75% { transform: translateY(-6px); }
}

.heroi h1 {
  margin: 4px 0;
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: clamp(2.4rem, 10vw, 4.4rem); line-height: 1;
  color: var(--titulo);
  text-shadow: 0 4px 0 #ffd9cf;
}

.heroi .sub { font-size: clamp(1.05rem, 3.6vw, 1.3rem); color: #7a5c5c; margin: 8px 0 0; font-weight: 600; }

/* Cartões gigantes dos jogos */
.grade-jogos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px; margin-top: 22px;
}

.cartao-jogo {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--cartao);
  border: 4px solid var(--cor, var(--borda));
  border-radius: var(--raio);
  padding: 22px 12px 18px;
  text-decoration: none; text-align: center;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--cor, var(--borda)) 55%, white);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: chega 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.grade-jogos .cartao-jogo:nth-child(2) { animation-delay: 0.07s; }
.grade-jogos .cartao-jogo:nth-child(3) { animation-delay: 0.14s; }
.grade-jogos .cartao-jogo:nth-child(4) { animation-delay: 0.21s; }
.grade-jogos .cartao-jogo:nth-child(5) { animation-delay: 0.28s; }
.grade-jogos .cartao-jogo:nth-child(6) { animation-delay: 0.35s; }
.grade-jogos .cartao-jogo:nth-child(7) { animation-delay: 0.42s; }
.grade-jogos .cartao-jogo:nth-child(8) { animation-delay: 0.49s; }

@keyframes chega {
  from { transform: translateY(30px) scale(0.9); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.cartao-jogo:hover, .cartao-jogo:focus-visible { transform: translateY(-6px) rotate(-1.5deg) scale(1.03); }

.cartao-jogo .icone { font-size: 3.4rem; line-height: 1.1; }

.cartao-jogo h3 {
  margin: 0; font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.25rem; color: var(--texto);
}

.cartao-jogo p { margin: 0; font-size: 0.92rem; color: #8a6a6a; font-weight: 500; }

.rodape { margin-top: 40px; text-align: center; color: #a98; font-size: 0.95rem; line-height: 1.8; }

/* ---------- Páginas internas ---------- */
.pagina { max-width: 760px; margin: 0 auto; padding: 10px 16px 60px; }

.pagina-topo { display: flex; align-items: center; gap: 10px; padding: 8px 0 18px; }

.pagina-topo h1 {
  flex: 1; margin: 0; text-align: center;
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.2rem); color: var(--titulo);
}

.botao-voltar, .botao-som, .botao-fala {
  background: var(--cartao); border: 3px solid var(--borda);
  border-radius: 18px; min-width: 56px; min-height: 56px; font-size: 1.5rem;
}

.caixa {
  background: var(--cartao); border: 3px solid var(--borda);
  border-radius: var(--raio); padding: clamp(16px, 3vw, 24px); margin-bottom: 18px;
}

.caixa h2 { margin: 0 0 12px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem; color: var(--titulo); }

.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }

.campo span { font-size: 0.95rem; font-weight: 700; color: #8a6a6a; }

.campo input, .campo select, .campo textarea {
  font: inherit; color: inherit;
  background: var(--cartao2); border: 3px solid var(--borda); border-radius: 16px;
  padding: 13px 14px; min-height: 52px;
}

.campo input:focus, .campo select:focus { border-color: var(--vermelho); outline: none; }

.escolha-emoji { display: flex; flex-wrap: wrap; gap: 8px; }

.escolha-emoji button {
  font-size: 1.7rem; min-width: 58px; min-height: 58px;
  background: var(--cartao2); border: 3px solid var(--borda); border-radius: 16px;
}

.escolha-emoji button.ativo { border-color: var(--destaque); background: var(--ativo); transform: scale(1.08); }

.fileira-categorias { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.ficha-categoria {
  border: 3px solid var(--borda); background: var(--cartao);
  color: inherit; border-radius: 99px; padding: 10px 16px; font-size: 1rem; font-weight: 700;
}

.ficha-categoria.ativa { border-color: var(--vermelho); background: var(--vermelho-suave); color: var(--vermelho-forte); }

.grade-favoritos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }

.cartao-favorito {
  position: relative;
  background: var(--cartao); border: 3px solid var(--borda); border-radius: 20px;
  padding: 16px; display: flex; gap: 12px; align-items: flex-start;
  animation: chega 0.35s both;
}

.cartao-favorito .emoji { font-size: 2.4rem; line-height: 1.1; }

.cartao-favorito h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }

.cartao-favorito p { margin: 2px 0 0; font-size: 0.9rem; color: #8a6a6a; }

.cartao-favorito .categoria { font-size: 0.75rem; font-weight: 800; color: var(--vermelho); }

.cartao-favorito .apagar {
  position: absolute; top: 8px; right: 8px;
  background: none; border: 0; opacity: 0.4; font-size: 1.1rem;
  min-width: 40px; min-height: 40px; border-radius: 12px;
}

.cartao-favorito .apagar:hover { opacity: 1; background: var(--vermelho-suave); }

.vazio {
  text-align: center; color: #a98; padding: 30px 10px; font-size: 1.05rem;
  border: 3px dashed var(--borda); border-radius: var(--raio);
}

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--cartao); color: var(--texto);
  border: 3px solid var(--destaque); border-radius: 18px;
  padding: 14px 20px; font-weight: 800; z-index: 10000;
  animation: chega 0.3s both;
  max-width: min(420px, 90vw); text-align: center;
}

.toast.erro { border-color: var(--vermelho); }

.escondido { display: none; }

/* Painéis da concha de jogo ficam claros e redondinhos no tema da Alice */
.painel { box-shadow: 0 10px 0 rgb(243 217 200 / 60%); }

.modo small, .poder small { color: #8a6a6a; }

/* ---------- Álbum de figurinhas ---------- */
.grade-figurinhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }

.figurinha {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--cartao); border: 3px solid var(--borda); border-radius: 20px;
  padding: 16px 8px; text-align: center;
  transition: transform 0.15s;
}

.figurinha .desenho { font-size: 2.6rem; }

.figurinha b { font-size: 0.85rem; font-weight: 700; color: var(--texto); }

.figurinha.tem { border-color: var(--destaque); background: linear-gradient(180deg, #fffbe8, #fff); box-shadow: 0 6px 0 #ffe8a3; }

.figurinha.tem:hover { transform: scale(1.06) rotate(-2deg); }

.figurinha.falta { filter: grayscale(1); opacity: 0.45; }

.contador-figurinhas {
  text-align: center; font-size: 1.2rem; font-weight: 800; color: var(--titulo); margin: 4px 0 16px;
}