/*
 * Design system "cartoon" do É Gato! — estilo divertido, contornos grossos,
 * sombras "hard" e laranja vibrante. Escrito em CSS puro (não passa pelo purge
 * do Tailwind), complementando as utilidades do Tailwind usadas nas views.
 */

:root {
  --laranja: #f97316;
  --laranja-escuro: #ea580c;
  --tinta: #1f2937;     /* contorno escuro dos elementos */
  --creme: #fff7ed;     /* fundo quente */
}

body {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--creme);
  /* leve textura de bolinhas para dar clima divertido */
  background-image: radial-gradient(rgba(249, 115, 22, 0.10) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

h1, h2, h3, .fonte-cartoon {
  font-family: "Fredoka", "Nunito", ui-sans-serif, system-ui, sans-serif;
}

/* ====== Botões cartoon ====== */
.btn-cartoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 3px solid var(--tinta);
  border-radius: 1rem;
  background: #ffffff;
  color: var(--tinta);
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 4px 4px 0 0 var(--tinta);
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}
.btn-cartoon:hover { transform: translate(-1px, -2px); box-shadow: 6px 6px 0 0 var(--tinta); }
.btn-cartoon:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--tinta); }

/* botão de DENÚNCIA — bastante destaque */
.btn-denunciar {
  background: var(--laranja);
  color: #fff;
  font-size: 1.05rem;
  padding: 0.85rem 1.6rem;
}
.btn-denunciar:hover { background: var(--laranja-escuro); }

.btn-denunciar--gigante {
  font-size: 1.5rem;
  padding: 1.1rem 2.4rem;
  border-width: 4px;
  box-shadow: 6px 6px 0 0 var(--tinta);
}
.btn-denunciar--gigante:hover { box-shadow: 9px 9px 0 0 var(--tinta); }

/* botão "fantasma" / secundário */
.btn-ghost { background: #fff; }

.btn-perigo { background: #ef4444; color: #fff; }
.btn-perigo:hover { background: #dc2626; }

/* ====== Cartões cartoon ====== */
.card-cartoon {
  background: #fff;
  border: 3px solid var(--tinta);
  border-radius: 1.25rem;
  box-shadow: 5px 5px 0 0 var(--tinta);
}

.input-cartoon {
  width: 100%;
  border: 2.5px solid var(--tinta);
  border-radius: 0.85rem;
  padding: 0.6rem 0.85rem;
  background: #fff;
  font-weight: 600;
}
.input-cartoon:focus {
  outline: none;
  box-shadow: 3px 3px 0 0 var(--laranja);
  border-color: var(--laranja);
}

/* selo/badge */
.badge-cartoon {
  display: inline-block;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-weight: 800;
  font-size: 0.8rem;
}

/* pulsa de leve para chamar atenção */
@keyframes balanca {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.balanca { animation: balanca 1.6s ease-in-out infinite; transform-origin: center; }

/* ====== Ajustes para telas pequenas (mobile) ======
   Botões e sombras menores para não estourar a largura em celulares. */
@media (max-width: 640px) {
  .btn-cartoon {
    padding: 0.5rem 0.85rem;
    box-shadow: 3px 3px 0 0 var(--tinta);
    border-radius: 0.85rem;
  }
  .btn-cartoon:hover { box-shadow: 4px 4px 0 0 var(--tinta); }
  .btn-denunciar { font-size: 0.95rem; padding: 0.6rem 1rem; }
  .btn-denunciar--gigante {
    font-size: 1.2rem;
    padding: 0.85rem 1.5rem;
    box-shadow: 4px 4px 0 0 var(--tinta);
  }
  .card-cartoon { box-shadow: 4px 4px 0 0 var(--tinta); border-radius: 1rem; }
}

/* Evita rolagem horizontal acidental no mobile. */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
}