.cell.marked.auto-mark::after {
  animation: mark-in .26s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: var(--mark-delay);
}

@keyframes mark-in {
  0% { opacity: 0; transform: scale(.25) rotate(-18deg); }
  70% { opacity: 1; transform: scale(1.18) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.puzzle-wrap { position: relative; }

.grid.celebrating .cell.filled {
  animation: win-cell .38s cubic-bezier(.2, .9, .25, 1) both;
  animation-delay: var(--celebrate-delay);
}

@keyframes win-cell {
  0% { transform: scale(1); }
  45% { transform: scale(.78); background: #f2653c; }
  100% { transform: scale(1); background: var(--ink); }
}

.confetti-burst { position: absolute; z-index: 3; pointer-events: none; left: 50%; top: 48%; width: 0; height: 0; }
.confetti-burst i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--confetti-color); animation: confetti-out 1s cubic-bezier(.15,.7,.3,1) both; animation-delay: var(--confetti-delay); }

@keyframes confetti-out {
  0% { opacity: 0; transform: translate(-4px, -6px) rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

.modal:not(.hidden) .completion { animation: result-in .36s cubic-bezier(.2,.85,.25,1) both; }
@keyframes result-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }