/**
 * PERCEPY Spatial - UI Overlay Styles
 * Minimal, dark, calm - matches PERCEPY brand
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0a;
  overflow: hidden;
}

#ui-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 1000;
}

#logo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  color: #ffffff;
  opacity: 0.7;
}

#instructions {
  font-size: 12px;
  color: #666666;
  letter-spacing: 1px;
}

.vr-only {
  display: none;
}

/* Hide desktop instructions in VR mode */
.a-enter-vr-button ~ #ui-overlay .desktop-only {
  display: none;
}

.a-enter-vr-button ~ #ui-overlay .vr-only {
  display: inline;
}

/* VR mode button styling */
.a-enter-vr-button {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.a-enter-vr-button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Loading screen */
.a-loader-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 4px !important;
  color: #ffffff !important;
}

/* Hide A-Frame logo */
.a-loader-logo {
  display: none !important;
}

/* Audio enable button */
#audio-btn {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
}

#audio-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}