body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Empêche le défilement */
}

#canvas {
  display: block; /* Supprime l'espace en dessous du canvas */
  position: fixed; /* Fixe le canvas par rapport à la fenêtre */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#space-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permet de cliquer sur le canvas derrière si besoin */
    overflow: hidden;
    z-index: 10; /* Au-dessus du canvas */
}
.space-button {
    position: absolute;
    top: 0;       /* IMPORTANT : On part de 0 */
    left: 0;      /* IMPORTANT : On part de 0 */
    /* On enlève le transform: translate(-50%, -50%) pour simplifier les calculs */
    
    pointer-events: auto;
    padding: 15px 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    border-radius: 30px;
    backdrop-filter: blur(5px);
    user-select: none;
    cursor: grab;
    transition: background 0.3s; /* On enlève la transition transform pour éviter les saccades */
    will-change: transform; /* Optimisation pour l'animation */
}

.space-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.space-button:active {
    cursor: grabbing;
}
/*pour le fond */


body{
    background-color: #000;
    overflow: hidden;
}

.main {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -42vw -4vh 0px 0px #fff,25vw -41vh 0px 0px #fff,-20vw 49vh 0px 1px #fff,5vw 40vh 1px 1px #fff,29vw 19vh 1px 0px #fff,-44vw -13vh 0px 0px #fff,46vw 41vh 0px 1px #fff,-3vw -45vh 0px 1px #fff,47vw 35vh 1px 0px #fff,12vw -8vh 1px 0px #fff,-34vw 48vh 1px 1px #fff,32vw 26vh 1px 1px #fff,32vw -41vh 1px 1px #fff,0vw 37vh 1px 1px #fff,34vw -26vh 1px 0px #fff,-14vw -49vh 1px 0px #fff,-12vw 45vh 0px 1px #fff,-44vw -33vh 0px 1px #fff,-13vw 41vh 0px 0px #fff,-36vw -11vh 0px 1px #fff,-23vw -24vh 1px 0px #fff,-38vw -27vh 0px 1px #fff,16vw -19vh 0px 0px #fff,28vw 33vh 1px 0px #fff,-49vw -4vh 0px 0px #fff,16vw 32vh 0px 1px #fff,36vw -18vh 1px 0px #fff,-25vw -30vh 1px 0px #fff,-23vw 24vh 0px 1px #fff,-2vw -35vh 1px 1px #fff,-25vw 9vh 0px 0px #fff,-15vw -34vh 0px 0px #fff,-8vw -19vh 1px 0px #fff,-20vw -20vh 1px 1px #fff,42vw 50vh 0px 1px #fff,-32vw 10vh 1px 0px #fff,-23vw -17vh 0px 0px #fff,44vw 15vh 1px 0px #fff,-40vw 33vh 1px 1px #fff,-43vw 8vh 0px 0px #fff,-48vw -15vh 1px 1px #fff,-24vw 17vh 0px 0px #fff,-31vw 50vh 1px 0px #fff,36vw -38vh 0px 1px #fff,-7vw 48vh 0px 0px #fff,15vw -32vh 0px 0px #fff,29vw -41vh 0px 0px #fff,2vw 37vh 1px 0px #fff,7vw -40vh 1px 1px #fff,15vw 18vh 0px 0px #fff,25vw -13vh 1px 1px #fff,-46vw -12vh 1px 1px #fff,-18vw 22vh 0px 0px #fff,23vw -9vh 1px 0px #fff,50vw 12vh 0px 1px #fff,45vw 2vh 0px 0px #fff,14vw -48vh 1px 0px #fff,23vw 43vh 0px 1px #fff,-40vw 16vh 1px 1px #fff,20vw -31vh 0px 1px #fff,-17vw 44vh 1px 1px #fff,18vw -45vh 0px 0px #fff,33vw -6vh 0px 0px #fff,0vw 7vh 0px 1px #fff,-10vw -18vh 0px 1px #fff,-19vw 5vh 1px 0px #fff,1vw 42vh 0px 0px #fff,22vw 48vh 0px 1px #fff,39vw -8vh 1px 1px #fff,-6vw -42vh 1px 0px #fff,-47vw 34vh 0px 0px #fff,-46vw 19vh 0px 1px #fff,-12vw -32vh 0px 0px #fff,-45vw -38vh 0px 1px #fff,-28vw 18vh 1px 0px #fff,-38vw -46vh 1px 1px #fff,49vw -6vh 1px 1px #fff,-28vw 18vh 1px 1px #fff,10vw -24vh 0px 1px #fff,-5vw -11vh 1px 1px #fff,33vw -8vh 1px 0px #fff,-16vw 17vh 0px 0px #fff,18vw 27vh 0px 1px #fff,-8vw -10vh 1px 1px #fff;
  
  /* stars were too big with the layers above but left the code in case no one cares  -- as in, if noone's just that  one other loner who actually cares    */
  
  box-shadow: 24vw 9vh 1px 0px #fff,12vw -24vh 0px 1px #fff,-45vw -22vh 0px 0px #fff,-37vw -40vh 0px 1px #fff,29vw 19vh 0px 1px #fff,4vw -8vh 0px 1px #fff,-5vw 21vh 1px 1px #fff,-27vw 26vh 1px 1px #fff,-47vw -3vh 1px 1px #fff,-28vw -30vh 0px 1px #fff,-43vw -27vh 0px 1px #fff,4vw 22vh 1px 1px #fff,36vw 23vh 0px 0px #fff,-21vw 24vh 1px 1px #fff,-16vw 2vh 1px 0px #fff,-16vw -6vh 0px 0px #fff,5vw 26vh 0px 0px #fff,-34vw 41vh 0px 0px #fff,1vw 42vh 1px 1px #fff,11vw -13vh 1px 1px #fff,48vw -8vh 1px 0px #fff,22vw -15vh 0px 0px #fff,45vw 49vh 0px 0px #fff,43vw -27vh 1px 1px #fff,20vw -2vh 0px 0px #fff,8vw 22vh 0px 1px #fff,39vw 48vh 1px 1px #fff,-21vw -11vh 0px 1px #fff,-40vw 45vh 0px 1px #fff,11vw -30vh 1px 0px #fff,26vw 30vh 1px 0px #fff,45vw -29vh 0px 1px #fff,-2vw 18vh 0px 0px #fff,-29vw -45vh 1px 0px #fff,-7vw -27vh 1px 1px #fff,42vw 24vh 0px 0px #fff,45vw -48vh 1px 0px #fff,-36vw -18vh 0px 0px #fff,-44vw 13vh 0px 1px #fff,36vw 16vh 0px 1px #fff,40vw 24vh 0px 0px #fff,18vw 11vh 0px 0px #fff,-15vw -23vh 1px 0px #fff,-24vw 48vh 0px 1px #fff,27vw -45vh 1px 0px #fff,-2vw -24vh 0px 1px #fff,-15vw -28vh 0px 0px #fff,-43vw 13vh 1px 0px #fff,7vw 27vh 1px 0px #fff,47vw 5vh 0px 0px #fff,-45vw 15vh 1px 1px #fff,-5vw -28vh 0px 1px #fff,38vw 25vh 1px 1px #fff,-39vw -1vh 1px 0px #fff,5vw 0vh 1px 0px #fff,49vw 13vh 0px 0px #fff,48vw 10vh 0px 1px #fff,19vw -28vh 0px 0px #fff,4vw 7vh 0px 0px #fff,21vw 21vh 1px 1px #fff,-15vw -15vh 0px 1px #fff,-6vw -42vh 1px 0px #fff,-15vw 48vh 1px 1px #fff,-23vw 25vh 1px 1px #fff,-48vw 25vh 0px 1px #fff,-31vw -19vh 0px 1px #fff,4vw 37vh 1px 1px #fff,-43vw 28vh 0px 0px #fff,3vw -25vh 0px 1px #fff,-39vw 14vh 0px 1px #fff,-40vw 31vh 0px 1px #fff,35vw -36vh 1px 1px #fff,16vw 49vh 0px 0px #fff,6vw 39vh 0px 0px #fff,3vw -35vh 0px 1px #fff,-44vw -2vh 1px 0px #fff,-6vw 21vh 1px 0px #fff,48vw 9vh 1px 1px #fff,-43vw 30vh 1px 1px #fff,29vw -12vh 1px 1px #fff,-48vw 13vh 1px 0px #fff,-42vw 32vh 1px 1px #fff,34vw 15vh 1px 1px #fff,29vw -37vh 1px 1px #fff,28vw 2vh 0px 0px #fff;
  animation: zoom 16s alternate infinite; 
}

#static-ui {
    position: fixed; /* Reste fixe même si on scrollait */
    top: 20px;
    right: 20px;     /* Calé en haut à droite */
    z-index: 20;     /* 20 > 10, donc ça passe AU-DESSUS des boutons flottants */
    display: flex;   /* Pour les aligner côte à côte */
    gap: 15px;       /* Espace entre les boutons fixes */
}

.fixed-btn {
    /* On reprend le même style visuel que les boutons spatiaux */
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2); /* Un peu plus brillant pour se distinguer */
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    border-radius: 8px; /* Forme un peu différente (carré arrondi) pour différencier */
    backdrop-filter: blur(5px);
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
}

.fixed-btn:hover {
    background: white;
    color: black;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

/* Style du texte de description */
.btn-desc {
    display: block;
    position: absolute;
    top: 100%; /* Juste en dessous du bouton */
    left: 50%;
    transform: translateX(-50%); /* Centré */
    width: 150px; /* Largeur de la bulle */
    
    background: rgba(0, 0, 0, 0.8);
    color: #ddd;
    font-size: 12px;
    padding: 8px;
    border-radius: 6px;
    margin-top: 10px;
    opacity: 0; /* Caché par défaut */
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none; /* Le texte ne doit pas gêner le clic */
    z-index: 100;
}

/* Petite flèche au-dessus de la bulle (optionnel mais joli) */
.btn-desc::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}

/* Affiche la description UNIQUEMENT quand la classe .frozen est ajoutée par le JS */
.space-button.frozen .btn-desc {
    opacity: 1;
    visibility: visible;
    margin-top: 5px;
}

/* Le style du bouton actif (au premier plan) */
.space-button.frozen {
    z-index: 50; 
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
}

/* On garde un petit effet visuel immédiat au survol simple pour dire "je t'ai vu" */
.space-button:hover {
    border-color: rgba(255, 255, 255, 0.8);
}