* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #080810; overflow: hidden; font-family: 'Courier New', monospace; }

#hud {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 16px;
  background: rgba(8,8,16,0.85);
  font-size: 12px; color: #555;
  z-index: 10; pointer-events: none;
}
#hud .title        { color: #a0c4ff; }
#hud #device-name  { color: #6fcf97; }
#hud #device-name.none { color: #333; }

#sound-toggle {
  pointer-events: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  color: #555;
  transition: color 0.15s;
  margin-left: auto;
}
#sound-toggle:hover { color: #aaa; }
#sound-toggle.on    { color: #6fcf97; }

#start-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 30;
}
#start-overlay button {
  background: none;
  border: 1px solid #444;
  color: #a0c4ff;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  padding: 12px 28px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: border-color 0.15s, color 0.15s;
}
#start-overlay button:hover {
  border-color: #a0c4ff;
  color: #fff;
}

#back {
  position: fixed; top: 8px; right: 48px;
  font-size: 11px; color: #333; text-decoration: none; z-index: 20;
}
#back:hover { color: #888; }