.crate-explosion {
  width: 300px;
  height: 238px;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(8, 10, 12, 0.5) 0 48px, transparent 74px),
    radial-gradient(circle at 50% 50%, rgba(255, 252, 218, 0.9) 0 18px, rgba(255, 209, 102, 0.72) 19px 38px, rgba(255, 114, 49, 0.48) 39px 68px, rgba(105, 42, 25, 0.22) 69px 94px, transparent 96px);
  filter:
    drop-shadow(0 0 14px rgba(255, 209, 102, 0.82))
    drop-shadow(0 0 28px rgba(255, 86, 52, 0.56));
  animation: crateExplosionEnhanced 1120ms cubic-bezier(0.14, 0.74, 0.22, 1) forwards;
}

.crate-explosion::before {
  width: 158px;
  height: 138px;
  clip-path: polygon(50% 0, 60% 25%, 91% 7%, 76% 38%, 100% 45%, 74% 57%, 91% 94%, 59% 74%, 50% 100%, 40% 74%, 8% 94%, 25% 57%, 0 45%, 24% 38%, 9% 7%, 40% 25%);
  background:
    radial-gradient(circle at 50% 52%, #fffdf0 0 15px, #ffe08a 16px 36px, #ff8a2a 37px 58px, #bd4422 59px 74px, transparent 75px),
    linear-gradient(135deg, rgba(255, 245, 198, 0.72), rgba(255, 91, 45, 0.84));
}

.crate-explosion::after,
.crate-explosion-smoke {
  filter:
    drop-shadow(2px 2px 0 #111923)
    drop-shadow(7px 10px 0 rgba(0, 0, 0, 0.24));
  animation: crateSmokeEnhanced 1280ms ease-out forwards;
}

.crate-explosion-flash {
  width: 112px;
  height: 96px;
  background:
    radial-gradient(circle at 50% 50%, #fffdf2 0 20px, #ffd166 21px 42px, rgba(255, 92, 45, 0.62) 43px 56px, transparent 58px);
  animation: crateFlashPopEnhanced 620ms ease-out forwards;
}

.crate-explosion-fireball {
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 164px;
  height: 128px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 44%, #fff9cf 0 18px, #ffd166 19px 38px, #ff7a2d 39px 60px, rgba(141, 47, 30, 0.44) 61px 78px, transparent 80px);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  animation: crateFireballBloom 720ms ease-out forwards;
}

.crate-explosion-shockwave {
  left: 50%;
  top: 56%;
  z-index: 2;
  width: 62px;
  height: 42px;
  border: 4px solid rgba(255, 209, 102, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(255, 209, 102, 0.48);
  animation: crateShockwaveExpand 680ms ease-out forwards;
}

.crate-explosion-splinter {
  left: 50%;
  top: 52%;
  z-index: 8;
  width: 34px;
  height: 10px;
  border-radius: 999px 6px 999px 6px;
  border: 2px solid #111923;
  background: linear-gradient(90deg, #6c3524, #c27a50 46%, #f2b077);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.24);
  animation: crateSplinterBurst 940ms ease-out forwards;
}

.splinter-1 { --dx: -118px; --dy: -88px; --rot: -34deg; }
.splinter-2 { --dx: 120px; --dy: -76px; --rot: 29deg; animation-delay: 24ms; }
.splinter-3 { --dx: -108px; --dy: 58px; --rot: 42deg; animation-delay: 42ms; }
.splinter-4 { --dx: 116px; --dy: 54px; --rot: -39deg; animation-delay: 62ms; }

.crate-explosion-plank {
  width: 68px;
  height: 48px;
  background:
    linear-gradient(90deg, rgba(17, 25, 35, 0.65) 0 4px, transparent 5px 58px, rgba(17, 25, 35, 0.58) 59px 64px),
    linear-gradient(180deg, rgba(255, 238, 198, 0.22), transparent 35%),
    linear-gradient(135deg, #7b3f2b 0 18%, #d28a5f 19% 58%, #9b5239 59% 100%);
}

.plank-1 { --dx: -112px; --dy: -72px; }
.plank-2 { --dx: 106px; --dy: -68px; }
.plank-3 { --dx: -96px; --dy: 52px; }
.plank-4 { --dx: 102px; --dy: 50px; }

.crate-explosion-metal {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #d2dae0, #606a73 48%, #242b32);
}

.metal-1 { --dx: -126px; --dy: -18px; }
.metal-2 { --dx: 124px; --dy: -12px; }

.crate-explosion-warning {
  width: 44px;
  height: 38px;
}

.crate-explosion-spark {
  box-shadow:
    -118px -28px 0 0 #ffd166,
    -92px -94px 0 1px #ff8a2a,
    -58px 84px 0 0 #ffd166,
    -12px -116px 0 1px #fffdf2,
    36px 100px 0 1px #ff8a2a,
    78px -82px 0 1px #ffd166,
    112px 38px 0 0 #fffdf2,
    132px -16px 0 1px #ff4d2f;
}

@keyframes crateExplosionEnhanced {
  0% { opacity: 0; transform: scale(0.16) rotate(-4deg); }
  8% { opacity: 1; transform: scale(0.78) rotate(2deg); }
  28% { opacity: 1; transform: scale(1.08) rotate(-1deg); }
  72% { opacity: 0.88; transform: scale(1.14) rotate(1deg); }
  100% { opacity: 0; transform: scale(1.24) rotate(3deg); }
}

@keyframes crateFlashPopEnhanced {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.24) rotate(-8deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(4deg); }
  48% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.35) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.58) rotate(6deg); }
}

@keyframes crateFireballBloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.24); }
  20% { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.58); }
}

@keyframes crateShockwaveExpand {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.28); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.1); }
}

@keyframes crateSmokeEnhanced {
  0% { opacity: 0; transform: translateY(22px) scale(0.5); }
  22% { opacity: 0.96; transform: translateY(2px) scale(0.92); }
  72% { opacity: 0.68; transform: translateY(-20px) scale(1.24); }
  100% { opacity: 0; transform: translateY(-48px) scale(1.52); }
}

@keyframes crateSplinterBurst {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(0.3); }
  22% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.3), calc(-50% + var(--dy) * 0.3)) rotate(calc(var(--rot) * 0.45)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.62); }
}