/*
 * main.css — Base visual do "Cê Sabe?"
 * Variáveis de cor, reset e componentes compartilhados pelas 3 telas.
 * Identidade: pixel art alegre, cores saturadas, sombras duras (sem blur).
 */

/* ---------- Fontes (Google Fonts) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* ---------- Variáveis de cor (extraídas da arte das cartas) ---------- */
:root {
  /* Primárias */
  --amarelo: #ffb800;
  --azul-marinho: #1b2b6b;
  --vermelho: #d93030;

  /* Secundárias */
  --teal: #00bcd4;
  --laranja: #ff7700;

  /* Neutros */
  --branco: #ffffff;
  --preto-pixel: #1a1a2a;
  --cinza-claro: #f5f0e8;

  /* Casas do tabuleiro */
  --casa-normal: #d4c5a9;
  --casa-card: #ffb800;
  --casa-roleta: #ff7700;
  --casa-desenho: #00bcd4;
  --casa-penalidade: #d93030;
  --casa-beneficio: #4caf50;
  --casa-leilao: #7209b7;
  --casa-inicio: #ffd700;
  --casa-chegada: #ffd700;

  /* Fundo do tabuleiro: verde escuro (referência ao Perfil físico) */
  --verde-mesa: #1e3a2f;
  --verde-mesa-escuro: #142a21;

  /* Sombra dura padrão pixel art (sem blur) */
  --sombra-pixel: 4px 4px 0 rgba(0, 0, 0, 0.35);
  --sombra-pixel-grande: 6px 6px 0 rgba(0, 0, 0, 0.4);
}

/* ---------- Reset básico ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* tira o flash azul no toque do celular */
}

html,
body {
  height: 100%;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  color: var(--preto-pixel);
  /* Deixa as bordas pixeladas nítidas ao escalar imagens */
  image-rendering: pixelated;
}

body {
  min-height: 100vh;
  background: var(--azul-marinho);
}

/* ---------- Tipografia utilitária ---------- */
.pixel-fonte {
  font-family: "Press Start 2P", monospace;
  line-height: 1.6;
}

/* Logo "Cê sabe?" reutilizável (texto, sem imagem) */
.logo {
  font-family: "Press Start 2P", monospace;
  text-align: center;
  user-select: none;
  /* o espaço da fonte pixel é bem largo; aproxima o "Cê" do "sabe?" */
  word-spacing: -0.55em;
}
.logo .ce {
  color: var(--azul-marinho);
}
.logo .sabe {
  color: var(--vermelho);
}
/* Versão clara do logo (pra fundos escuros) */
.logo-claro .ce {
  color: var(--branco);
}
.logo-claro .sabe {
  color: var(--vermelho);
}

/* ---------- Botões pixel art ---------- */
.btn {
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--preto-pixel);
  background: var(--amarelo);
  border: 3px solid var(--preto-pixel);
  border-radius: 10px;
  padding: 14px 22px;
  cursor: pointer;
  box-shadow: var(--sombra-pixel);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* botões que são links (<a>) não devem ter sublinhado */
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.btn:hover {
  filter: brightness(1.05);
}
.btn:active {
  /* "afunda" o botão ao clicar — feedback tátil */
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.35);
}
.btn:disabled {
  filter: grayscale(0.7) brightness(0.9);
  cursor: not-allowed;
  box-shadow: var(--sombra-pixel);
  transform: none;
}

/* Variações de cor de botão */
.btn-azul {
  background: var(--azul-marinho);
  color: var(--branco);
}
.btn-vermelho {
  background: var(--vermelho);
  color: var(--branco);
}
.btn-teal {
  background: var(--teal);
  color: var(--preto-pixel);
}
.btn-verde {
  background: var(--casa-beneficio);
  color: var(--branco);
}
.btn-laranja {
  background: var(--laranja);
  color: var(--branco);
}
.btn-grande {
  font-size: 1.3rem;
  padding: 18px 30px;
}
.btn-bloco {
  width: 100%;
  display: block;
}

/* ---------- Cartões/painéis genéricos ---------- */
.painel {
  background: var(--branco);
  border: 4px solid var(--preto-pixel);
  border-radius: 16px;
  box-shadow: var(--sombra-pixel-grande);
}

/* ---------- Campo de texto pixel ---------- */
.campo {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  padding: 14px 16px;
  border: 3px solid var(--preto-pixel);
  border-radius: 10px;
  background: var(--cinza-claro);
  color: var(--preto-pixel);
  width: 100%;
  text-align: center;
}
.campo:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--branco);
}

/* ---------- Toasts (avisos flutuantes) ---------- */
#toasts {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--preto-pixel); /* fundo OPACO, conforme preferência */
  color: var(--branco);
  border: 3px solid var(--amarelo);
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: var(--sombra-pixel);
  animation: toast-entra 0.25s ease, toast-sai 0.3s ease 2.7s forwards;
  max-width: 90vw;
  text-align: center;
}
@keyframes toast-entra {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toast-sai {
  to {
    transform: translateY(-20px);
    opacity: 0;
  }
}

/* ---------- Ícones de categoria (emoji) ---------- */
.cat-icone {
  font-size: 1.4em;
}

/* ---------- Utilidades ---------- */
.centro {
  display: flex;
  align-items: center;
  justify-content: center;
}
.coluna {
  display: flex;
  flex-direction: column;
}
.escondido {
  display: none !important;
}
.texto-centro {
  text-align: center;
}

/* ---------- 🎡 Rótulos dos setores da Roleta (TV + celular) ---------- */
/* Injetados por Util.montarRodaRoleta dentro da roda (.roleta-roda / .roleta-roda-cel).
   Giram JUNTO com a roda (são filhos dela) — ao parar, o rótulo vencedor fica no topo
   (levemente inclinado, como roleta de verdade; o banner dá o texto definitivo). */
.roleta-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.05;
  pointer-events: none; /* a roda captura o gesto; o rótulo não atrapalha */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  user-select: none;
}
.roleta-label .rl-emoji {
  font-size: 1.6em;
}
/* nome em sans compacto (os nomes em PT são longos demais pro Press Start 2P);
   pode quebrar em 2 linhas dentro do setor sem problema */
.roleta-label .rl-nome {
  font-family: "Space Grotesk", "Nunito", sans-serif;
  font-weight: 800;
  font-size: 0.62em;
  color: #fff;
  max-width: 6.5em;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- 🎲 Dado do Atalho (TV + celular) ---------- */
/* Face desenhada por Util.montarFaceDado como uma grade 3×3 de pips. O número é SEMPRE
   o que o motor decidiu (a UI só encena). Estilo pixel-art: borda dura, sombra sem blur. */
.dado {
  width: 96px;
  height: 96px;
  background: #fff;
  border: 4px solid var(--preto-pixel);
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
  position: relative;
  display: inline-block;
}
.dado-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 13%;
  box-sizing: border-box;
}
.dado-cel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dado-pip {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: var(--preto-pixel);
}
/* "rolando": chacoalha enquanto cicla as faces (TV e celular). "parou": bounce ao travar. */
.dado.rolando {
  animation: dado-chacoalha 0.18s linear infinite;
}
@keyframes dado-chacoalha {
  0% { transform: rotate(-12deg) translateY(0); }
  25% { transform: rotate(9deg) translateY(-4px); }
  50% { transform: rotate(-6deg) translateY(3px); }
  75% { transform: rotate(11deg) translateY(-3px); }
  100% { transform: rotate(-12deg) translateY(0); }
}
.dado.dado-parou {
  animation: dado-bounce 0.4s ease;
}
@keyframes dado-bounce {
  0% { transform: scale(1.25); }
  60% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dado.rolando,
  .dado.dado-parou {
    animation: none;
  }
}