/* ============================================================
   SHIP.CSS — Nave espacial (acceso a "Mi configuración") y
   estrellas fugaces ocasionales. Ver js/ship.js.
   ============================================================ */

#ship-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 440px;
  z-index: 5; /* sobre el fondo, bajo el contenido y GLAC */
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

#ship-canvas {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  filter: drop-shadow(0 0 14px rgba(123, 47, 255, 0.4));
}

#ship-hitbox {
  position: absolute;
  inset: -14px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}

@media (max-width: 768px) {
  #ship-container {
    width: 300px;
  }
}

/* Estrella fugaz (creada dinámicamente por ship.js) */
.shooting-star {
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  background: #E8ECF1;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 8px 2px rgba(232, 236, 241, 0.85);
}

.shooting-star::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 236, 241, 0.8));
  transform: translateY(-50%);
}