.view-enter { animation: view-in .22s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.toast { animation: toast-in .25s ease-out; }
.toast.is-leaving { animation: toast-out .25s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px); } }

/* Gold sheen: a bright band sweeps across, then rests (transform only = cheap on phones). */
@keyframes btn-sheen { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }

.btn, .tile, .pick, .icon-btn { transition: transform .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .2s ease; }
.btn:active:not(:disabled), .tile:active, .pick:active { transform: scale(.97); }

.pop { animation: pop .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* Theme change: smooth colour cross-fade (only while the class is present). */
html.theme-fade, html.theme-fade * { transition: background-color .35s ease, border-color .35s ease, color .35s ease !important; }

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