.profile,
.panel {
  animation: rise .35s ease-out;
}

.game {
  animation: rise .4s both;
  transition: transform .16s, box-shadow .2s;
}

.game:not(.disabled):hover { box-shadow: 0 12px 30px #8b5cf625; }
.cell { transition: transform .15s, background .2s; }
.cell:active { transform: scale(.88); }
.cell.x, .cell.o { animation: pop .3s cubic-bezier(.2, 1.6, .4, 1); }
.choice { transition: transform .18s, background .18s; }
.choice:active { transform: translateY(3px) scale(.94); background: #302444; }
.letter.correct, .letter.present, .letter.absent { animation: flip .45s ease both; }
.toast { animation: toast-in .25s ease-out; }
.result .trophy { animation: trophy .6s cubic-bezier(.2, 1.6, .4, 1); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: .2; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes flip { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes trophy { from { opacity: 0; transform: scale(.3) rotate(-15deg); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}