/* One cinematic impact: warm flash, pressure rings, fire, smoke and fragments. */
.bomb-blast[hidden] {
  display: none !important;
}
.bomb-blast {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #092630ed;
  animation: blast-curtain 1.8s ease-out both;
  pointer-events: auto;
  touch-action: none;
}
.blast-flash {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    #fff5cb 0%,
    #ffc578 25%,
    #ec683f88 55%,
    transparent 80%
  );
  animation: blast-flash 0.65s ease-out both;
}
.blast-scene {
  position: relative;
  width: min(88vw, 740px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: blast-impact 0.5s ease-out both;
}
.blast-fireball {
  position: absolute;
  inset: 5%;
  border-radius: 45%;
  background: radial-gradient(
    circle,
    #fff7cf 0 18%,
    #ffcf71 30%,
    #fa8548 50%,
    #ec683f 62%,
    #ec683f00 73%
  );
  filter: drop-shadow(0 0 32px #ffb35a88);
  clip-path: polygon(
    50% 0,
    57% 15%,
    71% 3%,
    73% 20%,
    91% 13%,
    85% 33%,
    100% 38%,
    89% 51%,
    100% 67%,
    82% 70%,
    87% 91%,
    67% 83%,
    61% 100%,
    49% 87%,
    32% 99%,
    29% 81%,
    9% 88%,
    16% 68%,
    0 60%,
    13% 48%,
    1% 30%,
    22% 29%,
    17% 9%,
    38% 18%
  );
  animation: blast-fire 1.45s cubic-bezier(0.12, 0.65, 0.2, 1) both;
}
.blast-shockwave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50vmin;
  aspect-ratio: 1;
  border: 9px solid #ffe9b4aa;
  border-radius: 50%;
  box-shadow:
    0 0 18px #ffbe7470,
    inset 0 0 18px #ffbe7470;
  animation: blast-wave 1s cubic-bezier(0.08, 0.65, 0.2, 1) both;
}
.blast-shockwave-two {
  border-width: 3px;
  animation-delay: 0.12s;
}
.blast-smoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 45% 55% 38% 62%;
  background: radial-gradient(
    circle at 35% 30%,
    #cfc2a9,
    #756e63 65%,
    #113e50 100%
  );
  box-shadow:
    12px 7px 0 #68635488,
    -12px -5px 0 #c6aa8166;
  animation: blast-smoke 1.65s cubic-bezier(0.16, 0.7, 0.25, 1) both;
  animation-delay: 0.07s;
}
.blast-smoke-1 {
  --dx: -105%;
  --dy: -110%;
  --turn: -32deg;
}
.blast-smoke-2 {
  --dx: 15%;
  --dy: -145%;
  --turn: 40deg;
}
.blast-smoke-3 {
  --dx: 100%;
  --dy: -70%;
  --turn: 67deg;
}
.blast-smoke-4 {
  --dx: 110%;
  --dy: 25%;
  --turn: -25deg;
}
.blast-smoke-5 {
  --dx: 40%;
  --dy: 115%;
  --turn: 28deg;
}
.blast-smoke-6 {
  --dx: -80%;
  --dy: 110%;
  --turn: -60deg;
}
.blast-smoke-7 {
  --dx: -160%;
  --dy: 20%;
  --turn: 30deg;
}
.blast-smoke-8 {
  --dx: -170%;
  --dy: -70%;
  --turn: -45deg;
}
.blast-debris {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 24px;
  border-radius: 3px;
  background: var(--cream);
  animation: blast-debris 1.35s cubic-bezier(0.12, 0.6, 0.3, 1) both;
}
.blast-debris:nth-of-type(3n) {
  background: var(--orange);
  border-radius: 50%;
  height: 14px;
}
.blast-debris:nth-of-type(3n + 1) {
  background: #f7c871;
  width: 9px;
  height: 30px;
}
.blast-debris-1 {
  --dx: -35vw;
  --dy: -36vh;
  --turn: 290deg;
}
.blast-debris-2 {
  --dx: -14vw;
  --dy: -42vh;
  --turn: -180deg;
}
.blast-debris-3 {
  --dx: 11vw;
  --dy: -38vh;
  --turn: 230deg;
}
.blast-debris-4 {
  --dx: 34vw;
  --dy: -34vh;
  --turn: -260deg;
}
.blast-debris-5 {
  --dx: 43vw;
  --dy: -9vh;
  --turn: 340deg;
}
.blast-debris-6 {
  --dx: 39vw;
  --dy: 20vh;
  --turn: 210deg;
}
.blast-debris-7 {
  --dx: 22vw;
  --dy: 39vh;
  --turn: -320deg;
}
.blast-debris-8 {
  --dx: 2vw;
  --dy: 44vh;
  --turn: 230deg;
}
.blast-debris-9 {
  --dx: -20vw;
  --dy: 35vh;
  --turn: -270deg;
}
.blast-debris-10 {
  --dx: -39vw;
  --dy: 24vh;
  --turn: 190deg;
}
.blast-debris-11 {
  --dx: -43vw;
  --dy: 2vh;
  --turn: -230deg;
}
.blast-debris-12 {
  --dx: -40vw;
  --dy: -19vh;
  --turn: 310deg;
}
.blast-lettering {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  transform: rotate(-8deg);
  animation: blast-word 1.7s cubic-bezier(0.2, 0.85, 0.3, 1.1) both;
}
.blast-lettering strong {
  display: block;
  font-family: var(--sans);
  font-size: clamp(76px, 18vw, 230px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.08em;
  -webkit-text-stroke: 3px #113e50;
  paint-order: stroke fill;
  text-shadow:
    5px 6px 0 #113e50,
    9px 12px 0 #113e5055;
}
.blast-caption {
  display: block;
  font-size: clamp(10px, 1.3vw, 15px);
  letter-spacing: 3px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #113e50;
}
.blast-after {
  display: inline-block;
  background: var(--cream);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 5px;
  font-size: clamp(15px, 2vw, 23px);
  font-weight: 750;
  margin-top: 30px;
  box-shadow: 4px 5px 0 #113e5040;
  transform: rotate(5deg);
}
@keyframes blast-curtain {
  0% {
    opacity: 0;
  }
  6%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blast-flash {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  12% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes blast-impact {
  0% {
    transform: translate(0, 0);
  }
  12% {
    transform: translate(-10px, 6px);
  }
  26% {
    transform: translate(8px, -5px);
  }
  43% {
    transform: translate(-6px, 3px);
  }
  65% {
    transform: translate(3px, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes blast-fire {
  0% {
    transform: scale(0.08) rotate(-18deg);
    opacity: 0;
  }
  17% {
    opacity: 1;
  }
  55% {
    transform: scale(1.15) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.3) rotate(10deg);
    opacity: 0;
  }
}
@keyframes blast-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.05);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(6);
    opacity: 0;
  }
}
@keyframes blast-smoke {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
  }
  23% {
    opacity: 0.95;
  }
  65% {
    opacity: 0.6;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1.8) rotate(var(--turn));
    opacity: 0;
  }
}
@keyframes blast-debris {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--turn));
    opacity: 0;
  }
}
@keyframes blast-word {
  0%,
  6% {
    transform: scale(0.1) rotate(-20deg);
    opacity: 0;
  }
  23% {
    transform: scale(1.12) rotate(-8deg);
    opacity: 1;
  }
  38%,
  80% {
    transform: scale(1) rotate(-8deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.07) rotate(-5deg);
    opacity: 0;
  }
}
@media (max-width: 640px) {
  .blast-scene {
    width: 110vw;
  }
  .blast-lettering strong {
    font-size: 24vw;
    -webkit-text-stroke: 2px #113e50;
    text-shadow:
      3px 4px 0 #113e50,
      6px 8px 0 #113e5040;
  }
  .blast-caption {
    letter-spacing: 1.5px;
    margin-bottom: 17px;
  }
  .blast-after {
    margin-top: 23px;
  }
  .blast-debris {
    width: 10px;
    height: 17px;
  }
  .blast-shockwave {
    border-width: 5px;
  }
}
.blast-shockwave-one {
  animation-duration: 1.6s;
}
.blast-shockwave-two {
  animation-duration: 1.55s;
  animation-delay: 0.15s;
}
.blast-shockwave-three {
  animation-duration: 1.5s;
  animation-delay: 0.3s;
  border-width: 5px;
}
.blast-shockwave-four {
  animation-duration: 1.45s;
  animation-delay: 0.45s;
  border-width: 3px;
}
#bomb-active-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
}
#bomb-active-screen > h2,
#bomb-active-screen > .bomb-drawing,
#bomb-active-screen > p,
#bomb-active-screen > button {
  position: relative;
  z-index: 1;
}
.bomb-waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bomb-wave {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 245px;
  aspect-ratio: 1;
  border: 2px solid #005b7855;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 65%,
    #005b7814 70%,
    transparent 73%
  );
  box-shadow:
    0 0 0 8px #005b7806,
    0 0 16px #005b7814;
  animation: bomb-energy-wave 2.7s linear infinite;
}
.bomb-wave-two {
  animation-delay: -0.9s;
  border-color: #ec683f55;
}
.bomb-wave-three {
  animation-delay: -1.8s;
}
.bomb-game[data-state="paused"] .bomb-wave {
  animation-play-state: paused;
  opacity: 0.13;
}
@keyframes bomb-energy-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.28);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  65% {
    opacity: 0.45;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.95);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bomb-blast {
    animation: none;
    background: #113e50f2;
  }
  .blast-flash,
  .blast-shockwave,
  .blast-smoke,
  .blast-debris {
    display: none;
  }
  .blast-scene,
  .blast-fireball,
  .blast-lettering {
    animation: none;
    transform: none;
  }
  .blast-fireball {
    opacity: 0.9;
    filter: none;
  }
  .blast-lettering {
    transform: rotate(-5deg);
  }
  .bomb-wave {
    animation: none;
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(0.8);
  }
  .bomb-wave-two {
    transform: translate(-50%, -50%) scale(1.2);
  }
  .bomb-wave-three {
    transform: translate(-50%, -50%) scale(1.6);
  }
}