/* Cores, layout geral, cabeçalho e regras */

/* Fredoka (SIL Open Font License), guardada em fonts/: letra redonda do nome do jogo, sem depender de internet */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --font-title: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --mini-region: #b77a57; /* região do mini tabuleiro das regras */
  --mini-free: #e6cfbf;
  --bg: #f7efeb;
  --card: #ffffff;
  --card-soft: #fbf5f2;
  --text: #7a4a4f;
  --muted: #a88589;
  --accent: #e0707f;
  --accent-dark: #c9586a;
  --shadow: 0 4px 14px rgba(122, 74, 79, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 56px 12px 24px; /* o alto fica livre para a seta e a engrenagem dos cantos */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ---------- Topo ---------- */
.stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 8px;
}
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-label { font-size: 1.15rem; color: var(--muted); }
.stat-value {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Regras ---------- */
.rules {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--card);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--shadow);
}
.rule {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card-soft);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 0.74rem;
  line-height: 1.2;
}
/* Mini tabuleiro 3×3 que mostra a regra: região com ✕, vagalume e células livres */
.mini {
  --m: 13px;
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, var(--m));
  gap: 2px;
}
.mini i {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--m);
  height: var(--m);
  border-radius: 4px;
  background: var(--mini-free);
}
.mini i.x, .mini i.f { background: var(--mini-region); }
.mini i.x::before, .mini i.x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  height: 22%;
  background: #fff;
  border-radius: 99px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.mini i.x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mini .mark-cat { width: 100%; height: 100%; animation: none; }