.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.fx-pop {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,220,80,0.95) 30%, rgba(255,90,30,0.7) 58%, rgba(255,0,0,0) 72%);
  box-shadow:
    0 0 12px rgba(255,255,255,1),
    0 0 28px rgba(255,190,60,0.95),
    0 0 46px rgba(255,80,20,0.65);
  animation: fx-pop-burst 320ms ease-out forwards;
}

.fx-ring {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.95);
  transform: translate(-50%, -50%) scale(0.2);
  box-shadow:
    0 0 16px rgba(255,255,255,1),
    0 0 34px rgba(255,200,80,0.9);
  animation: fx-ring-burst 380ms ease-out forwards;
}

.fx-spark {
  position: absolute;
  width: 8px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,240,120,1);
  box-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 18px rgba(255,180,40,0.9);
  transform-origin: center;
  animation: fx-spark-burst 360ms ease-out forwards;
}

.fx-line {
  position: absolute;
  background: rgba(120, 220, 255, 0.95);
  box-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 22px rgba(120,220,255,1),
    0 0 44px rgba(50,150,255,0.8);
  border-radius: 999px;
  transform-origin: center;
  animation: fx-line-burst 300ms ease-out forwards;
}

.fx-line.row {
  height: 14px;
}

.fx-line.col {
  width: 14px;
}

.fx-combo-cinema {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.22);
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,228,112,0.9) 28%, rgba(255,112,38,0.42) 54%, rgba(255,80,20,0) 72%);
  box-shadow:
    0 0 18px rgba(255,255,255,0.72),
    0 0 42px rgba(255,204,88,0.76),
    0 0 72px rgba(255,92,28,0.42);
  animation:
    fx-combo-cinema-burst 740ms cubic-bezier(.18,.9,.24,1) forwards;
}

.fx-combo-shockwave {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid rgba(255,242,166,0.88);
  transform: translate(-50%, -50%) scale(0.32);
  box-shadow:
    0 0 18px rgba(255,255,255,0.58),
    0 0 34px rgba(255,204,80,0.54);
  animation:
    fx-combo-shockwave 780ms ease-out forwards;
}

@keyframes fx-pop-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.25);
  }

  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.35);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.1);
  }
}

@keyframes fx-ring-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.2);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

@keyframes fx-spark-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scaleY(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-54px) scaleY(0.25);
  }
}

@keyframes fx-line-burst {
  0% {
    opacity: 0;
    transform: scaleX(0.1);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes fx-combo-cinema-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
  }

  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.78);
  }

  66% {
    opacity: 0.94;
    transform: translate(-50%, -50%) scale(1.16);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

@keyframes fx-combo-shockwave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.32);
  }

  14% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.6);
  }
}

/* =========================================
   BOARD HIT
========================================= */

.board-hit {
  animation:
    boardHit 180ms ease;
}

@keyframes boardHit {

  0% {
    transform: translate3d(0,0,0);
  }

  20% {
    transform: translate3d(-2px,0,0);
  }

  40% {
    transform: translate3d(2px,0,0);
  }

  60% {
    transform: translate3d(-1px,0,0);
  }

  100% {
    transform: translate3d(0,0,0);
  }
}

/* =========================================
   TILE HIT FLASH
========================================= */

.tile.hit-flash::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.35) 40%,
      rgba(255,255,255,0) 80%
    );

  animation:
    tileHitFlash 220ms ease-out forwards;

  pointer-events: none;
}

@keyframes tileHitFlash {

  0% {
    opacity: 1;
    transform: scale(0.82);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

/* =========================================
   TILE SQUASH
========================================= */

.tile.tile-impact {
  animation:
    tileImpact 180ms ease-out;
}

@keyframes tileImpact {

  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.08);
  }

  60% {
    transform: scale(0.96);
  }

  100% {
    transform: scale(1);
  }
}
/* =========================================
   COMBO FLOAT SUTIL
========================================= */

.fx-combo-text {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.85);
  font-size: 18px;
  font-weight: 800;
  color: rgba(255, 235, 150, 0.95);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.7),
    0 0 8px rgba(255,200,80,0.55);
  letter-spacing: 0.5px;
  opacity: 0;
  animation: fxComboFloat 720ms ease-out forwards;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes fxComboFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.82);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(0.96);
  }
}
/* =========================================
   SPECIAL ANTICIPATION
========================================= */

.tile.pre-explode {
  animation:
    preExplode 140ms ease-out;
}

@keyframes preExplode {

  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  45% {
    transform: scale(0.88);
    filter:
      brightness(1.35)
      saturate(1.15);
  }

  100% {
    transform: scale(1.08);
    filter:
      brightness(1.6)
      saturate(1.25);
  }
}

/* =========================================
   ROCKET CHARGE
========================================= */

.tile.special-row.pre-explode::before,
.tile.special-col.pre-explode::before {

  animation:
    rocketCharge 140ms ease-out;
}

@keyframes rocketCharge {

  0% {
    opacity: 0.7;
    filter: blur(0px);
  }

  100% {
    opacity: 1;
    filter: blur(2px);
  }
}

/* =========================================
   BOMB CHARGE
========================================= */

.tile.special-bomb.pre-explode::before,
.tile.special-wrap.pre-explode::before {

  animation:
    bombCharge 140ms ease-out;
}

@keyframes bombCharge {

  0% {
    transform: scale(0.9);
    opacity: 0.75;
  }

  100% {
    transform: scale(1.22);
    opacity: 1;
  }
}


.tile.hit-pop{
  animation:tileHitPop 180ms ease;
}

@keyframes tileHitPop{

  0%{
    transform:scale(1);
  }

  35%{
    transform:scale(1.12);
  }

  100%{
    transform:scale(1);
  }
}
.tile.special-burst{
  animation:specialBurst 260ms ease;
  z-index:20;
}

@keyframes specialBurst{

  0%{
    transform:scale(1);
    filter:brightness(1);
  }

  30%{
    transform:scale(1.22);
    filter:
      brightness(1.35)
      saturate(1.25);
  }

  100%{
    transform:scale(1);
    filter:brightness(1);
  }
}
#board.board-shake{
  animation:boardShake 180ms ease;
}

@keyframes boardShake{

  0%{
    transform:translate(0,0);
  }

  20%{
    transform:translate(-2px,1px);
  }

  40%{
    transform:translate(2px,-1px);
  }

  60%{
    transform:translate(-1px,2px);
  }

  80%{
    transform:translate(1px,-1px);
  }

  100%{
    transform:translate(0,0);
  }
}
.combo-text{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:100;

  font-size:42px;
  font-weight:900;
  letter-spacing:2px;

  color:#ffffff;

  text-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 0 10px rgba(255,255,255,0.35);

  pointer-events:none;

  animation:comboFloat 700ms ease forwards;
}

.combo-text.combo-2{
  color:#7fd3ff;
}

.combo-text.combo-3{
  color:#ffe27a;
}

.combo-text.combo-4{
  color:#ff9f5f;
}

.combo-text.combo-5{
  color:#ff5f7d;
}

@keyframes comboFloat{

  0%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      scale(0.7);
  }

  20%{
    opacity:1;
    transform:
      translate(-50%, -58%)
      scale(1.1);
  }

  100%{
    opacity:0;
    transform:
      translate(-50%, -90%)
      scale(1);
    }
}
.tile[data-special]{
  z-index:5;
}

.tile[data-special]:not(.block):not(.ice)::before{
  content:"";

  position:absolute;
  inset:-8%;

  border-radius:22%;
  filter:
  brightness(1.06)
  saturate(1.08);

  opacity:0.75;

  pointer-events:none;

  animation:none;
}

.tile.special-row:not(.block):not(.ice)::before,
.tile.special-col:not(.block):not(.ice)::before{
  background:
    radial-gradient(
      circle,
      rgba(120,220,255,0.45) 0%,
      rgba(120,220,255,0) 72%
    );
}

.tile.special-bomb:not(.block):not(.ice)::before{
  background:
    radial-gradient(
      circle,
      rgba(255,180,80,0.5) 0%,
      rgba(255,180,80,0) 72%
    );
}

.tile.special-wrap:not(.block):not(.ice)::before{
  background:
    radial-gradient(
      circle,
      rgba(255,120,220,0.5) 0%,
      rgba(255,120,220,0) 72%
    );
}

.tile.special-color:not(.block):not(.ice)::before{
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.7) 0%,
      rgba(255,255,255,0) 72%
    );
}

@keyframes specialPulse{

  0%{
    transform:scale(0.92);
    opacity:0.45;
  }

  50%{
    transform:scale(1.08);
    opacity:0.62;
  }

  100%{
    transform:scale(0.92);
    opacity:0.45;
  }
}
.tile.hit-pop,
.tile.special-burst{
  animation-duration:180ms;
}

.tile:not(.block):not(.ice)::after{
  content:"";

  position:absolute;

  top:6%;
  left:10%;
  right:10%;
  height:34%;

  border-radius:50%;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.28),
      rgba(255,255,255,0)
    );

  pointer-events:none;
  opacity:0.55;

  transition:
  opacity 180ms ease,
  transform 180ms ease;
}
.tile:not(.block):not(.ice):hover::after,
.tile.selected:not(.block):not(.ice)::after{

  opacity:0.9;

  transform:
    translateY(-1px)
    scaleY(1.08);
}
#board.board-shake-light{
  animation:
    boardShakeLight 140ms ease;
}

#board.board-shake-medium{
  animation:
    boardShakeMedium 180ms ease;
}

#board.board-shake-heavy{

  animation:
    boardShakeHeavy 240ms ease;

  filter:
    brightness(1.04)
    saturate(1.06);
}

.tile.selected{

  box-shadow:

    inset 0 2px 0 rgba(255,255,255,0.24),

    inset 0 -5px 10px rgba(0,0,0,0.24),

    0 4px 10px rgba(0,0,0,0.18),

    0 10px 18px rgba(0,0,0,0.22);
}
@keyframes boardShakeLight{

  0%{ transform:translate(0,0); }

  25%{ transform:translate(-1px,1px); }

  50%{ transform:translate(1px,-1px); }

  100%{ transform:translate(0,0); }
}

@keyframes boardShakeMedium{

  0%{ transform:translate(0,0); }

  20%{ transform:translate(-2px,1px); }

  40%{ transform:translate(2px,-2px); }

  60%{ transform:translate(-1px,2px); }

  100%{ transform:translate(0,0); }
}

@keyframes boardShakeHeavy{

  0%{
    transform:
      translate(0,0)
      scale(1);
  }

  15%{
    transform:
      translate(-4px,2px)
      scale(1.01);
  }

  35%{
    transform:
      translate(4px,-3px)
      scale(1.015);
  }

  55%{
    transform:
      translate(-3px,3px)
      scale(1.008);
  }

  75%{
    transform:
      translate(2px,-2px)
      scale(1.003);
  }

  100%{
    transform:
      translate(0,0)
      scale(1);
  }
}
.tile.break-flash{

  animation:
    breakFlash 180ms ease;

  z-index:30;
}

@keyframes breakFlash{

  0%{
    transform:scale(1);
    opacity:1;
    filter:brightness(1.45);
  }

  35%{
    transform:scale(1.18);
    opacity:1;
    filter:
      brightness(1.8)
      saturate(1.4);
  }

  100%{
    transform:scale(0.72);
    opacity:0;
    filter:brightness(1);
  }
}
.tile-special-asset{

  position:absolute;
  inset:0;

  background-size:78%;
  background-position:center;
  background-repeat:no-repeat;

  z-index:8;

  animation:none;
   
    filter:
  drop-shadow(
    0 0 8px rgba(255,255,255,0.10)
  );

}

@keyframes specialCorePulse{

  0%{
    transform:scale(0.96);
    filter:
      brightness(1)
      saturate(1);
  }

  50%{
    transform:scale(1.04);
    filter:
      brightness(1.22)
      saturate(1.18);
  }

  100%{
    transform:scale(0.96);
    filter:
      brightness(1)
      saturate(1);
  }
}
.tile.special-row.break-flash,
.tile.special-col.break-flash{

  animation:
    rocketBreak 180ms ease;
}

.tile.special-bomb.break-flash{

  animation:
    bombBreak 240ms ease;
}

.tile.special-wrap.break-flash{

  animation:
    wrapBreak 320ms ease;
}

.tile.special-color.break-flash{

  animation:
    colorBreak 420ms ease;
}

@keyframes rocketBreak{

  0%{
    transform:scale(1);
    filter:brightness(1);
  }

  50%{
    transform:scale(1.22);
    filter:
      brightness(1.8)
      saturate(1.5);
  }

  100%{
    transform:scale(0.6);
    opacity:0;
  }
}

@keyframes bombBreak{

  0%{
    transform:scale(1);
  }

  30%{
    transform:scale(1.75);
  }

  100%{
    transform:scale(0.3);
    opacity:0;
  }
}

@keyframes wrapBreak{

  0%{
    transform:
      scale(1)
      rotate(0deg);
  }

  40%{
    transform:
      scale(1.45)
      rotate(18deg);
  }

  100%{
    transform:
      scale(0.2)
      rotate(45deg);

    opacity:0;
  }
}

@keyframes colorBreak{

  0%{
    transform:scale(1);
    filter:
      brightness(1);
  }

  40%{
    transform:scale(1.6);
    filter:
      brightness(2.2)
      saturate(1.8);
  }

  100%{
    transform:scale(0);
    opacity:0;
  }
}

#board::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0) 60%
    );

  pointer-events:none;

  z-index:0;
}
.tile.selected{

  z-index:40;

  animation:
    tileSelectedPulse 1.2s ease-out;

  filter:none;
}

.tile.selected:not(.block):not(.ice)::before{

  opacity:1 !important;
}

@keyframes tileSelectedPulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.05);
  }

  100%{
    transform:scale(1);
  }
}
#board.energy-flash::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  border-radius:inherit;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0) 72%
    );

  animation:
    boardEnergyFlash 240ms ease-out;
}

@keyframes boardEnergyFlash{

  0%{
    opacity:0;
    transform:scale(0.96);
  }

  30%{
    opacity:0.72;
    transform:scale(1.02);
  }

  100%{
    opacity:0;
    transform:scale(1.06);
  }
}
#board.combo-focus .tile{
  transition:none;
}

#board.combo-focus .tile.break-flash,
#board.combo-focus .tile.special-burst,
#board.combo-focus .tile.selected{

  filter:
    brightness(1.18)
    saturate(1.12);
}
#board.reward-flash::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  pointer-events:none;

  background:
    radial-gradient(
      circle at center,
      rgba(255,220,120,0.14),
      rgba(255,220,120,0) 70%
    );

  animation:
    rewardFlash 260ms ease-out;
}

@keyframes rewardFlash{

  0%{
    opacity:0;
    transform:scale(0.96);
  }

  40%{
    opacity:1;
    transform:scale(1.03);
  }

  100%{
    opacity:0;
    transform:scale(1.08);
  }
}
.tile.swap-success{

  animation:
    swapSnap 180ms ease;
}

@keyframes swapSnap{

  0%{
    transform:scale(1);
  }

  40%{
    transform:scale(1.12);
  }

  100%{
    transform:scale(1);
  }
}
.tile.match-link{

  z-index:25;

  box-shadow:

    0 0 12px rgba(255,255,255,0.16),

    0 0 24px rgba(255,220,120,0.14);

  transition:
    box-shadow 120ms ease;
}
#board.combo-pressure{

  animation:
    boardPressure 220ms ease;
}

@keyframes boardPressure{

  0%{
    transform:scale(1);
  }

  40%{
    transform:scale(0.992);
  }

  100%{
    transform:scale(1);
  }
}

@keyframes boardAmbientBreath{

  0%{
    filter:
      brightness(1)
      saturate(1);
  }

  50%{
    filter:
      brightness(1.008)
      saturate(1.01);
  }

  100%{
    filter:
      brightness(1)
      saturate(1);
  }
}



@keyframes cascadeRecovery{

  0%{
    filter:
      brightness(1.04)
      saturate(1.06);
  }

  100%{
    filter:
      brightness(1)
      saturate(1);
  }
}
/* =========================================
   ANDROID FX SAFE MODE
========================================= */

@media (hover:none) and (pointer:coarse){

  .fx-pop,
  .fx-ring,
  .fx-spark,
  .fx-line,
  .fx-combo-cinema,
  .fx-combo-shockwave{
    box-shadow:none !important;
    filter:none !important;
  }

  .fx-pop{
    width:38px !important;
    height:38px !important;
    animation-duration:220ms !important;
  }

  .fx-ring{
    width:46px !important;
    height:46px !important;
    border-width:2px !important;
    animation-duration:240ms !important;
  }

  .fx-spark{
    width:5px !important;
    height:13px !important;
    animation-duration:240ms !important;
  }

  .fx-combo-cinema,
  .fx-combo-shockwave{
    animation-duration:360ms !important;
  }

  .tile-special-asset{
    animation-duration:260ms !important;
    filter:none !important;
  }

  .tile[data-special]:not(.block):not(.ice)::before{
    animation:none !important;
    filter:none !important;
    opacity:0.38 !important;
  }

  #board{
    animation:none !important;
    backdrop-filter:none !important;
    will-change:auto !important;
  }

  #board.board-shake,
  #board.board-shake-light,
  #board.board-shake-medium,
  #board.board-shake-heavy,
  #board.combo-pressure,
  #board.cascade-recovery{
    animation:none !important;
  }

  .tile.break-flash,
  .tile.special-burst,
  .tile.hit-pop,
  .tile.tile-impact,
  .tile.pre-explode,
  .tile.swap-success{
    animation-duration:120ms !important;
  }

  .combo-text,
  .fx-combo-text{
    font-size:24px !important;
    animation-duration:420ms !important;
  }

}
.tile.gravity-settle{
  animation:
    gravitySettle 190ms cubic-bezier(.18,.9,.24,1);
}

@keyframes gravitySettle{

  0%{
    transform:
      translate3d(0,0,0)
      scaleY(1);
  }

  35%{
    transform:
      translate3d(0,3px,0)
      scaleY(0.92)
      scaleX(1.04);
  }

  70%{
    transform:
      translate3d(0,-2px,0)
      scaleY(1.04)
      scaleX(0.98);
  }

  100%{
    transform:
      translate3d(0,0,0)
      scaleY(1)
      scaleX(1);
  }
}
/* =========================================
   BOARD POWER SHAKE
========================================= */

#board.board-power-shake{
  animation:
    boardPowerShake 320ms cubic-bezier(.2,.9,.25,1);
}

@keyframes boardPowerShake{

  0%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  15%{
    transform:
      translate3d(-5px,3px,0)
      scale(1.01);
  }

  30%{
    transform:
      translate3d(5px,-3px,0)
      scale(1.012);
  }

  45%{
    transform:
      translate3d(-4px,2px,0)
      scale(1.006);
  }

  65%{
    transform:
      translate3d(3px,-2px,0)
      scale(1.003);
  }

  100%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }
}
/* =========================================
   BOOSTER LIGHT FX PACK
========================================= */

.booster-light-impact{
  position:fixed;
  left:0;
  top:0;
  width:58px;
  height:58px;
  z-index:11930;
  pointer-events:none;
  border-radius:50%;
  transform:
    translate(-50%, -50%)
    scale(0.35);
  background:
    radial-gradient(
      circle,
      rgba(255,246,170,0.92) 0%,
      rgba(255,190,70,0.42) 42%,
      rgba(255,120,30,0) 72%
    );
  animation:
    boosterLightImpact 320ms ease-out forwards;
}

.booster-light-ray{
  position:fixed;
  left:0;
  top:0;
  width:6px;
  height:34px;
  z-index:11929;
  pointer-events:none;
  border-radius:999px;
  background:rgba(255,230,120,0.92);
  transform-origin:center;
  animation:
    boosterLightRay 360ms ease-out forwards;
}

@keyframes boosterLightImpact{
  0%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      scale(0.35);
  }

  35%{
    opacity:1;
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  100%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      scale(1.7);
  }
}

@keyframes boosterLightRay{
  0%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--ray-angle))
      translateY(0)
      scaleY(0.4);
  }

  30%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--ray-angle))
      translateY(-38px)
      scaleY(0.9);
  }
}
/* =========================================
   SPECIAL COMBO EXAGGERATED SWAP
========================================= */

.tile.special-combo-cinema{
  z-index:80 !important;
  overflow:visible !important;
}

.tile.special-combo-armed{
  animation:
    specialComboGrowSwap 360ms cubic-bezier(.18,.9,.22,1.12)
    forwards !important;
}

.tile.special-combo-release{
  animation:
    specialComboReleaseBoom 260ms cubic-bezier(.2,.9,.25,1)
    forwards !important;
}

@keyframes specialComboGrowSwap{

  0%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  35%{
    transform:
      translate3d(
        calc(var(--combo-pull-x) * 0.45),
        calc(var(--combo-pull-y) * 0.45),
        0
      )
      scale(1.45);
  }

  70%{
    transform:
      translate3d(
        calc(var(--combo-pull-x) * -0.85),
        calc(var(--combo-pull-y) * -0.85),
        0
      )
      scale(2);
  }

  100%{
    transform:
      translate3d(
        calc(var(--combo-pull-x) * -1),
        calc(var(--combo-pull-y) * -1),
        0
      )
      scale(1.72);
  }
}

@keyframes specialComboReleaseBoom{

  0%{
    transform:
      translate3d(
        calc(var(--combo-pull-x) * -1),
        calc(var(--combo-pull-y) * -1),
        0
      )
      scale(1.72);
    opacity:1;
  }

  45%{
    transform:
      translate3d(0,0,0)
      scale(2.12);
    opacity:1;
  }

  100%{
    transform:
      translate3d(0,0,0)
      scale(0.38);
    opacity:0;
  }
}

.board-piece.special-combo-piece-cinema{
  z-index:90 !important;
  pointer-events:none;
  transform-origin:center center;
  will-change:transform, opacity, filter;
}

.board-piece.special-combo-piece-armed{
  animation:
    specialComboPieceGrowSwap 360ms cubic-bezier(.16,.96,.2,1.16)
    forwards !important;
  filter:
    brightness(1.28)
    saturate(1.24)
    drop-shadow(0 0 16px rgba(255,226,92,.78))
    drop-shadow(0 0 28px rgba(255,98,35,.42));
}

.board-piece.special-combo-piece-release{
  animation:
    specialComboPieceReleaseBoom 260ms cubic-bezier(.18,.92,.22,1)
    forwards !important;
  filter:
    brightness(1.55)
    saturate(1.35)
    drop-shadow(0 0 20px rgba(255,255,190,.9))
    drop-shadow(0 0 34px rgba(255,108,32,.55));
}

@keyframes specialComboPieceGrowSwap{
  0%{
    opacity:1;
    transform:
      var(--combo-piece-transform)
      translate3d(0,0,0)
      scale(1)
      rotate(0deg);
  }

  30%{
    opacity:1;
    transform:
      var(--combo-piece-transform)
      translate3d(
        calc(var(--combo-pull-x) * .42),
        calc(var(--combo-pull-y) * .42),
        0
      )
      scale(1.72)
      rotate(-12deg);
  }

  68%{
    opacity:1;
    transform:
      var(--combo-piece-transform)
      translate3d(
        calc(var(--combo-pull-x) * -.9),
        calc(var(--combo-pull-y) * -.9),
        0
      )
      scale(2.38)
      rotate(16deg);
  }

  100%{
    opacity:1;
    transform:
      var(--combo-piece-transform)
      translate3d(
        calc(var(--combo-pull-x) * -1),
        calc(var(--combo-pull-y) * -1),
        0
      )
      scale(2.05)
      rotate(0deg);
  }
}

@keyframes specialComboPieceReleaseBoom{
  0%{
    opacity:1;
    transform:
      var(--combo-piece-transform)
      translate3d(
        calc(var(--combo-pull-x) * -1),
        calc(var(--combo-pull-y) * -1),
        0
      )
      scale(2.05)
      rotate(0deg);
  }

  38%{
    opacity:1;
    transform:
      var(--combo-piece-transform)
      translate3d(0,0,0)
      scale(2.58)
      rotate(10deg);
  }

  72%{
    opacity:.92;
    transform:
      var(--combo-piece-transform)
      translate3d(0,0,0)
      scale(.72)
      rotate(-8deg);
  }

  100%{
    opacity:0;
    transform:
      var(--combo-piece-transform)
      translate3d(0,0,0)
      scale(.16)
      rotate(0deg);
  }
}/* =========================================
   PREMIUM SWAP STRETCH
========================================= */

.piece.swap-stretch{
  animation:
    swapStretch 150ms cubic-bezier(.22,1,.36,1);
  z-index:45;
}

@keyframes swapStretch{

  0%{
    scale:1;
  }

  35%{
    scale:1.12 0.92;
  }

  65%{
    scale:0.96 1.08;
  }

  100%{
    scale:1;
  }
}
/* =========================================
   PREMIUM LANDING WEIGHT
========================================= */

.piece.gravity-light-land{
  animation:
    gravityLightLand 140ms ease-out;
}

.piece.gravity-medium-land{
  animation:
    gravityMediumLand 190ms cubic-bezier(.2,.9,.24,1);
}

.piece.gravity-heavy-land{
  animation:
    gravityHeavyLand 260ms cubic-bezier(.18,.92,.22,1.08);
}

@keyframes gravityLightLand{

  0%{
    scale:1;
  }

  50%{
    scale:1.04 0.96;
  }

  100%{
    scale:1;
  }
}

@keyframes gravityMediumLand{

  0%{
    scale:1;
  }

  35%{
    scale:1.08 0.9;
  }

  70%{
    scale:0.96 1.04;
  }

  100%{
    scale:1;
  }
}

@keyframes gravityHeavyLand{

  0%{
    scale:1;
  }

  25%{
    scale:1.14 0.84;
  }

  55%{
    scale:0.92 1.08;
  }

  75%{
    scale:1.03 0.98;
  }

  100%{
    scale:1;
  }
}
/* =========================================
   PREMIUM ANTICIPATION FX
========================================= */

.piece.pre-row-fire{
  animation:
    preRowFire 140ms ease-out;
}

.piece.pre-col-fire{
  animation:
    preColFire 140ms ease-out;
}

.piece.pre-bomb-fire{
  animation:
    preBombFire 180ms cubic-bezier(.18,.92,.24,1);
}

.piece.pre-wrap-fire{
  animation:
    preWrapFire 220ms cubic-bezier(.18,.92,.22,1.04);
}

.piece.pre-color-fire{
  animation:
    preColorFire 240ms ease-out;
}

@keyframes preRowFire{

  0%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  20%{
    transform:
      translate3d(-3px,0,0)
      scale(1.04,0.96);
  }

  40%{
    transform:
      translate3d(3px,0,0)
      scale(1.08,0.92);
  }

  100%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }
}

@keyframes preColFire{

  0%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  20%{
    transform:
      translate3d(0,-3px,0)
      scale(0.96,1.04);
  }

  40%{
    transform:
      translate3d(0,3px,0)
      scale(0.92,1.08);
  }

  100%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }
}

@keyframes preBombFire{

  0%{
    scale:1;
  }

  40%{
    scale:1.18;
  }

  70%{
    scale:0.92;
  }

  100%{
    scale:1;
  }
}

@keyframes preWrapFire{

  0%{
    transform:
      rotate(0deg)
      scale(1);
  }

  40%{
    transform:
      rotate(-12deg)
      scale(1.18);
  }

  75%{
    transform:
      rotate(10deg)
      scale(0.94);
  }

  100%{
    transform:
      rotate(0deg)
      scale(1);
  }
}

@keyframes preColorFire{

  0%{
    scale:1;
    opacity:1;
  }

  50%{
    scale:1.24;
    opacity:0.92;
  }

  100%{
    scale:1;
    opacity:1;
  }
}
/* =========================================
   PREMIUM CAMERA FX
========================================= */

#board.camera-hit-light{
  animation:
    cameraHitLight 180ms ease-out;
}

#board.camera-hit-medium{
  animation:
    cameraHitMedium 240ms cubic-bezier(.2,.9,.24,1);
}

#board.camera-hit-heavy{
  animation:
    cameraHitHeavy 320ms cubic-bezier(.18,.92,.22,1.04);
}

@keyframes cameraHitLight{

  0%{
    transform:
      scale(1)
      translate3d(0,0,0);
  }

  40%{
    transform:
      scale(1.012)
      translate3d(0,-2px,0);
  }

  100%{
    transform:
      scale(1)
      translate3d(0,0,0);
  }
}

@keyframes cameraHitMedium{

  0%{
    transform:
      scale(1)
      translate3d(0,0,0);
  }

  30%{
    transform:
      scale(1.02)
      translate3d(0,-4px,0);
  }

  70%{
    transform:
      scale(0.996)
      translate3d(0,2px,0);
  }

  100%{
    transform:
      scale(1)
      translate3d(0,0,0);
  }
}

@keyframes cameraHitHeavy{

  0%{
    transform:
      scale(1)
      translate3d(0,0,0);
  }

  20%{
    transform:
      scale(1.035)
      translate3d(0,-6px,0);
  }

  45%{
    transform:
      scale(0.992)
      translate3d(0,3px,0);
  }

  75%{
    transform:
      scale(1.012)
      translate3d(0,-1px,0);
  }

  100%{
    transform:
      scale(1)
      translate3d(0,0,0);
  }
}
/* =========================================
   FALL TRAIL FX
========================================= */

.piece.fall-trail::after{
  content:"";

  position:absolute;

  left:18%;
  right:18%;
  top:-12%;
  bottom:58%;

  border-radius:999px;

  opacity:0.42;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.22),
      rgba(255,255,255,0)
    );

  animation:
    fallTrailFx 220ms ease-out;
}

@keyframes fallTrailFx{

  0%{
    opacity:0;
    transform:
      scaleY(0.4)
      translateY(-8px);
  }

  25%{
    opacity:0.46;
  }

  100%{
    opacity:0;
    transform:
      scaleY(1.5)
      translateY(10px);
  }
}
/* =========================================
   LIGHTNING ASSET FX
========================================= */

.fx-line-row-asset,
.fx-line-col-asset{

  position:absolute;

  pointer-events:none;

  z-index:9999;

  background-position:center center !important;

  background-size:100% 100% !important;

  background-repeat:no-repeat !important;

  box-shadow:none !important;

  border-radius:0 !important;

  opacity:0.98 !important;

  transform-origin:center;
}

/* =========================================
   HORIZONTAL
========================================= */

.fx-line-row-asset{

  height:64px;

  background-image:
    url("../../assets/img/fx/lightning-row.webp") !important;

  animation:
    rowAssetBlast 480ms ease-out forwards !important;
}

@keyframes rowAssetBlast{

  0%{
    opacity:0;

    transform:
      scaleX(0.78)
      scaleY(0.82);
  }
  25%{
    opacity:1;
  }

  100%{
    opacity:0;

    transform:
      scaleX(1.06)
      scaleY(1);
  }
}

/* =========================================
   VERTICAL
========================================= */

.fx-line-col-asset{

  width:64px;

  background-image:
    url("../../assets/img/fx/lightning-col.webp") !important;

  animation:
    colAssetBlast 480ms ease-out forwards !important;
}

@keyframes colAssetBlast{

  0%{
    opacity:0;

    transform:
      scaleY(0.68)
      scaleX(0.82);
  }

  25%{
    opacity:1;
  }

  100%{
    opacity:0;

    transform:
      scaleY(1.06)
      scaleX(1);
  }
}
/* =========================================
   BOMB ASSET FX
========================================= */

.fx-bomb-asset{

  position:fixed;

  left:0;
  top:0;

  width:132px;
  height:132px;

  pointer-events:none;

  z-index:10000;

  transform:
    translate(-50%, -50%)
    scale(0.82);

  background-image:
    url("../../assets/img/fx/bonb-burst.webp");

  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat;

  opacity:0;

  animation:
    fxBombAssetBurst 620ms ease-out forwards;
}

.fx-bomb-asset-strong{

  width:180px;
  height:180px;

  animation:
    fxBombAssetStrongBurst 680ms ease-out forwards;
}

@keyframes fxBombAssetBurst{

  0%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      scale(0.35)
      rotate(-8deg);
  }

  18%{
    opacity:1;
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(0deg);
  }

  100%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      scale(1.55)
      rotate(8deg);
  }
}

@keyframes fxBombAssetStrongBurst{

  0%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      scale(0.38)
      rotate(-10deg);
  }

  16%{
    opacity:1;
    transform:
      translate(-50%, -50%)
      scale(1.08)
      rotate(0deg);
  }

  100%{
    opacity:0;
    transform:
      translate(-50%, -50%)
      scale(1.9)
      rotate(10deg);
  }
}
/* =========================================
   COMBO ASSET FX
========================================= */

.fx-combo-asset{

  position:fixed;

  left:0;
  top:0;

  width:210px;
  height:210px;

  pointer-events:none;

  z-index:10001;

  transform:
    translate(-50%, -50%)
    scale(0.36);

  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat;

  opacity:0;

  animation:
    fxComboAssetBurst 780ms ease-out forwards;
}

.fx-combo-burst{

  background-image:
    url("../../assets/img/fx/combo-burst.webp");
}

.fx-combo-wrap{

  background-image:
    url("../../assets/img/fx/wrap-swirl.webp");
}

@keyframes fxComboAssetBurst{

  0%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(0.42)
      rotate(-14deg);
  }

  18%{
    opacity:1;

    transform:
      translate(-50%, -50%)
      scale(1.38)
      rotate(0deg);
  }

  62%{
    opacity:0.86;

    transform:
      translate(-50%, -50%)
      scale(1.88)
      rotate(10deg);
  }

  100%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(2.8)
      rotate(22deg);
  }
}
/* =========================================
   SHOCKWAVE FX
========================================= */

.fx-shockwave{

  position:fixed;

  left:0;
  top:0;

  width:96px;
  height:96px;

  pointer-events:none;

  z-index:9998;

  border-radius:50%;

  transform:
    translate(-50%, -50%)
    scale(0.28);

  border:
    3px solid rgba(255,255,255,0.72);

  box-shadow:
    0 0 12px rgba(255,255,255,0.55),
    0 0 26px rgba(120,220,255,0.38);

  opacity:0;

  animation:
    fxShockwave 520ms ease-out forwards;
}

.fx-shockwave-strong{

  width:150px;
  height:150px;

  border-width:4px;

  animation:
    fxShockwaveStrong 580ms ease-out forwards;
}

@keyframes fxShockwave{

  0%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(0.25);
  }

  18%{
    opacity:0.9;
  }

  100%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(1.85);
  }
}

@keyframes fxShockwaveStrong{

  0%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(0.22);
  }

  16%{
    opacity:1;
  }

  100%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(2.2);
  }
}
/* =========================================
   BOARD FLASH FX
========================================= */

.fx-board-flash{

  position:fixed;

  inset:0;

  pointer-events:none;

  z-index:9997;

  opacity:0;

  animation:
    fxBoardFlash 260ms ease-out forwards;
}

.fx-board-flash-blue{

  background:
    radial-gradient(
      circle at center,
      rgba(120,220,255,0.18),
      rgba(120,220,255,0) 64%
    );
}

.fx-board-flash-orange{

  background:
    radial-gradient(
      circle at center,
      rgba(255,150,40,0.22),
      rgba(255,120,20,0) 66%
    );
}

.fx-board-flash-purple{

  background:
    radial-gradient(
      circle at center,
      rgba(190,90,255,0.22),
      rgba(190,90,255,0) 66%
    );
}

.fx-board-flash-white{

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.20),
      rgba(255,255,255,0) 68%
    );
}

@keyframes fxBoardFlash{

  0%{
    opacity:0;
  }

  20%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}
/* =========================================
   TILE EXPANSION PUSH
========================================= */

.tile.tile-expansion-push{

  animation:
    tileExpansionPush 300ms cubic-bezier(.18,.9,.24,1) forwards;
}

@keyframes tileExpansionPush{

  0%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  42%{
    transform:
      translate3d(
        var(--expand-x),
        var(--expand-y),
        0
      )
      scale(1.54);
  }

  100%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }
}
/* =========================================
   MATCH-3 PREMIUM MICRO REACTION
========================================= */

.tile.tile-match-premium{

  animation:
    tileMatchPremium 260ms cubic-bezier(.18,.9,.24,1) forwards;
}

.tile.tile-match-premium::before{

  opacity:1 !important;
}

@keyframes tileMatchPremium{

  0%{
    transform:
      scale(1);
    filter:
      brightness(1)
      saturate(1);
  }

  35%{
    transform:
      scale(1.59);
    filter:
      brightness(1.28)
      saturate(1.18);
  }

  70%{
    transform:
      scale(1.16);
    filter:
      brightness(1.12)
      saturate(1.08);
  }

  100%{
    transform:
      scale(1);
    filter:
      brightness(1)
      saturate(1);
  }
}
/* =========================================
   ENERGY TRAIL FX
========================================= */

.fx-energy-trail{

  position:fixed;

  left:0;
  top:0;

  width:180px;
  height:180px;

  pointer-events:none;

  z-index:9996;

  border-radius:50%;

  transform:
    translate(-50%, -50%)
    scale(0.42);

  opacity:0;

  filter:
    blur(10px);

  animation:
    fxEnergyTrail 420ms ease-out forwards;
}

/* =========================================
   BLUE
========================================= */

.fx-energy-blue{

  background:
    radial-gradient(
      circle,
      rgba(101, 206, 245, 0.34) 0%,
      rgba(120,220,255,0.12) 36%,
      rgba(120,220,255,0) 72%
    );
}

/* =========================================
   ORANGE
========================================= */

.fx-energy-orange{

  background:
    radial-gradient(
      circle,
      rgba(243, 100, 33, 0.34) 0%,
      rgba(255,120,40,0.12) 36%,
      rgba(255,120,40,0) 72%
    );
}

/* =========================================
   PURPLE
========================================= */

.fx-energy-purple{

  background:
    radial-gradient(
      circle,
      rgba(172, 75, 237, 0.34) 0%,
      rgba(180,90,255,0.12) 36%,
      rgba(180,90,255,0) 72%
    );
}

/* =========================================
   WHITE
========================================= */

.fx-energy-white{

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0.10) 36%,
      rgba(255,255,255,0) 72%
    );
}

@keyframes fxEnergyTrail{

  0%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(0.35);
  }

  18%{
    opacity:1;
  }

  100%{
    opacity:0;

    transform:
      translate(-50%, -50%)
      scale(1.55);
  }
}

/* =========================================
   BOOSTER IMPACT BREAK FX
========================================= */

.board-piece.booster-piece-break {
  z-index: 30;
  animation:
    boosterPieceBreak 340ms cubic-bezier(0.16, 0.95, 0.24, 1) forwards;
  animation-delay: var(--booster-break-delay, 0ms);
  filter:
    brightness(1.42)
    saturate(1.24)
    drop-shadow(0 0 12px rgba(255, 223, 114, 0.92));
}

.tile.booster-break-cell::after {
  opacity: 1 !important;
  animation:
    boosterBreakCellFlash 360ms ease-out forwards;
  animation-delay: var(--booster-break-delay, 0ms);
}

.booster-burst-core,
.booster-burst-ring,
.booster-burst-particle {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 12020;
  transform: translate(-50%, -50%);
}

.booster-burst-core {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 226, 96, 0.86) 22%, rgba(255, 111, 44, 0.55) 50%, rgba(255, 111, 44, 0) 72%);
  box-shadow:
    0 0 24px rgba(255, 225, 90, 0.9),
    0 0 46px rgba(255, 87, 30, 0.62);
  animation:
    boosterBurstCore 440ms ease-out forwards;
}

.booster-burst-ring {
  width: 76px;
  height: 76px;
  border: 4px solid rgba(255, 220, 99, 0.9);
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(255, 204, 75, 0.78),
    inset 0 0 14px rgba(255, 255, 255, 0.45);
  animation:
    boosterBurstRing 520ms cubic-bezier(0.14, 0.74, 0.2, 1) forwards;
}

.booster-burst-particle {
  width: 8px;
  height: 18px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fff8c4 0%, #ffc83d 46%, #ff5b2e 100%);
  box-shadow:
    0 0 10px rgba(255, 207, 69, 0.92);
  transform:
    translate(-50%, -50%)
    rotate(var(--burst-angle));
  animation:
    boosterBurstParticle 520ms cubic-bezier(0.13, 0.78, 0.16, 1) forwards;
  animation-delay: var(--burst-delay, 0ms);
}

.booster-burst-random.booster-burst-core {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(118, 235, 255, 0.84) 22%, rgba(184, 90, 255, 0.58) 50%, rgba(184, 90, 255, 0) 74%);
  box-shadow:
    0 0 24px rgba(123, 229, 255, 0.9),
    0 0 54px rgba(176, 90, 255, 0.72);
}

.booster-burst-random.booster-burst-ring {
  border-color: rgba(142, 235, 255, 0.92);
  box-shadow:
    0 0 18px rgba(105, 225, 255, 0.82),
    inset 0 0 18px rgba(205, 129, 255, 0.58);
}

.booster-burst-random.booster-burst-particle {
  background:
    linear-gradient(180deg, #ffffff 0%, #77ecff 44%, #b55cff 100%);
  box-shadow:
    0 0 12px rgba(120, 235, 255, 0.9);
}

@keyframes boosterPieceBreak {
  0% {
    opacity: 1;
    transform:
      var(--booster-piece-transform)
      scale(1);
  }

  22% {
    opacity: 1;
    transform:
      var(--booster-piece-transform)
      translate3d(
        calc(var(--booster-break-x) * -0.32),
        calc(var(--booster-break-y) * -0.32),
        0
      )
      scale(1.18)
      rotate(calc(var(--booster-break-rot) * -0.4));
  }

  64% {
    opacity: 0.86;
    transform:
      var(--booster-piece-transform)
      translate3d(
        var(--booster-break-x),
        var(--booster-break-y),
        0
      )
      scale(0.82)
      rotate(var(--booster-break-rot));
  }

  100% {
    opacity: 0;
    transform:
      var(--booster-piece-transform)
      translate3d(
        calc(var(--booster-break-x) * 1.8),
        calc(var(--booster-break-y) * 1.8),
        0
      )
      scale(0.22)
      rotate(calc(var(--booster-break-rot) * 2.2));
  }
}

@keyframes boosterBreakCellFlash {
  0% {
    box-shadow:
      inset 0 0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(255, 210, 80, 0);
  }

  35% {
    box-shadow:
      inset 0 0 0 3px rgba(255, 255, 255, 0.9),
      0 0 22px rgba(255, 208, 71, 0.82);
  }

  100% {
    box-shadow:
      inset 0 0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(255, 210, 80, 0);
  }
}

@keyframes boosterBurstCore {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.24);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.55);
  }
}

@keyframes boosterBurstRing {
  0% {
    opacity: 0.95;
    transform:
      translate(-50%, -50%)
      scale(0.3);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(2.35);
  }
}

@keyframes boosterBurstParticle {
  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--burst-angle))
      translateY(0)
      scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--burst-angle))
      translateY(calc(var(--burst-distance) * -1))
      scale(0.28);
  }
}

@media (hover:none) and (pointer:coarse) {
  .booster-burst-core,
  .booster-burst-ring,
  .booster-burst-particle {
    filter: none !important;
    box-shadow: none !important;
  }

  .board-piece.booster-piece-break {
    animation-duration: 240ms !important;
    filter: brightness(1.18) saturate(1.1) !important;
  }

  .booster-burst-particle {
    width: 6px !important;
    height: 14px !important;
    animation-duration: 340ms !important;
  }
}
/* =========================================
   HAMMER BOOSTER BREAK FX
========================================= */

.board-piece.hammer-piece-break {
  z-index: 32;
  animation:
    hammerPieceBreak 330ms cubic-bezier(0.16, 0.95, 0.24, 1) forwards;
  filter:
    brightness(1.46)
    saturate(1.22)
    drop-shadow(0 0 12px rgba(255, 223, 114, 0.92));
}

.tile.hammer-break-cell::after {
  opacity: 1 !important;
  animation:
    hammerBreakCellFlash 330ms ease-out forwards;
}

.hammer-burst-core,
.hammer-burst-ring,
.hammer-burst-shard {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 12020;
  transform: translate(-50%, -50%);
}

.hammer-burst-core {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.96) 0%, rgba(255,228,103,0.88) 24%, rgba(255,118,34,0.48) 52%, rgba(255,118,34,0) 73%);
  box-shadow:
    0 0 24px rgba(255, 220, 80, 0.88),
    0 0 42px rgba(255, 93, 31, 0.54);
  animation:
    hammerBurstCore 420ms ease-out forwards;
}

.hammer-burst-ring {
  width: 66px;
  height: 66px;
  border: 4px solid rgba(255, 220, 99, 0.92);
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(255, 204, 75, 0.76),
    inset 0 0 14px rgba(255, 255, 255, 0.42);
  animation:
    hammerBurstRing 500ms cubic-bezier(0.14, 0.74, 0.2, 1) forwards;
}

.hammer-burst-shard {
  width: 7px;
  height: 17px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fff7bd 0%, #ffc53b 48%, #ff6b2d 100%);
  box-shadow:
    0 0 10px rgba(255, 207, 69, 0.9);
  transform:
    translate(-50%, -50%)
    rotate(var(--hammer-shard-angle));
  animation:
    hammerBurstShard 480ms cubic-bezier(0.13, 0.78, 0.16, 1) forwards;
  animation-delay: var(--hammer-shard-delay, 0ms);
}

@keyframes hammerPieceBreak {
  0% {
    opacity: 1;
    transform:
      var(--hammer-piece-transform)
      scale(1);
  }

  22% {
    opacity: 1;
    transform:
      var(--hammer-piece-transform)
      translate3d(
        calc(var(--hammer-break-x) * -0.35),
        8px,
        0
      )
      scale(1.2)
      rotate(calc(var(--hammer-break-rot) * -0.4));
  }

  68% {
    opacity: 0.86;
    transform:
      var(--hammer-piece-transform)
      translate3d(
        var(--hammer-break-x),
        var(--hammer-break-y),
        0
      )
      scale(0.82)
      rotate(var(--hammer-break-rot));
  }

  100% {
    opacity: 0;
    transform:
      var(--hammer-piece-transform)
      translate3d(
        calc(var(--hammer-break-x) * 1.8),
        -26px,
        0
      )
      scale(0.18)
      rotate(calc(var(--hammer-break-rot) * 2.1));
  }
}

@keyframes hammerBreakCellFlash {
  0% {
    box-shadow:
      inset 0 0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(255, 210, 80, 0);
  }

  34% {
    box-shadow:
      inset 0 0 0 3px rgba(255, 255, 255, 0.9),
      0 0 22px rgba(255, 208, 71, 0.82);
  }

  100% {
    box-shadow:
      inset 0 0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(255, 210, 80, 0);
  }
}

@keyframes hammerBurstCore {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.24);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.45);
  }
}

@keyframes hammerBurstRing {
  0% {
    opacity: 0.95;
    transform:
      translate(-50%, -50%)
      scale(0.3);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(2.1);
  }
}

@keyframes hammerBurstShard {
  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--hammer-shard-angle))
      translateY(0)
      scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--hammer-shard-angle))
      translateY(calc(var(--hammer-shard-distance) * -1))
      scale(0.28);
  }
}

@media (hover:none) and (pointer:coarse) {
  .hammer-burst-core,
  .hammer-burst-ring,
  .hammer-burst-shard {
    filter: none !important;
    box-shadow: none !important;
  }

  .board-piece.hammer-piece-break {
    animation-duration: 240ms !important;
    filter: brightness(1.18) saturate(1.1) !important;
  }
}
/* =========================================
   COMBO EXPLOSION BEAUTY PASS
========================================= */

.fx-combo-flare,
.fx-combo-rays,
.fx-combo-shard {
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
  z-index:10025;
  transform:translate(-50%, -50%);
}

.fx-combo-flare {
  width:150px;
  height:150px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,235,128,.96) 18%, rgba(255,133,38,.62) 46%, rgba(255,68,22,.18) 64%, rgba(255,68,22,0) 78%);
  mix-blend-mode:screen;
  filter:
    blur(.5px)
    saturate(1.18);
  box-shadow:
    0 0 28px rgba(255,255,210,.9),
    0 0 58px rgba(255,199,75,.86),
    0 0 98px rgba(255,86,31,.58);
  animation:
    comboFlareBeauty 640ms cubic-bezier(.14,.86,.18,1) forwards;
}

.fx-combo-rays {
  width:170px;
  height:170px;
  border-radius:50%;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,236,121,.88), rgba(255,120,34,.12), rgba(255,255,255,0), rgba(255,236,121,.74), rgba(255,255,255,0));
  mix-blend-mode:screen;
  filter:
    blur(1px);
  animation:
    comboRaysBeauty 720ms ease-out forwards;
}

.fx-combo-shard {
  width:8px;
  height:24px;
  border-radius:999px;
  background:
    linear-gradient(180deg, #fffad0 0%, #ffd44d 38%, #ff7c2b 72%, rgba(255,92,28,0) 100%);
  box-shadow:
    0 0 10px rgba(255,226,102,.92),
    0 0 18px rgba(255,113,34,.62);
  transform:
    translate(-50%, -50%)
    rotate(var(--combo-shard-angle));
  animation:
    comboShardBeauty 640ms cubic-bezier(.13,.78,.16,1) forwards;
  animation-delay:var(--combo-shard-delay, 0ms);
}

.fx-combo-cinema {
  width:156px;
  height:156px;
  background:
    radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,241,145,.98) 18%, rgba(255,158,42,.72) 44%, rgba(255,63,21,.22) 66%, rgba(255,63,21,0) 80%);
  box-shadow:
    0 0 28px rgba(255,255,225,.86),
    0 0 62px rgba(255,207,82,.9),
    0 0 112px rgba(255,91,28,.62);
}

.fx-combo-shockwave {
  width:84px;
  height:84px;
  border-width:4px;
  border-color:rgba(255,245,178,.94);
  box-shadow:
    0 0 22px rgba(255,255,230,.7),
    0 0 46px rgba(255,193,76,.7),
    inset 0 0 18px rgba(255,255,255,.42);
}

@keyframes comboFlareBeauty {
  0% {
    opacity:0;
    transform:translate(-50%, -50%) scale(.16) rotate(0deg);
  }

  16% {
    opacity:1;
    transform:translate(-50%, -50%) scale(.72) rotate(8deg);
  }

  54% {
    opacity:.92;
    transform:translate(-50%, -50%) scale(1.36) rotate(24deg);
  }

  100% {
    opacity:0;
    transform:translate(-50%, -50%) scale(2.15) rotate(42deg);
  }
}

@keyframes comboRaysBeauty {
  0% {
    opacity:0;
    transform:translate(-50%, -50%) scale(.2) rotate(0deg);
  }

  18% {
    opacity:.95;
  }

  100% {
    opacity:0;
    transform:translate(-50%, -50%) scale(2.35) rotate(130deg);
  }
}

@keyframes comboShardBeauty {
  0% {
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--combo-shard-angle))
      translateY(0)
      scale(.55);
  }

  16% {
    opacity:1;
  }

  100% {
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--combo-shard-angle))
      translateY(calc(var(--combo-shard-distance) * -1))
      scale(.16);
  }
}

@media (hover:none) and (pointer:coarse) {
  .fx-combo-flare,
  .fx-combo-rays,
  .fx-combo-shard {
    filter:none !important;
    box-shadow:none !important;
  }

  .fx-combo-shard {
    width:6px !important;
    height:17px !important;
    animation-duration:420ms !important;
  }
}
/* =========================================
   VISIBLE COMBO PAPER PARTICLES
========================================= */

.fx-combo-paper {
  position:fixed;
  left:0;
  top:0;
  display:block;
  width:14px;
  height:20px;
  border-radius:3px 8px 3px 8px;
  pointer-events:none;
  z-index:22000;
  transform:
    translate(-50%, -50%)
    rotate(var(--combo-paper-angle));
  opacity:0;
  box-shadow:
    0 3px 5px rgba(0,0,0,.42),
    0 0 12px rgba(255,255,255,.62),
    inset 0 1px 0 rgba(255,255,255,.52);
  animation:
    comboPaperFly 1280ms cubic-bezier(.13,.78,.16,1) forwards;
  animation-delay:var(--combo-paper-delay, 0ms);
}

.fx-combo-paper-gold {
  background:linear-gradient(135deg, #fff7b8, #ffc83b 55%, #ff8a24);
}

.fx-combo-paper-red {
  background:linear-gradient(135deg, #ffd1c4, #ff5536 58%, #a91516);
}

.fx-combo-paper-blue {
  background:linear-gradient(135deg, #d4fbff, #34c7ff 56%, #1262b9);
}

.fx-combo-paper-green {
  background:linear-gradient(135deg, #d7ffd6, #35e879 56%, #078746);
}

.fx-combo-paper-purple {
  background:linear-gradient(135deg, #f0d2ff, #b85cff 56%, #5711a5);
}

.fx-combo-paper-white {
  background:linear-gradient(135deg, #ffffff, #fff2bd 58%, #ffd56d);
}

@keyframes comboPaperFly {
  0% {
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--combo-paper-angle))
      translateY(0)
      scale(.45);
  }

  10% {
    opacity:1;
  }

  58% {
    opacity:1;
    transform:
      translate(-50%, -50%)
      rotate(var(--combo-paper-angle))
      translateY(calc(var(--combo-paper-distance) * -1))
      translateX(10px)
      scale(1.14)
      rotate(var(--combo-paper-spin));
  }

  100% {
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--combo-paper-angle))
      translateY(calc((var(--combo-paper-distance) * -1) + var(--combo-paper-fall)))
      translateX(-12px)
      scale(.72)
      rotate(calc(var(--combo-paper-spin) * 1.45));
  }
}

@media (hover:none) and (pointer:coarse) {
  .fx-combo-paper {
    width:12px !important;
    height:17px !important;
    box-shadow:none !important;
    animation-duration:980ms !important;
  }
}
/* =========================================
   VISIBLE BOMB DEBRIS / CONFETTI
========================================= */

.fx-bomb-debris {
  position:fixed;
  left:0;
  top:0;
  display:block;
  width:13px;
  height:17px;
  border-radius:3px 7px 4px 7px;
  pointer-events:none;
  z-index:23000;
  opacity:0;
  transform:
    translate(-50%, -50%)
    rotate(var(--bomb-debris-angle));
  box-shadow:
    0 3px 5px rgba(0,0,0,.46),
    0 0 12px rgba(255,196,82,.62),
    inset 0 1px 0 rgba(255,255,255,.42);
  animation:
    bombDebrisFly 1180ms cubic-bezier(.13,.78,.16,1) forwards;
  animation-delay:var(--bomb-debris-delay, 0ms);
}

.fx-bomb-debris-fire {
  background:linear-gradient(135deg, #fff4ad, #ff8b24 48%, #ff3b18);
}

.fx-bomb-debris-gold {
  background:linear-gradient(135deg, #fff7bf, #ffc83e 58%, #b8690c);
}

.fx-bomb-debris-smoke {
  background:linear-gradient(135deg, #f2eadb, #8d8070 58%, #2e2928);
}

.fx-bomb-debris-stone {
  background:linear-gradient(135deg, #b7aaa0, #5b5351 58%, #1c191b);
}

.fx-bomb-debris-red {
  background:linear-gradient(135deg, #ffd4c8, #ff5532 58%, #9f1110);
}

@keyframes bombDebrisFly {
  0% {
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--bomb-debris-angle))
      translateY(0)
      scale(.45);
  }

  8% {
    opacity:1;
  }

  48% {
    opacity:1;
    transform:
      translate(-50%, -50%)
      rotate(var(--bomb-debris-angle))
      translateY(calc(var(--bomb-debris-distance) * -1))
      translateX(8px)
      scale(1.18)
      rotate(var(--bomb-debris-spin));
  }

  100% {
    opacity:0;
    transform:
      translate(-50%, -50%)
      rotate(var(--bomb-debris-angle))
      translateY(calc((var(--bomb-debris-distance) * -1) + var(--bomb-debris-fall)))
      translateX(-16px)
      scale(.68)
      rotate(calc(var(--bomb-debris-spin) * 1.4));
  }
}

@media (hover:none) and (pointer:coarse) {
  .fx-bomb-debris {
    width:11px !important;
    height:15px !important;
    box-shadow:none !important;
    animation-duration:900ms !important;
  }
}
/* =========================
   IMPACT GLOW PREMIUM
========================= */

.tile-impact-glow{

  position:absolute;

  left:50%;
  top:50%;

  width:140%;
  height:140%;

  transform:
    translate(-50%,-50%)
    scale(0.4);

  border-radius:50%;

  pointer-events:none;

  z-index:5;

  background:
    radial-gradient(
      circle,
      rgba(255,255,220,.95) 0%,
      rgba(255,210,80,.75) 28%,
      rgba(255,140,0,.45) 55%,
      rgba(255,80,0,.18) 75%,
      transparent 100%
    );

  animation:
    tileImpactGlow 320ms ease-out forwards;
}

@keyframes tileImpactGlow{

  0%{

    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.35);
  }

  25%{

    opacity:1;

    transform:
      translate(-50%,-50%)
      scale(1);
  }

  100%{

    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(1.6);
  }
}