/* Blackhole Sun Effect scoped for Road Knight Menu */

.blackhole-sun-container {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  transform: translate(-50%, -50%) scale(0.3);
  pointer-events: none;
}

.blackhole-sun-container .cover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  background: #000;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  box-shadow: 0 0 50px 10px rgba(200, 0, 0, 0.5);
  z-index: 10;
}

.blackhole-sun-container .sun-effect {
  position: absolute;
  width: 1000px;
  height: 1000px;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 1) 0,
    rgba(0, 0, 0, 1) 16%,
    rgba(0, 0, 0, 0.96) 21%,
    rgba(0, 0, 0, 0.72) 27%,
    rgba(0, 0, 0, 0.28) 33%,
    rgba(0, 0, 0, 0.08) 38%,
    rgba(0, 0, 0, 0) 44%
  );
  filter: blur(10px) contrast(15);
}

.blackhole-sun-container .sun_border {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  border: 15px solid yellow;
  border-radius: 100%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}

.blackhole-sun-container .sun_fire {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  animation-play-state: paused;
}

.blackhole-sun-container .sun_fire_inner {
  box-sizing: border-box;
  animation-play-state: paused;
}

.blackhole-sun-container.sun-active .sun_fire,
.blackhole-sun-container.sun-active .sun_fire_inner {
  animation-play-state: running;
}

/* Animations for 40 elements (matching the original HTML count) */
.blackhole-sun-container .sun_fire:nth-child(1) { animation: sunFire 7443ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(1) .sun_fire_inner {
  width: 55px; height: 55px; border-top: 12px solid orange; border-right: 11px solid orange; border-bottom: 7px solid orange; border-left: 14px solid orange; border-radius: 61% 48% 64% 43%;
  animation: sunFireInner 3162ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(2) { animation: sunFire 11450ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(2) .sun_fire_inner {
  width: 92px; height: 92px; border-top: 15px solid orange; border-right: 14px solid orange; border-bottom: 11px solid orange; border-left: 6px solid orange; border-radius: 51% 58% 49% 37%;
  animation: sunFireInner 2147ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(3) { animation: sunFire 14967ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(3) .sun_fire_inner {
  width: 80px; height: 80px; border-top: 9px solid orange; border-right: 12px solid orange; border-bottom: 13px solid orange; border-left: 10px solid orange; border-radius: 51% 47% 61% 20%;
  animation: sunFireInner 4504ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(4) { animation: sunFire 6183ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(4) .sun_fire_inner {
  width: 62px; height: 62px; border-top: 14px solid orange; border-right: 9px solid orange; border-bottom: 10px solid orange; border-left: 14px solid orange; border-radius: 46% 14% 60% 40%;
  animation: sunFireInner 2489ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(5) { animation: sunFire 11172ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(5) .sun_fire_inner {
  width: 74px; height: 74px; border-top: 6px solid orange; border-right: 12px solid orange; border-bottom: 9px solid orange; border-left: 10px solid orange; border-radius: 64% 66% 19% 60%;
  animation: sunFireInner 4373ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(6) { animation: sunFire 11511ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(6) .sun_fire_inner {
  width: 135px; height: 135px; border-top: 13px solid orange; border-right: 8px solid orange; border-bottom: 9px solid orange; border-left: 14px solid orange; border-radius: 42% 38% 23% 14%;
  animation: sunFireInner 4310ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(7) { animation: sunFire 10752ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(7) .sun_fire_inner {
  width: 93px; height: 93px; border-top: 12px solid orange; border-right: 13px solid orange; border-bottom: 9px solid orange; border-left: 6px solid orange; border-radius: 13% 43% 52% 74%;
  animation: sunFireInner 2481ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(8) { animation: sunFire 5846ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(8) .sun_fire_inner {
  width: 52px; height: 52px; border-top: 12px solid orange; border-right: 6px solid orange; border-bottom: 12px solid orange; border-left: 6px solid orange; border-radius: 57% 65% 47% 27%;
  animation: sunFireInner 4469ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(9) { animation: sunFire 6980ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(9) .sun_fire_inner {
  width: 79px; height: 79px; border-top: 8px solid orange; border-right: 13px solid orange; border-bottom: 15px solid orange; border-left: 10px solid orange; border-radius: 31% 36% 55% 12%;
  animation: sunFireInner 4121ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(10) { animation: sunFire 8076ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(10) .sun_fire_inner {
  width: 71px; height: 71px; border-top: 7px solid orange; border-right: 6px solid orange; border-bottom: 14px solid orange; border-left: 13px solid orange; border-radius: 79% 58% 15% 42%;
  animation: sunFireInner 3905ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(11) { animation: sunFire 5912ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(11) .sun_fire_inner {
  width: 122px; height: 122px; border-top: 8px solid orange; border-right: 14px solid orange; border-bottom: 8px solid orange; border-left: 14px solid orange; border-radius: 30% 14% 45% 73%;
  animation: sunFireInner 2312ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(12) { animation: sunFire 13607ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(12) .sun_fire_inner {
  width: 124px; height: 124px; border-top: 15px solid orange; border-right: 9px solid orange; border-bottom: 11px solid orange; border-left: 10px solid orange; border-radius: 25% 22% 26% 59%;
  animation: sunFireInner 3066ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(13) { animation: sunFire 14725ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(13) .sun_fire_inner {
  width: 134px; height: 134px; border-top: 14px solid orange; border-right: 14px solid orange; border-bottom: 9px solid orange; border-left: 15px solid orange; border-radius: 77% 34% 39% 61%;
  animation: sunFireInner 4751ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(14) { animation: sunFire 8313ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(14) .sun_fire_inner {
  width: 95px; height: 95px; border-top: 6px solid orange; border-right: 6px solid orange; border-bottom: 8px solid orange; border-left: 9px solid orange; border-radius: 25% 48% 30% 56%;
  animation: sunFireInner 4998ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(15) { animation: sunFire 12793ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(15) .sun_fire_inner {
  width: 56px; height: 56px; border-top: 7px solid orange; border-right: 14px solid orange; border-bottom: 11px solid orange; border-left: 15px solid orange; border-radius: 25% 34% 41% 46%;
  animation: sunFireInner 4128ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(16) { animation: sunFire 7600ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(16) .sun_fire_inner {
  width: 82px; height: 82px; border-top: 12px solid orange; border-right: 8px solid orange; border-bottom: 6px solid orange; border-left: 13px solid orange; border-radius: 52% 66% 70% 58%;
  animation: sunFireInner 3710ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(17) { animation: sunFire 11486ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(17) .sun_fire_inner {
  width: 96px; height: 96px; border-top: 12px solid orange; border-right: 11px solid orange; border-bottom: 14px solid orange; border-left: 7px solid orange; border-radius: 37% 54% 75% 67%;
  animation: sunFireInner 3252ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(18) { animation: sunFire 6985ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(18) .sun_fire_inner {
  width: 58px; height: 58px; border-top: 8px solid orange; border-right: 7px solid orange; border-bottom: 15px solid orange; border-left: 6px solid orange; border-radius: 54% 52% 63% 73%;
  animation: sunFireInner 2852ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(19) { animation: sunFire 7422ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(19) .sun_fire_inner {
  width: 42px; height: 42px; border-top: 13px solid orange; border-right: 13px solid orange; border-bottom: 8px solid orange; border-left: 8px solid orange; border-radius: 48% 63% 38% 27%;
  animation: sunFireInner 2727ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(20) { animation: sunFire 14015ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(20) .sun_fire_inner {
  width: 42px; height: 42px; border-top: 10px solid orange; border-right: 12px solid orange; border-bottom: 12px solid orange; border-left: 6px solid orange; border-radius: 56% 14% 12% 45%;
  animation: sunFireInner 2735ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(21) { animation: sunFire 14280ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(21) .sun_fire_inner {
  width: 76px; height: 76px; border-top: 6px solid orange; border-right: 14px solid orange; border-bottom: 12px solid orange; border-left: 8px solid orange; border-radius: 30% 77% 33% 11%;
  animation: sunFireInner 2783ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(22) { animation: sunFire 11422ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(22) .sun_fire_inner {
  width: 52px; height: 52px; border-top: 12px solid orange; border-right: 13px solid orange; border-bottom: 8px solid orange; border-left: 6px solid orange; border-radius: 23% 44% 77% 41%;
  animation: sunFireInner 4761ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(23) { animation: sunFire 8626ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(23) .sun_fire_inner {
  width: 129px; height: 129px; border-top: 6px solid orange; border-right: 14px solid orange; border-bottom: 9px solid orange; border-left: 12px solid orange; border-radius: 62% 68% 28% 33%;
  animation: sunFireInner 2771ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(24) { animation: sunFire 5994ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(24) .sun_fire_inner {
  width: 57px; height: 57px; border-top: 13px solid orange; border-right: 12px solid orange; border-bottom: 13px solid orange; border-left: 13px solid orange; border-radius: 61% 15% 47% 29%;
  animation: sunFireInner 3121ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(25) { animation: sunFire 11504ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(25) .sun_fire_inner {
  width: 53px; height: 53px; border-top: 11px solid orange; border-right: 9px solid orange; border-bottom: 6px solid orange; border-left: 11px solid orange; border-radius: 41% 37% 63% 30%;
  animation: sunFireInner 4462ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(26) { animation: sunFire 6043ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(26) .sun_fire_inner {
  width: 81px; height: 81px; border-top: 14px solid orange; border-right: 14px solid orange; border-bottom: 9px solid orange; border-left: 11px solid orange; border-radius: 74% 53% 17% 64%;
  animation: sunFireInner 4337ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(27) { animation: sunFire 13508ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(27) .sun_fire_inner {
  width: 94px; height: 94px; border-top: 11px solid orange; border-right: 6px solid orange; border-bottom: 11px solid orange; border-left: 6px solid orange; border-radius: 38% 50% 57% 72%;
  animation: sunFireInner 2187ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(28) { animation: sunFire 10947ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(28) .sun_fire_inner {
  width: 76px; height: 76px; border-top: 9px solid orange; border-right: 15px solid orange; border-bottom: 8px solid orange; border-left: 11px solid orange; border-radius: 25% 43% 44% 65%;
  animation: sunFireInner 2552ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(29) { animation: sunFire 13371ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(29) .sun_fire_inner {
  width: 136px; height: 136px; border-top: 8px solid orange; border-right: 6px solid orange; border-bottom: 15px solid orange; border-left: 8px solid orange; border-radius: 51% 21% 65% 27%;
  animation: sunFireInner 4953ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(30) { animation: sunFire 13530ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(30) .sun_fire_inner {
  width: 48px; height: 48px; border-top: 6px solid orange; border-right: 13px solid orange; border-bottom: 10px solid orange; border-left: 9px solid orange; border-radius: 20% 16% 14% 76%;
  animation: sunFireInner 4423ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(31) { animation: sunFire 10449ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(31) .sun_fire_inner {
  width: 80px; height: 80px; border-top: 15px solid orange; border-right: 14px solid orange; border-bottom: 7px solid orange; border-left: 7px solid orange; border-radius: 32% 62% 28% 78%;
  animation: sunFireInner 2907ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(32) { animation: sunFire 10652ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(32) .sun_fire_inner {
  width: 59px; height: 59px; border-top: 15px solid orange; border-right: 9px solid orange; border-bottom: 7px solid orange; border-left: 14px solid orange; border-radius: 36% 45% 20% 27%;
  animation: sunFireInner 4942ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(33) { animation: sunFire 10265ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(33) .sun_fire_inner {
  width: 99px; height: 99px; border-top: 12px solid orange; border-right: 11px solid orange; border-bottom: 14px solid orange; border-left: 7px solid orange; border-radius: 14% 61% 58% 46%;
  animation: sunFireInner 2303ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(34) { animation: sunFire 8119ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(34) .sun_fire_inner {
  width: 106px; height: 106px; border-top: 7px solid orange; border-right: 12px solid orange; border-bottom: 13px solid orange; border-left: 8px solid orange; border-radius: 16% 70% 35% 58%;
  animation: sunFireInner 2546ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(35) { animation: sunFire 9526ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(35) .sun_fire_inner {
  width: 95px; height: 95px; border-top: 7px solid orange; border-right: 8px solid orange; border-bottom: 15px solid orange; border-left: 14px solid orange; border-radius: 31% 54% 56% 47%;
  animation: sunFireInner 3014ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(36) { animation: sunFire 8379ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(36) .sun_fire_inner {
  width: 124px; height: 124px; border-top: 6px solid orange; border-right: 9px solid orange; border-bottom: 11px solid orange; border-left: 7px solid orange; border-radius: 21% 25% 55% 58%;
  animation: sunFireInner 3094ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(37) { animation: sunFire 13874ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(37) .sun_fire_inner {
  width: 77px; height: 77px; border-top: 11px solid orange; border-right: 6px solid orange; border-bottom: 11px solid orange; border-left: 15px solid orange; border-radius: 78% 43% 70% 60%;
  animation: sunFireInner 2406ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(38) { animation: sunFire 12038ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(38) .sun_fire_inner {
  width: 41px; height: 41px; border-top: 15px solid orange; border-right: 11px solid orange; border-bottom: 14px solid orange; border-left: 9px solid orange; border-radius: 72% 76% 49% 70%;
  animation: sunFireInner 3096ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(39) { animation: sunFire 8481ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(39) .sun_fire_inner {
  width: 43px; height: 43px; border-top: 13px solid orange; border-right: 12px solid orange; border-bottom: 6px solid orange; border-left: 12px solid orange; border-radius: 29% 65% 61% 74%;
  animation: sunFireInner 2839ms infinite alternate linear;
}

.blackhole-sun-container .sun_fire:nth-child(40) { animation: sunFire 5257ms infinite linear; }
.blackhole-sun-container .sun_fire:nth-child(40) .sun_fire_inner {
  width: 119px; height: 119px; border-top: 14px solid orange; border-right: 11px solid orange; border-bottom: 13px solid orange; border-left: 8px solid orange; border-radius: 18% 13% 46% 57%;
  animation: sunFireInner 3644ms infinite alternate linear;
}

@keyframes sunFire {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

@keyframes sunFireInner {
  0% { transform: translate(90px, -50%) rotateZ(0deg); }
  50% { transform: translate(140px, -50%) rotateZ(180deg); }
  100% { transform: translate(90px, -50%) rotateZ(360deg); }
}