#space-fx-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.sfx-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9998;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: sfx-ring-expand cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.sfx-ring.t2 {
  border: 1.5px solid rgba(180, 210, 255, 0.9);
}
.sfx-ring.t4 {
  border: 1.5px solid rgba(160, 130, 255, 0.9);
}
.sfx-ring.t8 {
  border: 2px solid rgba(70, 200, 255, 0.9);
}
.sfx-ring.t16 {
  border: 2px solid rgba(50, 230, 200, 0.9);
}
.sfx-ring.t32 {
  border: 2px solid rgba(80, 250, 140, 0.9);
}
.sfx-ring.t64 {
  border: 2.5px solid rgba(255, 200, 50, 0.9);
}
.sfx-ring.t128 {
  border: 2.5px solid rgba(255, 130, 40, 0.9);
}
.sfx-ring.t256 {
  border: 3px solid rgba(255, 60, 60, 0.95);
}
.sfx-ring.t512 {
  border: 3px solid rgba(220, 50, 230, 0.95);
}
.sfx-ring.t1024 {
  border: 3.5px solid rgba(100, 220, 255, 1);
}
.sfx-ring.t2048 {
  border: 4px solid rgba(255, 230, 70, 1);
}
@keyframes sfx-ring-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  25% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.sfx-flash {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9997;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: sfx-flash-burst 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sfx-flash.t2 {
  background: radial-gradient(
    circle,
    rgba(180, 210, 255, 0.55) 0%,
    transparent 70%
  );
}
.sfx-flash.t4 {
  background: radial-gradient(
    circle,
    rgba(160, 130, 255, 0.55) 0%,
    transparent 70%
  );
}
.sfx-flash.t8 {
  background: radial-gradient(
    circle,
    rgba(70, 200, 255, 0.6) 0%,
    transparent 70%
  );
}
.sfx-flash.t16 {
  background: radial-gradient(
    circle,
    rgba(50, 230, 200, 0.62) 0%,
    transparent 70%
  );
}
.sfx-flash.t32 {
  background: radial-gradient(
    circle,
    rgba(80, 250, 140, 0.65) 0%,
    transparent 70%
  );
}
.sfx-flash.t64 {
  background: radial-gradient(
    circle,
    rgba(255, 200, 50, 0.68) 0%,
    transparent 70%
  );
}
.sfx-flash.t128 {
  background: radial-gradient(
    circle,
    rgba(255, 130, 40, 0.72) 0%,
    transparent 70%
  );
}
.sfx-flash.t256 {
  background: radial-gradient(
    circle,
    rgba(255, 60, 60, 0.75) 0%,
    transparent 70%
  );
}
.sfx-flash.t512 {
  background: radial-gradient(
    circle,
    rgba(220, 50, 230, 0.78) 0%,
    transparent 70%
  );
}
.sfx-flash.t1024 {
  background: radial-gradient(
    circle,
    rgba(100, 220, 255, 0.82) 0%,
    transparent 70%
  );
}
.sfx-flash.t2048 {
  background: radial-gradient(
    circle,
    rgba(255, 230, 70, 0.92) 0%,
    transparent 70%
  );
}
@keyframes sfx-flash-burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  35% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}



.sfx-shake {
  animation: sfx-screen-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97)
    forwards !important;
}

.sfx-shake-heavy {
  animation: sfx-screen-shake-heavy 0.58s cubic-bezier(0.36, 0.07, 0.19, 0.97)
    forwards !important;
}

.sfx-shake-cosmic {
  animation: sfx-screen-shake-cosmic 0.78s cubic-bezier(0.36, 0.07, 0.19, 0.97)
    forwards !important;
}

@keyframes sfx-screen-shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(-7px, -4px) rotate(-0.4deg);
  }
  20% {
    transform: translate(7px, -3px) rotate(0.4deg);
  }
  30% {
    transform: translate(-6px, 5px) rotate(-0.3deg);
  }
  40% {
    transform: translate(6px, -5px) rotate(0.3deg);
  }
  50% {
    transform: translate(-4px, 4px) rotate(-0.2deg);
  }
  60% {
    transform: translate(4px, -3px) rotate(0.2deg);
  }
  70% {
    transform: translate(-3px, 3px) rotate(-0.1deg);
  }
  80% {
    transform: translate(3px, -2px) rotate(0.1deg);
  }
  90% {
    transform: translate(-1px, 1px) rotate(0deg);
  }
}
@keyframes sfx-screen-shake-heavy {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  8% {
    transform: translate(-14px, -8px) rotate(-0.8deg);
  }
  16% {
    transform: translate(13px, -6px) rotate(0.8deg);
  }
  24% {
    transform: translate(-11px, 10px) rotate(-0.6deg);
  }
  32% {
    transform: translate(12px, -10px) rotate(0.7deg);
  }
  40% {
    transform: translate(-9px, 8px) rotate(-0.5deg);
  }
  48% {
    transform: translate(9px, -7px) rotate(0.5deg);
  }
  56% {
    transform: translate(-7px, 6px) rotate(-0.3deg);
  }
  64% {
    transform: translate(6px, -5px) rotate(0.3deg);
  }
  72% {
    transform: translate(-4px, 4px) rotate(-0.2deg);
  }
  84% {
    transform: translate(3px, -2px) rotate(0.1deg);
  }
  92% {
    transform: translate(-2px, 1px) rotate(0deg);
  }
}

@keyframes sfx-screen-shake-cosmic {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  5% {
    transform: translate(-20px, -12px) rotate(-1.2deg);
  }
  10% {
    transform: translate(19px, -10px) rotate(1.2deg);
  }
  15% {
    transform: translate(-17px, 15px) rotate(-0.9deg);
  }
  20% {
    transform: translate(18px, -15px) rotate(1deg);
  }
  25% {
    transform: translate(-15px, 12px) rotate(-0.8deg);
  }
  30% {
    transform: translate(14px, -11px) rotate(0.7deg);
  }
  38% {
    transform: translate(-11px, 9px) rotate(-0.5deg);
  }
  46% {
    transform: translate(10px, -8px) rotate(0.4deg);
  }
  55% {
    transform: translate(-7px, 6px) rotate(-0.3deg);
  }
  65% {
    transform: translate(6px, -5px) rotate(0.2deg);
  }
  75% {
    transform: translate(-4px, 3px) rotate(-0.1deg);
  }
  88% {
    transform: translate(2px, -2px) rotate(0deg);
  }
}


.tile-2.tile-merged {
  animation:
    tile-pop 0.22s ease-out 0.1s both,
    sfx-glow-2 0.36s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes sfx-glow-2 {
  0% {
    box-shadow: 0 0 0 0 rgba(180, 210, 255, 0);
  }
  35% {
    box-shadow: 0 0 14px 6px rgba(180, 210, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(180, 210, 255, 0);
  }
}

.tile-4.tile-merged {
  animation:
    tile-pop 0.22s ease-out 0.1s both,
    sfx-glow-4 0.39s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes sfx-glow-4 {
  0% {
    box-shadow: 0 0 0 0 rgba(160, 130, 255, 0);
  }
  35% {
    box-shadow: 0 0 16px 7px rgba(160, 130, 255, 0.75);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(160, 130, 255, 0);
  }
}

.tile-8.tile-merged {
  animation:
    tile-pop-strong 0.26s ease-out 0.1s both,
    sfx-glow-8 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes sfx-glow-8 {
  0% {
    box-shadow: 0 0 0 0 rgba(70, 200, 255, 0);
  }
  30% {
    box-shadow: 0 0 20px 8px rgba(70, 200, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(70, 200, 255, 0);
  }
}

.tile-16.tile-merged {
  animation:
    tile-pop-strong 0.26s ease-out 0.1s both,
    sfx-glow-16 0.49s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes sfx-glow-16 {
  0% {
    box-shadow: 0 0 0 0 rgba(50, 230, 200, 0);
  }
  30% {
    box-shadow: 0 0 22px 9px rgba(50, 230, 200, 0.82);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(50, 230, 200, 0);
  }
}

.tile-32.tile-merged {
  animation:
    tile-pop-strong 0.28s ease-out 0.1s both,
    sfx-glow-32 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes sfx-glow-32 {
  0% {
    box-shadow: 0 0 0 0 rgba(80, 250, 140, 0);
  }
  25% {
    box-shadow: 0 0 26px 10px rgba(80, 250, 140, 0.85);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(80, 250, 140, 0);
  }
}

.tile-64.tile-merged {
  animation:
    tile-pop-flare 0.3s ease-out 0.1s both,
    sfx-glow-64 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes sfx-glow-64 {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 200, 50, 0);
  }
  25% {
    box-shadow: 0 0 30px 12px rgba(255, 200, 50, 0.88);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 200, 50, 0);
  }
}


.tile-128.tile-merged {
  animation:
    tile-pop-flare 0.3s ease-out 0.1s both,
    sfx-glow-128 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes sfx-glow-128 {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 130, 40, 0);
  }
  20% {
    box-shadow: 0 0 36px 14px rgba(255, 130, 40, 0.9);
  }
  55% {
    box-shadow: 0 0 20px 6px rgba(255, 130, 40, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 130, 40, 0);
  }
}

.tile-256.tile-merged {
  animation:
    tile-pop-supernova 0.32s ease-out 0.1s both,
    sfx-glow-256 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes sfx-glow-256 {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 60, 60, 0),
      inset 0 0 0 0 rgba(255, 60, 60, 0);
  }
  18% {
    box-shadow:
      0 0 42px 16px rgba(255, 60, 60, 0.9),
      inset 0 0 16px 4px rgba(255, 80, 80, 0.3);
  }
  55% {
    box-shadow:
      0 0 24px 8px rgba(255, 60, 60, 0.5),
      inset 0 0 8px 2px rgba(255, 80, 80, 0.15);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(255, 60, 60, 0),
      inset 0 0 0 0 rgba(255, 60, 60, 0);
  }
}


.tile-512.tile-merged {
  animation:
    tile-pop-supernova 0.32s ease-out 0.1s both,
    sfx-glow-512 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes sfx-glow-512 {
  0% {
    box-shadow:
      0 0 0 0 rgba(220, 50, 230, 0),
      inset 0 0 0 0 rgba(220, 50, 230, 0);
  }
  12% {
    box-shadow:
      0 0 70px 26px rgba(220, 50, 230, 1),
      0 0 140px 50px rgba(180, 20, 200, 0.5),
      inset 0 0 28px 8px rgba(220, 50, 230, 0.55);
  }
  40% {
    box-shadow:
      0 0 40px 14px rgba(220, 50, 230, 0.65),
      inset 0 0 14px 4px rgba(220, 50, 230, 0.3);
  }
  70% {
    box-shadow:
      0 0 18px 6px rgba(220, 50, 230, 0.35),
      inset 0 0 6px 2px rgba(220, 50, 230, 0.15);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(220, 50, 230, 0),
      inset 0 0 0 0 rgba(220, 50, 230, 0);
  }
}


.tile-1024.tile-merged {
  animation:
    tile-pop-supernova 0.34s ease-out 0.1s both,
    sfx-glow-1024 0.97s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
    sfx-corona-1024 1.17s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
@keyframes sfx-glow-1024 {
  0% {
    box-shadow:
      0 0 0 0 rgba(100, 220, 255, 0),
      inset 0 0 0 0 rgba(100, 220, 255, 0);
  }
  10% {
    box-shadow:
      0 0 80px 32px rgba(100, 220, 255, 1),
      0 0 160px 60px rgba(60, 180, 240, 0.55),
      inset 0 0 35px 10px rgba(100, 220, 255, 0.6);
  }
  35% {
    box-shadow:
      0 0 50px 18px rgba(100, 220, 255, 0.7),
      inset 0 0 20px 6px rgba(100, 220, 255, 0.35);
  }
  65% {
    box-shadow:
      0 0 24px 8px rgba(100, 220, 255, 0.4),
      inset 0 0 10px 3px rgba(100, 220, 255, 0.2);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(100, 220, 255, 0),
      inset 0 0 0 0 rgba(100, 220, 255, 0);
  }
}
@keyframes sfx-corona-1024 {
  0% {
    box-shadow:
      0 0 0 0 rgba(100, 220, 255, 0),
      0 0 0 0 rgba(100, 220, 255, 0);
  }
  15% {
    box-shadow:
      0 0 0 14px rgba(100, 220, 255, 0.5),
      0 0 0 28px rgba(100, 220, 255, 0.22);
  }
  55% {
    box-shadow:
      0 0 0 22px rgba(100, 220, 255, 0.25),
      0 0 0 44px rgba(100, 220, 255, 0.1);
  }
  100% {
    box-shadow:
      0 0 0 38px rgba(100, 220, 255, 0),
      0 0 0 76px rgba(100, 220, 255, 0);
  }
}


.tile-2048.tile-merged {
  animation:
    tile-pop-cosmic 0.38s ease-out 0.1s both,
    sfx-glow-2048 1.17s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
    sfx-corona-2048 1.43s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both,
    sfx-shimmer-2048 1.82s ease-in-out 0.4s infinite;
}
@keyframes sfx-glow-2048 {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 230, 70, 0),
      inset 0 0 0 0 rgba(255, 230, 70, 0);
  }
  8% {
    box-shadow:
      0 0 90px 38px rgba(255, 230, 70, 1),
      0 0 180px 70px rgba(255, 160, 0, 0.7),
      0 0 260px 90px rgba(255, 100, 0, 0.3),
      inset 0 0 40px 12px rgba(255, 230, 70, 0.75);
  }
  30% {
    box-shadow:
      0 0 60px 24px rgba(255, 230, 70, 0.8),
      0 0 100px 40px rgba(255, 160, 0, 0.4),
      inset 0 0 24px 8px rgba(255, 230, 70, 0.45);
  }
  60% {
    box-shadow:
      0 0 36px 14px rgba(255, 230, 70, 0.55),
      inset 0 0 14px 5px rgba(255, 230, 70, 0.25);
  }
  100% {
    box-shadow:
      0 0 22px 8px rgba(255, 230, 70, 0.4),
      inset 0 0 10px 3px rgba(255, 230, 70, 0.18);
  }
}
@keyframes sfx-corona-2048 {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 230, 70, 0),
      0 0 0 0 rgba(255, 200, 0, 0);
  }
  12% {
    box-shadow:
      0 0 0 18px rgba(255, 230, 70, 0.7),
      0 0 0 38px rgba(255, 200, 0, 0.35);
  }
  45% {
    box-shadow:
      0 0 0 30px rgba(255, 230, 70, 0.38),
      0 0 0 62px rgba(255, 200, 0, 0.18);
  }
  100% {
    box-shadow:
      0 0 0 50px rgba(255, 230, 70, 0),
      0 0 0 100px rgba(255, 200, 0, 0);
  }
}
@keyframes sfx-shimmer-2048 {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.25) saturate(1.3);
  }
}

.tile-super.tile-merged {
  animation:
    tile-pop-cosmic 0.36s ease-out 0.1s both,
    sfx-glow-super 1.04s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}


.tile-undo-split {
  opacity: 0;
  animation:
    tile-fission-appear 0.52s cubic-bezier(0.16, 1, 0.3, 1) both,
    sfx-fission-glow 0.65s ease-out both;
}

@keyframes tile-fission-appear {
  0% {
    transform: scale(0.4);
    opacity: 0;
    filter: brightness(3) saturate(0) hue-rotate(180deg);
  }
  20% {
    transform: scale(1.12);
    opacity: 0.85;
    filter: brightness(1.9) saturate(0.5) hue-rotate(60deg);
  }
  48% {
    transform: scale(0.96);
    opacity: 1;
    filter: brightness(1.18) saturate(0.95) hue-rotate(10deg);
  }
  72% {
    transform: scale(1.02);
    filter: brightness(1.05) saturate(1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1) saturate(1) hue-rotate(0deg);
  }
}

@keyframes sfx-fission-glow {
  0% {
    box-shadow:
      0 0 0 0 rgba(100, 210, 255, 0),
      inset 0 0 0 0 rgba(100, 210, 255, 0);
  }
  18% {
    box-shadow:
      0 0 16px 6px rgba(100, 210, 255, 0.75),
      0 0 32px 12px rgba(60, 160, 255, 0.28),
      inset 0 0 8px 2px rgba(120, 220, 255, 0.25);
  }
  55% {
    box-shadow:
      0 0 7px 2px rgba(100, 210, 255, 0.3),
      inset 0 0 3px 1px rgba(120, 220, 255, 0.08);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(100, 210, 255, 0),
      inset 0 0 0 0 rgba(100, 210, 255, 0);
  }
}

.sfx-undo-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  border: 2px solid rgba(100, 210, 255, 0.92);
  transform: translate(-50%, -50%) scale(1.8);
  animation: sfx-undo-ring-contract 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.sfx-undo-ring.inner {
  border-color: rgba(160, 240, 255, 0.7);
  border-width: 1.5px;
}
.sfx-undo-ring.outer {
  border-color: rgba(60, 140, 255, 0.55);
  border-width: 1px;
}
@keyframes sfx-undo-ring-contract {
  0% {
    transform: translate(-50%, -50%) scale(1.9);
    opacity: 0.8;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  55% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.7;
  }
  80% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

.sfx-undo-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9994;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(40, 130, 255, 0.13) 0%,
    rgba(20, 80, 200, 0.07) 50%,
    transparent 72%
  );
  animation: sfx-undo-overlay-fade 0.65s ease-out forwards;
}

@keyframes sfx-undo-overlay-fade {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}

.sfx-undo-flash {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(
    circle,
    rgba(140, 220, 255, 0.7) 0%,
    rgba(80, 170, 255, 0.35) 40%,
    transparent 72%
  );
  transform: translate(-50%, -50%) scale(0);
  animation: sfx-undo-flash-burst 0.4s ease-out forwards;
}
@keyframes sfx-undo-flash-burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  12% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
  }
  35% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.85;
  }
  65% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0.45;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}
@keyframes sfx-glow-super {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  10% {
    box-shadow: 0 0 80px 30px rgba(255, 255, 255, 1);
  }
  40% {
    box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.4);
  }
}




@keyframes tile-pop {
  0% {
    transform: scale(0.82);
  }
  45% {
    transform: scale(1.12);
  }
  72% {
    transform: scale(0.97);
  }
  88% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes tile-pop-strong {
  0% {
    transform: scale(0.68);
  }
  40% {
    transform: scale(1.16);
  }
  68% {
    transform: scale(0.95);
  }
  84% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tile-pop-flare {
  0% {
    transform: scale(0.55);
  }
  38% {
    transform: scale(1.2);
  }
  64% {
    transform: scale(0.93);
  }
  82% {
    transform: scale(1.05);
  }
  93% {
    transform: scale(0.99);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tile-pop-supernova {
  0% {
    transform: scale(0.42);
  }
  32% {
    transform: scale(1.25);
  }
  58% {
    transform: scale(0.91);
  }
  76% {
    transform: scale(1.06);
  }
  90% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tile-pop-cosmic {
  0% {
    transform: scale(0.28);
    filter: brightness(4) saturate(2) hue-rotate(20deg);
  }
  28% {
    transform: scale(1.3);
    filter: brightness(2) saturate(1.4) hue-rotate(10deg);
  }
  52% {
    transform: scale(0.88);
    filter: brightness(1.2) saturate(1.1) hue-rotate(3deg);
  }
  70% {
    transform: scale(1.08);
    filter: brightness(1.05) saturate(1);
  }
  85% {
    transform: scale(0.97);
    filter: brightness(1) saturate(1);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}

.sfx-nebula {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9996;
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: sfx-nebula-puff 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sfx-nebula.t128 {
  background: radial-gradient(
    circle,
    rgba(255, 130, 40, 0.25) 0%,
    rgba(255, 80, 0, 0.08) 50%,
    transparent 80%
  );
}
.sfx-nebula.t256 {
  background: radial-gradient(
    circle,
    rgba(255, 60, 60, 0.28) 0%,
    rgba(220, 0, 0, 0.1) 50%,
    transparent 80%
  );
}
.sfx-nebula.t512 {
  background: radial-gradient(
    circle,
    rgba(220, 50, 230, 0.3) 0%,
    rgba(140, 0, 200, 0.1) 50%,
    transparent 80%
  );
}
.sfx-nebula.t1024 {
  background: radial-gradient(
    circle,
    rgba(100, 220, 255, 0.32) 0%,
    rgba(0, 140, 220, 0.12) 50%,
    transparent 80%
  );
}
.sfx-nebula.t2048 {
  background: radial-gradient(
    circle,
    rgba(255, 230, 70, 0.4) 0%,
    rgba(255, 140, 0, 0.18) 50%,
    transparent 80%
  );
}
@keyframes sfx-nebula-puff {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
  }
  45% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.65;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.sfx-screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9994;
  animation: sfx-screen-flash-fade 0.7s ease-out forwards;
}
.sfx-screen-flash.t1024 {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(100, 220, 255, 0.22) 0%,
    rgba(60, 180, 240, 0.1) 50%,
    transparent 75%
  );
}
.sfx-screen-flash.t2048 {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 240, 80, 0.35) 0%,
    rgba(255, 160, 0, 0.18) 50%,
    transparent 75%
  );
}
@keyframes sfx-screen-flash-fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

.tile-merged.sfx-shimmer {
  animation-name: tile-pop, sfx-tile-shimmer;
  animation-duration: 0.22s, 0.6s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-out;
  animation-delay: 0.12s, 0.28s;
  animation-fill-mode: both, forwards;
}
@keyframes sfx-tile-shimmer {
  0% {
    filter: brightness(1) saturate(1);
  }
  25% {
    filter: brightness(1.6) saturate(1.5);
  }
  100% {
    filter: brightness(1) saturate(1);
  }
}

.tile-bh-suck {
  animation: tile-remove-ember 550ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 20 !important;
  overflow: visible;
  transform-origin: center center;
}


.tile-bh-suck::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 21;
  background: transparent;
  border: 2px solid rgba(255, 40, 20, 0);
  box-shadow: 0 0 0 0 rgba(255, 40, 20, 0);
  animation: remove-glow-ring 500ms ease-out forwards;
}


.tile-bh-suck::after {
  display: none;
}

@keyframes tile-remove-ember {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1) blur(0px);
    box-shadow: 0 0 0 0 rgba(220, 30, 0, 0);
  }
  12% {
    transform: scale(1.06) rotate(0deg);
    opacity: 1;
    filter: brightness(1.6) blur(0px);
    box-shadow:
      0 0 18px 6px rgba(255, 50, 10, 0.5),
      0 0 4px 2px rgba(255, 120, 40, 0.8);
  }
  30% {
    transform: scale(0.85) rotate(2deg);
    opacity: 0.9;
    filter: brightness(1.2) saturate(1.5) blur(0.3px);
    box-shadow:
      0 0 14px 5px rgba(200, 20, 0, 0.4),
      0 0 3px 1px rgba(255, 80, 20, 0.6);
  }
  55% {
    transform: scale(0.45) rotate(5deg);
    opacity: 0.6;
    filter: brightness(0.7) saturate(2) blur(0.8px);
    box-shadow:
      0 0 10px 4px rgba(150, 0, 0, 0.35),
      0 0 2px 1px rgba(255, 60, 10, 0.4);
  }
  80% {
    transform: scale(0.15) rotate(8deg);
    opacity: 0.25;
    filter: brightness(0.3) saturate(1) blur(1.5px);
    box-shadow: 0 0 6px 3px rgba(80, 0, 0, 0.3);
  }
  100% {
    transform: scale(0) rotate(10deg);
    opacity: 0;
    filter: brightness(0) blur(3px);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}


@keyframes remove-glow-ring {
  0% {
    border-color: rgba(255, 40, 20, 0);
    box-shadow: 0 0 0 0 rgba(255, 40, 20, 0);
    opacity: 0;
  }
  20% {
    border-color: rgba(255, 60, 20, 0.8);
    box-shadow:
      0 0 12px 4px rgba(255, 40, 10, 0.5),
      inset 0 0 8px 2px rgba(255, 80, 30, 0.3);
    opacity: 1;
  }
  50% {
    border-color: rgba(200, 20, 0, 0.5);
    box-shadow:
      0 0 8px 3px rgba(180, 20, 0, 0.3),
      inset 0 0 5px 1px rgba(200, 40, 10, 0.2);
    opacity: 0.6;
  }
  100% {
    border-color: rgba(80, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    opacity: 0;
  }
}