.bg-war{
        background-image: url("/game/images/background-war.webp");
        background-size: cover; /* Ensures the image covers the entire viewport */
        background-position: center center; /* Centers the image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        min-height: 100vh; /* Ensures the body extends to at least the full viewport height */
        margin: 0; /* Removes default body margin */
        padding: 0; /* Removes default body padding */
    }

    .bg-home{
        background-image: url("/game/images/background-home.webp");
        background-size: cover; /* Ensures the image covers the entire viewport */
        background-position: center center; /* Centers the image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        min-height: 100vh; /* Ensures the body extends to at least the full viewport height */
        margin: 0; /* Removes default body margin */
        padding: 0; /* Removes default body padding */
    }


    .ripple-wrapper {
      position: relative;
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }


    .ripple-circle {
      position: absolute;
      border: 2px solid #343d3b;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      animation: ripple 2s infinite;
    }

    .ripple-circle.delay-1 {
      animation-delay: 0.3s;
    }
    .ripple-circle.delay-2 {
      animation-delay: 0.6s;
    }

    @keyframes ripple {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
      }
      70% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }

    .movehere {
        animation: movehere 1s ease-in-out infinite;
        display: inline-block;
    }

    @keyframes movehere {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-10px); }
        100% { transform: translateY(0); }
    }

    .base-img {
        width: 75px;
    }


    .empty-base {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #434343bd;
        box-shadow: 0 0 20px rgba(0, 255, 194, 0.8), 0 0 40px rgb(91 14 32 / 50%);
        z-index: 2;
    }

    .base-1 {
        position: absolute;
        top: 27vh;
        left: 32vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-2 {
        position: absolute;
        top: 29vh;
        left: 66vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-3 {
        position: absolute;
        top: 37vh;
        left: 55vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-4 {
        position: absolute;
        top: 39vh;
        left: 20vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-5 {
        position: absolute;
        top: 45vh;
        left: 40vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-6 {
        position: absolute;
        top: 44vh;
        left: 63vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-7 {
        position: absolute;
        top: 51vh;
        left: 18vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-8 {
        position: absolute;
        top: 57vh;
        left: 44vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-9 {
        position: absolute;
        top: 56vh;
        left: 77vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-10 {
        position: absolute;
        top: 62vh;
        left: 9vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .base-11 {
        position: absolute;
        top: 65vh;
        left: 69vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }


/* STYLE HALAMAN ATTACK_BASE */
.projectile {
    position: fixed;
    bottom: 0;
    width: 11px;
    height: 27px;
    background: linear-gradient(135deg, #ff0057, #e65f0f);
    border-radius: 30px;
    box-shadow: 0 0 12px rgb(74 255 241 / 80%), 0 0 20px rgba(0, 179, 255, .6);
    pointer-events: none;
    transform-origin: center;
    z-index: 50;
    will-change: transform;
}

.can-attack.impact {
    animation: pulse 0.3s ease;
}
@keyframes pulse {
    0% { box-shadow: 0 0 18px rgba(255,255,255,0.9); }
    100% { box-shadow: none; }
}

.bg-red{
    background:red;
}
.bg-blue{
    background:blue;
}
/* STYLE HALAMAN ATTACK_BASE */
.fire {
  font-size: 8px;
  filter: blur(0.02em);
  -webkit-filter: blur(0.02em);
  margin: 3em auto 0 auto;
  position: absolute;
    width: 6em;
    height: 1em;
}

.particle {
  animation: rise 1s ease-in infinite;
  background-image: radial-gradient(#ff5000 20%, rgba(255, 80, 0, 0) 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: 5em;
  height: 5em;
}
.particle:nth-of-type(1) {
  animation-delay: 0.2836974886s;
  left: calc((100% - 5em) * 0);
}
.particle:nth-of-type(2) {
  animation-delay: 0.2516530194s;
  left: calc((100% - 5em) * 0.02);
}
.particle:nth-of-type(3) {
  animation-delay: 0.8711595985s;
  left: calc((100% - 5em) * 0.04);
}
.particle:nth-of-type(4) {
  animation-delay: 0.7718202639s;
  left: calc((100% - 5em) * 0.06);
}
.particle:nth-of-type(5) {
  animation-delay: 0.3898396137s;
  left: calc((100% - 5em) * 0.08);
}
.particle:nth-of-type(6) {
  animation-delay: 0.1660583167s;
  left: calc((100% - 5em) * 0.1);
}
.particle:nth-of-type(7) {
  animation-delay: 0.5044441658s;
  left: calc((100% - 5em) * 0.12);
}
.particle:nth-of-type(8) {
  animation-delay: 0.5207163256s;
  left: calc((100% - 5em) * 0.14);
}
.particle:nth-of-type(9) {
  animation-delay: 0.3963744766s;
  left: calc((100% - 5em) * 0.16);
}
.particle:nth-of-type(10) {
  animation-delay: 0.0959733715s;
  left: calc((100% - 5em) * 0.18);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-10em) scale(0);
  }
}