body { margin: 0; font-family: system-ui, sans-serif; }
a-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  background: rgba(15, 10, 26, 0.88); color: #e8e0ff;
  padding: 0.5rem 1rem; font-size: 0.85rem;
  display: flex; gap: 0.75rem; align-items: center;
  flex-wrap: wrap;
}
#hud a { color: #a78bfa; }
#hud-status { flex: 1; min-width: 120px; }
#hud button,
#hud .vr-hud-btn {
  background: #7c3aed; color: #fff; border: none;
  padding: 0.35rem 0.75rem; border-radius: 8px; cursor: pointer;
  font-size: inherit;
}
#hud .vr-hud-btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
#mirror-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
  padding: 0.65rem 1rem;
  background: rgba(0, 188, 212, 0.92);
  color: #0a1628;
  font-size: 0.85rem;
  text-align: center;
  display: none;
}
body.mode-mirror #mirror-banner { display: block; }

#policy-banner {
  position: fixed;
  bottom: 3rem;
  left: 0;
  right: 0;
  z-index: 12;
  padding: 0.5rem 1rem;
  background: rgba(88, 28, 135, 0.92);
  color: #f5e6ff;
  font-size: 0.8rem;
  text-align: center;
}
#policy-banner[hidden] { display: none; }

body.s2-plaza-awaiting-avatar a-scene {
  pointer-events: none;
}

@media (max-width: 640px) {
  #hud {
    padding: 0.45rem 0.6rem;
    gap: 0.45rem;
    font-size: 0.78rem;
  }
  #hud #hud-status {
    flex: 1 1 100%;
    order: -1;
  }
}