html, body { margin: 0; padding: 0; height: 100%; background: #000; overflow: hidden; }
canvas { display: block; }

:root { --overlay-color: #e7e9ee; }

.overlay-nav {
  position: fixed;
  left: 20px;
  bottom: 18px;
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font: 14px/1 monospace;
  letter-spacing: 0.02em;
  color: var(--overlay-color);
  pointer-events: none;              /* el canvas recibe los clicks salvo en los links */
  user-select: none;
  transition: color 0.4s ease;
}
.overlay-nav a {
  color: var(--overlay-color);
  text-decoration: none;
  pointer-events: auto;              /* los links sí son clicables */
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.4s ease;
}
.overlay-nav a:hover { opacity: 1; text-decoration: underline; }
.overlay-nav span { opacity: 0.5; }

/* Hint de interacción, arriba-centro. En desktop aparece solo al pasar el mouse
   por encima de los anillos (lo controla sketch.js con la clase .visible). */
.ring-hint {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 10;
  text-align: center;
  font: 13px/1 monospace;
  letter-spacing: 0.06em;
  color: var(--overlay-color);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease, color 0.4s ease;
}
.ring-hint.visible { opacity: 0.75; }

/* En dispositivos táctiles (tablet/móvil, sin hover): el hint siempre visible. */
@media (hover: none) {
  .ring-hint { opacity: 0.75; }
}

/* En mobile: nav centrada horizontalmente (en desktop queda a la izquierda). */
@media (max-width: 600px) {
  .overlay-nav {
    left: 0;
    right: 0;
    justify-content: center;
    padding: 0 16px;
  }
}