/* Fases com névoa (js/fog.js). */
/* O tabuleiro é um bloco de empilhamento só dele: casas com z-index (brilho forte, nuvens) nunca passam por cima das janelas (vitória, perfil…) */
.board { isolation: isolate; }
/* Névoa: cada casa encoberta tem uma NUVEM fofa própria (SVG de bolinhas sobrepostas, gerado em fog.js: --cloud), que passa um
   pouco da borda da casa e balança de leve. Quando a luz chega, a nuvem encolhe e some. */
.cell.fogged:not(.fog-gone) { background: #cfe0f2 !important; }
.cell.fogged { box-shadow: none; }
.cell.fogged::before {
  content: "";
  position: absolute;
  inset: -16% -12% -12% -12%;
  z-index: 0;
  pointer-events: none;
  background: var(--cloud) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 3px rgba(40, 60, 110, 0.4));
  
  animation: fog-bob var(--fd, 6s) ease-in-out infinite alternate;
  animation-delay: var(--fl, 0s);
  transition: opacity 0.9s ease var(--gd, 0ms), transform 0.9s ease var(--gd, 0ms);
}
@keyframes fog-bob {
  from { transform: translate(-3%, 2%) scale(0.98); }
  to { transform: translate(3%, -2%) scale(1.03); }
}
.cell.fogged.fog-gone::before { opacity: 0; transform: scale(1.25); animation: none; }
.cell.fogged > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .cell.fogged::before { animation: none; } }

/* Contagem da névoa embaixo de cada ficha da tira de vagalumes (fogSync): casas à vista / casas da cor; verde quando toda à vista */
.region-strip.counts { margin-bottom: 22px; }
/* Com névoa (pedido do dono): fichas mais espaçadas por causa dos números, sempre na cor cheia (apagadas dificultavam reconhecer a
   cor), sem o vagalume dentro, e um ✓ branco no meio quando a cor está TODA À VISTA (para montar estratégia sem conferir casa por casa) */
.region-strip.counts { gap: 9px; }
.region-strip.counts .rs-chip, .region-strip.counts .rs-chip.rs-pop { background: var(--rs); animation: none; } /* acertar o vagalume não muda nada na ficha */
.region-strip.counts .rs-fly { visibility: hidden; }
.region-strip.counts .rs-chip.seen-all::after {
  content: "";
  position: absolute;
  inset: 16%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M5.5%2012.8l4%204L18.5%207.5'%20fill%3D'none'%20stroke%3D'rgba(40%2C20%2C30%2C.35)'%20stroke-width%3D'5.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20transform%3D'translate(0%201.2)'%2F%3E%3Cpath%20d%3D'M5.5%2012.8l4%204L18.5%207.5'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'3.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  animation: rs-check 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes rs-check { from { transform: scale(0.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .region-strip.counts .rs-chip.seen-all::after { animation: none; } }
.rs-chip { position: relative; }
.rs-count {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 244, 230, 0.85);
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.rs-count:empty { display: none; }
.rs-count.done { color: #8ef0a5; }

/* Brilho padrão (chegada do vagalume) e brilho FORTE (✕ certos em tudo que ele elimina) */
.cell.fly-soft { animation: fog-soft 0.8s ease-out; }
@keyframes fog-soft {
  0% { box-shadow: 0 0 0 0 rgba(255, 236, 150, 0), var(--shade); }
  40% { box-shadow: 0 0 0 3px rgba(255, 236, 150, 0.8), 0 0 12px 4px rgba(255, 220, 100, 0.6), var(--shade); }
  100% { box-shadow: 0 0 0 0 rgba(255, 236, 150, 0), var(--shade); }
}
.cell.x-glow { animation: fog-x-glow 0.9s ease-out both; animation-delay: var(--gd, 0ms); }
@keyframes fog-x-glow {
  0% { filter: brightness(1); }
  35% { filter: brightness(2) drop-shadow(0 0 9px rgba(255, 236, 150, 1)); }
  100% { filter: brightness(1); }
}
.cell.fly-flash { animation: fog-fly-flash 1s ease-out; z-index: 2; }
@keyframes fog-fly-flash {
  0% { box-shadow: 0 0 0 0 rgba(255, 236, 150, 0), var(--shade); }
  35% { box-shadow: 0 0 0 6px rgba(255, 244, 190, 1), 0 0 34px 14px rgba(255, 220, 100, 0.95), var(--shade); }
  100% { box-shadow: 0 0 0 0 rgba(255, 236, 150, 0), var(--shade); }
}
@media (prefers-reduced-motion: reduce) { .cell.x-glow, .cell.fly-flash, .cell.fly-soft { animation: none; } }

/* Etiqueta da fase com névoa no cartão e no mapa */
.lv-fog { background: #5aa0d8; }
.node-tag.fog-tag { background: #5aa0d8; color: #fff; }