.planet {
  position: absolute;
  width: var(--planet-size);
  height: var(--planet-size);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

/* Container per le texture */
.planet-textures {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

/* Layer texture base (superficie del pianeta) */
.planet-texture-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: var(--texture-zoom, 200%);
  background-position: var(--texture-offset-x, 50%) var(--texture-offset-y, 50%);
  background-repeat: repeat;
  opacity: 0.8;
}

/* Layer texture overlay (nuvole/atmosfera) */
.planet-texture-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: calc(var(--texture-zoom, 200%) * 1.2); /* Zoom diverso per profondità */
  background-position: calc(var(--texture-offset-x, 50%) - 10%) calc(var(--texture-offset-y, 50%) + 5%);
  background-repeat: repeat;
  opacity: 0.6;
  animation: shiftTexture 20s linear infinite;
}

/* Overlay colorato (tinge la texture con il colore del pianeta) */
.planet-color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: multiply; /* Colora la texture mantenendo i dettagli */
  opacity: 0.5;
  pointer-events: none;
}

/* Shading 3D (ombra per dare profondità) */
.planet-shading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

/* Animazione rotazione texture */
@keyframes shiftTexture {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 100% 100%;
  }
}

/* Overlay colorato (applica il colore del pianeta) */
.planet-color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: color;
  pointer-events: none;
}

.planet:hover {
  z-index: 100;
  filter: brightness(1.2);
}

/* Stati di animazione */
.planet.entering {
  animation: planetEnter 0.5s ease forwards;
}

@keyframes planetEnter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ========================================
   TOOLTIP ANIMATO (LINEA + RIQUADRO)
   ======================================== */

.planet-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(-45deg);
  pointer-events: none;
  transform-origin: left center;
  z-index: -1;
}

.planet-tooltip-content {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Linea che cresce verso l'alto-destra */
.planet-tooltip-line {
  width: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 4px var(--planet-color);
  transform-origin: left center;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.planet:hover .planet-tooltip-line {
  width: 70px;
}

/* Riquadro con nome del pianeta */
.planet-tooltip-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg) scaleX(var(--label-flip));
  opacity: 0;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  color: var(--color-white);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: 
    opacity cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
    transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;

  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(100, 149, 237, 0.2);
}

.planet:hover .planet-tooltip-box {
  opacity: 1;
  transform: translate(5px, -50%) rotate(45deg) scaleX(var(--label-flip));
}