/* Definiamo i raggi base delle orbite (devono corrispondere al JSON) */
:root {
  --orbit-1-base: 400px;
  --orbit-2-base: 600px;
  --orbit-3-base: 800px;
  --orbit-scale: 1; /* Desktop: nessuna scala */
}

/* Applichiamo la scala alle orbite */
#orbit-1 {
  width: calc(var(--orbit-1-base) * var(--orbit-scale)) !important;
  height: calc(var(--orbit-1-base) * var(--orbit-scale)) !important;
}

#orbit-2 {
  width: calc(var(--orbit-2-base) * var(--orbit-scale)) !important;
  height: calc(var(--orbit-2-base) * var(--orbit-scale)) !important;
}

#orbit-3 {
  width: calc(var(--orbit-3-base) * var(--orbit-scale)) !important;
  height: calc(var(--orbit-3-base) * var(--orbit-scale)) !important;
}

/* ====== RESPONSIVE ====== */

/* Tablet e dispositivi medi */
@media (max-width: 768px) {
  :root {
    --planet-size: 35px;
    --sun-size: 60px;
    --perspective: 1000px;
    --orbit-scale: 0.45;
  }
  
  /* Permetti scroll orizzontale e verticale */
  html, body {
    overflow: auto !important;
    /* Larghezza/altezza minima basata sull'orbita più esterna */
    min-width: calc(var(--orbit-3-base) * var(--orbit-scale) * 2.2);
    min-height: calc(var(--orbit-3-base) * var(--orbit-scale) * 2.2);
  }
  
  body {
    position: relative;
  }
  
  /* IMPORTANTE: Cambia da fixed ad absolute per permettere scroll */
  .solar-system {
    position: absolute !important;
    width: 100vmin;
    height: 100vmin;
    left: 50%;
    top: 50%;
  }
  
  .planet::after {
    font-size: 10px;
    bottom: -25px;
  }
  
  .info {
    font-size: 12px;
    bottom: 10px;
    padding: 0 20px;
  }
}

/* Smartphone piccoli */
@media (max-width: 480px) {
  :root {
    --planet-size: 30px;
    --sun-size: 50px;
    --perspective: 900px;
    --orbit-scale: 0.35;
  }
  
  html, body {
    min-width: calc(var(--orbit-3-base) * var(--orbit-scale) * 2.2);
    min-height: calc(var(--orbit-3-base) * var(--orbit-scale) * 2.2);
  }
  
  .solar-system {
    width: 100vmin;
    height: 100vmin;
  }
  
  .planet::after {
    font-size: 9px;
    bottom: -20px;
  }
}

/* Smartphone molto piccoli (< 360px) */
@media (max-width: 360px) {
  :root {
    --orbit-scale: 0.28;
  }
  
  html, body {
    min-width: calc(var(--orbit-3-base) * var(--orbit-scale) * 2.2);
    min-height: calc(var(--orbit-3-base) * var(--orbit-scale) * 2.2);
  }
}

/* Landscape mode su mobile */
@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --orbit-scale: 0.50;
  }
  
  html, body {
    min-width: calc(var(--orbit-3-base) * var(--orbit-scale) * 2.2);
    min-height: calc(var(--orbit-3-base) * var(--orbit-scale) * 2.2);
  }
}