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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05050a; 
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* audio source prompt */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  pointer-events: none; /* let OrbitControls receive mouse events through it */
  transition: opacity 0.6s ease;
}

#source-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  pointer-events: all;
}

#overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* source buttons */
.source-btn {
  pointer-events: all;
  background: rgba(5, 5, 18, 0.7);
  border: 1px solid black;
  border-radius: 25px;
  color: rgba(255, 255, 255, 0.9);
  font-family:Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  padding: 1.1rem 2.8rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.source-btn:hover {
  border-color: rgba(60, 220, 207, 0.85);
  color: black;
  background-color: white;
  box-shadow:
    0 0 24px rgba(110, 60, 220, 0.35),
    inset 0 0 18px rgba(110, 60, 220, 0.08);
}

.source-btn:active {
  transform: scale(0.97);
}

#hint {
  color: rgba(248, 248, 248, 0.993);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8rem;
  letter-spacing: 0.15em;
  pointer-events: none;
}

/* compact controls */
#mode-btn,
#record-btn,
#audio-source-btn {
  position: fixed;
  background: rgba(5, 5, 18, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, color 0.25s ease;
  z-index: 10;
}

#mode-btn {
  bottom: 1.4rem;
  right: 1.6rem;
}

#record-btn {
  bottom: 1.4rem;
  left: 1.6rem;
}

#audio-source-btn {
  top: 1.4rem;
  left: 1.6rem;
  display: none;
}

#mode-btn:hover,
#record-btn:hover,
#audio-source-btn:hover {
  border-color: rgba(60, 220, 207, 0.7);
  color: rgba(255, 255, 255, 0.9);
}

#mode-btn:active,
#record-btn:active,
#audio-source-btn:active {
  transform: scale(0.97);
}

#record-btn.recording {
  border-color: rgba(255, 72, 96, 0.85);
  color: rgba(255, 224, 228, 0.95);
  box-shadow: 0 0 18px rgba(255, 40, 72, 0.24);
}

#mode-hint {
  position: fixed;
  right: 1.7rem;
  bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  pointer-events: none;
  z-index: 10;
}

#record-status {
  position: fixed;
  left: 1.7rem;
  bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 10;
}

@media (max-width: 520px) {
  #source-actions {
    flex-direction: column;
  }

  .source-btn {
    width: min(82vw, 19rem);
    padding-inline: 1.4rem;
  }

  #record-status {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}