.coin.is-spinning + .coin-glint, .coin-scene.is-hot .coin-glint { animation: glint 0.45s linear infinite; }
@keyframes glint { 0%, 100% { opacity: 0; } 50% { opacity: 0.85; } }
.modal[open] { animation: rise 0.28s ease; }
.flip-modal[open] { animation: flip-in 0.2s ease; }
@keyframes flip-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast { animation: rise 0.25s ease; }
.roulette-viewport::before, .roulette-viewport::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 48px; pointer-events: none;
}
.roulette-viewport::before { left: 0; background: linear-gradient(90deg, rgba(12,8,20,0.95), transparent); }
.roulette-viewport::after { right: 0; background: linear-gradient(270deg, rgba(12,8,20,0.95), transparent); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .coin { will-change: auto; }
}