/* mx-fx v2.1 — эффекты в играх на каждое событие (слои .mx-fxl создаёт mx-fx.js). */
.mx-fxl { pointer-events: none; z-index: 2147483000; overflow: hidden; }
.mx-fxl--fixed { position: fixed; left: 0; top: 0; right: 0; bottom: 0; }
.mx-fxl--doc { position: absolute; left: 0; top: 0; width: 100%; height: 0; }
.mx-fx { position: absolute; width: 0; height: 0; --c: #ffd65a; }
.mx-fxr { position: absolute; overflow: visible; --c: #ffd65a; }

/* ---- волна: вспышка + кольца ---- */
.mx-fx-wave::before, .mx-fx-fw::before {
  content: ""; position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 68%); opacity: .55;
  animation: mxFxFlash .55s ease-out forwards;
}
.mx-fx-wave.mx-fx--big::before { width: 260px; height: 260px; left: -130px; top: -130px; }
.mx-fx-wave--nf::before { display: none; }
.mx-fx__ring {
  position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%;
  border: 3px solid var(--c); box-shadow: 0 0 14px var(--c); opacity: 0;
  animation: mxFxRing .95s cubic-bezier(.2,.7,.3,1) forwards;
}
.mx-fx--big .mx-fx__ring { border-width: 4px; animation-duration: 1.15s; }
.mx-fx--sm .mx-fx__ring { left: -30px; top: -30px; width: 60px; height: 60px; animation-duration: .8s; }
.mx-fx-wave.mx-fx--sm::before { width: 110px; height: 110px; left: -55px; top: -55px; }
@keyframes mxFxFlash { 0% { transform: scale(.45); opacity: .75; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes mxFxRing { 0% { transform: scale(.55); opacity: 1; } 70% { opacity: .55; } 100% { transform: scale(2.7); opacity: 0; } }

/* ---- искры из центра ---- */
.mx-fx__p {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff4c2 0%, #ffd24a 45%, #e59b00 100%);
  box-shadow: 0 0 8px rgba(255,214,90,.7);
  opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.4);
  animation: mxFxPart 1.1s cubic-bezier(.15,.75,.3,1) forwards;
}
.mx-fx__p--w { background: radial-gradient(circle at 35% 32%, #ffffff 0%, #d8fbe4 50%, #4ade80 100%); box-shadow: 0 0 8px rgba(74,222,128,.7); }
.mx-fx__p--tint { background: radial-gradient(circle at 35% 32%, #ffffff 0%, var(--c) 55%, var(--c) 100%); box-shadow: 0 0 8px var(--c); }
@keyframes mxFxPart {
  0% { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 0; }
  10% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--d) * .28)) scale(1.2); }
  65% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--d) * .88)) scale(.9); }
  100% { transform: rotate(var(--a)) translateX(var(--d)) scale(.2); opacity: 0; }
}

/* ---- лучи света ---- */
.mx-fx-rays__d {
  position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,214,90,.55) 0deg 7deg, rgba(255,214,90,0) 7deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 35%, rgba(0,0,0,0) 70%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 35%, rgba(0,0,0,0) 70%);
  animation: mxFxRays 1.5s ease-out forwards;
}
.mx-fx-rays__d--b { background: repeating-conic-gradient(from 11deg, rgba(255,255,255,.35) 0deg 4deg, rgba(255,255,255,0) 4deg 30deg); animation-name: mxFxRaysB; }
@keyframes mxFxRays { 0% { transform: scale(.3) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.15) rotate(70deg); opacity: 0; } }
@keyframes mxFxRaysB { 0% { transform: scale(.4) rotate(0deg); opacity: 0; } 25% { opacity: .9; } 100% { transform: scale(1.2) rotate(-90deg); opacity: 0; } }

/* ---- орбита искр ---- */
.mx-fx-orbit__ring { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: mxFxOrbitSpin 1.4s cubic-bezier(.2,.6,.3,1) forwards; }
.mx-fx-orbit__p {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff 0%, #ffd24a 50%, #e59b00 100%); box-shadow: 0 0 10px rgba(255,214,90,.9);
  transform: rotate(var(--a)) translateX(0); opacity: 0; animation: mxFxOrbitP 1.4s cubic-bezier(.2,.6,.3,1) forwards;
}
.mx-fx-orbit__p--b { width: 6px; height: 6px; left: -3px; top: -3px; background: radial-gradient(circle, #fff 0%, #bbf7d0 60%, #4ade80 100%); box-shadow: 0 0 8px rgba(74,222,128,.9); }
@keyframes mxFxOrbitSpin { from { transform: rotate(0deg); } to { transform: rotate(260deg); } }
@keyframes mxFxOrbitP { 0% { transform: rotate(var(--a)) translateX(calc(var(--r) * .4)); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(calc(var(--r) * 1.9)); opacity: 0; } }

/* ---- фонтан (парабола: X по внешнему, Y по внутреннему) ---- */
.mx-fx-ftn__x { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: mxFxFtnX 1.1s linear forwards; }
.mx-fx-ftn__y {
  position: absolute; left: 0; top: 0; display: block; border-radius: 50%; opacity: 0;
  animation: mxFxFtnY 1.1s cubic-bezier(.2,.9,.5,1) forwards;
}
.mx-fx-ftn__coin { background: radial-gradient(circle at 35% 32%, #fff4c2 0%, #ffd24a 45%, #e59b00 100%); box-shadow: 0 0 6px rgba(255,214,90,.6), inset 0 0 0 1.5px rgba(255,255,255,.35); animation-name: mxFxFtnYCoin; }
.mx-fx-ftn__chip { border-radius: 3px; background: var(--c, #f5c518); box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); animation-name: mxFxFtnYChip; }
.mx-fx-ftn__spark { background: radial-gradient(circle, #fff 0%, #bbf7d0 50%, #22c55e 100%); box-shadow: 0 0 8px rgba(74,222,128,.9); }
@keyframes mxFxFtnX { from { transform: translateX(0); } to { transform: translateX(var(--vx)); } }
@keyframes mxFxFtnY { 0% { transform: translateY(0) scale(.5); opacity: 0; } 8% { opacity: 1; } 45% { transform: translateY(var(--h)) scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--fall)) scale(.7); opacity: 0; } }
@keyframes mxFxFtnYCoin { 0% { transform: translateY(0) rotateY(0) scale(.5); opacity: 0; } 8% { opacity: 1; } 45% { transform: translateY(var(--h)) rotateY(360deg) scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--fall)) rotateY(800deg) scale(.7); opacity: 0; } }
@keyframes mxFxFtnYChip { 0% { transform: translateY(0) rotate(0) scale(.6); opacity: 0; } 8% { opacity: 1; } 45% { transform: translateY(var(--h)) rotate(200deg) scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--fall)) rotate(520deg) scale(.7); opacity: 0; } }

/* ---- осколки + трещина (проигрыш) ---- */
.mx-fx-shard {
  position: absolute; left: 0; top: 0; display: block; opacity: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.95), var(--c, rgba(239,68,68,.85))); clip-path: polygon(50% 0, 100% 70%, 20% 100%);
  box-shadow: 0 0 8px var(--c, rgba(239,68,68,.6)); animation: mxFxShard 1.2s cubic-bezier(.2,.8,.5,1) forwards;
}
@keyframes mxFxShard { 0% { transform: translateY(0) rotate(0) scale(.6); opacity: 0; } 10% { opacity: 1; } 40% { transform: translateY(var(--h)) rotate(calc(var(--rz) * .4)) scale(1); } 100% { transform: translateY(var(--fall)) rotate(var(--rz)) scale(.8); opacity: 0; } }
.mx-fx-crack {
  position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,68,68,.6) 0%, rgba(239,68,68,.15) 45%, transparent 70%);
  animation: mxFxFlash .6s ease-out forwards;
}

/* ---- прогон света ---- */
.mx-fx-sweep { overflow: hidden; border-radius: 12px; }
.mx-fx-sweep__bar {
  position: absolute; top: -20%; left: -35%; width: 30%; height: 140%;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c) 45%, transparent) 50%, transparent 100%);
  transform: skewX(-18deg); animation: mxFxSweep .9s cubic-bezier(.3,.6,.4,1) forwards;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .mx-fx-sweep__bar { background: linear-gradient(90deg, transparent 0%, rgba(255,214,90,.45) 50%, transparent 100%); }
}
.mx-fx-sweep--v .mx-fx-sweep__bar { top: -35%; left: -20%; width: 140%; height: 30%; transform: skewY(-10deg); animation-name: mxFxSweepV; }
@keyframes mxFxSweep { from { left: -35%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: 110%; opacity: 0; } }
@keyframes mxFxSweepV { from { top: -35%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: 110%; opacity: 0; } }
.mx-fx-sweep--up .mx-fx-sweep__bar { animation-name: mxFxSweepUp; }
@keyframes mxFxSweepUp { from { top: 110%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: -35%; opacity: 0; } }

/* ---- дождь: монеты / конфетти / точки ---- */
.mx-fxr__coin, .mx-fxr__cf, .mx-fxr__dot {
  position: absolute; top: -24px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 32%, #fff4c2 0%, #ffd24a 45%, #e59b00 100%);
  box-shadow: 0 0 6px rgba(255,214,90,.55), inset 0 0 0 1.5px rgba(255,255,255,.35);
  animation: mxFxRain 1.4s cubic-bezier(.3,.2,.6,1) forwards;
}
.mx-fxr__cf { border-radius: 2px; box-shadow: none; animation-name: mxFxRainCf; }
.mx-fxr__dot { box-shadow: 0 0 10px 2px rgba(255,214,90,.55); animation-name: mxFxRainDot; animation-timing-function: linear; }
@keyframes mxFxRain { 0% { transform: translateY(0) rotateY(0deg) translateX(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--h)) rotateY(900deg) translateX(calc(var(--r) * 30px)); opacity: 0; } }
@keyframes mxFxRainCf { 0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--h)) rotate(calc(var(--r) * 720deg)) translateX(calc(var(--r) * 50px)); opacity: 0; } }
@keyframes mxFxRainDot { 0% { transform: translateY(0) scaleY(1); opacity: 0; } 10% { opacity: 1; } 90% { opacity: .9; } 100% { transform: translateY(var(--h)) scaleY(2.2); opacity: 0; } }

/* ---- фейерверк: маленькая вспышка (кольцо + искры уже стилизованы) ---- */
.mx-fx-fw .mx-fx__ring { left: -22px; top: -22px; width: 44px; height: 44px; border-width: 2px; animation-duration: .8s; }

/* ---- всплывающий текст ---- */
.mx-fx-txt__s {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
  font: 900 26px/1 -apple-system, "Inter", "Segoe UI", Arial, sans-serif; color: var(--c, #ffd65a);
  text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 18px var(--c, #ffd65a);
  animation: mxFxTxt 1.5s cubic-bezier(.2,.8,.3,1) forwards;
}
.mx-fx-txt--gold { --c: #ffd65a; }
.mx-fx-txt--green { --c: #4ade80; }
.mx-fx-txt--big .mx-fx-txt__s { font-size: 40px; }
.mx-fx-txt--sm .mx-fx-txt__s { font-size: 15px; font-weight: 800; }
.mx-fx-txt--red { --c: #f87171; }
.mx-fx-txt--red .mx-fx-txt__s { opacity: .9; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.mx-fx-txt--down .mx-fx-txt__s { animation-name: mxFxTxtDown; animation-duration: 1.4s; }
@keyframes mxFxTxtDown { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -30%) scale(1.1); opacity: 1; } 35% { transform: translate(-50%, -10%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, 70%) scale(.9); opacity: 0; } }
@keyframes mxFxTxt { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 15% { transform: translate(-50%, -60%) scale(1.15); opacity: 1; } 35% { transform: translate(-50%, -70%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -160%) scale(.9); opacity: 0; } }

/* ---- глитч (проигрыш) ---- */
.mx-fx-glitch { overflow: hidden; border-radius: 12px; }
.mx-fx-glitch__b { position: absolute; left: -10%; width: 120%; height: 14%; background: rgba(239,68,68,.55); mix-blend-mode: screen; opacity: 0; animation: mxFxGlitch .5s steps(3) forwards; }
@keyframes mxFxGlitch { 0% { transform: translateX(-6%); opacity: 0; } 20% { opacity: 1; } 50% { transform: translateX(6%); } 100% { transform: translateX(-3%); opacity: 0; } }

/* ---- вспышка экрана ---- */
.mx-fx-flash { position: absolute; left: 0; top: 0; right: 0; bottom: 0; --c: #ffd65a; background: radial-gradient(circle at 50% 40%, var(--c) 0%, transparent 70%); opacity: 0; animation: mxFxScreen .65s ease-out forwards; }
@keyframes mxFxScreen { 0% { opacity: 0; } 20% { opacity: .35; } 100% { opacity: 0; } }
.mx-fx-flash--weak { animation-name: mxFxScreenW; }
@keyframes mxFxScreenW { 0% { opacity: 0; } 20% { opacity: .16; } 100% { opacity: 0; } }

/* ---- звёздочка ---- */
.mx-fx-star__s { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; background: var(--c, #ffe066); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 8px var(--c, #ffe066)); opacity: 0; animation: mxFxStar .8s cubic-bezier(.2,.9,.3,1) forwards; }
.mx-fx-star__s--r { transform: rotate(45deg) scale(.7); animation-name: mxFxStarR; }
@keyframes mxFxStar { 0% { transform: scale(.2) rotate(0); opacity: 0; } 30% { transform: scale(1.3) rotate(20deg); opacity: 1; } 100% { transform: scale(.4) rotate(90deg); opacity: 0; } }
@keyframes mxFxStarR { 0% { transform: rotate(45deg) scale(.2); opacity: 0; } 30% { transform: rotate(70deg) scale(1); opacity: .9; } 100% { transform: rotate(160deg) scale(.3); opacity: 0; } }

/* ---- пыль (проигрыш) ---- */
.mx-fx-puff__p { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, var(--c, rgba(200,205,220,.85)) 0%, rgba(150,158,180,.35) 60%, transparent 100%); opacity: 0; animation: mxFxPuff 1.1s ease-out forwards; }
@keyframes mxFxPuff { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(var(--x), var(--y)) scale(2); opacity: 0; } }

/* ---- подсветка элементов результата (отдельные свойства scale/translate/rotate — не ломают transform) ---- */
.mx-fx-pop { animation: mxFxPop .9s cubic-bezier(.2,1.4,.4,1) both !important; }
@keyframes mxFxPop { 0% { scale: 1; } 35% { scale: 1.14; filter: brightness(1.25); } 100% { scale: 1; filter: none; } }
.mx-fx-shake { animation: mxFxShake .75s ease-in-out both !important; }
@keyframes mxFxShake { 0%, 100% { translate: 0 0; rotate: 0deg; } 15% { translate: -8px 0; rotate: -3deg; } 30% { translate: 8px 0; rotate: 3deg; } 45% { translate: -6px 0; } 60% { translate: 6px 0; } 78% { translate: -3px 0; } }
.mx-fx-glow { animation: mxFxGlow 1.3s ease-out both !important; }
@keyframes mxFxGlow { 0% { box-shadow: 0 0 0 0 rgba(255,214,90,.9); } 40% { box-shadow: 0 0 26px 6px rgba(255,214,90,.6); } 100% { box-shadow: 0 0 0 0 rgba(255,214,90,0); } }
.mx-fx-neon { animation: mxFxNeon 1.2s ease-out both !important; }
@keyframes mxFxNeon { 0% { scale: 1; text-shadow: 0 0 0 rgba(74,222,128,0); } 30% { scale: 1.18; text-shadow: 0 0 18px rgba(74,222,128,.95), 0 0 36px rgba(74,222,128,.6); filter: brightness(1.3); } 100% { scale: 1; text-shadow: 0 0 0 rgba(74,222,128,0); filter: none; } }
.mx-fx-dim { animation: mxFxDim .9s ease-out both !important; }
@keyframes mxFxDim { 0% { filter: none; } 25% { filter: grayscale(.8) brightness(.7); } 100% { filter: none; } }

/* ---- одно кольцо / вихрь при подбросе ---- */
.mx-fx-ring1__r { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid var(--c, #ffd65a); box-shadow: 0 0 12px var(--c, #ffd65a); opacity: 0; animation: mxFxRing1 .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes mxFxRing1 { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.mx-fx-swirl__r { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px dashed rgba(255,255,255,.6); box-shadow: 0 0 10px rgba(255,255,255,.25); opacity: 0; animation: mxFxSwirl 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes mxFxSwirl { 0% { transform: rotate(0deg) scale(.75); opacity: 0; } 15% { opacity: .9; } 70% { opacity: .6; } 100% { transform: rotate(720deg) scale(1.15); opacity: 0; } }

/* ---- свечение по форме элемента, волна по кнопке, луч, летящая фишка, летящая монета ---- */
.mx-fx-halo { box-shadow: 0 0 28px 8px var(--c, #ffd65a); opacity: 0; animation: mxFxHalo 1.3s ease-out forwards; }
@keyframes mxFxHalo { 0% { opacity: 0; } 30% { opacity: .8; } 100% { opacity: 0; } }
.mx-fx-ripple { overflow: hidden; }
.mx-fx-ripple__c { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--c, #fff) 0%, transparent 70%); opacity: .55; transform: scale(0); animation: mxFxRipple .75s ease-out forwards; }
@keyframes mxFxRipple { 0% { transform: scale(0); opacity: .6; } 100% { transform: scale(1); opacity: 0; } }
.mx-fx-beam { position: absolute; width: 6px; border-radius: 3px; --c: #22c55e; background: linear-gradient(to top, var(--c), rgba(255,255,255,.9) 60%, transparent); box-shadow: 0 0 12px var(--c); transform-origin: 50% 100%; opacity: 0; animation: mxFxBeam .85s ease-out forwards; }
@keyframes mxFxBeam { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: .95; } 100% { transform: scaleY(1) translateY(-8px); opacity: 0; } }
.mx-fx-flychip { position: absolute; left: -7px; top: -5px; width: 14px; height: 10px; border-radius: 3px; background: #f5c518; box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4); }
.mx-fx-flyc { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 35% 32%, #fff4c2 0%, #ffd24a 45%, #e59b00 100%); box-shadow: 0 0 8px rgba(255,214,90,.7), inset 0 0 0 1.5px rgba(255,255,255,.35); }

/* ---- отклики элементов: кошелёк, таймер, ячейки, барабаны, число кубика ---- */
.mx-fx-pillwin { animation: mxFxPill .9s ease-out both !important; }
@keyframes mxFxPill { 0% { scale: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0); } 30% { scale: 1.07; box-shadow: 0 0 22px 4px rgba(34,197,94,.55); } 100% { scale: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.mx-fx-tick { animation: mxFxTick .6s cubic-bezier(.2,1.2,.4,1) both !important; }
@keyframes mxFxTick { 0% { scale: 1; } 30% { scale: 1.28; filter: brightness(1.5); } 100% { scale: 1; filter: none; } }
.mx-fx-bump { animation: mxFxBump .5s cubic-bezier(.2,1.2,.4,1) both !important; }
@keyframes mxFxBump { 0% { scale: 1; } 40% { scale: 1.09; filter: brightness(1.2); } 100% { scale: 1; filter: none; } }
.mx-fx-jiggle { animation: mxFxJiggle .55s ease-out both !important; }
@keyframes mxFxJiggle { 0% { scale: 1; } 35% { scale: 1.12; filter: brightness(1.25); } 65% { scale: .95; } 100% { scale: 1; filter: none; } }
.mx-fx-thud { animation: mxFxThud .45s cubic-bezier(.2,.9,.3,1) both !important; }
@keyframes mxFxThud { 0% { translate: 0 0; } 40% { translate: 0 5px; } 75% { translate: 0 -2px; } 100% { translate: 0 0; } }
.mx-fx-lit { animation: mxFxLit .7s ease-out both !important; }
@keyframes mxFxLit { 0% { filter: brightness(1); } 35% { filter: brightness(1.55) saturate(1.2); } 100% { filter: brightness(1); } }
.mx-fx-roll { animation: mxFxRoll .65s steps(7) both !important; }
@keyframes mxFxRoll { 0% { translate: 0 0; filter: blur(0); } 15% { translate: -3px 1px; filter: blur(1.5px); } 30% { translate: 3px -1px; } 45% { translate: -2px -2px; filter: blur(1.5px); } 60% { translate: 2px 2px; } 80% { translate: -1px 0; filter: blur(.5px); } 100% { translate: 0 0; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
  .mx-fxl { display: none; }
  .mx-fx-pop, .mx-fx-shake, .mx-fx-glow, .mx-fx-neon, .mx-fx-dim, .mx-fx-pillwin, .mx-fx-tick, .mx-fx-bump, .mx-fx-jiggle, .mx-fx-thud, .mx-fx-roll, .mx-fx-lit { animation: none !important; }
}