/* body {
      background: black;
      color: white;
      font-family: Arial, sans-serif;      
      margin: 0;
      padding: 0;
    } */

    #gameWrapper {
      width: 1080px;
      height: 80vh;
      left: 50px;
      top: 10px;
      margin: 5px auto;
      position: relative;
      /* background: #000; */
      overflow: hidden;
      /* border: 3px solid white; */
    }

    #player {
      position: absolute;
      width: 58px;
      height: 50px;
      background-size: auto;
      background-image: url("assets/images/games/Player5.png");
      /* background-image: url("assets/images/games/Game_Enemy_N.png"); */
      background-repeat: no-repeat;
      /* border:1px solid black; */
      filter: drop-shadow(0 0 4px red);
      /* box-shadow: 20px 20px 50px 10px rgba(146, 21, 21, 0.5); */
      /* border-radius: 0px 10px 10px 0px; */
      padding: 10px;
      /* background: blue; */
      /* border-radius: 50%; */
      opacity: 0;
      animation: fadeInMove 2s forwards;
    }


    @keyframes fadeInMove {
      from {
        opacity: 0;
        transform: translateX(-50px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .bullet,
    .enemyBullet {
      position: absolute;
      width: 6px;
      height: 6px;
      background: yellow;
      border-radius: 50%;
    }

    .enemyBullet {
      background: lime;
    }

    /* .enemy {
      position: absolute;
      width: 20px;
      height: 15px;
      background: red;
      border-radius: 5px;
    } */

    /* enemy css new */
    .enemy {
      width: 25px;
      height: 30px;
      border-radius: 50% 50% 40% 40%;
      /* UFO-like top */
      /* background: radial-gradient(circle at 30% 30%, #00ffea, #003cff, #ff00f5);
      box-shadow: 0 0 10px #00ffe0, 0 0 20px #ff00ff, 0 0 30px #00e1ff; */
      /* background: radial-gradient(circle at 30% 30%, #4deeea, #3b3b98, #6c5ce7);
      box-shadow: 0 0 5px #4deeea, 0 0 10px #6c5ce7, 0 0 15px #3b3b98; */

      background: radial-gradient(circle at 30% 30%, #4deeea, #3b3b98, #6c5ce7);
      box-shadow: 0 0 5px #4deeea, 0 0 10px #6c5ce7, 0 0 15px #3b3b98;
      position: absolute;
      animation: float 3s infinite ease-in-out, glowShift 8s infinite alternate;
    }

    /* glowing dome */
    .enemy::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 4px;
      width: 17px;
      height: 10px;
      background: radial-gradient(circle at center, #fff, transparent);
      border-radius: 50%;
      opacity: 0.7;
    }

    /* base legs / thrusters */
    .enemy::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 5px;
      width: 15px;
      height: 6px;
      background: linear-gradient(to bottom, #ff0077, #ffea00);

      border-radius: 50%;
      box-shadow: 0 0 5px #ff0077, 0 0 10px #ffea00;
      animation: thruster 0.6s infinite alternate;
    }

    @keyframes float {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-8px);
      }

      100% {
        transform: translateY(0px);
      }
    }

    @keyframes glowShift {
      0% {
        filter: hue-rotate(0deg);
      }

      100% {
        filter: hue-rotate(360deg);
      }
    }

    @keyframes thruster {
      0% {
        transform: scaleY(0.7);
        opacity: 0.6;
      }

      100% {
        transform: scaleY(1.2);
        opacity: 1;
      }
    }

    /* enemy css new */

    .shooter {
      /* background: orange; */
      /* background: radial-gradient(circle at 30% 30%, #00ffea, #003cff, #ff00f5); */
      /* background: radial-gradient(circle at 30% 30%, #00ffea, #003cff, #090709);
      box-shadow: 0 0 10px #d0dc23, 0 0 20px #ff00ff, 0 0 30px #00e1ff; */
      background: radial-gradient(circle at 30% 30%, #ffea00, #ff0077, #ff00f5);
      box-shadow: 0 0 12px #ff0077, 0 0 20px #ff00f5, 0 0 35px #ffea00;

      animation: float 3s infinite ease-in-out, glowShift 0.01s infinite alternate;
    }

    /* .boss {
      position: absolute;
      width: 150px;
      height: 100px;
      background: purple;
      border-radius: 10px;
    } */

    .boss {
      position: absolute;
      width: 180px;
      height: 100px;
      background: radial-gradient(circle at 20% 50%, #ff00ff, #5a00b0, #220022);
      border-radius: 60% 40% 40% 60% / 50% 50% 50% 50%;
      /* head on left, tail on right */
      box-shadow:
        0 0 20px #ff00ff,
        0 0 40px #a200ff,
        0 0 60px #ff0077;
      /* animation: bossFloat 3s ease-in-out infinite; */
      animation: bossFloatX 3s ease-in-out infinite;
    }

    /* glowing cockpit "eye" on the left */
    .boss::before {
      content: "";
      position: absolute;
      left: 15px;
      top: 35%;
      width: 25px;
      height: 25px;
      background: radial-gradient(circle, #00ffe0, #003cff);
      border-radius: 50%;
      box-shadow: 0 0 15px #00ffe0, 0 0 25px #00d9ff;
    }

    /* glowing thruster at the tail */
    .boss::after {
      content: "";
      position: absolute;
      right: -15px;
      top: 30%;
      width: 30px;
      height: 30px;
      background: radial-gradient(circle, #ffea00, #ff5500);
      border-radius: 50%;
      box-shadow: 0 0 20px #ff5500, 0 0 40px #ffea00;
      animation: thrusterFlicker 0.2s infinite alternate;
    }

    /* animations */
    @keyframes bossFloatX {
      0% {
        transform: translateX(0);
      }

      50% {
        transform: translateX(-20px);
      }

      100% {
        transform: translateX(0);
      }
    }

    @keyframes thrusterFlicker {
      0% {
        opacity: 0.6;
        transform: scale(1);
      }

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


    #hud {
      text-align: center;
      /* margin-bottom: 5px; */
      margin: 25px auto;
    }

    #scoreBoard,
    #gunCounter,
    #enemyCounter,
    #levelCounter {
      display: inline-block;
      margin: 0 10px;
      padding: 5px 10px;
      /* background: purple;
      border-radius: 5px; */
      background: rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    #healthBarContainer {
      width: 200px;
      height: 15px;
      background: rgb(11, 56, 1);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      /* border: 1px solid white; */
      border-radius: 5px;
      display: inline-block;
      margin-left: 15px;
      overflow: hidden;
    }

    #healthBar {
      width: 100%;
      height: 100%;
      background: limegreen;
    }

    /* Modal Overlay */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(18, 16, 156, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      visibility: hidden;
      opacity: 0;
      transition: 0.3s ease;
      z-index: 9999;
    }

    /* Show modal */
    .modal.show {
      visibility: visible;
      opacity: 1;
    }

    /* Modal Content */
    .modal-content {
      /* background: #111; */
      background: rgba(3, 102, 132, 0.362);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
      padding: 30px;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 0 20px #0ff;
      width: 300px;
      max-width: 90%;
    }

    .modal h2 {
      margin: 0 0 15px;
      font-size: 24px;
    }

    .modal button {
      padding: 10px 20px;
      border: none;
      background: #00ffea;
      color: #111;
      font-weight: bold;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 10px;
    }

    .modal button:hover {
      background: #ff00f5;
      color: #fff;
    }

    #hud button {
      padding: 8px 15px;
      border: none;
      border-radius: 8px;
      /* background: #222; */
      background: rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #0ff;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
    }

    #hud button:hover {
      background: rgba(47, 155, 155, 0.123);
      border: 1px solid rgb(4, 122, 158);
      color: #111;
    }