/* Reward moments (source/common.py FX_CSS). Under 1.5 s, never block a tap, fades under Reduce Motion. */
@keyframes fxCoin { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 12% { opacity: 1; transform: translate(0, -14px) scale(1.1); } 100% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; } }
@keyframes fxBurst { 0% { transform: translate(0, 0) scale(.3); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
@keyframes fxPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fxRise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fxFall { 0% { transform: translate(0, -30px) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx), 420px) rotate(600deg); opacity: 0; } }
@keyframes fxShine { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes fxBump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } }
@keyframes fxStamp { 0% { transform: scale(2.2) rotate(-18deg); opacity: 0; } 70% { transform: scale(.92) rotate(-8deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
@keyframes fxDrop { 0% { transform: translateY(-60px) rotate(-10deg); opacity: 0; } 70% { transform: translateY(4px) rotate(3deg); opacity: 1; } 100% { transform: translateY(0) rotate(-3deg); opacity: 1; } }
@keyframes fxFade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-coin { animation: fxCoin 1s cubic-bezier(.5, 0, .8, .6) both; }
.fx-burst { animation: fxBurst .9s ease-out both; }
.fx-pop { animation: fxPop .45s cubic-bezier(.3, 1.4, .6, 1) both; }
.fx-rise { animation: fxRise .4s ease-out both; }
.fx-fall { animation: fxFall 2.4s ease-in both; }
.fx-shine { animation: fxShine 8s linear infinite; }
.fx-bump { animation: fxBump .35s ease-out both; }
.fx-stamp { animation: fxStamp .5s cubic-bezier(.3, 1.3, .6, 1) both; }
.fx-drop { animation: fxDrop .6s cubic-bezier(.3, 1.3, .6, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .fx-coin, .fx-burst, .fx-fall { animation: none; opacity: 0; }
  .fx-pop, .fx-rise, .fx-bump, .fx-stamp, .fx-drop, .fx-shine { animation: fadeIn .2s both; }
}

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.fx-box { position: absolute; inset: 0; pointer-events: none; }
.fx-box > span { position: absolute; display: block; pointer-events: none; }
.fx-amount {
  position: absolute; transform-origin: 50% 50%; margin-left: -60px; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fx-amount b { display: flex; align-items: center; gap: 4px; font-size: 30px; font-weight: 800; line-height: 1; color: var(--ink); text-shadow: 0 2px 0 var(--card); animation: fxFade 1.6s both; }
.fx-amount span { height: 24px; padding: 0 10px; border-radius: 12px; background: #FFFFFF; border: 2px solid var(--ink); font-size: 12px; font-weight: 800; display: flex; align-items: center; animation: fxFade 1.6s .1s both; }
.fx-modal { pointer-events: auto; background: rgba(43, 38, 34, 0.32); animation: fadeIn .2s both; }
.fx-level { position: absolute; inset: 0; overflow: hidden; }
/* the whole screen glows: the square is wider than the stage's diagonal, so it covers every corner as it turns */
.fx-rays { position: absolute; left: 50%; top: 50%; width: 1200px; height: 1200px; margin: -600px 0 0 -600px;
  background: radial-gradient(circle, rgba(255, 243, 196, 0.7) 0, rgba(255, 243, 196, 0) 34%), repeating-conic-gradient(from 0deg, rgba(242, 201, 76, 0.42) 0deg 8deg, rgba(242, 201, 76, 0) 8deg 20deg); }
.fx-confetti { position: absolute; inset: 0; overflow: hidden; }
.fx-confetti span { position: absolute; top: -10px; border-radius: 2px; border: 1.2px solid var(--ink); }
.fx-cheer { position: absolute; bottom: 26px; }
.fx-level-mid { position: absolute; left: 200px; right: 200px; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink); }
.polaroid { padding: 5px 5px 7px; background: #FFFFFF; border: 2px solid var(--ink); border-radius: 5px; box-shadow: var(--edge); }