.animated-icon {
  padding: 4px;
  overflow: hidden;
  place-items: stretch;
  font: inherit;
  font-family: Arial, sans-serif;
}

.crossword-animation {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
}

.crossword-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  background: #f0ebe1;
  font-size: 7px;
  line-height: 1;
  transition: background-color 180ms ease, transform 180ms ease;
}

.crossword-cell.block { background: var(--ink); }
.crossword-cell.cursor { background: #e7c768; transform: scale(1.08); }
.crossword-cell.typed { animation: icon-pop 210ms cubic-bezier(.2, .9, .3, 1.35); }

.wordle-animation {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
}

.wordle-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid #d7d0c4;
  font-size: 6px;
  line-height: 1;
}

.wordle-cell.pop { animation: icon-pop 140ms cubic-bezier(.2, .9, .3, 1.4); }
.wordle-cell.flip { animation: tile-flip 300ms ease; }
.wordle-cell.correct { background: #6aaa64; border-color: #6aaa64; color: white; }
.wordle-cell.present { background: #c9b458; border-color: #c9b458; color: white; }
.wordle-cell.absent { background: #787c7e; border-color: #787c7e; color: white; }

.sudoku-animation {
  padding: 3px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 1px;
  background: var(--ink);
}

.sudoku-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  background: var(--card);
  font-size: 6px;
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.sudoku-cell.block-right { margin-right: 1px; }
.sudoku-cell.block-bottom { margin-bottom: 1px; }
.sudoku-cell.given { background: #ece6da; }
.sudoku-cell.solving { background: #e7c768; transform: scale(1.1); }
.sudoku-cell.entered { color: var(--red); animation: icon-pop 190ms cubic-bezier(.2, .9, .3, 1.4); }
.sudoku-animation.complete .sudoku-cell { background: #e0ead9; }
.sudoku-animation.complete .sudoku-cell.given { background: #d4e1cc; }

.connections-animation {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
}

.connection-tile,
.connection-solved {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background: #ece8df;
  font-size: 3.5px;
  line-height: 1;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.connection-tile.selected { background: var(--ink); color: white; transform: translateY(-1px); }
.connection-solved { grid-column: 1 / -1; font-size: 5px; animation: group-in 280ms cubic-bezier(.2, .9, .3, 1.3); }
.connection-solved.yellow { background: #f9df6d; }
.connection-solved.green { background: #a0c35a; }
.connection-solved.blue { background: #b0c4ef; }
.connection-solved.purple { background: #ba81c5; }

.minefield-animation {
  padding: 3px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 1px;
  background: var(--ink);
}

.minefield-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  background: #d8d2c7;
  color: var(--ink);
  font-size: 5px;
  line-height: 1;
  box-shadow: inset 1px 1px #fffdf8;
  transition: background-color 160ms ease, transform 160ms ease;
}

.minefield-cell.open { background: #fffdf8; box-shadow: none; animation: mine-open 180ms ease; }
.minefield-cell.flag { background: #e4c75f; color: #171717; }
.minefield-cell.mine { background: #b72a2a; color: white; animation: icon-pop 220ms ease; }

@keyframes mine-open {
  from { transform: rotateY(80deg); }
  to { transform: rotateY(0); }
}

@keyframes icon-pop {
  from { opacity: 0; transform: scale(.35); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tile-flip {
  49% { transform: rotateX(90deg); }
  50% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0); }
}

@keyframes group-in {
  from { opacity: 0; transform: scaleX(.2); }
  to { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .animated-icon * { animation: none !important; transition: none !important; }
}