/* Tabuleiro, células, vagalume e dicas */

/* ---------- Tabuleiro ---------- */
.board-card {
  background: var(--card);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow);
}

.board {
  --size: min(calc(100vw - 40px), 62vh, 560px, var(--board-max, 9999px)); /* --board-max: fit.js encolhe só se a tela for baixa */
  --tile: calc(var(--size) / var(--n));
  width: var(--size);
  height: var(--size);
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: calc(var(--tile) * 0.09);
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: calc(var(--tile) * 0.14);
  cursor: pointer;
  user-select: none;
  touch-action: none; /* permite arrastar no celular sem rolar a página */
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s, transform 0.1s, box-shadow 0.25s;
  /* sombra embaixo que acompanha a curva da célula (a mesma do tabuleiro da tela inicial) */
  --shade: inset 0 calc(var(--tile) * -0.07) 0 rgba(0, 0, 0, 0.18);
  box-shadow: var(--shade);
}
/* Tabuleiro se formando (buildBoard em game.js): onda diagonal a partir do canto de baixo à esquerda (atraso --form-delay; NÃO usar --fd, que é o balanço das nuvens em fog.js). Cada casa nasce
   de um ponto, passa um pouco do tamanho meio translúcida (as vizinhas da mesma cor parecem se fundir num bloco, como no jogo de
   referência) e se acomoda. A duração (400ms) tem de bater com BOARD_FORM_CELL_MS. */
.board.forming .cell { animation: cell-form 400ms cubic-bezier(0.25, 0.8, 0.35, 1) var(--form-delay, 0ms) both; }
.board.forming { pointer-events: none; } /* sem jogadas enquanto o tabuleiro se forma: o relógio ainda não começou */
.board.form-wait .cell { animation-play-state: paused; } /* fase com névoa: espera as nuvens (boardFormStart) */
@keyframes cell-form {
  0% { transform: scale(0.05); opacity: 0; }
  55% { transform: scale(1.14); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .board.forming .cell { animation: none; } }
.cell:hover { filter: brightness(1.07); }
.cell:active { transform: scale(0.95); }
.cell:focus-visible { outline: 3px solid var(--text); outline-offset: 1px; z-index: 1; }

/* ✕ grosso desenhado com duas barras */
.mark-x {
  position: relative;
  width: 58%;
  height: 58%;
  animation: pop 0.18s ease-out;
}
.mark-x::before,
.mark-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  height: 26%;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%) rotate(45deg);
}
.mark-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ● símbolo colocado */
.cell.has-cat {
  box-shadow: inset 0 0 0 calc(var(--tile) * 0.06) rgba(255, 255, 255, 0.85), var(--shade);
}
/* Vagalume visto de cima (SVG): cabeça e tórax vinho com antenas, asas ovais com contorno grosso e abdômen amarelo que brilha */
.mark-cat {
  --fly-dark: #3f2228;
  display: block;
  position: relative;
  width: 74%;
  height: 74%;
  background: radial-gradient(closest-side at 50% 64%, rgba(255, 222, 110, 0.45), rgba(255, 222, 110, 0));
  --pop: pop 0.28s cubic-bezier(0.3, 1.6, 0.5, 1);
  animation: var(--pop);
}
.mark-cat svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mark-cat .dark { fill: var(--fly-dark); }
.mark-cat .antenna { fill: none; stroke: var(--fly-dark); stroke-width: 3; stroke-linecap: round; }
.mark-cat .glow-body {
  fill: #f7ec85;
  filter: drop-shadow(0 0 3px rgba(255, 220, 90, 0.9));
  animation: glow 1.6s ease-in-out infinite alternate;
}
.mark-cat .wing ellipse { fill: rgba(255, 236, 140, 0.75); stroke: var(--fly-dark); stroke-width: 3.4; }
.mark-cat .wing { transform-box: fill-box; }
.mark-cat .wing.l { transform-origin: 100% 0; animation: flutter-l 0.32s ease-in-out infinite alternate; }
.mark-cat .wing.r { transform-origin: 0 0; animation: flutter-r 0.32s ease-in-out infinite alternate; }
@keyframes glow {
  from { filter: drop-shadow(0 0 2px rgba(255, 220, 90, 0.6)); }
  to { filter: drop-shadow(0 0 7px rgba(255, 220, 90, 1)); }
}
@keyframes flutter-l { from { transform: rotate(0deg); } to { transform: rotate(-12deg); } }
@keyframes flutter-r { from { transform: rotate(0deg); } to { transform: rotate(12deg); } }

/* Vagalume voando até a célula; o da célula só aparece quando ele pousa */
.fly {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  z-index: 300;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 210, 90, 0.9));
}
.fly .mark-cat { width: 100%; height: 100%; animation: none; }
/* Rastro de luz que o vagalume deixa no voo */
.fly-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 6px 2px rgba(255, 210, 90, 0.8);
  z-index: 299;
  pointer-events: none;
  animation: trail-fade 0.5s ease-out forwards;
}
@keyframes trail-fade { to { opacity: 0; transform: scale(0.3); } }
.cell.arriving .mark-cat { visibility: hidden; }
.cell.landed .mark-cat svg { animation: halo 0.7s ease-out; }
/* Pouso: o halo de luz de quem estava voando (o mesmo do .fly) passa para o vagalume da casa e se apaga
   devagar. Não há clarão nem mudança de tamanho, para a troca não se notar. */
@keyframes halo {
  0% { filter: drop-shadow(0 0 8px rgba(255, 210, 90, 0.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 210, 90, 0)); }
}
/* O anel branco da casa só aparece quando o vagalume chega (e entra suave) */
.cell.arriving.has-cat { box-shadow: var(--shade); }

.cell.conflict {
  background-image: repeating-linear-gradient(
    45deg, rgba(200, 30, 40, 0.45) 0 5px, transparent 5px 11px
  );
  box-shadow: inset 0 0 0 calc(var(--tile) * 0.06) #d62839, var(--shade);
}
.cell.conflict .mark-cat { animation: var(--pop), shake 0.35s ease-in-out; }

.board.loading { opacity: 0.4; pointer-events: none; transition: opacity 0.2s; }

/* Dicas: escurece o resto do tabuleiro e destaca as células envolvidas */
.board.hinting .cell:not(.hint-focus):not(.hint-target) { opacity: 0.35; }
.cell.hint-target::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 3px dashed #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  animation: hint-pulse 0.8s ease-in-out infinite alternate;
  pointer-events: none;
}
.cell.revealed { animation: reveal 0.9s ease-out; }

.hint-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  animation: appear 0.25s ease-out;
}
.hint-box[hidden] { display: none; }

/* Botão de dica pulsando depois de um tempo parado (hintNudge em hints.js) */
#btn-hint.nudge .tool-icon { animation: hint-nudge 1.3s ease-in-out infinite; }
@keyframes hint-nudge {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow), 0 0 0 0 rgba(255, 210, 90, 0.7); }
  50% { transform: scale(1.08); box-shadow: var(--shadow), 0 0 0 8px rgba(255, 210, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #btn-hint.nudge .tool-icon { animation: none; box-shadow: var(--shadow), 0 0 0 3px rgba(255, 210, 90, 0.85); }
}
.hint-box p { margin: 0; flex: 1; font-size: 0.92rem; line-height: 1.4; }
.hint-icon { font-size: 1.4rem; }
.hint-buttons { display: flex; gap: 6px; }
.swatch {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 3px;
  margin: 0 3px -1px 0;
}

/* Erro: pisca em vermelho e treme */
.cell.wrong { animation: wrong 0.5s ease-in-out; }

.lives { display: flex; gap: 2px; color: #e0405a; }
.heart { display: inline-block; transition: color 0.3s, opacity 0.3s; }
.heart.lost { color: #d9c5c7; }
.heart.breaking { animation: heart-break 0.5s ease-in-out; }

.board.solved .mark-cat { animation: var(--pop), celebrate 0.7s ease-in-out infinite alternate; }

.hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* ✕ vermelho: marca onde a pessoa errou ao colocar um vagalume (continua até ela mexer nessa casa) */
.mark-x.bad::before, .mark-x.bad::after { background: #ff4a4a; box-shadow: 0 0 0 1.5px rgba(120, 0, 0, 0.55), 0 0 8px rgba(255, 60, 60, 0.7); }

/* Erro: a luz de todos os vagalumes treme e quase se apaga. Vai no svg de dentro, nunca no .mark-cat (que guarda o "pop" de nascer). */
.board.flicker .mark-cat svg { animation: fly-flicker 0.85s ease-in-out; }
@keyframes fly-flicker {
  0% { filter: none; transform: translateX(0); opacity: 1; }
  10% { filter: brightness(0.45) saturate(0.6); transform: translateX(-2px); opacity: 0.75; }
  22% { filter: brightness(1.15); transform: translateX(2px); opacity: 1; }
  34% { filter: brightness(0.3) saturate(0.4); transform: translateX(-1.5px); opacity: 0.6; }
  48% { filter: brightness(0.9); transform: translateX(1.5px); opacity: 0.95; }
  62% { filter: brightness(0.4) saturate(0.5); transform: translateX(-1px); opacity: 0.7; }
  80% { filter: brightness(1); transform: translateX(0.5px); opacity: 1; }
  100% { filter: none; transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .board.flicker .mark-cat svg { animation: none; } }