/* Crush / crumble merge effects */

@keyframes tile-crush {
  0% {
    transform: scale(0.15);
    filter: brightness(1.2) saturate(1.2);
  }
  22% {
    transform: scale(1.45, 0.62);
    filter: brightness(1.55) saturate(1.35);
  }
  42% {
    transform: scale(0.78, 1.28);
  }
  62% {
    transform: scale(1.22);
    filter: brightness(1.25);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}

@keyframes tile-crush-source {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  40% {
    opacity: 0.9;
    transform: scale(1.12, 0.7) rotate(-4deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.25, 0.15) rotate(8deg);
  }
}

@keyframes crumble-shard-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.25);
  }
}

@keyframes crumble-heart-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.15), calc(var(--dy) * 0.1)) scale(1.15) rotate(var(--rot-start));
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.7) rotate(var(--rot));
  }
}

@keyframes crumble-sparkle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.2), calc(var(--dy) * 0.2)) scale(1.2) rotate(40deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.1) rotate(180deg);
  }
}

@keyframes crumble-ring {
  0% {
    opacity: 0.75;
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes board-crunch-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-3px, 2px); }
  35% { transform: translate(3px, -2px); }
  55% { transform: translate(-2px, -2px); }
  75% { transform: translate(2px, 1px); }
}

.tile-crumble .tile-inner {
  z-index: 25;
  animation: tile-crush 380ms cubic-bezier(0.18, 0.85, 0.2, 1) 70ms both;
  box-shadow: 0 0 24px 6px rgba(255, 220, 120, 0.35);
}

html[data-theme="bloom"] .tile-crumble .tile-inner {
  box-shadow: 0 0 24px 6px rgba(230, 120, 220, 0.4);
}

.tile-crumble-source .tile-inner {
  z-index: 24;
  animation: tile-crush-source 240ms ease-in 50ms both;
}

.crumble-burst {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 30;
}

.crumble-shard {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 12px);
  height: var(--size, 12px);
  margin-left: calc(var(--size, 12px) / -2);
  margin-top: calc(var(--size, 12px) / -2);
  border-radius: 4px;
  background: var(--shard-color, #f65e3b);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  animation: crumble-shard-fly 480ms cubic-bezier(0.12, 0.7, 0.2, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.crumble-heart {
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--size, 16px);
  line-height: 1;
  margin-left: -0.5em;
  margin-top: -0.5em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  animation: crumble-heart-fly 780ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.crumble-sparkle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 8px);
  height: var(--size, 8px);
  margin-left: calc(var(--size, 8px) / -2);
  margin-top: calc(var(--size, 8px) / -2);
  background: var(--shard-color, #fff6a8);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(255, 240, 150, 0.7);
  animation: crumble-sparkle 560ms ease-out forwards;
  animation-delay: var(--delay, 0ms);
}

.crumble-sparkle.is-star {
  border-radius: 2px;
  transform-origin: center;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.crumble-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 12px rgba(255, 210, 120, 0.55);
  animation: crumble-ring 420ms ease-out forwards;
}

html[data-theme="bloom"] .crumble-ring {
  border-color: rgba(255, 190, 230, 0.85);
  box-shadow: 0 0 12px rgba(220, 120, 220, 0.55);
}

.game-container.is-crunching {
  animation: board-crunch-shake 260ms ease-out;
}

/* Undo rewind */
.tile-rewind-out .tile-inner {
  z-index: 30;
  animation: rewind-vanish 240ms ease forwards;
}

.game-container.is-rewinding .tile {
  transition: transform 220ms ease-in-out !important;
}

@keyframes rewind-vanish {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.15);
  }
}

/* ---- Combo streak ---- */
.combo-banner {
  position: absolute;
  left: -34px;
  top: -14px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--combo-color);
  font-family: "Nunito", "Clear Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 0.95;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-45deg) scale(0.85);
  transform-origin: center center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: opacity 180ms ease;
}

.combo-banner.is-visible {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.combo-banner.is-pop {
  animation: combo-pop 560ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

.combo-banner.is-hot {
  color: var(--combo-color-hot);
  background: none;
  text-shadow: 0 0 12px rgba(255, 200, 120, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.combo-multiplier {
  position: relative;
  font-size: 34px;
  line-height: 1;
}

.combo-label {
  font-size: 12px;
  opacity: 0.95;
  margin-top: 2px;
}

.combo-burst {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0;
  height: 0;
  z-index: 40;
  pointer-events: none;
}

.combo-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 8px);
  height: var(--size, 8px);
  margin-left: calc(var(--size, 8px) / -2);
  margin-top: calc(var(--size, 8px) / -2);
  border-radius: 50%;
  background: var(--color, #edc22e);
  box-shadow: 0 0 10px var(--color, #edc22e);
  animation: combo-spark-fly 650ms ease-out forwards;
  animation-delay: var(--delay, 0ms);
}

.combo-burst.is-hot .combo-spark {
  box-shadow: 0 0 14px var(--color, #ffd36b);
}

.combo-burst.is-epic .combo-spark {
  box-shadow: 0 0 16px var(--color, #ffe566);
}

@keyframes combo-pop {
  0% { transform: rotate(-45deg) scale(0.7); }
  45% { transform: rotate(-45deg) scale(1.2); }
  100% { transform: rotate(-45deg) scale(1); }
}

@keyframes combo-spark-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  25% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.25), calc(var(--dy) * 0.25)) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

/* ---- Mega merge (4096+) ---- */
@keyframes mega-earthquake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  8% { transform: translate(-8px, 4px) rotate(-0.5deg); }
  16% { transform: translate(9px, -5px) rotate(0.55deg); }
  24% { transform: translate(-7px, -3px) rotate(-0.4deg); }
  32% { transform: translate(8px, 4px) rotate(0.45deg); }
  40% { transform: translate(-6px, 5px) rotate(-0.5deg); }
  48% { transform: translate(7px, -4px) rotate(0.35deg); }
  56% { transform: translate(-4px, -4px) rotate(-0.25deg); }
  64% { transform: translate(5px, 3px) rotate(0.25deg); }
  72% { transform: translate(-3px, 2px) rotate(-0.15deg); }
  80% { transform: translate(3px, -2px) rotate(0.12deg); }
  90% { transform: translate(-1px, 1px) rotate(-0.06deg); }
}

@keyframes mega-tile-pop {
  0% {
    transform: scale(0.2);
    filter: brightness(1.8) saturate(1.4);
  }
  30% {
    transform: scale(1.55);
    filter: brightness(1.6) saturate(1.5);
  }
  55% {
    transform: scale(0.92);
  }
  75% {
    transform: scale(1.18);
    filter: brightness(1.25);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}

@keyframes mega-flash {
  0% { opacity: 0; }
  15% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes mega-firework-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2) rotate(0deg);
  }
  18% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.2), calc(var(--dy) * 0.2)) scale(1.25) rotate(calc(var(--spin) * 0.3));
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.15) rotate(var(--spin));
  }
}

.tile-mega-merge .tile-inner {
  animation: mega-tile-pop 720ms cubic-bezier(0.2, 0.85, 0.25, 1) !important;
  box-shadow: 0 0 28px rgba(237, 194, 46, 0.65);
}

body.is-mega-merging .container {
  animation: mega-earthquake 1100ms linear;
}

body.is-mega-tier-1 .container {
  animation-duration: 1250ms;
}

body.is-mega-tier-2 .container {
  animation-duration: 1400ms;
}

.mega-merge-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
  overflow: hidden;
}

.mega-merge-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 246, 200, 0.75), rgba(255, 200, 80, 0.2) 40%, transparent 70%);
  animation: mega-flash 700ms ease-out forwards;
}

.mega-firework {
  position: absolute;
  width: 0;
  height: 0;
  animation: mega-flash 80ms ease-out var(--delay, 0ms) both;
}

.mega-firework-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 8px);
  height: var(--size, 8px);
  margin-left: calc(var(--size, 8px) / -2);
  margin-top: calc(var(--size, 8px) / -2);
  border-radius: 50%;
  background: var(--color, #edc22e);
  box-shadow: 0 0 12px var(--color, #edc22e);
  animation: mega-firework-fly 900ms cubic-bezier(0.15, 0.75, 0.25, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.mega-firework-spark.is-star {
  border-radius: 2px;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .tile-crumble .tile-inner,
  .tile-crumble-source .tile-inner,
  .tile-mega-merge .tile-inner,
  .crumble-shard,
  .crumble-heart,
  .crumble-sparkle,
  .crumble-ring,
  .game-container.is-crunching,
  .combo-banner.is-pop,
  .combo-spark,
  .tile-rewind-out .tile-inner,
  body.is-mega-merging .container,
  .mega-merge-flash,
  .mega-firework-spark {
    animation: none !important;
  }
}