@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
/* Hide cube initially until animation completes */
.cube-group {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Show cube only when animation is ready */
.cube-group.animation-ready {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 0.5s ease-in-out;
}

/* ==== Starfield Overlay ==== */
#starfield {
position: fixed;
top: 0;
left: 0;
width: 100vw;
 height: 100vh;
 pointer-events: none;
 z-index: 3;
 overflow: hidden;
}
.star {
 position: absolute;
 width: 1px;
 height: 1px;
 background-color: #fff;
 border-radius: 50%;
 animation: sparkle linear infinite;
}

@keyframes sparkle {
 0%, 100% { opacity: 0.3; transform: scale(1); filter: blur(0.5px); }
 25%   { opacity: 0.8; transform: scale(1.2); filter: blur(1px); }
 50%   { opacity: 0.5; transform: scale(0.8); filter: blur(0.3px); }
 75%   { opacity: 0.7; transform: scale(1.4); filter: blur(1.2px); }
}

#starfield::before {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 background:
  radial-gradient(1px 1px at 15px 25px, #ffffff, transparent),
  radial-gradient(2px 2px at 45px 15px, rgba(255,255,255,0.9), transparent),
  radial-gradient(1px 1px at 85px 45px, rgba(173,216,230,0.8), transparent),
  radial-gradient(1px 1px at 125px 75px, rgba(221,160,221,0.7), transparent),
  radial-gradient(2px 2px at 165px 95px, rgba(135,206,250,0.6), transparent),
  radial-gradient(2px 2px at 200px 85px, rgba(255,255,255,0.85), transparent),
  radial-gradient(1px 1px at 35px 95px, rgba(186,85,211,0.7), transparent);
 filter: blur(0.5px);
 background-repeat: repeat;
 background-size: 180px 120px;
 opacity: 0.9;
 animation: starTwinkle 25s linear infinite;
 animation: glowDepthPulse 20s ease-in infinite;
}

#starfield::after {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 background: 
  radial-gradient(1px 1px at 75px 35px, rgba(255,255,255,0.9), transparent),
  radial-gradient(1px 1px at 135px 85px, rgba(173,216,230,0.7), transparent),
  radial-gradient(2px 2px at 25px 65px, rgba(255,255,255,0.8), transparent),
  radial-gradient(1px 1px at 185px 45px, rgba(221,160,221,0.6), transparent),
  radial-gradient(1px 1px at 95px 15px, rgba(255,182,193,0.5), transparent);
 background-repeat: repeat;
 background-size: 220px 140px;
 opacity: 0.6;
 animation: starTwinkle 30s linear infinite reverse;
 animation: glowDepthPulse 25s ease-in infinite;
}

@keyframes starTwinkle {
 0%, 100% { 
  transform: translateY(0px);
  opacity: 0.6;
 }
 25% { 
  opacity: 0.9;
 }
 50% { 
  transform: translateY(-8px);
  opacity: 0.8;
 }
 75% { 
  opacity: 0.7;
 }
}
@keyframes glowDepthPulse {
 0% {
  transform: scale(1);
  opacity: 0.4;
  filter: blur(0.5px);
 }
 50% {
  transform: scale(1.2);
  opacity: 0.9;
  filter: blur(1.2px);
 }
 100% {
  transform: scale(1.3);
  opacity: 0.6;
  filter: blur(0.8px);
 }
}

/* ==== Base Reset & Layout ==== */
html, body {
 height: 100%;
 margin: 0; padding: 0;
 min-height: 100vh;
 font-family: 'Orbitron', Arial, sans-serif;
 background:
  radial-gradient(ellipse at top, #1c123d 0%, #08041a 60%, #000000 100%),
  radial-gradient(ellipse at bottom left, #2c1452 0%, #13062d 50%, transparent 100%),
  radial-gradient(ellipse at bottom right, #391c59 0%, #1e0936 40%, transparent 100%),
  linear-gradient(135deg, 
   rgba(30, 20, 70, 0.4) 0%, 
   rgba(10, 5, 30, 0.9) 35%, 
   rgba(25, 5, 45, 0.7) 60%, 
   rgba(0, 0, 0, 1) 100%);
 background-size: 100% 100%, 80% 60%, 70% 50%, 400% 400%;
 background-position: center, bottom left, bottom right, center;
 animation: deepSpaceFlow 35s ease infinite;
 position: relative;
 color: #f0f0f0;
 overflow-x: hidden;
 outline: none;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
@keyframes deepSpaceFlow {
 0%, 100% { 
  background-position: center, bottom left, bottom right, 0% 50%; 
 }
 50% { 
  background-position: center, bottom left, bottom right, 100% 50%; 
 }
}

body::after {
 content: '';
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
background:
  radial-gradient(circle at 20% 30%, rgba(90, 0, 180, 0.2) 0%, transparent 40%),
  radial-gradient(circle at 75% 35%, rgba(60, 100, 255, 0.18) 0%, transparent 38%),
  radial-gradient(circle at 50% 85%, rgba(72, 61, 139, 0.15) 0%, transparent 45%),
  radial-gradient(circle at 30% 60%, rgba(106, 90, 205, 0.12) 0%, transparent 40%),
  radial-gradient(circle at 80% 80%, rgba(148, 0, 211, 0.16) 0%, transparent 40%);
 filter: blur(90px);
 opacity: 0.85;
 z-index: 2;
 pointer-events: none;
 animation: cosmicDust 50s ease-in-out infinite;
}

@keyframes cosmicDust {
 0%, 100% { 
  transform: translateX(0px) translateY(0px) scale(1); 
  opacity: 0.7;
 }
 33% { 
  transform: translateX(-15px) translateY(-20px) scale(1.02); 
  opacity: 0.8;
 }
 66% { 
  transform: translateX(20px) translateY(-15px) scale(0.98); 
  opacity: 0.75;
 }
}

#cloudfield {
 position: fixed;
 top: 0; left: 0;
 width: 100vw;
 height: 100vh;
 pointer-events: none;
 z-index: 2;
 overflow: hidden;
}

.cloud {
 position: absolute;
 width: 200px;
 height: 120px;
 background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
 filter: blur(45px);
 animation: floatClouds 120s linear infinite;
 opacity: 0.12;
}

@keyframes floatClouds {
 0% { transform: translateX(-200px) translateY(0px); }
 100% { transform: translateX(100vw) translateY(-30px); }
}

*, *::before, *::after { box-sizing: inherit; }

/* ==== Headers ==== */
.main-header-Desktop, .main-header-Mobile {
 width: 100vw;
 text-align: center;
 position: absolute;
 left: 0; top: 0; z-index: 10;
}
.main-header-Desktop {
 display: block;
 padding: 0.7rem 0 1.1rem 0;
 background: rgba(0, 0, 0, 0.28);
 border-bottom: 2px solid rgba(255,255,255,0.13);
 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 backdrop-filter: blur(8px);
 outline: none;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
.headingDesktop {
 font-family: 'Orbitron', Arial, sans-serif;
 font-size: 2.5rem;
 color: #fff8e6;
 letter-spacing: 0.13em;
 text-shadow: 0 0 8px #302b63, 0 0 18px #ff00cc;
 margin: 0;
 outline: none;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
.main-header-Mobile {
 display: none;
 padding: 0.5rem 0 0.7rem 0;
 background: rgba(20,24,82,0.82);
 border-bottom: 1.5px solid #ff00cc;
 box-shadow: 0 2px 8px #ff00cc44;
 backdrop-filter: blur(3px);
 letter-spacing: 0.07em;
 box-sizing: border-box;
 outline: none;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
.headingMobile {
 font-family: 'Orbitron', Arial, sans-serif;
 font-size: 1.5rem;
 color: #ffb6f9;
 letter-spacing: 0.06em;
 text-shadow: 0 0 4px #302b63, 0 0 8px #ff00cc;
 margin: 0;
 animation: fireGlow 3s infinite ease-in-out;
 letter-spacing: 2px;
 padding-left: 10px;
 outline: none;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
@keyframes fireGlow {
 0%  {text-shadow:0 0 2px #ff7300,0 0 6px #ff7300,0 0 10px #ff4500,0 0 14px #ff0000; color: #ffe8cc;}
 50% {text-shadow:0 0 5px #ffa500,0 0 12px #ff4500,0 0 22px #ff0000,0 0 30px #ff0000; color: #fff0dd;}
 100% {text-shadow:0 0 3px #ff7300,0 0 8px #ff7300,0 0 16px #ff3300,0 0 24px #ff1100; color: #ffe6d0;}
}

/* ==== Desktop Navigation Ring ==== */
.cube-group.desktop-nav {
 display: block;
 position: absolute;
 top: 56%; left: 50%;
 transform: translate(-50%, -50%);
 width: 340px; height: 340px; z-index: 5;
}
#cube-Desktop {
 width: 70px; 
 height: 70px;
 background: linear-gradient(135deg, #00f0ff, #8f00ff);
 border-radius: 11px;
 box-shadow: 0 0 16px #00f0ff, 0 0 48px #8f00ff, 0 8px 36px rgba(34,0,56,0.14);
 position: absolute; 
 left: 50%; 
 top: 50%; 
 transform: translate(-50%, -50%); z-index: 1;
  outline: none;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
.circle-nav-Desktop {
 width: 260px; height: 260px;
 position: absolute; left: 50%; top: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
 opacity: 0; pointer-events: none;
 transition: opacity 0.3s;
 outline: none;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
}
.circle-nav-Desktop.active { opacity: 1; pointer-events: auto; }

.nav-item-Desktop {
 pointer-events: auto;
 position: absolute;
 left: 40%;
 top: 40%;
 width: 54px; 
 height: 54px;
 background: #fff; 
 border-radius: 50%;
 box-shadow: 0 6px 22px rgba(34,0,56,0.07);
 display: flex; 
 align-items: center; 
 justify-content: center;
 overflow: visible; 
 z-index: 3;
 transform:
  rotate(calc(var(--i) * (360deg / var(--n))))
  translate(108px)
  rotate(calc(-1 * var(--i) * (360deg / var(--n))));
 transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.nav-item-Desktop img {
 width: 54px; height: 54px;
 border-radius: 50%; object-fit: cover;
 display: block;
 background: #fff;
 outline: none;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
 will-change: transform, box-shadow;
 transform: translateZ(0);
}

.nav-tooltip-Desktop *,
.nav-tooltip-Desktop.reverse-tooltip * {
 pointer-events: none;
}

.nav-tooltip-Desktop {
 position: absolute;
 left: 100%;
 top: 50%;
 transform: translateY(-50%);
 width: 172px;
 height: 60px;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.18s;
 z-index: 20;
 display: flex;
 align-items: center;
}

.nav-label-box-Desktop {
 position: absolute;
 left: 56px;
 top: -67px;
 min-width: 50px;
 max-width: 150px;
 height: 38px;
 line-height: 38px;
 background: #292947;
 color: #fff;
 border-radius: 6px;
 padding: 0 16px;
 font-size: 1em;
 box-shadow: 0 6px 32px #0014;
 white-space: nowrap;
 opacity: 0;
 transform: scaleX(0.78);
 transition:
  opacity 0.17s 0.25s,
  transform 0.22s 0.25s cubic-bezier(.6,1.22,.44,.98);
 z-index: 3;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

.nav-real-line-Desktop {
 position: absolute;
 left: -8.0px;
 bottom: 90%;
 width: 60px;
 height: 28px;
 pointer-events: none;
 z-index: 2;
}

.nav-real-line-Desktop::before {
 content: "";
 position: absolute;
 left: 0;
 bottom: 34px;
 width: 47px;
 height: 5px;
 background: linear-gradient(45deg, #23a6d5, #8f00ff);
 border-radius: 2px;
 transform: rotate(-45deg);
}
.nav-real-line-Desktop::after {
 content: "";
 position: absolute;
 left: 38px;
 top: -27px;
 width: 10px;
 height: 5px;
 background: linear-gradient(90deg, #23a6d5, #8f00ff 90%);
 border-radius: 2px;
 transition: width 0.22s cubic-bezier(.6,1.15,.5,.98);
}

/* About Panel Slot */
#about-desktop-slot {
  position: relative;
  width: 100%;
  height: 100px;
  margin-top: 85px;
  margin-bottom: 2px;
  overflow: visible;
}

#about-desktop.about-desktop-slide {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -100vw;
  width: 100%;
  max-width: 99vw;
  height: 100%;
  background: #292947;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px #2227;
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  transition:
    right 0.85s cubic-bezier(.52,1.3,.44,1.02),
    opacity 0.45s;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  padding-right: 10px;
}
#about-desktop.about-desktop-slide.slide-in {
  right: 0;
  opacity: 1;
  pointer-events: auto;
}
#about-desktop-slot p {
  text-align: justify;
}

#about-desktop.about-panel-active {
  border: 3px solid #23a6d5;
  box-shadow: 
    0 0 0 2px #23a6d5,
    0 0 20px 5px #8f00ff99,
    0 10px 40px #2227;
  animation: about-panel-blink 1.3s cubic-bezier(.7,0,.3,1) infinite;
}

@keyframes about-panel-blink {
  0%, 100% { 
    border-color: #23a6d5;
    box-shadow: 
      0 0 0 2px #23a6d5,
      0 0 20px 5px #8f00ff77,
      0 10px 40px #2227;
  }
  50% { 
    border-color: #8f00ff;
    box-shadow: 
      0 0 0 4px #8f00ff,
      0 0 40px 12px #23a6d5bb,
      0 10px 40px #2227;
  }
}

@media (max-width: 1024px) {
  #about-desktop-slot { height: 400px; }
  #about-desktop.about-desktop-slide { padding: 25px 8vw 18px 6vw; }
}

@media (max-width: 768px) {
  #about-desktop-slot, #about-desktop { display: none !important; }
}

/* ------- REVERSE TOOLTIP (opens left) --------- */
.nav-tooltip-Desktop.reverse-tooltip {
 right: 100%;
 top: 50%;
 transform: translateY(-50%);
 width: 60px;
 height: 48px;
 left: -68.0px;
}
.nav-tooltip-Desktop.reverse-tooltip .nav-real-line-Desktop {
 left: auto;
 right: -35px;
}

.nav-tooltip-Desktop.reverse-tooltip .nav-real-line-Desktop::before {
 content: "";
 position: absolute;
 right: 0;
 bottom: 20px;
 width: 38px;
 height: 5px;
 background: linear-gradient(135deg, #23a6d5, #8f00ff);
 border-radius: 2px;
 transform: rotate(-135deg);
}
.nav-tooltip-Desktop.reverse-tooltip .nav-real-line-Desktop::after {
 content: "";
 position: absolute;
 top: -10px;
 width: 10px;
 height: 5px;
 left: -26px;
 background: linear-gradient(270deg, #23a6d5, #8f00ff 90%);
 border-radius: 2px;
 box-shadow: 0 0 4px #23a6d5aa;
 transition: width 0.22s cubic-bezier(.6,1.15,.5,.98);
}

.nav-label-box-Desktop-reverse{
  position: absolute;
 left: -95px;
 top: -40px;
 min-width: 88px;
 max-width: 125px;
 width: fit-content;
 min-height: 38px;
 max-height: 100px;
 line-height: 38px;
 background: #292947;
 color: #fff;
 border-radius: 6px;
 padding: 0 18px;
 font-size: 1em;
 box-shadow: 0 6px 32px #0014;
 white-space: pre;
 opacity: 0;
 transform: scaleX(0.78);
 transition:
  opacity 0.17s 0.25s,
  transform 0.22s 0.25s cubic-bezier(.6,1.22,.44,.98);
 z-index: 3;
}

.clash-tools-label {
  padding: 0 10px;
  min-width: 88px;
  max-width: 125px;
  width: fit-content;
  font-size: 0.82em;
}

.nav-dropdown-box-Desktop {
 display: none;
 position: absolute;
 right: 50px;
 top: -230px;
 min-width: 180px;
 max-width: 600px;
 background: #292947;
 color: #fff;
 border-radius: 6px;
 box-shadow: 0 6px 32px #0014;
 padding: 1px 1px;
 z-index: 5;
 pointer-events: auto !important;
 opacity: 1;
 visibility: visible;
 transform-origin: right center;
 animation: expandDropdown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes expandDropdown {
 0% {
  opacity: 0;
  transform: scaleX(0.5) scaleY(0.7);
  max-height: 32px;
 }
 100% {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
  max-height: 400px;
 }
}

.nav-dropdown-box-Desktop ul {
 list-style: none;
 padding: 0;
 margin: 8px 0;
 pointer-events: auto !important;
}

.nav-dropdown-box-Desktop li {
 margin: 6px 0;
 pointer-events: auto !important;
}

.nav-dropdown-box-Desktop a {
 pointer-events: auto !important;
 color: #fff;
 text-decoration: none;
 display: block;
 padding: 8px 12px;
 margin: 2px 0;
 border-radius: 4px;
 font-size: 0.9em;
 transition: all 0.2s ease;
 cursor: pointer;
}

.nav-dropdown-box-Desktop a:hover,
.nav-dropdown-box-Desktop a:focus {
 background-color: #23a6d5;
 outline: none;
 color: #fff;
}

.nav-dropdown-box-Desktop,
.nav-dropdown-box-Desktop *,
.nav-dropdown-box-Desktop ul,
.nav-dropdown-box-Desktop li,
.nav-dropdown-box-Desktop a {
 pointer-events: auto !important;
}

.nav-label-box-Desktop-reverse.clash-tools-label {
 cursor: pointer;
}

.nav-label-box-Desktop-reverse {
 position: absolute;
 left: -95px;
 top: -55px;
 min-width: 50px;
 max-width: 88px;
 width: fit-content;
 min-height: 38px;
 max-height: 100px;
 background: #292947;
 border: none;
 border-radius: 6px;
 box-shadow: 0 6px 32px #0014;
 cursor: pointer;
 opacity: 0;
 transform: scaleX(0.78);
 transition:
  opacity 0.17s 0.25s,
  transform 0.22s 0.25s cubic-bezier(.6,1.22,.44,.98),
  background-color 0.18s,
  box-shadow 0.18s;
 z-index: 3;
}

.clash-tools-label {
 pointer-events: auto !important;
 position: absolute;
 left: -105px;
 top: -52px;
 min-width: 100px;
 max-width: 120px;
 width: fit-content;
 height: 32px;
 min-height: 32px;
 max-height: 32px;
 line-height: 32px;
 background: #292947;
 color: #fff;
 border: none;
 border-radius: 50px;
 padding: 0 12px;
 font-family: 'Orbitron', Arial, sans-serif;
 font-size: 0.80em;
 box-shadow: 0 6px 32px #0014;
 white-space: nowrap;
 cursor: pointer;
 opacity: 0;
 transform: scaleX(0.78);
 transition:
  opacity 0.17s 0.25s,
  transform 0.22s 0.25s cubic-bezier(.6,1.22,.44,.98),
  background-color 0.18s,
  box-shadow 0.18s,
  color 0.18s;
 z-index: 3;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.nav-label-box-Desktop-reverse:hover,
.nav-label-box-Desktop-reverse:focus {
 background: #23a6d5;
 box-shadow: 0 8px 38px #23a6d5aa;
 opacity: 1;
 transform: scaleX(1);
}

.clash-tools-label:hover,
.clash-tools-label:focus {
 color: #fffbe7;
 outline: none;
}

.nav-item-Desktop.js-active .nav-real-line-Desktop::after,
.nav-tooltip-Desktop.js-active .nav-real-line-Desktop::after {
 width: 32px;
}
.nav-tooltip-Desktop.js-active {
 pointer-events: auto;
}

.nav-item-Desktop.js-active .nav-tooltip-Desktop.reverse-tooltip .nav-real-line-Desktop::after,
.nav-tooltip-Desktop.reverse-tooltip.js-active .nav-real-line-Desktop::after {
 width: 32px;
}

.nav-tooltip-Desktop.js-active .nav-label-box-Desktop {
  opacity: 1;
  transform: scaleX(1);
}

.nav-real-line-Desktop.reverse-real-line {
 position: absolute;
 left: 8.0px;
 bottom: 100%;
 width: 61px;
 height: 28px;
 pointer-events: none;
 z-index: 2;
}

.nav-real-line-Desktop.reverse-real-line::before {
 content: "";
 position: absolute;
 left: 0;
 bottom: 34px;
 width: 47px;
 height: 5px;
 background: linear-gradient(45deg, #23a6d5, #8f00ff);
 border-radius: 2px;
 transform: rotate(-45deg);
}
.nav-real-line-Desktop.reverse-real-line::after {
 content: "";
 position: absolute;
 left: 38px;
 top: -27px;
 width: 10px;
 height: 5px;
 background: linear-gradient(90deg, #23a6d5, #8f00ff 90%);
 border-radius: 2px;
 transition: width 0.22s cubic-bezier(.6,1.15,.5,.98);
}

.nav-tooltip-Desktop.reverse-tooltip .nav-real-line-Desktop.reverse-real-line::before {
content: "";
position: absolute;
right: 0;
bottom: 20px;
width: 38px;
height: 5px;
background: linear-gradient(135deg, #23a6d5, #8f00ff);
border-radius: 2px;
transform: rotate(-135deg);
}
.nav-tooltip-Desktop.reverse-tooltip .nav-real-line-Desktop.reverse-real-line::after {
content: "";
position: absolute;
top: -10px;
width: 10px;
height: 5px;
left: -25px;
background: linear-gradient(270deg, #23a6d5, #8f00ff 90%);
border-radius: 2px;
box-shadow: 0 0 4px #23a6d5aa;
transition: width 0.22s cubic-bezier(.6,1.15,.5,.98);
}

.nav-item-Desktop.js-active .nav-label-box-Desktop,
.nav-label-box-Desktop.js-active {
 opacity: 1;
 transform: scaleX(1);
 text-decoration: underline #23a6d5;
}

.nav-item-Desktop.js-active .nav-label-box-Desktop-reverse,
.nav-label-box-Desktop-reverse.js-active {
 opacity: 1;
 transform: scaleX(1);
 text-decoration: underline #23a6d5;
}

.nav-item-Desktop.js-active .clash-tools-label,
.clash-tools-label.js-active {
 opacity: 1;
 transform: scaleX(1);
 text-decoration: underline #23a6d5;
}

.nav-item-Desktop:hover .nav-tooltip-Desktop.reverse-tooltip .nav-label-box-Desktop,
.nav-item-Desktop:focus .nav-tooltip-Desktop.reverse-tooltip .nav-label-box-Desktop {
 opacity: 1;
 transform: scaleX(1) translateY(-50%);
}

/* === Mobile: Unified Tooltip System === */
.nav-tooltip-Mobile {
 position: absolute;
 left: 100%;
 top: 50%;
 transform: translateY(-50%);
 width: 172px;
 height: 60px;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.18s;
 z-index: 20;
 display: flex;
 align-items: center;
}
.nav-tooltip-Mobile *,
.nav-tooltip-Mobile.reverse-tooltip * { pointer-events: none; }

/* ✅ UNIFIED: Reverse tooltip uses same positioning as normal tooltip */
.nav-tooltip-Mobile.reverse-tooltip {
 left: 100%; /* Same as normal tooltip */
 right: auto; /* Override any right positioning */
 top: 50%;
 transform: translateY(-50%);
 width: 172px;
 height: 60px;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.18s;
 z-index: 20;
 display: flex;
 align-items: center;
}

.cube-group.mobile-nav {
 display: none;
 position: absolute;
 top: 48%; left: 50%;
 transform: translate(-50%, -50%);
 width: 185px; height: 185px;
 z-index: 5;
}

#cube-Mobile {
 width: 40px;
 height: 40px;
 background: linear-gradient(135deg, #00f0ff, #8f00ff);
 border-radius: 7px;
 box-shadow: 0 0 8px #00f0ff, 0 0 18px #8f00ff, 0 4px 18px rgba(34,0,56,0.14);
 position: absolute;
 left: 50%; top: 50%;
 transform: translate(-50%, -50%) translateZ(0);
 outline: none; user-select: none;
 will-change: transform;
 z-index: 1;
 transition: opacity 0.22s cubic-bezier(.6,1.22,.44,.98);
}
#cube-Mobile.hide {
 opacity: 0;
 pointer-events: none;
}

.circle-nav-Mobile {
 width: 128px; height: 128px;
 position: absolute; left: 50%; top: 50%;
 transform: translate(-50%, -50%) translateZ(0);
 z-index: 2;
 opacity: 0;
 pointer-events: none;
 will-change: opacity;
 transition: opacity 0.3s;
}
.circle-nav-Mobile.active { opacity: 1; pointer-events: auto; }

.nav-item-Mobile {
 position: absolute; 
 left: 29%; top: 30%;
 width: 37px; height: 37px;
 background: #fff;
 border-radius: 50%;
 display: flex; flex-direction: column;
 align-items: center; justify-content: center;
 box-shadow: 0 4px 16px rgba(34,0,56,0.09);
 overflow: visible; z-index: 3;
 transform:
  rotate(calc(var(--i)*(360deg/var(--n))))
  translate(70px)
  rotate(calc(-1 * var(--i)*(360deg/var(--n))))
  translateZ(0);
 transition:
  left .3s cubic-bezier(.77,0,.18,1),
  top .3s cubic-bezier(.77,0,.18,1),
  transform .3s cubic-bezier(.77,0,.18,1),
  opacity .22s, box-shadow .18s;
 padding-top: 2px;
 will-change: transform, box-shadow;
 backface-visibility: hidden;
 touch-action: manipulation;
 -webkit-tap-highlight-color: transparent;
}

.nav-item-Mobile.about-active {
 box-shadow: 
  0 0 0 3px #23a6d5,
  0 0 16px 4px #8f00ff99,
  0 4px 16px rgba(34,0,56,0.09);
 animation: mobile-nav-blink 1.3s ease-in-out infinite;
}

@keyframes mobile-nav-blink {
 0%, 100% { 
  box-shadow: 
   0 0 0 3px #23a6d5,
   0 0 16px 4px #8f00ff77,
   0 4px 16px rgba(34,0,56,0.09);
 }
 50% { 
  box-shadow: 
   0 0 0 6px #8f00ff,
   0 0 32px 8px #23a6d5bb,
   0 4px 16px rgba(34,0,56,0.09);
 }
}

.nav-item-Mobile img {
 width: 44px; height: 44px;
 border-radius: 50%; object-fit: cover;
 background: #fff;
 display: block;
 will-change: transform;
}

/* === Center & Hide Others (FOCUS EFFECT) === */
.nav-item-Mobile.centered {
 left: 50% !important; top: 50% !important;
 transform: translate(-50%, -50%) scale(1.18);
 z-index: 21;
 box-shadow: 0 12px 32px #23a6d544;
 transition: left 0.4s, top 0.4s, transform 0.3s;
}
.nav-item-Mobile:not(.centered).hide-others {
 opacity: 0 !important;
 pointer-events: none;
 z-index: 5;
}

/* ✅ CORRECTED: Mobile horizontal line - shows only when label is active */
.nav-real-line-Mobile {
 position: absolute;
 left: 3px;
 top: 50%;
 width: 35px;
 height: 3px;
 background: linear-gradient(90deg, #23a6d5, #8f00ff);
 transform: translateY(-50%);
 opacity: 0;
 transition: opacity 0.3s ease;
 z-index: 15;
 display: block;
}

/* ✅ Show line only when centered AND label is active (second tap) */
.nav-item-Mobile.centered .nav-label-box-Mobile.active ~ .nav-real-line-Mobile {
 opacity: 1 !important;
}

/* Hide line when not centered */
.nav-item-Mobile:not(.centered) .nav-real-line-Mobile {
 opacity: 0;
}

/* --- Label: initially hidden --- */
.nav-label-box-Mobile {
 position: absolute; left: 56px; top: -19px;
 min-width: 88px; max-width: 200px;
 height: 38px; line-height: 38px;
 background: #292947; color: #fff;
 border-radius: 6px; box-shadow: 0 6px 32px #0014;
 padding: 0 18px; font-size: 0.7em; white-space: nowrap;
 opacity: 0; pointer-events: none;
 transform: scaleX(0.78);
 transition: opacity 0.17s 0.25s, transform 0.22s 0.25s cubic-bezier(.6,1.22,.44,.98);
 z-index: 3;
}

/* ✅ UNIFIED: ALL labels appear on the RIGHT side when centered */
.nav-item-Mobile.centered .nav-label-box-Mobile {
 left: 56px;
 top: -19px;
}

/* ✅ UNIFIED: Reverse tooltips also use right-side positioning */
.nav-item-Mobile.centered .nav-tooltip-Mobile.reverse-tooltip .nav-label-box-Mobile {
 left: 56px; /* Same as normal tooltips - RIGHT side */
 top: -19px;
}

/* ✅ UNIFIED: Reverse label box uses same positioning as normal */
.nav-label-box-Mobile-reverse {
 position: absolute;
 left: 56px; /* RIGHT side positioning - same as normal */
 top: -19px;
 min-width: 88px;
 max-width: 200px;
 height: 38px;
 line-height: 38px;
 background: #292947;
 color: #fff;
 border-radius: 6px;
 box-shadow: 0 6px 32px #0014;
 padding: 0 18px;
 font-size: 0.7em;
 white-space: nowrap;
 opacity: 1;
 pointer-events: auto;
 transform: scaleX(1);
 z-index: 20;
}

/* --- Label reveal on second tap --- */
/* --- Label reveal on second tap --- */
.nav-label-box-Mobile.active {
 opacity: 1 !important;
 pointer-events: auto;
 transform: scaleX(1);
 z-index: 20;
 text-decoration: underline #23a6d5;
 transition: opacity 0.25s, transform 0.22s;
 /* ✅ Your positioning changes */
 left: 38px !important;
 top: 10px !important;
 /* ✅ ADD: Auto-width sizing when visible */
 width: auto !important;
 min-width: 60px !important;
 max-width: 180px !important;
 /* ✅ ADD: Content-responsive padding when active */
 padding: 0 1px !important;
 /* ✅ ADD: Perfect content centering when visible */
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 text-align: center !important;
}

/* ✅ Special CSS for Mobile Clash Tools with Button */

/* Clash Tools button label - unified positioning */
.nav-label-box-Mobile-reverse.clash-tools-label {
 position: absolute;
 left: 56px; /* Unified right-side positioning */
 top: -19px; /* Match other labels */
 min-width: 88px;
 max-width: 200px;
 height: 38px;
 line-height: 38px;
 background: #292947;
 color: #fff;
 border: none; /* Remove button default styling */
 border-radius: 6px;
 box-shadow: 0 6px 32px #0014;
 padding: 0 18px;
 font-family: 'Orbitron', Arial, sans-serif;
 font-size: 0.7em;
 white-space: nowrap;
 cursor: pointer;
 opacity: 0; /* Hidden by default like other labels */
 pointer-events: none; /* Non-clickable initially */
 transform: scaleX(0.78);
 transition: opacity 0.17s 0.25s, transform 0.22s 0.25s cubic-bezier(.6,1.22,.44,.98);
 z-index: 20;
 /* Button-specific styling */
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 outline: none;
 -webkit-tap-highlight-color: transparent;
 touch-action: manipulation;
}

/* When Clash Tools nav item is centered, follow same pattern as other labels */
.nav-item-Mobile.centered .nav-label-box-Mobile-reverse.clash-tools-label {
 left: 56px; /* Same as other unified labels */
 top: -19px;
}

/* Show Clash Tools button when active (like other labels) */
.nav-item-Mobile.centered .nav-label-box-Mobile-reverse.clash-tools-label.active {
 opacity: 1 !important;
 pointer-events: auto;
 transform: scaleX(1);
 text-decoration: underline #23a6d5;
 transition: opacity 0.25s, transform 0.22s;
}
/* Clash Tools button when active */
.nav-label-box-Mobile-reverse.clash-tools-label.active {
 opacity: 1 !important;
 pointer-events: auto;
 transform: scaleX(1);
 z-index: 20;
 text-decoration: underline #23a6d5;
 transition: opacity 0.25s, transform 0.22s;
 /* ✅ Your positioning changes */
 left: 38px !important;
 top: 13px !important;
 /* ✅ ADD: Auto-width sizing when visible */
 width: auto !important;
 min-width: 60px !important;
 max-width: 180px !important;
 /* ✅ ADD: Content-responsive padding when active */
 padding: 0 1px !important;
 /* ✅ ADD: Perfect content centering when visible */
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 text-align: center !important;
}

/* Clash Tools button hover/focus states */
.nav-label-box-Mobile-reverse.clash-tools-label:hover,
.nav-label-box-Mobile-reverse.clash-tools-label:focus {
 background-color: #3a3a67;
 outline: none;
}

/* Mobile Clash Tools dropdown positioning */
.nav-item-Mobile .nav-dropdown-box-Mobile {
 position: absolute;
 top: -90px; /* Slightly closer to button */
 left: -155px; /* Better alignment for smaller size */
 width: 110px; /* Reduced from 280px for mobile */
 background: #292947;
 border-radius: 8px; /* Smaller radius for compact look */
 box-shadow: 0 6px 24px rgba(0,0,0,0.3); /* Reduced shadow */
 z-index: 25;
 opacity: 0;
 transform: scale(0.8);
 transition: opacity 0.3s, transform 0.3s;
 max-height: 50vh; /* Increased from 10vh to show more items */
 overflow-y: auto;
 display: none;
 /* ✅ ADD: Mobile optimization */
 font-size: 0.85em; /* Smaller text for mobile */
}

/* Show dropdown when active */
.nav-item-Mobile .nav-dropdown-box-Mobile.active {
 opacity: 1;
 transform: scale(1);
 display: block;
}

/* Ensure the line shows for Clash Tools too when button is active */
.nav-item-Mobile.centered .nav-label-box-Mobile-reverse.clash-tools-label.active ~ .nav-real-line-Mobile {
 opacity: 1 !important;
}

.nav-dropdown-box-Mobile {
 position: absolute;
 top: 45px;
 left: -200px;
 width: 280px;
 background: #292947;
 border-radius: 12px;
 box-shadow: 0 8px 32px rgba(0,0,0,0.3);
 z-index: 25;
 opacity: 0;
 transform: scale(0.8);
 transition: opacity 0.3s, transform 0.3s;
 max-height: 70vh;
 overflow-y: auto;
}

.nav-dropdown-box-Mobile ul {
 list-style: none;
 padding: 0px 0;
 margin: 0;
}

.nav-dropdown-box-Mobile li {
 margin: 0;
}

.nav-dropdown-box-Mobile a {
 display: block;
 padding: 6px 10px; /* Reduced from 12px 20px */
 color: #fff;
 text-decoration: none;
 font-size: 0.7em; /* Smaller font for mobile */
 transition: background-color 0.2s;
 border-radius: 4px;
 margin: 1px 6px; /* Reduced margins */
 line-height: 1.3; /* Better line spacing */
}

.nav-dropdown-box-Mobile a:hover,
.nav-dropdown-box-Mobile a:focus {
 background-color: #3a3a67;
}

.nav-dropdown-box-Mobile button {
 width: 100%;
 padding: 12px;
 background: #ff4757;
 color: white;
 border: none;
 border-radius: 0 0 12px 12px;
 cursor: pointer;
 font-size: 0.9em;
}
/* Ultra-fast hiding class */
.clash-tools-label.hide-instant {
  opacity: 0 !important;
  transform: scaleX(0) !important;
  transition: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* ===== MOBILE ABOUT PANEL ===== */

/* ===== MOBILE ABOUT PANEL ===== */

/* Mobile About Panel Slot - FIXED: Show by default on mobile */
#about-mobile-slot {
  position: relative;
  width: 100%;
  height: 100px;
  margin-top: 60px;
  margin-bottom: 10px;
  overflow: visible;
  display: none; /* Hidden by default, but shown via media query */
}

/* Mobile About Panel Container */
#about-mobile.about-mobile-slide {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -100vw; /* Start fully offscreen right */
  width: 100%;
  max-width: 95vw;
  height: 100%;
  background: #292947;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  transition:
    right 0.7s cubic-bezier(.52,1.3,.44,1.02),
    opacity 0.4s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 16px;
  font-size: 0.8em;
  line-height: 1.4;
}

/* ✅ FIXED: Active state with proper animation */
#about-mobile.about-mobile-slide.slide-in {
  right: 0 !important; /* Force override */
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 50;
}

/* Mobile About Panel Text Styling */
#about-mobile-slot p {
  text-align: justify;
  margin: 0 0 12px 0;
  font-size: 0.85em;
  line-height: 1.5;
  padding: 0 4px; /* Add small padding */
}

/* Mobile About Panel Highlight Border */
#about-mobile.about-panel-active {
  border: 2px solid #23a6d5;
  box-shadow: 
    0 0 0 1px #23a6d5,
    0 0 16px 3px #8f00ff99,
    0 8px 32px rgba(0,0,0,0.3);
  animation: about-panel-blink-mobile 1.3s cubic-bezier(.7,0,.3,1) infinite;
}

/* Mobile About Panel Blink Animation */
@keyframes about-panel-blink-mobile {
  0%, 100% { 
    border-color: #23a6d5;
    box-shadow: 
      0 0 0 1px #23a6d5,
      0 0 16px 3px #8f00ff77,
      0 8px 32px rgba(0,0,0,0.3);
  }
  50% { 
    border-color: #8f00ff;
    box-shadow: 
      0 0 0 2px #8f00ff,
      0 0 32px 6px #23a6d5bb,
      0 8px 32px rgba(0,0,0,0.3);
  }
}

/* Mobile About Panel Scrollbar Styling */
#about-mobile.about-mobile-slide::-webkit-scrollbar {
  width: 4px;
}

#about-mobile.about-mobile-slide::-webkit-scrollbar-track {
  background: transparent;
}

#about-mobile.about-mobile-slide::-webkit-scrollbar-thumb {
  background: #23a6d5;
  border-radius: 2px;
}

/* ✅ FIXED: Consolidated Media Queries */
@media (max-width: 768px) {
  /* Show mobile elements */
  .main-header-Mobile, 
  .cube-group.mobile-nav,
  #about-mobile-slot {
    display: block !important;
  }
  
  /* Hide desktop elements */
  .main-header-Desktop, 
  .cube-group.desktop-nav, 
  #about-desktop-slot,
  #about-desktop {
    display: none !important;
  }
}

@media (min-width: 769px) {
  /* Hide mobile elements on desktop */
  #about-mobile-slot,
  #about-mobile {
    display: none !important;
  }
  
  /* Show desktop elements */
  #about-desktop-slot,
  #about-desktop {
    display: block !important;
  }
}

@media (max-width: 380px) {
  .circle-nav-Mobile { width: 92px; height: 92px; }
  .cube-group.mobile-nav { width: 112px; height: 112px; }
}

#cube-mobile-nav-overlay { display: none; }