/* ════════════════════════════════════════════
   IA Astronaut VR — lobby.css
════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body {
  width:100%; height:100%; overflow:hidden; background:#000;
  font-family:'Courier New',Courier,monospace;
}

#lobbyCanvas { display:block; width:100%; height:100%; touch-action:none; }

/* ── HUD ─────────────────────────────────── */
#lobbyHUD { position:fixed; inset:0; pointer-events:none; z-index:10; }

#lobbyTitle {
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  text-align:center; pointer-events:none;
}
#lobbyTitle .eyebrow {
  font-size:10px; letter-spacing:5px; color:rgba(0,220,255,0.55);
  text-transform:uppercase; margin-bottom:5px;
}
#lobbyTitle .main-title {
  font-size:22px; font-weight:700; color:#fff;
  letter-spacing:4px; text-transform:uppercase;
}
#lobbyTitle .main-title span { color:#00e5ff; }
#lobbyTitle .subtitle {
  font-size:11px; color:rgba(255,255,255,0.25);
  margin-top:4px; letter-spacing:1px;
}

/* Hover del planeta */
#planetHoverLabel {
  position:absolute; bottom:140px; left:50%; transform:translateX(-50%);
  text-align:center; opacity:0; transition:opacity .2s; pointer-events:none;
}
#planetHoverLabel.visible { opacity:1; }
#planetHoverLabel .p-name {
  font-size:18px; font-weight:700; color:#fff;
  letter-spacing:3px; text-transform:uppercase;
}
#planetHoverLabel .p-desc { font-size:11px; color:rgba(0,230,255,0.7); margin-top:3px; }

/* Hint */
#lobbyHint {
  position:absolute; bottom:96px; left:50%; transform:translateX(-50%);
  font-size:10px; color:rgba(255,255,255,0.18);
  letter-spacing:2px; text-transform:uppercase;
  pointer-events:none; white-space:nowrap;
  z-index:20;
}

/* ── Panel info planeta ──────────────────── */
#planetPanel {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(10px);
  display:flex; align-items:center; gap:20px;
  background:rgba(0,8,18,0.88);
  border:1px solid rgba(0,220,255,0.35);
  border-radius:6px; padding:12px 24px;
  backdrop-filter:blur(14px);
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
  z-index:30;
}
#planetPanel.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
#ppName { font-size:16px; font-weight:700; color:#fff; letter-spacing:2px; text-transform:uppercase; }
#ppDesc { font-size:11px; color:rgba(0,220,255,0.7); margin-top:2px; }
#ppLaunch {
  background:rgba(0,220,255,0.1); border:1px solid rgba(0,220,255,0.5);
  color:#00e5ff; font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  padding:8px 20px; border-radius:4px; cursor:pointer;
  font-family:inherit; transition:background .15s, box-shadow .15s;
}
#ppLaunch:hover { background:rgba(0,220,255,0.22); box-shadow:0 0 16px rgba(0,220,255,0.35); }

/* ── Overlay (solo para warp) ────────────── */
#launchOverlay {
  position:fixed; inset:0; z-index:95;
  pointer-events:none;
  /* El warpCanvas va encima con z-index:99 */
}
#launchOverlay.active { pointer-events:auto; }

/* El VRButton de Three.js se reposiciona arriba a la izquierda para que NUNCA
   quede tapado por #planetPanel (tarjeta "Iniciar Misión", centro-abajo) ni
   por #lobbyHint. Antes se le bajaba el z-index a 5 para "esconderlo" — eso
   lo dejaba invisible y sin poder tocarlo también dentro del propio Quest. */
#VRButton {
  top: 18px !important;
  bottom: auto !important;
  left: 14px !important;
  z-index: 40 !important;
}
