/* Scoped Reset for Navigation */
nav *,
.ball.hamburger,
.dropdown-menu,
.dropdown-ball,
.label {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Spinning for the Hamburger Dragon Ball Only */
    .ball.hamburger {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: orange;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rotateNormal 3s linear infinite;
    border: 2px solid black;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

    /* Replace margin with relative positioning */
    Right: 10%; /* Dynamic horizontal positioning */
    top: 5%;   /* Dynamic vertical positioning */
}

    .glow {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: 0 0 35px rgba(255, 255, 255, 0.6);
    }

    .reflections {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      z-index: 2000;
    }

    .reflection {
      position: absolute;
      border-radius: 50%;
    }

    .reflection:nth-child(1) {
      width: 77%;
      height: 77%;
      top: -2%;
      right: -2%;
      opacity: 0.7;
      background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, white 100%);
    }

    .stars {
      position: absolute;
    }
    
   
     .star {
      position: relative;
      display: center;
      font-size: 14px; /* 18px for the hamburger menu Dragon Ball */
      color: red;
    }


    /* Dropdown Menu Styling */
    .dropdown-menu {
     display: none;
     position: absolute;
     outline: none;
    -webkit-tap-highlight-color: transparent;
      user-select: none;
      top: 160px;
      right:60px; /* Adjusting to the right   side */
      border-radius: 8px;
      padding: 10px;
      z-index: 700000;
      
      transform-origin: top left; /* Make the menu items drop in a curve */
    }
       

    /* Menu items styled as Dragon Balls (No Spin) */
.dropdown-ball {
  margin-bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: orange;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: absolute;
  border: 2px solid black;
  z-index: 800000;
  
}


.dropdown-ball .stars {
  position: absolute;
  width: 40%;
  height: 40%;
}

.dropdown-ball .star {
  position: absolute;
  color: red;
  font-size: 14px; /* Set to 14px for dropdown Dragon Balls */
}

    /* Curve each ball along an arc downwards to the right (rotated another 5°) */
    .ball.two {
      transform: rotate(-125deg) translateX(115px); /* Further down */
    }

    .ball.three {
      transform: rotate(-175deg) translateX(115px); /* More down the arc */
    }

    .ball.four {
      transform: rotate(-225deg) translateX(115px); /* Bottom of the arc */
    }

    .ball.five {
      transform: rotate(-275deg) translateX(145px); /* Below the arc */
    }

    /* General adjustment for all stars */
.dropdown-ball .stars .star {
  font-size: 12px; /* Keep the smaller star size */
}

/* 2-Star Dragon Ball */
.ball.two .stars {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 45%; 
  left: 55%;
  transform: translate(-50%, -50%);
}
.ball.two .stars .star:nth-child(1) {
  top:24%;  /* Slightly closer */
  left:24%;
}
.ball.two .stars .star:nth-child(2) {
  bottom:24%;
  right: 24%;
}

/* 3-Star Dragon Ball */
.ball.three .stars {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}
.ball.three .stars .star:nth-child(1) {
  top: 10%;  /* Move the top star slightly closer to the center */
  left: 50%;
  transform: translateX(-50%);
}
.ball.three .stars .star:nth-child(2) {
  bottom: 28%;  /* Slightly further apart */
  left: 18%;
}
.ball.three .stars .star:nth-child(3) {
  bottom: 28%;  /* Slightly further apart */
  right: 18%;
}

/* 4-Star Dragon Ball */
.ball.four .stars {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}
.ball.four .stars .star:nth-child(1) {
  top: 12%;  /* Slightly closer */
  left: 22%;
}
.ball.four .stars .star:nth-child(2) {
  top: 12%;
  right: 22%;
}
.ball.four .stars .star:nth-child(3) {
  bottom: 12%;
  left: 22%;
}
.ball.four .stars .star:nth-child(4) {
  bottom: 12%;
  right: 22%;
}

/* 5-Star Dragon Ball */
.ball.five .stars {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}
.ball.five .stars .star:nth-child(1) {
  top: -1%;  /* Center star */
  left:52%;
  transform: translateX(-50%);
}
.ball.five .stars .star:nth-child(2) {
  top: 23%;  /* Top-left star */
  left:12%;
}
.ball.five .stars .star:nth-child(3) {
  top: 23%;  /* Top-right star */
  right:12%;
}
.ball.five .stars .star:nth-child(4) {
  bottom:14%;  /* Bottom stars slightly further away */
  left:20%;
}
.ball.five .stars .star:nth-child(5) {
  bottom:14%;
  right:20%;
}


    /* Show dropdown when the .show class is added */
    .dropdown-menu.show {
      display: block;
    }

    @keyframes rotateNormal {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes rotateFast {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

.hamburger {
        display: block;
      }

@keyframes scatterDragonBalls {
    0% { transform: rotate(0deg) translateX(0px) scale(0.5); opacity: 0; }
@keyframes rotateNormal {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateFast {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

    50% { opacity: 1; }
    100% { transform: var(--arc) translateY(30px); scale(1); opacity: 1; }
}




.dropdown-ball {
    width: 50px;
    height: 50px;
    background-color: orange;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: absolute;
    border: 2px solid black;
    z-index: 50000;
    
    transform-origin: 0 0;
    animation: scatterDragonBalls 0.4s ease-out forwards;
    opacity: 0;
}

/* Curve each ball along an arc downwards to the right, with a 30px shift down */
.ball.two { --arc: rotate(-155deg) translate(36px, -18px); animation-delay: 0.2s; }
.ball.three { --arc: rotate(-205deg) translateX(54px);animation-delay: 0.4s; }
.ball.four { --arc: rotate(-255deg) translateX(54px); animation-delay: 0.6s; }
.ball.five { --arc: rotate(-305deg)  translateX(54px); animation-delay: 0.8s; }

@keyframes gatherDragonBalls {
    0% { transform: var(--arc) translateY(30px) scale(1); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: rotate(0deg) translateX(0px) scale(0.5); opacity: 0; }
}

.dropdown-ball.reverse {
    animation: gatherDragonBalls 0.4s ease-out forwards;
}

.label {
    position: absolute;
    color: #FFFFFF;
    font-family: 'Impact', sans-serif;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.4s ease-in;
    z-index: 100000;
}

/* Adjust label positions using percentages or viewport units */
.label-home {
    top: 14%; /* Replace with a percentage for vertical alignment */
    right: 7%; /* Center horizontally */
    transform: translateX(-50%); /* Center-align */
}

.label-rankings {
    top:20%; /* Replace with a percentage for vertical alignment */
    right: 13%;
    transform: translateX(-50%); /* Ensure centering */
}

.label-characters {
    top:30%; /* Replace with a percentage for vertical alignment */
    right: 5%;
    transform: translateX(-50%);
}

.label-about {
    top:35%; /* Replace with a percentage for vertical alignment */
    right: -2%;
    transform: translateX(-50%);
}

/* Show labels when the .show class is added */
.label.show {
    opacity: 1;
    transition-delay: 0.4s;
}

@media (max-width: 768px) {
    .label-home {
        top: 14%;
        right: 7%;
    }
    .label-rankings {
        top: 20%;
        right: 13%;
    }
    .label-characters {
        top:30%;
        right: 5%;
    }
    .label-about {
        top: 35%;
        right: -2%; /* Adjust for smaller screen */
    }
}