/* Custom styles; prefer Tailwind classes in index.html. */

life-board {
  display: block;
}

.life-grid {
  display: grid;
  gap: 2px;
  width: 100%;
  touch-action: none;
  user-select: none;
  cursor: crosshair;
}

.life-cell {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: var(--wa-color-neutral-fill-quiet);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.life-cell:hover {
  background: var(--wa-color-brand-fill-normal);
}

/* Living cells shift colour as they age: young cells are warm, old cells turn cool. */
.life-cell.alive {
  --hue: calc(330 - var(--age, 1) * 20);
  background: hsl(var(--hue) 85% 58%);
  box-shadow: 0 0 6px hsl(var(--hue) 90% 60% / 0.6);
}

.life-cell.newborn {
  animation: pop 0.25s ease-out;
}

@keyframes pop {
  from { transform: scale(0.4); }
  to { transform: scale(1); }
}

.hero {
  background: linear-gradient(120deg, var(--wa-color-brand-fill-loud), hsl(330 85% 58%), hsl(200 85% 55%));
  color: #fff;
}

.running-dot {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .life-cell, .life-cell.newborn, .running-dot { animation: none; transition: none; }
}