html, body { 
  height: 100%; 
  margin: 0; 
  overflow: hidden; 
}

/* Contenedor de botones */
#controls {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
  pointer-events: auto;
}

/* Botón animado */
.button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.25);
  cursor: pointer;
  transition: 0.3s;
  overflow: hidden;
  position: relative;
}

.svgIcon {
  width: 14px;
  transition: opacity 0.3s, transform 0.3s;
}
.svgIcon path { fill: white; }

.button:hover {
  width: 140px;
  border-radius: 50px;
  background-color: rgb(181, 160, 255);
}

/* 🔥 Flecha desaparece al hacer hover */
.button:hover .svgIcon {
  opacity: 0;
  transform: translateY(-200%);
}

/* Texto dinámico */
.button::before {
  position: absolute;
  content: attr(data-text);
  color: white;
  font-size: 0px;
  opacity: 0;
  transition: opacity 0.3s, font-size 0.3s;
}
.button:hover::before {
  font-size: 13px;
  opacity: 1;
}

/* Pantalla de transición */
#transition {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 380ms ease;
  z-index: 999;
  pointer-events: none;
}

#hint {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: sans-serif;
  z-index: 10;
}